/*!
* Neon template
* Template styles
*/

/* Page Grid for layout */
@media all {

  .dev-page-grid {
    position: absolute;
    top: -.0625rem;
    right: 0;
    bottom: -.0625rem;
    left: 0;
    display: grid;
    z-index: 100;
    grid-template-columns: var(--def-page-grid);
    grid-template-rows: 1fr;
    pointer-events: none;
  }

  .dev-page-grid span {
    grid-row: 1;
    background-color: rgb(255,0,255,.05);
    outline: .0625rem rgb(255,0,255,.15) dashed;
    outline-offset: -.0625rem;
  }

  .dev-page-grid span:nth-child(1) ,
  .dev-page-grid span:nth-last-child(1) {
    background-color: rgb(0,255,255,.025);
    outline: none;
    border: 0 rgb(0,122,122,.25) dashed; 
    outline-offset: -.0625rem;
  }
  .dev-page-grid span:nth-child(1) {
    grid-column: 2 !important;
    border-left-width: .0625rem;
  }
  
  .dev-page-grid span:nth-last-child(1) {
    grid-column: calc(var(--page-grid-columns) * 2 + 2) !important;
    border-right-width: .0625rem;
  }
  
  .dev-page-object {
    position: fixed;
    bottom: 0;
    height: 1rem;
    background-color: rgb(0,255,255,.25);
    border-right: var(--val-width-content) solid rgb(255,0,255,.25);
    width: var(--val-width-page-diff-left);
    z-index: 100;
  }

}