/* ============================================================
 * compat-grid.css   (v20260526-float-v2)
 *
 * Minimal Bootstrap-3-style grid (12-col, .container/.row/.col-*)
 * scoped to the xcillion-compat / aperture-compat layouts so they
 * render correctly without depending on Bootstrap being loaded by
 * the host page.
 *
 * IMPORTANT: uses *FLOAT* based cols (not flex). Bootstrap 3's grid
 * is float-based, and many modules (incl. Xcillion's sample Home
 * ContentPane HTML) rely on `pull-right` floats interacting with
 * col-md-* floats. Flex cols break that flow because flex items
 * don't wrap around floats.
 * ============================================================ */

.acme-xcillion-compat .container,
.acme-aperture-compat .container {
  width: 100%;
  max-width: 1170px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

/* Rows are float containers — use clearfix so they grow to enclose floats. */
.acme-xcillion-compat .row,
.acme-aperture-compat .row,
.acme-xcillion-compat .row.dnnpane,
.acme-aperture-compat .row.dnnpane {
  margin-right: -15px;
  margin-left: -15px;
}
.acme-xcillion-compat .row::before, .acme-xcillion-compat .row::after,
.acme-aperture-compat .row::before, .acme-aperture-compat .row::after,
.acme-xcillion-compat .row.dnnpane::before, .acme-xcillion-compat .row.dnnpane::after,
.acme-aperture-compat .row.dnnpane::before, .acme-aperture-compat .row.dnnpane::after {
  content: " ";
  display: table;
}
.acme-xcillion-compat .row::after,
.acme-aperture-compat .row::after,
.acme-xcillion-compat .row.dnnpane::after,
.acme-aperture-compat .row.dnnpane::after {
  clear: both;
}

/* Default col box-model — applies to all col-xs/sm/md/lg-*. */
.acme-xcillion-compat [class^="col-xs-"], .acme-xcillion-compat [class*=" col-xs-"],
.acme-xcillion-compat [class^="col-sm-"], .acme-xcillion-compat [class*=" col-sm-"],
.acme-xcillion-compat [class^="col-md-"], .acme-xcillion-compat [class*=" col-md-"],
.acme-xcillion-compat [class^="col-lg-"], .acme-xcillion-compat [class*=" col-lg-"],
.acme-aperture-compat [class^="col-xs-"], .acme-aperture-compat [class*=" col-xs-"],
.acme-aperture-compat [class^="col-sm-"], .acme-aperture-compat [class*=" col-sm-"],
.acme-aperture-compat [class^="col-md-"], .acme-aperture-compat [class*=" col-md-"] {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

/* xs cols ALWAYS float (matches Bootstrap 3). */
.acme-xcillion-compat .col-xs-1,  .acme-aperture-compat .col-xs-1,
.acme-xcillion-compat .col-xs-2,  .acme-aperture-compat .col-xs-2,
.acme-xcillion-compat .col-xs-3,  .acme-aperture-compat .col-xs-3,
.acme-xcillion-compat .col-xs-4,  .acme-aperture-compat .col-xs-4,
.acme-xcillion-compat .col-xs-5,  .acme-aperture-compat .col-xs-5,
.acme-xcillion-compat .col-xs-6,  .acme-aperture-compat .col-xs-6,
.acme-xcillion-compat .col-xs-7,  .acme-aperture-compat .col-xs-7,
.acme-xcillion-compat .col-xs-8,  .acme-aperture-compat .col-xs-8,
.acme-xcillion-compat .col-xs-9,  .acme-aperture-compat .col-xs-9,
.acme-xcillion-compat .col-xs-10, .acme-aperture-compat .col-xs-10,
.acme-xcillion-compat .col-xs-11, .acme-aperture-compat .col-xs-11,
.acme-xcillion-compat .col-xs-12, .acme-aperture-compat .col-xs-12 { float: left; }
.acme-xcillion-compat .col-xs-1  { width: 8.3333%;  }
.acme-xcillion-compat .col-xs-2  { width: 16.6666%; }
.acme-xcillion-compat .col-xs-3  { width: 25%;      }
.acme-xcillion-compat .col-xs-4  { width: 33.3333%; }
.acme-xcillion-compat .col-xs-5  { width: 41.6666%; }
.acme-xcillion-compat .col-xs-6  { width: 50%;      }
.acme-xcillion-compat .col-xs-7  { width: 58.3333%; }
.acme-xcillion-compat .col-xs-8  { width: 66.6666%; }
.acme-xcillion-compat .col-xs-9  { width: 75%;      }
.acme-xcillion-compat .col-xs-10 { width: 83.3333%; }
.acme-xcillion-compat .col-xs-11 { width: 91.6666%; }
.acme-xcillion-compat .col-xs-12 { width: 100%;     }

@media (min-width: 768px) {
  .acme-xcillion-compat .col-sm-1,  .acme-xcillion-compat .col-sm-2,
  .acme-xcillion-compat .col-sm-3,  .acme-xcillion-compat .col-sm-4,
  .acme-xcillion-compat .col-sm-5,  .acme-xcillion-compat .col-sm-6,
  .acme-xcillion-compat .col-sm-7,  .acme-xcillion-compat .col-sm-8,
  .acme-xcillion-compat .col-sm-9,  .acme-xcillion-compat .col-sm-10,
  .acme-xcillion-compat .col-sm-11, .acme-xcillion-compat .col-sm-12 { float: left; }
  .acme-xcillion-compat .col-sm-1  { width: 8.3333%;  }
  .acme-xcillion-compat .col-sm-2  { width: 16.6666%; }
  .acme-xcillion-compat .col-sm-3  { width: 25%;      }
  .acme-xcillion-compat .col-sm-4  { width: 33.3333%; }
  .acme-xcillion-compat .col-sm-5  { width: 41.6666%; }
  .acme-xcillion-compat .col-sm-6  { width: 50%;      }
  .acme-xcillion-compat .col-sm-7  { width: 58.3333%; }
  .acme-xcillion-compat .col-sm-8  { width: 66.6666%; }
  .acme-xcillion-compat .col-sm-9  { width: 75%;      }
  .acme-xcillion-compat .col-sm-10 { width: 83.3333%; }
  .acme-xcillion-compat .col-sm-11 { width: 91.6666%; }
  .acme-xcillion-compat .col-sm-12 { width: 100%;     }
}

@media (min-width: 992px) {
  .acme-xcillion-compat .col-md-1,  .acme-aperture-compat .col-md-1,
  .acme-xcillion-compat .col-md-2,  .acme-aperture-compat .col-md-2,
  .acme-xcillion-compat .col-md-3,  .acme-aperture-compat .col-md-3,
  .acme-xcillion-compat .col-md-4,  .acme-aperture-compat .col-md-4,
  .acme-xcillion-compat .col-md-5,  .acme-aperture-compat .col-md-5,
  .acme-xcillion-compat .col-md-6,  .acme-aperture-compat .col-md-6,
  .acme-xcillion-compat .col-md-7,  .acme-aperture-compat .col-md-7,
  .acme-xcillion-compat .col-md-8,  .acme-aperture-compat .col-md-8,
  .acme-xcillion-compat .col-md-9,  .acme-aperture-compat .col-md-9,
  .acme-xcillion-compat .col-md-10, .acme-aperture-compat .col-md-10,
  .acme-xcillion-compat .col-md-11, .acme-aperture-compat .col-md-11,
  .acme-xcillion-compat .col-md-12, .acme-aperture-compat .col-md-12 { float: left; }
  .acme-xcillion-compat .col-md-1,  .acme-aperture-compat .col-md-1  { width: 8.3333%;  }
  .acme-xcillion-compat .col-md-2,  .acme-aperture-compat .col-md-2  { width: 16.6666%; }
  .acme-xcillion-compat .col-md-3,  .acme-aperture-compat .col-md-3  { width: 25%;      }
  .acme-xcillion-compat .col-md-4,  .acme-aperture-compat .col-md-4  { width: 33.3333%; }
  .acme-xcillion-compat .col-md-5,  .acme-aperture-compat .col-md-5  { width: 41.6666%; }
  .acme-xcillion-compat .col-md-6,  .acme-aperture-compat .col-md-6  { width: 50%;      }
  .acme-xcillion-compat .col-md-7,  .acme-aperture-compat .col-md-7  { width: 58.3333%; }
  .acme-xcillion-compat .col-md-8,  .acme-aperture-compat .col-md-8  { width: 66.6666%; }
  .acme-xcillion-compat .col-md-9,  .acme-aperture-compat .col-md-9  { width: 75%;      }
  .acme-xcillion-compat .col-md-10, .acme-aperture-compat .col-md-10 { width: 83.3333%; }
  .acme-xcillion-compat .col-md-11, .acme-aperture-compat .col-md-11 { width: 91.6666%; }
  .acme-xcillion-compat .col-md-12, .acme-aperture-compat .col-md-12 { width: 100%;     }
}

/* Bootstrap-3 floats / utility helpers used by Xcillion modules. */
.acme-xcillion-compat .pull-right, .acme-aperture-compat .pull-right { float: right !important; }
.acme-xcillion-compat .pull-left,  .acme-aperture-compat .pull-left  { float: left  !important; }
.acme-xcillion-compat .clearfix::before, .acme-xcillion-compat .clearfix::after { content: " "; display: table; }
.acme-xcillion-compat .clearfix::after { clear: both; }

/* Visibility helpers Bootstrap 3 uses. */
@media (max-width: 767px) { .acme-xcillion-compat .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .acme-xcillion-compat .hidden-sm { display: none !important; } .acme-xcillion-compat .visible-sm { display: block !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .acme-xcillion-compat .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .acme-xcillion-compat .hidden-lg { display: none !important; } }

/* Hide empty Xcillion/Aperture panes so unused rows don't reserve space.
   DNN's pane chrome leaves no children when no module is assigned (and
   tags the wrapper with .DNNEmptyPane); both selectors catch the
   common cases without breaking edit-mode placeholders. */
.acme-xcillion-compat .dnnpane > [runat]:empty,
.acme-aperture-compat main > [runat]:empty,
.acme-xcillion-compat .footer-col:empty,
.acme-xcillion-compat .acme-pane:empty,
.acme-xcillion-compat .acme-pane.DNNEmptyPane,
.acme-aperture-compat .acme-pane:empty,
.acme-aperture-compat .acme-pane.DNNEmptyPane {
  display: none !important;
}
/* Hide entire .row.dnnpane wrappers when all their child panes are empty. */
.acme-xcillion-compat .row.dnnpane:has(> [runat]:empty:only-child),
.acme-xcillion-compat .row.dnnpane:not(:has(> [runat]:not(:empty))) {
  display: none !important;
}
/* When the Xcillion 4-col footer row has no modules, don't reserve its
   30/50px chrome — keep the row hidden so the page ends at the ACME
   FooterContentPane below. */
.acme-xcillion-compat .acme-xcillion-footer-bar:not(:has(.col-md-3:not(:empty))) {
  display: none !important;
}

/* Reasonable defaults so the page looks like Xcillion / Aperture
   rather than the original Bootstrap-naked render. */
.acme-xcillion-compat .spacingTop { margin-top: 30px; }
.acme-xcillion-compat .headerPane,
.acme-xcillion-compat .contentPane {
  padding: 15px 0;
}
.acme-xcillion-compat .acme-xcillion-footer-bar {
  background: #f5f5f5;
  border-top: 1px solid #e7e7e7;
  padding: 30px 0;
  margin-top: 50px;
}
.acme-aperture-compat .aperture-main {
  padding: 30px 0;
}
.acme-aperture-compat .aperture-content-pane {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ============================================================
 * AcmeXcillion container chrome.
 *
 * Ported from Xcillion/skin.css so the AcmeSkin/Containers/AcmeXcillion/
 * Title_h2.ascx, Title_h3.ascx, etc. render with the same title-bar
 * chrome (heading + decorative element) the admin saw in the DNN
 * Page Container picker, regardless of the active skin layout.
 *
 * NOT scoped to .acme-xcillion-compat -- intentionally global so the
 * containers also work on AcmeSkin/default.ascx pages.
 * ============================================================ */
.DNNContainer_Title_h2, .DNNContainer_Title_h3, .DNNContainer_Title_h4,
.DNNContainer_Boxed, .DNNContainer_noTitle { margin-bottom: 24px; }

.DNNContainer_Title_h2 .heading_wrapper,
.DNNContainer_Title_h3 .heading_wrapper,
.DNNContainer_Title_h4 .heading_wrapper {
  padding: 0 0 8px 0;
}
.DNNContainer_Title_h2 h2 .TitleH2,
.DNNContainer_Title_h3 h3 .TitleH3,
.DNNContainer_Title_h4 h4 .TitleH4 {
  display: block;
  margin-bottom: 5px;
  font-weight: 600;
}
.DNNContainer_Title_h2 h2 .TitleH2.centered,
.DNNContainer_Title_h3 h3 .TitleH3.centered,
.DNNContainer_Title_h4 h4 .TitleH4.centered { text-align: center; }
.DNNContainer_Boxed h2 .TitleBoxed {
  display: block;
  margin-bottom: 5px;
  padding: 8px;
  border: 1px solid #7b7878;
}

/* Hexagon / open-rectangle / rectangle / slashed decorations */
.hexagon, .open_rectangle, .rectangle, .dots-wrapper, .slashed-wrapper {
  display: block;
  margin: 10px auto;
  position: relative;
  background-color: #fff;
  width: 36px;
  z-index: 10;
}
.hexagon {
  border-left: 3px solid #7b7878;
  border-right: 3px solid #7b7878;
  height: 20px;
  margin: 10.39px auto;
  top: -10px;
}
.hexagon::before, .hexagon::after {
  background-color: inherit;
  content: "";
  height: 25.46px;
  left: 2.27px;
  position: absolute;
  transform: scaleY(.5774) rotate(-45deg);
  width: 25.46px;
  z-index: 1;
}
.hexagon::before {
  border-right: 4.24px solid #7b7878;
  border-top: 4.24px solid #7b7878;
  top: -12.73px;
}
.hexagon::after {
  border-left: 4.24px solid #7b7878;
  border-bottom: 4.24px solid #7b7878;
  bottom: -12.73px;
  transform: scaleY(.5774) rotate(-45deg);
}
.rectangle { height: 8px; background: #7b7878; }
.open_rectangle { height: 8px; border: 1px solid #7b7878; background: transparent; }
.subtle-line {
  display: block; border: none; color: #fff; height: 1px; width: 100%;
  background: radial-gradient(#7b7878 1%, #bbb 30%, #ccc 40%, #fff 70%);
  margin-bottom: 16px;
}