@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i');

body.editing .footer-wrapper #footer-msg {
  position: absolute;
  left: 0px;
  top: 0px;
  background: rgba(43, 43, 43, 0.9);
  color: rgb(255, 255, 255);
  width: 100%;
  height: 100%;
  z-index: 14;
  padding: 40px 3%;
  text-align: center;
  font-size: 15px;
  font-family: Roboto;
  font-weight: 300;
}

#cb_block_sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 800px;
  height: 100vh;
  z-index: 999;
  background: #ecebe8;
  border-right: 1px solid #d4d4d4;
  overflow-y: scroll;
  #caboose_sidebar_holder {
    position: fixed;
    left: -200px;
    top: 0;
    width: 200px;
    height: 800px;
    height: 100vh;
    overflow-y: scroll;
    background: #ecebe8;
    z-index: 100;
    transition: left 300ms ease;
    background-image: none;
    &.visible {
      left: 0;
    }
    &.loading {
      background-image: url('/assets/caboose/loading2.gif');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 70px;
    }
  }
  #new_blocks_container2 {
    h4 {
      font-family: 'Roboto';
      font-weight: 300;
      font-size: 16px;
      padding: 10px;
      text-align: center;
      height: 52px;
      margin-bottom: 10px;
      color: #252525;
    }
  }
  #new_blocks {
  	list-style-type: none;
    text-align: center;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li.title {
      width: 100%;
      clear: both;
      margin: 10px 0 5px 0;
      -webkit-box-flex: 0 0 100%;
      -moz-box-flex: 0 0 100%;
      -webkit-flex: 0 0 100%;
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      span {
        font-size: 15px;
        display: block;
        text-transform: uppercase;
        color: #252525;
        line-height: 16px;
        font-family: "Roboto";
        font-weight: 300;
      }
    }
  	li.blocktype {
  		display: block;
  		border: 1px solid #d4d4d4;
      cursor: move;
      text-align: center;
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 5px;
      padding: 6px;
      background-color: #f9f8f6;
      -webkit-box-flex: 0 0 48%;
      -moz-box-flex: 0 0 48%;
      -webkit-flex: 0 0 48%;
      -ms-flex: 0 0 48%;
      flex: 0 0 48%;
      span[class*=" icon-"] {
        color: #3e3e3e;
      }
  		span.bname {
        margin-top: 4px;
  			display: block;
        font-family: 'Roboto';
        font-weight: 300;
  			font-size: 11px;
        line-height: 14px;
        border: 0;
        color: #252525;
  		}
      &.divider {

      }
      &:hover {
        background: #ffffde;
      }
  	}
  }
  #the_modal {
    padding: 0 5px;
    box-sizing: border-box;
    color: #252525;
    a:not(.caboose-btn) {
      text-decoration: none;
      color: #458cb4;
      font-family: 'Roboto';
      font-weight: 300;
      text-transform: none;
      letter-spacing: 0;
      font-size: 13px;
      &:hover {
        color: #45b47d;
      }
    }
    .caboose-btn {
      display: block;
      width: 100%;
      font-size: 13px;
      line-height: 21px;
      padding: 2px 10px;
      &.alt {
        background: #5d5d5d;
        &:hover {
          background: #3c3c3c;
        }
      }
    }
    #modal_crumbtrail {
      margin-bottom: 15px;
      padding-top: 4px;
      h2 {
        font-family: 'Roboto' !important;
        font-weight: 300 !important;
        font-size: 13px !important;
      }
    }
    p {
      margin-bottom: 5px;
      font-family: 'Roboto';
      font-weight: 300;
      font-size: 14px;
      color: #252525;
      &.caboose_note.delete {
        color: #fff;
        padding: 10px;
      }
      &.caboose_note, &.note {
        color: #fff;
        display: block;
        width: 100%;
        text-align: center;
        padding: 10px;
      }
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: 'Roboto';
      font-weight: 300;
      margin-bottom: 5px;
      color: #252525;
    }
    h6 { font-size: 14px; }
    h5 { font-size: 15px; }
    h4 { font-size: 16px; }
    h3 { font-size: 17px; }
    h2 { font-size: 18px; }
    h1 { font-size: 19px; }
    #modal_content {
      & > div {
        margin-bottom: 8px;
      }
      #top_controls {
        select#categories {
          display: block;
          width: 100%;
          margin-bottom: 5px;
          &:focus {
            outline-width: 0;
          }
        }
        & > p {
          padding: 0 3px;
          & > a {
            margin: 0px 5px 1px 0;
          }
        }
      }
      .img-wrap {
        .img-holder {
          cursor: pointer;
          span.select {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            color: #fff;
            text-align: center;
            background-color: rgba(10,10,10,0.7);
            opacity: 0;
            transition: opacity 200ms ease;
            font-family: Roboto;
            font-weight: 300;
            font-size: 13px;
            padding-top: 30px;
          }
          &:hover {
            span.select {
              opacity: 1 !important;
            }
          }
        }
        .caboose-btn.remove {
          background-size: 11px;
          background-repeat: no-repeat;
          background-position: 8px 7px;
          background-image: url('/assets/caboose/icons/delete.png');
          background-color: #6f3030;
          &:hover { background-color: shade(#6f3030, 20%);  }
        }
        .filename {
          background: #ecebe8;
          margin: 0;
          padding: 5px;
          width: 190px;
          display: block;
        }
      }
      .mb_container {
        padding-top: 18px;
        input, textarea {
          display: block;
          border-radius: 0 !important;
          width: 100% !important;
          padding: 5px;
          padding-left: 5px !important;
          font-family: 'Roboto' !important;
          font-weight: 300 !important;
          font-size: 13px !important;
          background-color: #fff !important;
          color: #252525 !important;
          border: #dcdcdc 1px solid;
          padding-top: 5px !important;
          &[type="checkbox"] {
            top: 2px;
            width: 30px !important;
          }
          &.mb_checkbox_background {
            border: 0;
            padding: 0;
            height: 0;
            opacity: 0;
          }
          &.mb_dirty {
            background: #fffac5 !important;
          }
        }
        textarea {
          min-height: 80px;
        }
        .mb_bound_textarea_controls {
          top: 0 !important;
          left: auto !important;
          right: -2px;
          width: 128px !important;
          & > div {
            width: 128px !important;
          }
          a {
            height: 22px;
            background: #ecebe8;
            border: 1px solid #c5c5c5;
            padding: 0;
            margin: 0 0 0 3px;
            width: 60px !important;
            font-size: 12px;
            line-height: 20px;
            &:hover {
              background: #d8d7d6;
            }
          }
        }
        select.mb_fake {
          top: 18px;
          height: 27px !important;
          border: 0;
          width: 100% !important;
          font-family: 'Roboto' !important;
          font-weight: 300 !important;
          font-size: 13px !important;
          cursor: pointer;
          &:focus {
            outline-width: 0;
          }
        }
        .mb_bound_input_check {
          top: 19px !important;
          right: 1px !important;
          z-index: 2;
          a {
            background-color: #63b963;
            border-radius: 0;
            font-size: 18px;
            height: 28px !important;
            padding-top: 3px;
            color: #fff;
            &.loading {
              background-size: 19px;
            }
          }
        }
        .mb_placeholder {
          position: absolute;
          top: 2px !important;
          left: 0 !important;
          padding: 0;
          margin: 0;
          span {
            font-size: 12px;
            font-family: Roboto !important;
            font-weight: 300 !important;
            color: #5f5f5f;
          }
        }
      }
      #media {
        ul.thumbnail_view {
          li.media {
            -webkit-box-flex: 0 0 49%;
            -moz-box-flex: 0 0 49%;
            -webkit-flex: 0 0 49%;
            -ms-flex: 0 0 49%;
            flex: 0 0 49%;
            border: 0;
            margin: 0 0 10px 0;
            padding: 0;
            cursor: pointer;
            span.name {
              opacity: 0;
              font-size: 11px;
              position: absolute;
              left: 0;
              top: 0;
              transition: opacity 200ms ease;
              font-family: Roboto;
              font-weight: 300;
            }
            img {
              display: block;
              max-height: 120px;
            }
            &:hover span.name {
              opacity: 1;
            }
            &.pdf, &.doc, &.docx {
              span.name {
                opacity: 1;
              }
            }
          }
        }
      }
      #uploader {
        #the_uploader {
          .plupload_wrapper {
            min-width: 0;
            font-family: Roboto;
            font-weight: 300;
            font-size: 12px;
            .plupload_container {
              border: 1px solid #cccccc;
            }
            .plupload_header_content {
              height: auto;
              padding: 5px;
              .plupload_logo {
                display: none;
              }
              .plupload_header_title {
                font-family: Roboto;
                font-weight: 300;
                padding: 0 0 3px 0;
                font-size: 14px;
              }
              .plupload_header_text {
                font-family: Roboto;
                font-weight: 300;
                padding: 0 0 3px 0;
                font-size: 12px;
              }
            }
            .plupload_file_name {
              padding: 2px;
            }
            .plupload_buttons {
              float: none;
              width: 100%;
            }
            .plupload_started {
              .plupload_progress {
                width: 100%;
                float: none;
              }
            }
            .plupload_button {
              border: 0;
              background: #404040;
              color: #fff;
              padding: 5px 8px;
              font-size: 12px;
              letter-spacing: 0;
              .ui-icon {
                display: none;
              }
              .ui-button-text {
                padding: 0;
              }
              &:hover {
                background: #0c0c0c;
              }
            }
            .plupload_filelist_footer {
              display: block;
              tbody, tr, td {
                display: block;
                width: 100%;
              }
              td {
                padding: 2px;
                box-sizing: border-box;
                text-align: center;
              }
            }
          }
        }
      }
    }
    #modal_controls {
      margin-top: 20px;
      padding-top: 4px;
      p {
        .caboose-btn {
          margin: 0 0 4px 0;
          background-size: 11px;
          background-repeat: no-repeat;
          background-position: 8px 7px;
          &.select {
            background-image: url('/assets/caboose/icons/right.png');
            background-color: #2f562f;
            &:hover { background-color: shade(#2f562f, 20%);  }
          }
          &.back {
            background-image: url('/assets/caboose/icons/left.png');
            background-color: #484848;
            &:hover { background-color: shade(#484848, 20%);  }
          }
          &.close {
            background-image: url('/assets/caboose/icons/left.png');
            background-color: #3e3e71;
            &:hover { background-color: shade(#3e3e71, 20%);  }
          }
          &.delete {
            background-image: url('/assets/caboose/icons/delete.png');
            background-color: #6f3030;
            &:hover { background-color: shade(#6f3030, 20%);  }
          }
          &.duplicate {
            background-image: url('/assets/caboose/icons/copy.png');
            background-color: #2f562f;
            &:hover { background-color: shade(#2f562f, 20%);  }
          }
          &.moveup {
            background-image: url('/assets/caboose/icons/up.png');
            background-color: #7d673d;
            &:hover { background-color: shade(#7d673d, 20%);  }
          }
          &.movedown {
            background-image: url('/assets/caboose/icons/down.png');
            background-color: #7d673d;
            &:hover { background-color: shade(#7d673d, 20%);  }
          } 
        }
      }
    }
  }
}

#the_modal #modal_content .mb_container table.checkbox_multiple {
  td {
    padding: 5px 10px 10px 0;
  }
  input[type="checkbox"] {
    top: 0;
  }
}

#cboxTopLeft, #cboxTopRight, #cboxBottomLeft, #cboxBottomRight, #cboxMiddleLeft, #cboxMiddleRight, #cboxTopCenter, #cboxBottomCenter, #cboxClose {
  background: #fff !important;
}

// #the_modal #modal_content .mb_container {
//   input, textarea {
//     border: #ccc 1px solid;
//     border-radius: 0 !important;
//     font-family: 'Roboto' !important;
//     font-weight: 300 !important;
//     font-size: 14px !important;
//     padding: 5px;
//     color: #252525;
//     &:focus {
//       outline-width: 0;
//       border-color: #28acc1;
//     }
//   }
//   label {
//     font-family: 'Roboto' !important;
//     font-weight: 300 !important;
//     font-size: 12px !important;
//   }
//   .mb_placeholder {
//     // top: 9px;
//     // left: 8px;
//     span {
//       font-size: 15px;
//       font-family: Roboto !important;
//       font-weight: 300 !important;
//       color: #5f5f5f;
//     }
//   }
// }

.cke_editable:focus {
  outline-color: #c0dcff;
  outline-offset: 7px;
  outline-style: solid;
  outline-width: 2px;
}

.richtext-block {
  z-index: 6;
}
// #colorbox, #cboxOverlay, #cboxWrapper {
//   z-index: 10000000;
// }

body > .ui-draggable-dragging {
  width: 95px;
  height: auto;
  overflow: hidden;
  padding: 6px;
  list-style-type: none;
  font-size: 12px;
  padding: 6px;
  text-align: center;
  background: #ecebe8;
  border: 1px solid #d4d4d4;
  margin-bottom: 0;
  border-radius: 8px;
  font-family: 'Roboto'; font-weight: 300;
  color: #282828;
}

p.caboose_note.delete {
  background: #d24949;
  color: white;
  font-size: 14px;
  line-height: 18px;
  padding: 10px;
  text-align: center;
  position: relative;
  z-index: 15;
  font-family: 'Roboto';
  font-weight: 300;
  input[type="button"] {
    display: inline-block;
    -webkit-appearance: none;
    background-color: #fff;
    border: 0;
    padding: 8px 10px;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 14px;
    margin: 10px 5px 0 5px;
    color: #111;
    width: auto;
    cursor: pointer;
    &:hover {
      background-color: #111;
      color: #fff;
    }
    &:focus {
      outline-width: 0;
    }
  }
}

#caboose-loading {
  display: none;
  position: fixed;
  background: white;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000000;
  text-align: center;
  opacity: 0.95;
  svg#loader {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 10px auto;
  }
  h4 {
    text-transform: uppercase;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 1.2em;
    margin-bottom: 0;
  }
  // opacity: 0;
  // transition: opacity 300ms ease;
  // &.show {
  //   opacity: 0.9;
  // }
}

.ui-draggable.ui-draggable-dragging.block_over {
  opacity: 0.2;
  background-color: transparent;
}

body > .container, body > .mm-page > .container {
  width: 95%;
  width: calc(100vw - 200px);
  float: right;
  position: relative;
  top: 40px;
}
#colorbox:focus {
  outline-width: 0 !important;
}
#colorbox {
  #cboxWrapper {
    border-radius: 0 !important;
  }
}
.modal.colorbox {
  #modal_controls {
    margin-top: 10px;
  }
}

// #modal_content .mb_container textarea {
//   font-family: 'Roboto';
//   font-weight: 300;
//   font-size: 15px;
// }

#tiny_header {
  display: block;  
  color: #fff;
  background-color: #353535;  
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: calc(100% - 200px);
  height: 40px;
  padding: 0 2%;
  line-height: 37px;
  text-align: right;
  transition: background-color 300ms ease;
  #m-pub, #m-unpub {
    float: left;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 13px;
    position: relative;
    top: 1px;
    font-style: italic;
    color: #9e9e9e;
  }
  #m-unpub {
    color: #fff;
  }
  a {
    display: inline-block;
    color: #fff;
    padding: 0 10px 1px 10px;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 12px;
    text-decoration: none;
    background: #5a5a5a;
    margin-left: 8px;
    text-transform: uppercase;
    border-radius: 3px;
    line-height: 28px;
    &[href*="revert"] {
      background: #903b3b;
    }
    &[href*="preview"] {
      background: #404088;
    }
    &[href*="publish"] {
      background: #3b753b;
    }
    &:hover {
      background: #c3c3c3;
      color: #353535;
    }
    &:focus {
      outline-width: 0;
    }
  }
  &.published {
    background-color: #353535;
    #m-unpub { display: none; }
    a[href*="revert"], a[href*="publish"], a[href*="preview"] {
      display: none;
    }
  }
  &.unpublished {
    background-color: #7da4a9;
    #m-pub { display: none; }
  }
}

