%warning
  background: #85231B
%changed
  background: #C56827
%disabled
  background: #dedede


.page-admin-structure-mini-panels form:before,
.page-manager-wrapper form:before 
  content: "Fixed width regions are yellow, absolutely positioned regions are blue. You do not need to use every region in a panel. Unused panel regions will disappear."
  font-weight: bold
  color: blue

.page-admin-structure-mini-panels form:before 
  content: "Fixed width regions are yellow, absolutely positioned regions are blue. You do not need to use every region in a panel. Unused panel regions will disappear."
  font-weight: bold
  color: blue

.page-admin-structure-mini-panels .wizard-trail ,
#panels-choose-layout .wizard-trail 
  padding-top: 20px


#panels-dnd-main 
  *, *:after, *:before
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    box-sizing: border-box
  .panel-pane
    vertical-align: top
    min-width: 90px
    float: none !important
    display: inline-block
    padding: 0 !important
    border: 1px solid #777
    margin: 0 !important
    &.width-25
      width: 25% !important
    &.width-33
      width: 33% !important
    &.width-50
      width: 50% !important
    &.width-66
      width: 66% !important
    &.width-75
      width: 75% !important
    &.width-100
      width: 100% !important
  .panel-pane .pane-title:after
    height: 13px
    display: inline-block
    width: 100%
    content: "."
    color: white !important
    text-indent: 21px
  .panel-pane.changed .pane-title:after
    font-size: 0.8em
    color: crimson !important
    letter-spacing: normal
    line-height: 1
    background: #FFF
    display: inline-block
    text-indent: 0
    padding-left: 5px
  .grid-4
    .width-25, .width-33, .width-50
      @extend %warning !optional
  .grid-3
    .width-25, .width-33, .width-50, .width-66, .width-75
      @extend %warning !optional


.page-manager-ajax-pad
  background: #DFDFDF

#page-manager-edit,
  .clearfix,
  .page-manager-tabs,
  .page-manager-wrapper,
  .panel-panel,
  .panel-display
    overflow: visible !important


#page #panels-dnd-main 
  .panel-pane
    //padding: 0 $pane-padding
    position: relative
    float: left
    width: 100%
    +append-widths
    .pane-content
      margin: 0 10px
      position: relative
  .changed .grabber,
  .ajax-changed .grabber
    @extend %changed !optional
  .hidden .grabber
    @extend %disabled !optional
  .panel-pane
    margin: 0
  .panel-region
    padding: 5px
    margin: 0
    border: white 2px dashed
    +clearfix
    overflow: visible
    background: rgba(248, 248, 248, 0.4)
    float: left
    width: 100%
    line-height: 0
    h2.label
      line-height: 1.5
      font-size: 1.3em
      color: black
    .panel-pane
      line-height: 1.2
      max-width: 100%
  div.ctools-dropdown div.ctools-dropdown-container ul
    line-height: 1.3
  .container-inner.grid-12
    float: left
    width: 100%
  .panel-display
    @include background-grid
  .panel-region,  
  .container-inner,
  .column-content-region
    &:after
      content: "."
      font-size: 0
      clear: both
