body {
  padding-bottom: 500px;
}

#loco-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.85);
  z-index: 9999;
  text-align: center;
  img {
    display: inline-block;
    margin-bottom: 20px;
  }
  h1 {
    margin-bottom: 0;
    font-size: 18px;
    color: #4990E1;
    font-family: "Open Sans";
  }
}

#admin_content_wrapper {
  // height: calc(100vh - 54px);
  // overflow: scroll;
}
#admin_content_body {
  background: #f3f3f3;
  padding: 0 !important;
}
#admin_content_body #page_content {  
  /*max-width: calc(100vw - 390px);*/  
  margin: 0 0 0 1px; /*20px auto*/  
  &.desktop { width: 1080px; }  
  &.tablet  { width: 570px;  }
  &.mobile  { width: 315px;  }
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

header#admin_header,
#admin_nav,
#admin_subnav {
  font-family: 'Open Sans';
  z-index: 999;
}

#admin_subnav {
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans';
  }
}

#admin_subnav #admin_subnav_content #edit_block_content .mb_container input[type=text],
#admin_subnav #admin_subnav_content #edit_block_content .mb_container select,
#admin_subnav #admin_subnav_content #edit_block_content .mb_container .mb_fake option,
#admin_subnav #admin_subnav_content #edit_block_content .mb_container option,
#admin_subnav #admin_subnav_content #edit_block_content .mb_container .mb_placeholder span {
  font-family: 'Open Sans';
}

    
#viewers input[type=checkbox] { position: relative; }
#editors input[type=checkbox] { position: relative; }

#admin_subnav .ui-tabs { padding: 0; }
#admin_subnav .ui-tabs .ui-tabs-nav { width: 100%; }
#admin_subnav .ui-tabs .ui-tabs-nav li { width: 32%; }
#admin_subnav .ui-tabs .ui-tabs-nav .ui-tabs-anchor { display: block; padding: 0; width: 100%; text-align: center; }
#admin_subnav .ui-tabs .ui-tabs-panel { padding: 0; }
#admin_subnav .ui-tabs .ui-tabs-panel .ui-accordion-content { padding: 4px; }
#admin_subnav {
  .subnav_tabs {    
    padding: 0 !important;
    ul {      
      padding: 0 !important;
      li { 
        margin: 0;
        padding: 0;
        width: 33%;
        a {
          font-size: 10px; 
        }
      }
    }         
  }

  ul.edit_selector {  
    width: 270px;                 
    list-style: none;
    margin: 0;
    padding: 0;    
    border-top: 4px solid #f7f7f7;
    li {
      list-style: none;
      margin: 0;
      padding: 0;
      float: left;
            
      a {
        display: block;
        text-decoration: none;        
        width: 90px;
        height: 75px;
        position: relative;
    //    border-top: #f7f7f7 4px solid;
        border-bottom: #f7f7f7 4px solid;
                                         
        span.icon {
          position: absolute;
          top: 0px;
          left: 20px;
          display: block;
          width: 50px;
          height: 50px;
          background-image: url('/assets/caboose/admin/page_edit_icons2.gif');         
        }
        span.text {
          display: block;
          position: absolute;
          top: 50px;
          left: 0;
          width: 90px;
          height: 20px;
          color: #a1a1a1 !important;            
          text-transform: uppercase;
          font-size: 10px;
          text-align: center;
        }
        &:hover {                     
          border-bottom: #8d9fb9 4px solid;
          span.text { color: #8d9fb9  !important; }
        }      
      }  
      &.selected {
        a, a:hover {
          border-bottom: #505e72 4px solid;
          span.text { color: #505e72 !important; }          
        }        
      }
      
      &.content  { a { span.icon { background-position: 0px    0px; } &:hover { span.icon { background-position: -50px    0px; }}} &.selected { a, a:hover { span.icon { background-position: -100px    0px; }}}}
      &.layout   { a { span.icon { background-position: 0px  -50px; } &:hover { span.icon { background-position: -50px  -50px; }}} &.selected { a, a:hover { span.icon { background-position: -100px  -50px; }}}}
      &.settings { a { span.icon { background-position: 0px -100px; } &:hover { span.icon { background-position: -50px -100px; }}} &.selected { a, a:hover { span.icon { background-position: -100px -100px; }}}}                      
    }
  }
  
  li.layout_block_type {
    list-style: none;
    width: 190px;
    height: 114px;
    background: url('http://placehold.it/190x114');
    border: #ccc 1px solid;
    margin: 0 auto 10px auto;
    span.name { display: none; }
  }  
}

#admin_subnav_content h2 { clear: left; }

ul.block_types {
  clear: left;
  li:nth-child(odd)  { margin: 0 10px 10px auto; }
  li:nth-child(even) { margin: 0 auto 10px 10px; }
}

ul.block_type_groups {
  clear: left;
  li:nth-child(odd)  { margin: 0 10px 10px auto; }
  li:nth-child(even) { margin: 0 auto 10px 10px; }
}

li.new_block_type,
li.new_block_type_group {    
  list-style: none;
  width: 100px;
  height: 100px;
  float: left;
  position: relative;
  
  background-color: #F2F2F2;
  border-color: #ccc;
  border-width: 10px;
  border-style: solid;
  border-radius: 10px;
  border-width: 2px;

  background-size: cover;
    
  .name {
    display: table;      
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 21;
    width: 88px;
    height: 32px;      
    text-align: center;
    span {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      font-size: 10px;
      text-transform: uppercase;
      line-height: 0.95
    }
  }
}
  
#admin_content_body {
  text-align: center;
  position: relative;
}

