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

#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;
  #new_blocks_container2 {
    h4 {
      font-family: 'Roboto';
      font-weight: 300;
      font-size: 1.2em;
      padding: 10px;
      text-align: center;
      height: 52px;
      margin-bottom: 10px;
    }
  }
  #new_blocks {
  	list-style-type: none;
    text-align: center;
    li.title {
      width: 100%;
      clear: both;
      margin: 5px 0;
      span {
        font-size: 15px;
        display: block;
        text-transform: uppercase;
      }
    }
  	li.blocktype {
  		display: inline-block;
  		border: 1px solid #d4d4d4;
      width: 90px;
      height: 70px;
      cursor: move;
      text-align: center;
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 5px;
      padding: 6px;
      background-color: #f9f8f6;
      span[class*=" icon-"] {
        
      }
  		span.bname {
        margin-top: 3px;
  			display: block;
        font-family: 'Roboto';
        font-weight: 300;
  			font-size: 12px;
        border: 0;
  		}
      &.divider {

      }
      &:hover {
        background: #ffffde;
      }
  	}
  }
}

#the_modal #modal_content .mb_container {
  input {
    border: #ccc 1px solid;
    border-radius: 0 !important;
    font-family: 'Roboto' !important;
    font-weight: 300 !important;
    font-size: 15px !important;
    padding: 8px 6px 6px 6px;
  }
  .mb_placeholder {
    top: 9px;
    left: 8px;
    span {
      font-size: 15px;
      font-family: Roboto !important;
      font-weight: 300 !important;
      color: #5f5f5f;
    }
  }
}

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;
}

p.caboose_note.delete {
  background: #d24949;
  color: white;
  font-size: 14px;
  line-height: 18px;
  padding: 20px;
  text-align: center;
  position: relative;
  z-index: 5;
  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;
}
#colorbox:focus {
  outline-width: 0 !important;
}
#colorbox {
  #cboxWrapper {
    border-radius: 0 !important;
  }
}

#tiny_header {
  display: block;  
  color: #fff;
 // background-image: url(/assets/caboose/caboose_logo_small.png);
  background-color: #353535;  
  // background-repeat: no-repeat;
  // background-position: right 0;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100000;
  box-shadow: 0px 2px 3px rgba(10,10,10,0.3);
  padding: 8px 10px 9px 10px;
  a {
    display: inline-block;
    color: #fff;
    padding: 0 10px;
    font-family: 'Roboto';
    font-weight: 300;
    font-size: 15px;
    text-decoration: none;
    line-height: 20px;
    &:hover {
      color: #dbc553;
    }
    &:focus {
      outline-width: 0;
    }
  }
}

// .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; }
.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 > .drag_handle      span { position: absolute; top: 0; right: 54px; 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; }

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

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

.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 .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%);
      }
    }
  }
}