// .block_over { background: #e3e3e3; }
.select_handle    { display: none; }
// .move_up_handle   { display: none; }
// .move_down_handle { display: none; }
.delete_handle    { display: none; }
.duplicate_handle    { display: none; }
.drag_handle    { display: none; }
.settings_handle    { display: none; }
.block_over > .drag_handle    { display: block; position: relative; z-index: 3; }
.block_over > .select_handle    { display: block; position: relative; z-index: 3; }
// .block_over > .move_up_handle   { display: block; position: relative; z-index: 3; }
// .block_over > .move_down_handle { display: block; position: relative; z-index: 3; }
.block_over > .delete_handle    { display: block; position: relative; z-index: 3; }
.block_over > .duplicate_handle    { display: block; position: relative; z-index: 3; }
.block_over > .settings_handle    { display: block; position: relative; z-index: 3; }
.block_over > .drag_handle      span { position: absolute; top: 0; right: 54px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
.block_over > .settings_handle      span { position: absolute; top: 0; right: 72px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
.block_over > .select_handle    span { position: absolute; top: 0; right: 18px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
// .block_over > .move_up_handle   span { position: absolute; top: 0; right: 36px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
// .block_over > .move_down_handle span { position: absolute; top: 0; right: 18px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
.block_over > .delete_handle    span { position: absolute; top: 0; right:  0px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }
.block_over > .duplicate_handle    span { position: absolute; top: 0; right:  36px; width: 18px; height: 18px; background-color: #fff; border: #ccc 1px solid; }

.flex-grid-unit.block_over > .delete_handle span { right: auto; left: 54px; background-color: #f1e9e9; }
.flex-grid-unit.block_over > .duplicate_handle span { right: auto; left: 18px; background-color: #f1e9e9; }
.flex-grid-unit.block_over > .select_handle span { right: auto; left: 36px; background-color: #f1e9e9; }
.flex-grid-unit.block_over > .drag_handle span { right: auto; left: 0; background-color: #f1e9e9; }
.flex-grid-unit.block_over > .settings_handle span { right: auto; left: 72px; background-color: #f1e9e9; }

.unslider-block-wrapper > .delete_handle,
.unslider-block-wrapper > .drag_handle,
.unslider-block-wrapper > .select_handle,
.unslider-block-wrapper > .duplicate_handle,
.unslider-block-wrapper > .settings_handle {
  z-index: 20;
}

.selected { background: #fff799 !important;
  img {
    opacity: 0.6;
  }
 }

 #caboose-notice {
  position: fixed;
  top: 40px;
  right: 0;
  width: 300px;
  z-index: 1000;
  background: #51883b;
  color: white;
  padding: 10px 12px 11px 12px;
  font-size: 13px;
  text-align: center;
  font-family: 'Roboto';
  font-weight: 300;
  a {
    position: absolute;
    top: 1px;
    left: 5px;
    text-decoration: none;
    color: #fff;
    display: inline-block;
    &:hover {
      color: red;
    }
  }
}

.new_block_link { 
	position: relative;
	width: 100%;
	height: 0;
	background-color: transparent;
	transition: all 300ms ease; 
  &.np {
    height: auto;
  }
	.line {
		position: absolute;
		height: 16px;
		left: 0;
		bottom: -8px;
		width: 100%;
		transition: all 300ms ease;
    z-index: 5;
    &.dropzone {
      background: #dbeff7;
    }
    &.highlight {
      background: shade(#dbeff7, 15%);
    }
    &.new-page {
      text-align: center;
      height: auto;
      bottom: initial;
      top: 0;
      font-family: 'Roboto';
      font-weight: 300;
      padding: 15px 8px;
      background: #ecebe8;
      border: 1px dashed gray;
      position: relative;
      font-size: 14px;
      p {
        color: #1d1d1d;
        font-family: 'Roboto';
        font-weight: 300;
        font-size: 14px;
      }
      &.dropzone {
        background: #dbeff7;
      }
      &.highlight {
        background: shade(#dbeff7, 15%);
        color: transparent;
      }
    }
	}
}

.flex-grid-container.block_over {
  .delete_handle, .delete_handle span {
    z-index: 10;
  }
  .duplicate_handle, .duplicate_handle span {
    z-index: 10;
  }
  .select_handle, .select_handle span {
    z-index: 10;
  }
  .drag_handle, .drag_handle span {
    z-index: 10;
  }
  .flexbox {
    position: relative;
    z-index: 1;
  }
}


.flex-grid-container .flexbox > .new_block_link {
  height: 0;
  width: 0;
  flex: 0 0 0;
  .line {
    background-color: transparent;
    left: -8px;
    bottom: auto;
    top: 0;
    width: 16px;
    height: 70px;
    &.dropzone {
      background: #c8ffca;
    }
    &.highlight {
      background: shade(#c8ffca, 15%);
    }
  }
}

.flex-grid-container.empty {
  & > .flexbox > .new_block_link.np, & > .constrain > .flexbox > .new_block_link.np {
    flex: 1 1 100%;
    width: auto;
    height: auto;
    .new-page.line {
      width: 100%;
      bottom: auto;
      top: auto;
      background: #ecebe8;
      left: 0;
      height: auto;
      z-index: 2;
      &.dropzone {
        background: #c8ffca;
      }
      &.highlight {
        background: shade(#c8ffca, 15%);
      }
    }
  }
}