body {
  box-sizing: border-box;
  /**
   * Flexbox setup
   * -------------
   * Set Joomla containers to flex and adjust margins and paddings
   * As soon as something in this chain of classnames changes we fall back to non-flexbox view
   */
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding-top: 0 !important;
  /**
   * Basic setup
   * -----------
   * 1. Always remove the toolbar, empty div and header since we are showing this ourselves or don't need it
   * 2. Remove ugly border from header
   * 3. Hide empty div after header
   * 4. Don't hide status bar when placed at top
   * 5. Don't display the unstyled title when header is set to hide in Isis settings
   * 6. Don't display the footer. It's unstyled and only holds copyright info
   */
  /**
   * Component only
   * ==============
   */
  /**
   * The main container
   * ==================
   * 1. Set negative margin for smaller screens
   * 2. And remove on larger screens
   * 3. Do not set with shorthand CSS since we set the bottom margin seprately for the status bar
   * 4. always remove bottom margin
   */
  /**
   * Set navbar from fixed to static
   */
  /**
   * Do not flex following items
   */
  /**
   * The main container
   */
  /**
   * Remove spacing and border-radius to align alerts to the side
   */
  /**
   * Remove margin from bootstrap grid item
   */
  /**
   * Joomla removes default focus style, we bring it back
   */
  /**
   * Special debug styling
   */
}
body .btn-subhead,
body .subhead-collapse,
body .navbar + .header {
  display: none !important;
}
body header.header {
  border-top: none;
}
body header.header + div {
  display: none;
}
body header.header + #status {
  display: block;
}
body .content-title {
  display: none;
}
body footer.footer {
  display: none;
}
body.component {
  padding: 0;
}
body .container-main {
  margin-left: -20px;
  margin-right: -20px;
  padding: 0;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  body .container-main {
    margin-left: 0;
    margin-right: 0;
  }
}
body .container-main #content .row-fluid .span12 .k-overview {
  margin-top: 0;
}
body nav.navbar {
  position: static;
}
body nav.navbar,
body header.header,
body .subhead-collapse,
body #status,
body #system-message-container,
body #system-debug {
  flex: 0 0 auto;
}
body .container-main {
  display: flex;
  flex: 1 1 auto;
  overflow: auto;
  /**
   * Flex all children of main container
   */
  /**
   * Remove clearfix psuedo elements
   * Otherwise they'll be treated as 1 pixel flex items
   */
  /**
   * No longer a fixed position for the statusbar
   * since that doesn't play nice with flexbox
   */
}
body .container-main #content,
body .container-main #content .row-fluid,
body .container-main #content .row-fluid .span12 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: auto;
}
body .container-main:before, body .container-main:after,
body .container-main #content:before,
body .container-main #content:after,
body .container-main #content .row-fluid:before,
body .container-main #content .row-fluid:after {
  display: none;
}
body .container-main + #status {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  box-shadow: none;
}
body #system-message-container {
  padding: 0;
}
body #system-message-container .alert {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid #d2d2d2;
  padding: 10px 35px 10px 10px;
}
[dir=rtl] body #system-message-container .alert {
  padding: 10px 10px 10px 35px;
}

body #system-message-container .alert h4:last-child, body #system-message-container .alert p:last-child, body #system-message-container .alert div:last-child {
  margin-bottom: 0;
}
body .span10 {
  margin: 0;
}
body a:focus {
  outline: auto 5px -webkit-focus-ring-color;
}
body div#system-debug {
  margin: 0;
  padding: 0;
  border: none;
  max-height: 36px;
  overflow: hidden;
  transition: all 0.2s ease;
}
body div#system-debug:hover, body div#system-debug:focus {
  max-height: 999px;
  overflow: auto;
}