#select_device_wrapper {
  
  table {
    margin: 0 auto;  
    width: 100%;
    
    td {
      text-align: center;      
    }
    
    tr#device_selector {      
      td {    
        margin: 0;
        padding: 0;        

        a {
          display: block;
          text-decoration: none;        
          width: 74px;
          height: 54px !important;
          margin: 0 auto;
          padding: 0;
          position: relative;          
                                                 
          span.icon {
            position: absolute;
            top: 0px;
            left: 0px;
            display: block;
            width: 74px;
            height: 54px;
            background-image: url('/assets/caboose/admin/admin_device_icons.gif');
            background-position: center center;
          }
          span.text {
            display: block;
            position: absolute;
            top: 36px;
            left: 0;
            width: 74px;
            height: 16px;
            color: #333 !important;
            text-transform: uppercase;
            font-size: 10px;
            text-align: center;
          }
          &:hover {                             
            span.text { color: white !important; }
          }      
        }  
        &.selected {
          border-bottom: none;
          a, a:hover {        
            span.text { color: white !important; }
          }        
        }
        
        &.breakpoint3 /* Mobile  */ { a { span.icon { background-position: -74px    0px; } &:hover { span.icon { background-position: -148px    0px; }}} &.selected { a, a:hover { span.icon { background-position: 0    0px; }}}}
        &.breakpoint2 /* Tablet  */ { a { span.icon { background-position: -74px  -54px; } &:hover { span.icon { background-position: -148px  -54px; }}} &.selected { a, a:hover { span.icon { background-position: 0  -54px; }}}}
        &.breakpoint1 /* Desktop */ { a { span.icon { background-position: -74px -108px; } &:hover { span.icon { background-position: -148px -108px; }}} &.selected { a, a:hover { span.icon { background-position: 0 -108px; }}}}
      }
    }
  }
}

.flex-grid-container.ui-droppable, .flex-grid-unit.ui-droppable {
  border: 1px dashed #cccccc;
  &.block_over {
    border-color: #4990E1;
  }
}

