/**
 * Fix lack of .buttons class
 */
.buttons-pimped:first-child { margin-top: 0 !important; }
.buttons-pimped:last-child { margin-bottom: 0 !important; }
.buttons-pimped { position: relative; margin: 24px 0; min-height: 30px; }
.buttons-pimped:before { content: '.'; display: block; height: 0; clear: both; visibility: hidden; margin-bottom: -5px; }

body.ltr .buttons-pimped > .btn, body.ltr .buttons-pimped > .btngroup { float: left; }
body.rtl .buttons-pimped > .btn, body.rtl .buttons-pimped > .btngroup { float: right; }
body.ltr .buttons-pimped > .btn, body.ltr .buttons-pimped > .btngroup { margin: 5px 5px 0 0 ; }
body.rtl .buttons-pimped > .btn, body.rtl .buttons-pimped > .btngroup { margin: 5px 0 0 5px ; }

.buttons-pimped > .btn:first, .buttons-pimped > .btngroup:first { margin-top: 5px !important; }
.border-box + .buttons-pimped, .shadow-box + .buttons-pimped { margin-top: 7px; }
.matrix > .buttons-pimped { margin-top: 0; height: 30px; }



/**
 * Make the configurator fld all red to give some differentiation
 * as it’s not actually a field layout that we’re designing
 */
.modal.pimpmymatrix-configurator .fieldlayoutform,
.modal.pimpmymatrix-configurator .fieldlayoutform h2,
.modal.pimpmymatrix-configurator .fieldlayoutform .fld-field,
.modal.pimpmymatrix-configurator .fieldlayoutform .fld-tab,
.modal.pimpmymatrix-configurator .fieldlayoutform .fld-tab .tabs .tab,
.modal.pimpmymatrix-configurator .fieldlayoutform .fld-tab .fld-tabcontent,
.modal.pimpmymatrix-configurator .fieldlayoutform .fld-tab .icon:before,
.modal.pimpmymatrix-configurator .fieldlayoutform .fld-field .icon:before { color: #da5a47; }

.modal.pimpmymatrix-configurator .fieldlayoutform .fld-tab .tabs .tab,
.modal.pimpmymatrix-configurator .fieldlayoutform .fld-tab .fld-tabcontent,
.modal.pimpmymatrix-configurator .fieldlayoutform .fld-field { border-color: #da5a47; }

.modal.pimpmymatrix-configurator .fieldlayoutform .fld-tab .tabs .tab { border-bottom-color: #f4f3fb; }

.modal.pimpmymatrix-configurator .fieldlayoutform .newtabbtn-container .btn.add {
  color: #da5a47;
  border-color: #da5a47;
}


/**
 * Make our inception modal a bit smaller than the default
 */
.modal.pimpmymatrix-fields-configurator {
  width: 60%;
  height: 60%;
  min-width: 560px;
  min-height: 360px;
}


/**
 * Block level field layouts
 */

/* hide all matrix block fields */
.matrix-field .matrixblock .fields {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
}

/* don’t break blocks that don’t need pimping */
.matrixblock.matrixblock-not-pimped .fields {
  -webkit-opacity: 1 !important;
  -moz-opacity: 1 !important;
  opacity: 1 !important;
}

/* fix for animating and collapsed blocks */
.matrixblock-pimped.collapsed.draghelper .pimpmymatrix-tabs,
.matrixblock-pimped.collapsed.draghelper .pimpmymatrix-fields,
.matrixblock-pimped.velocity-animating .pimpmymatrix-tabs,
.matrixblock-pimped.velocity-animating .pimpmymatrix-fields,
.matrixblock-pimped.collapsed .pimpmymatrix-tabs,
.matrixblock-pimped.collapsed .pimpmymatrix-fields {
  -webkit-opacity: 0 !important;
  -moz-opacity: 0 !important;
  opacity: 0 !important;
}

/* tabs */
.matrixblock-pimped .pimpmymatrix-tabs {
  position: absolute;
  top: 5px;
  right: 76px;
  display: block;
  font-size: 0;
}

.matrixblock-pimped .pimpmymatrix-tabs li {
  display: inline-block;
  font-size: 13px;
}

.matrixblock-pimped .pimpmymatrix-tabs li a {
  display: block;
  padding: 4px 10px;
  color: #777;
  white-space: nowrap;
}

.matrixblock-pimped .pimpmymatrix-tabs li a:hover {
  text-decoration: none;
  color: #0d78f2;
}

.matrixblock-pimped .pimpmymatrix-tabs li a.sel {
  color: #29323d;
  cursor: default;
  background-color: #f9fafa;
  border-radius: 3px 3px 0 0;
  -webkit-box-shadow: 0 -3px 8px -2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 -3px 8px -2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 -3px 8px -2px rgba(0, 0, 0, 0.1);
}

/**
 * Block level settings menu
 */
.pimpmymatrix-settings-menu h6 {
  margin-top: 10px;
  margin-bottom: 0;
  padding-left: 10px;
}


.pimpmymatrix-secondary-menu {
  padding-top: 10px;
}

/**
 * Keep long menus from going offscreen in Live Preview where scrolling is not possible
 *
 * TODO: make the menus open at the correct position so they are more visible
 */
html.noscroll .pimpmymatrix-secondary-menu,
html.noscroll .pimpmymatrix-settings-menu {
  max-height: 50%;
  overflow-y: auto;
  overflow-x: hidden;
}