#page_content {
  background: #fff;
    
  .new_block_link { position: relative; width: 100%; }
  .new_block_link .line { position: absolute; top: -11px; width: 100%; height: 2px; background: transparent; }
  .new_block_link a { position: absolute; top: -20px; left: 45%; background: transparent; color: transparent !important; display: block; padding: 4px 8px; }
  .new_block_link_over { position: relative; width: 100%; }
  .new_block_link_over .line { position: absolute; top: -11px; width: 100%; height: 2px; background: #ccc; }
  .new_block_link_over a { position: absolute; top: -22px; left: 45%; color: #fff; background: #666; display: block; padding: 2px 4px; text-decoration: none; font-size: 12px; }
      
  .flexbox {
    .flex-grid-unit {
      &.resize_handle {
        position: relative;    
        width: 4px;
        background: #dcdcdc;
        transition: all ease-in 0.1s;
        position: relative;
        border-radius: 2px;     
        .grabber {
          display: none;
          // width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); left: -10px; background: transparent; 
        }
      }
    }
    &:hover {
      .flex-grid-unit {
        &.resize_handle {
          position: relative;    
          width: 4px;
          background: #dcdcdc;
          transition: all ease-in 0.1s;
          position: relative;
          border-radius: 2px;     
          .grabber {
            display: none;
         //   width: 20px; height: 20px; position: absolute; top: calc(50% - 10px); left: -10px; background: #ff0000; 
          }
        }
      }
    }
  }
  
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  
  $dt1: 1px dotted #666666;
  $dt2: none;
  $dt3: 2px solid #ff0000;
    
  .drop_target_active                                     { border: $dt1; }
  .drop_target_hover_all                                  { border-top: $dt3; border-right: $dt3; border-bottom: $dt3; border-left: $dt3; }
  .drop_target_hover_top                                  { border-top: $dt3; border-right: $dt1; border-bottom: $dt1; border-left: $dt1; }
  .drop_target_hover_bottom                               { border-top: $dt1; border-right: $dt1; border-bottom: $dt3; border-left: $dt1; }
  .drop_target_hover_left                                 { border-top: $dt1; border-right: $dt1; border-bottom: $dt1; border-left: $dt3; }
  .drop_target_hover_right                                { border-top: $dt1; border-right: $dt3; border-bottom: $dt1; border-left: $dt1; }
    
  .flex-grid-unit > .drop_target_active                   { border-bottom: $dt1; }    
  .flex-grid-unit > .drop_target_hover_top                { border-bottom: $dt1; }
  .flex-grid-unit > .drop_target_hover_bottom             { border-bottom: $dt3; }
  .flex-grid-unit > .drop_target_hover_left               { border-bottom: $dt1; }
  .flex-grid-unit > .drop_target_hover_right              { border-bottom: $dt1; }

  /*
  .flex-grid-unit > .drop_target_active:first-child       { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; }    
  .flex-grid-unit > .drop_target_hover_top:first-child    { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; }
  .flex-grid-unit > .drop_target_hover_bottom:first-child { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt3; border-left: $dt2 !important; }
  .flex-grid-unit > .drop_target_hover_left:first-child   { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; }
  .flex-grid-unit > .drop_target_hover_right:first-child  { border-top: $dt2 !important; border-right: $dt2 !important; border-bottom: $dt1; border-left: $dt2 !important; }
    
  .flex-grid-unit > .drop_target_active:last-child        { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; }
  .flex-grid-unit > .drop_target_hover_top:last-child     { border-top: $dt3; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; }
  .flex-grid-unit > .drop_target_hover_bottom:last-child  { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; }
  .flex-grid-unit > .drop_target_hover_left:last-child    { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; }
  .flex-grid-unit > .drop_target_hover_right:last-child   { border-top: $dt1; border-right: $dt2 !important; border-bottom: $dt2 !important; border-left: $dt2 !important; }
  */
  
  /*
  .drop_target                         {}
  .drop_target_horizontal              { height: 10px; border:            #efefef 1px solid; background: transparent; }
  .drop_target_vertical                { width:  10px !important; border: #efefef 1px solid; background: transparent; flex: 0 0 10px; }
  
  .drop_target_highlight               { border: 1px dotted #666666; }
  .drop_target_horizontal_highlight    { height: 10px; border: #ccc 1px solid; background: #efefef !important; }
  .drop_target_vertical_highlight      { width:  10px !important; border: #ccc 1px solid; background: #efefef !important; flex: 0 0 10px; }
    
  .drop_target_horizontal_hover        { height: 10px; border: #ff0000 1px solid; background: #ffcccc !important; } 
  .drop_target_vertical_hover          { width:  10px !important; border: #ff0000 1px solid; background: #ffcccc !important; flex: 0 0 10px; }    
  .drop_target_highlight_about_to_drop { height: 40px !important;  background: #ffffff !important; border: #ff0000 1px solid; }
  */
}

.magic_header {
  padding: 4px 8px;
  font-size: 10px;    
}

.block_tabs {
  width: 270px;
  background: #E7E7E7;
  margin: 0 0 10px -20px;
  padding: 10px 0 0 0; 
  ul {
    li {
      display: inline-block;            
      a {
        display: block;
        margin: 0;
        padding: 4px 8px;
        font-size: 12px;
        text-decoration: none;
        border-right: #E7E7E7 1px solid;
        border-bottom: #E7E7E7 1px solid;
        color: #000;
      }
      &:last-child { a { border-right: 0 }}    
      &.selected   { a { background: #fff; border-bottom: #fff 1px solid; }}
    }    
  }
}

#admin_header #admin_page_top_nav {
  position: absolute;
  top: 0;
  right: 0;
      
  & > ul {
    & > li {
      position: absolute;
      top: 0;
      right: 0;      
      display: inline-block;
      margin: 0;
      padding: 0;
      vertical-align: top;
      
      a {
        margin: 0;
        padding: 0;
        display: inline-block;
        text-decoration: none;
        font-size: 12px;
        text-transform: uppercase;
        text-align: center;
        position: relative;        
        background-repeat: no-repeat;
        border: transparent 1px solid;
        color: #fff;
      }
      a:hover {
        border: #2d76b7 1px solid;        
      }

      &.select-device  {
        top: 13px;
        right: 243px;

        #select_device_wrapper {
          display: none;
        }
      }
      
      &.stack           { top: 13px; right: 244px; }
      &.undo            { top: 13px; right: 204px; }
      &.redo            { top: 13px; right: 174px; }
      &.revisions       { top: 26px; right: 174px; }
      &.preview         { top: 13px; right:  93px; }
      &.publish         { top: 13px; right:  12px; }
            
      &.select-device   a { background-color: #3893e5; width: 75px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; }
      &.undo            a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 6px 0px 0px 0px; background-image: url('/assets/caboose/admin/undo_arrow.png'); background-position:  6px 1px; }
      &.redo            a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 0px 6px 0px 0px; background-image: url('/assets/caboose/admin/redo_arrow.png'); background-position:  6px 1px; }
      &.revisions       a { background-color: #3893e5; width: 59px; height: 11px; border-radius: 0px 0px 6px 6px; background-image: url('/assets/caboose/admin/down_arrow.png'); background-position: 22px 0px; }
      &.preview         a { background-color: #3893e5; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; }
      &.publish         a { background-color: #6cb049; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; }

      &.stack           a { background-color: #3893e5; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; text-align: center; }
      &.undo            a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 6px 0px 0px 0px; background-image: url('/assets/caboose/admin/undo_arrow.png'); background-position:  6px 1px; }
      &.redo            a { background-color: #3893e5; width: 29px; height: 18px; border-radius: 0px 6px 0px 0px; background-image: url('/assets/caboose/admin/redo_arrow.png'); background-position:  6px 1px; }
      &.revisions       a { background-color: #3893e5; width: 59px; height: 11px; border-radius: 0px 0px 6px 6px; background-image: url('/assets/caboose/admin/down_arrow.png'); background-position: 22px 0px; }
      &.preview         a { background-color: #3893e5; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; text-align: center; }
      &.publish         a { background-color: #6cb049; width: 71px; height: 30px; border-radius: 6px; padding: 5px 10px 0 10px; text-align: center; }

      &.revisions.open         { top: 31px; }
      &.revisions.open a       { height: 16px; border-radius: 0;           border-color: transparent !important; }
      &.revisions.open a:hover { height: 16px; border-radius: 0;           border-color: transparent !important; }

      &.preview.open   a       { height: 35px; border-radius: 6px 6px 0 0; border-color: transparent !important; }
      &.preview.open   a:hover { border-color: #72a761 1px solid; }

      &.publish.open   a       { height: 35px; border-radius: 6px 6px 0 0; border-color: transparent !important; }
      &.publish.open   a:hover { border-color: #72a761 1px solid; }

      &.stack     a span { }
      &.undo      a span { display: none; }
      &.redo      a span { display: none; }
      &.revisions a span { display: none; }
      &.preview   a span { }
      &.publish   a span { }
      

      &.select-device.open {
        #select_device_wrapper {
          display: block;
          position: absolute;
          top: 35px;
          right: -110px;
          z-index: 1000;
          width: 300px;
          padding: 10px;
          border-radius: 6px 6px 6px 6px;
          border-color: #EDEEF0;
          border-width: 0 2px 2px 2px;
          border-style: solid;
          background: #3893e5;
          color: #fff;
          text-align: center;
        }
        /*
        a {
          height: 35px;
          border-radius: 6px 6px 0 0;
          border-color: transparent !important;
        }
        */
      }
    }
  }
}

#revision_history {
  position: absolute;
  top: 48px;
  right: 10px;
  z-index: 1000;
  width: 300px;
  max-height: 200px;
  overflow-y: scroll;
  border-radius: 6px 6px 6px 6px;
  border-color: #EDEEF0;
  border-width: 0 2px 2px 2px;
  border-style: solid;
  background: #3893e5;
  color: #fff;
  text-align: center;
  p {
    padding: 10px;
  }
    
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      margin: 0;
      padding: 0;
      list-style: none;
      
      a {        
        display: block;
        margin: 0;
        padding: 0 30px 0 0;
        width: 285px;
        background: #3893E5;
        color: #fff;
        font-size: 12px;
        text-decoration: none;
        border-top: #2d76b7 1px solid;;
                          
        span {
          display: inline-block;
          margin: 0;
          padding: 8px 8px;
          text-align: center;
          
          &.user { width: 50%; }
          &.date { width: 25%; }
          &.time { width: 25%; }
        }                                                                                                                                                                                    
      }
      &:first-child a { border-top: 0; }
      &.like a    { background-image: url('/assets/caboose/admin/like_thumb.png'); background-position: 4px 3px; }
      &.current a { background: #2d76b7; }
    }
  }  
}

#preview_confirm {
  position: absolute;
  top: 48px;
  right: 10px;
  z-index: 1000;
  width: 300px;
  padding: 10px;
  border-radius: 6px 6px 6px 6px;
  border-color: #EDEEF0;
  border-width: 0 2px 2px 2px;
  border-style: solid;
  background: #3893e5;
  font-size: 14px;
  color: #fff;
  text-align: center;
  p { margin-bottom: 8px; }
  
  select, input[type=text] {
    margin: 0;
    padding: 4px 8px;
    border: #ccc 1px solid;
    font-size: 14px;
    width: 250px;
  }
}

#publish_confirm {
  position: absolute;
  top: 48px;
  right: 10px;
  z-index: 1000;
  width: 300px;
  padding: 10px;
  border-radius: 6px 0 6px 6px;
  border-color: #EDEEF0;
  border-width: 0 2px 2px 2px;
  border-style: solid;
  background: #6cb049;
  font-size: 14px;
  color: #fff;
  text-align: center;
  p { margin-bottom: 8px; }
  
  select, input[type=text] {
    margin: 0;
    padding: 4px 8px;
    border: #ccc 1px solid;
    font-size: 14px;
    width: 250px;
  }
}

#block_overlays_container {
  position: absolute;
  top: 0;
  left: 0;
  
  #block_overlays {  
    position: relative;
    
    .section_width_overlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      border-left:  #3893E5 1px dashed;
      border-right: #3893E5 1px dashed;
    }
    
    .block_overlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 100;
      /*
      border: #ff0000 1px dashed;
      */
      &.section_block_overlay {
        border-bottom: #ff0000 1px dashed;
      }      
      .message {
        width: 100%;
        height: 100%;
        display: table;                
      }
      .caboose_note {        
        width: 100%;
        height: 100%;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        padding: 10px 20px; background: #d07f7f; color: #fff; font-size: 16px; 
      }      
      &.selected { 
        background: #fff799;
        border: #ff0000 2px solid;
        background: transparent;
      }            
             
      $dt1: 1px dotted #666666;            
      $dt3: 2px solid #00ff00 !important;
    
      &.drop_target_active        { /* border: $dt1; */ }
      &.drop_target_hover_all     { border-top: $dt3; border-right: $dt3; border-bottom: $dt3; border-left: $dt3; }
      &.drop_target_hover_top     { border-top: $dt3; }
      &.drop_target_hover_bottom  { border-bottom: $dt3; }
      &.drop_target_hover_left    { border-left: $dt3; }
      &.drop_target_hover_right   { border-right: $dt3; }
      
      .overlay_controls {
        display: none;
      }      
       
      &.over {
        /*
        background: #e3e3e3 !important;
        background-color: rgba(0,0,0,0.1) !important;
        */
        border: #ff0000 1px dashed;
        &.selected {
          border: #ff0000 2px solid;
        }
        .overlay_controls {
          display: block;
          a {
            position: absolute;
            top: -26px;
            display: block;
            width: 25px;
            height: 25px;
            background-image: url('/assets/caboose/admin/overlay_nav.png');
            background-repeat: no-repeat;
            background-position: top left;            
            border: #10151b 1px solid;
            
            &.layers              { right: 74px; background-position: -350px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
            &.duplicate           { right: 49px; background-position: -375px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
            &.save                { right: 24px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
            &.delete              { right: -1px; background-position: -325px 0; border-width: 1px 1px 1px 1px; width: 27px; height: 27px; }
            
            /*
            &.align_left          { right: 25px; background-position: 50px 0; }          
            &.align_right         { right: 25px; background-position: 50px 0; }
            &.align_bottom        { right: 25px; background-position: 50px 0; }
            &.align_top           { right: 25px; background-position: 50px 0; }
            &.align_horizontally  { right: 25px; background-position: 50px 0; }
            &.align_vertically    { right: 25px; background-position: 50px 0; }
            &.center_horiontally  { right: 25px; background-position: 50px 0; }
            &.center_vertically   { right: 25px; background-position: 50px 0; }
            */                        
          }
        }
        &.section_block_overlay {
          .overlay_controls {                    
            a {            
              top: -1px;
            }                        
          }
        }
      }
    }
            
    .over > .layers_handle    { display: block; position: relative; z-index: 3; }
    .over > .duplicate_handle { display: block; position: relative; z-index: 3; }
    .over > .save_handle      { display: block; position: relative; z-index: 3; }
    .over > .delete_handle    { display: block; position: relative; z-index: 3; }
          
    .over > .layers_handle    span { position: absolute; top: 0; right: 54px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
    .over > .duplicate_handle span { position: absolute; top: 0; right: 36px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
    .over > .save_handle      span { position: absolute; top: 0; right: 18px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
    .over > .delete_handle    span { position: absolute; top: 0; right:  0px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
    
    .highlight { border-width: 2px; background-color: rgba(255, 255, 0, 0.5); }  
    /*
    .block_overlay_flex_grid {   
      border: #ff0000 1px dashed;            
    }
    .block_overlay_flex_unit {      
      border: #ff0000 1px dashed;      
    }
    */
    
    .guide {
    	display: none;
    	position: absolute;
    	left: 0;
    	top: 0;
      background: #ff0000 !important;
      z-index: 20000;
    }
    
    #guide-h {
    	border-top: 1px dashed #55f !important;
    	width: 100%;    	    	
    }
    
    #guide-v {
    	border-left: 1px dashed #55f !important;
    	height: 100%;    	
    }
  }
}

.group_overlay {
  border: #0000ff 1px dotted;    
  position: absolute;
  
  .caboose_note {        
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding: 10px 20px;
    background: #d07f7f;
    color: #fff;
    font-size: 16px; 
  }
  
  .group_controls {
    position: absolute;
    top: -20px;    
    height: 20px;
    a {
      float: right;
      width: 20px;
      &.hover { background: #ff0000; }    
    }
    #align_top     {}
    #align_bottom  {}
    #align_left    {}
    #align_right   {}
    #evenly_dist_h {}
    #evenly_dist_v {}
    #create_group  {}
    #clear_group   {}
  }
  
  .overlay_controls {
    position: absolute;
    left: -1px;
    top: -2px; 
    box-sizing: border-box;
    display: block;
    a {
      position: absolute;
      top: -25px;
      display: block;
      width: 26px;
      height: 26px;
      background-image: url('/assets/caboose/admin/overlay_nav.png');
      background-repeat: no-repeat;
      background-position: top left;
      background-color: #ff0000;
      border: #10151b 1px solid;
      color: #fff;
      
      /*
      &.layers              { right: 74px; background-position: -250px 0; background-color: #3c4c62; border-width: 1px 0px 1px 1px; }
      &.duplicate           { right: 49px; background-position: -275px 0; background-color: #3c4c62; border-width: 1px 0px 1px 1px; }
      */
      
      span {
        display: block;
        color: #fff;
        padding-top: 4px;         
        background: #4f5e72;
        font-size: 12px;
      }
      &.align                     { left:   0px; background: #4f5e72;           border-width: 1px 0px 1px 1px; width: 50px; height: 27px; text-align: center; }
      &.distribute                { left:  50px; background: #4f5e72;           border-width: 1px 0px 1px 1px; width: 75px; height: 27px; text-align: center; }
      &.save                      { left: 125px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.delete                    { left: 151px; background-position: -325px 0; border-width: 1px 1px 1px 1px; width: 27px; height: 27px; }
       
      &.align_top_edges           { top: 0; left:   0px; background-position:    0px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.align_vertical_centers    { top: 0; left:  25px; background-position:  -25px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.align_bottom_edges        { top: 0; left:  50px; background-position:  -50px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }        
      &.align_left_edges          { top: 0; left:  75px; background-position:  -75px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.align_horizontal_centers  { top: 0; left: 100px; background-position: -100px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.align_right_edges         { top: 0; left: 125px; background-position: -125px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }

      &.dist_top_edges            { top: 0; left:   0px; background-position: -150px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.dist_vertical_centers     { top: 0; left:  25px; background-position: -175px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.dist_bottom_edges         { top: 0; left:  50px; background-position: -200px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.dist_left_edges           { top: 0; left:  75px; background-position: -225px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.dist_horizontal_centers   { top: 0; left: 100px; background-position: -250px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.dist_right_edges          { top: 0; left: 125px; background-position: -275px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.dist_padding_vertically   { top: 0; left: 150px; background-position: -300px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
      &.dist_padding_horizontally { top: 0; left: 175px; background-position: -325px 0; border-width: 1px 0px 1px 1px; width: 26px; height: 27px; }
    }
    #align_controls {
      position: absolute;
      top: -25px;      
      left: 50px;
      width: 0;
      height: 27px;
      overflow: hidden;
      background: #ff0000;
    }
    #distribute_controls {
      position: absolute;
      top: -25px;      
      left: 125px;
      width: 0;
      height: 27px;
      overflow: hidden;
      background: #ff0000;
    }
  }
}

.move {
  width : 25px;
  height: 25px;
  right : 0;
}

.move_up {
  margin-top: 25px;
}

.move_down {
  margin-top: 50px;
}

/****************************************/

.selected {
  border-bottom: #505e72 4px solid;
}

#multiselect {
  position:absolute;
  z-index: 9000;  
  background-color:rgba(73, 144, 225, 0.3);
  border: 1px solid #4990E1;  
  cursor: default !important;
}

/****************************************/
/* Heading Froala editor
/****************************************/

.fr-box.fr-basic .fr-wrapper {
  background: transparent !important;
}
.fr-box.fr-basic.fr-top .fr-wrapper {
  box-shadow        : none !important;
  -webkit-box-shadow: none !important;
}

.heading-froala > .fr-toolbar.fr-desktop.fr-top {
  position: absolute;
  top: -40px;
  width: 500px;
}

.fr-box.fr-basic .fr-wrapper {
  text-align: center;
}

.fr-box.fr-basic .fr-element {
  padding: 0 !important;
  overflow-x: hidden !important;
  height: 100% !important;
}

.fr-element.fr-viewer {
  margin: 0;
}

/****************************************/
/* Richtext Froala editor
/****************************************/

.richtext-froala > .fr-toolbar.fr-desktop.fr-top {
  position: absolute;
  top: -80px;
  width: 600px;
}

/****************************************/