/*  ----------------------------------------------------------------------------
    fake border (right of the container)
*/
.td-container-border&:after {
  position:absolute;
  bottom:0px;
  right:0px;

  display:block;
  content:'';
  height:100%;
  width:1px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background-color: @td_grid_border_color;
  z-index: 0;
}



/*  ----------------------------------------------------------------------------
    smart sidebar - fix ?
*/
.td-ss-main-sidebar,
.td-ss-row .td-pb-span4 .wpb_wrapper
{
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}



/*  ----------------------------------------------------------------------------
    container
*/
.td-container {
  width: 1021px;
  margin-right: auto;
  margin-left: auto;
  //border-right: 1px solid @td_grid_border_color;
  border-bottom: 1px solid @td_grid_border_color;
  background-color: white;
  position: relative;
  clear: both;
  z-index: 1;
}



/*  ----------------------------------------------------------------------------
    rows
*/
.td-pb-row {
  .mx-row();
  margin-bottom: 0px;
  margin-left: 0px;
  //overflow: hidden;
}

.page {
  .td-pb-row {
    //hide the lines when there is little content
    overflow: hidden;

    .td-pb-row {
      //overflow: inherit; @todo de verificat ca nu e ok cu ea aici http://0div.com:40/wp_010/?page_id=631 cand sunt 2 coloane pe un row
    }
  }
}



/*  ----------------------------------------------------------------------------
    all spans
*/

.td-pb-row [class*="td-pb-span"] {
  .mx-span();

  margin-left: 0px;
  border-left: 1px solid @td_grid_border_color;
  //@todo warining - 1px lipseste intre margin si padding. Daca sunt egale nu mai tine spatiul gol cand coloana e goala
  margin-bottom: -99998px !important;
  padding-bottom: 99999px;
}

// this fix the border style from VC editor is you want to add a border on a column from VC
// ----------------------------------------------------------------------------------------
.wpb_column,
.wpb_row {
  border-style: solid;
  border-width: 0px;
  border-color: @td_grid_border_color;
}



/*  ----------------------------------------------------------------------------
    grid in grid
*/
.td-pb-row .td-pb-row {

  .td-pb-span12 {
    width: 100%;
  }

  .td-pb-span11 {
    width: 91.66%;
  }
  .td-pb-span10 {
    width: 83.33%;
  }

  .td-pb-span9 {
    width: 75%;
  }

  .td-pb-span8 {
    width: 66.66%;
  }

  .td-pb-span7 {
    width: 58.33%;
  }

  .td-pb-span6 {
    width: 50%; //span 6 - is manually sized down ( td-1-col @the_manual_resize )
  }



  .td-pb-span5 {
    width: 41.66%;
  }

  .td-pb-span4 {
    width: 33.33%;
  }

  .td-pb-span3 {
    width: 25%;
  }

  .td-pb-span2 {
    width: 16.66%;
  }

  .td-pb-span1 {
    width: 8.333%;
  }
}


/*  ----------------------------------------------------------------------------
    main grid
*/
.td-pb-span1 {
  width: 85px;
}
.td-pb-span2 {
  width: 170px;
}
.td-pb-span3 {
  width: 255px;
}
.td-pb-span4 {  // td-1-col
  width: 340px;
  position: relative;
}
.td-pb-span5 {
  width: 425px;
}
.td-pb-span6 {
  width: 510px;
}
.td-pb-span7 {
  width: 595px;
}

.td-pb-span8 {  // td-2-col
  width: 680px;

  /*
    one span 8 devided by 2 = td-1-col
    only this span needs fixing, the rest are procentual.
  */
  .td-pb-row {
    width: 680px;
    position: relative;
    left:-1px;
  }

  .td-pb-row div.td-pb-span6 { // td-1-col @the_manual_resize
    width: 340px;
  }


}
.td-pb-span9 {
  width: 765px;
}
.td-pb-span10 {
  width: 850px;
}
.td-pb-span11 {
  width: 935px;
}
.td-pb-span12 {  // td-3-col
  width: 1020px;
}



/*  ----------------------------------------------------------------------------
    black edition cell
*/

.td-pb-full-cell {
  //background-color:#00aba9;
  z-index: 1;
  position: relative;
}


// td-1-col - with background - root
.td-container-border > .td-pb-row > .td-pb-span4 > * > .td-pb-full-cell {
  width: 341px;
  left:-1px;
}

// full cell on a template sidebar
.td-main-sidebar .td-pb-full-cell {
  width: 341px;
  left:-1px;
}

/* when we have a wordpress sidebar added via visual composer that has a block with background. fix for  td-1-col - with background - root */
@media (min-width: @responsive_p_tablet_max) {
  .td-container-border > .td-pb-row > .td-pb-span4 .wpb_widgetised_column  .td-pb-full-cell{
    width: 341px;
    left:-1px;
  }
}

// td-1-col - with background - span 8 -> span 6 (when it's in a column + sidebar layout)
.td-pb-span8 .td-pb-span6 .td-pb-full-cell {
  width: 341px;
  left:-1px;
}


// td-2-col - with background - root
.td-container-border > .td-pb-row > .td-pb-span8 > * > .td-pb-full-cell {
    width: 681px;
    left:-1px;
}

// td-3-col - with background - root
.td-container-border > .td-pb-row > .td-pb-span12 > * > .td-pb-full-cell {
  width: 1021px;
  left:-1px;
}



/*  ----------------------------------------------------------------------------
    padding cell
*/
.td-pb-padding {
  padding: 20px 19px 20px 20px;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
    padding: 17px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    padding: 10px;
  }
}

/*  ----------------------------------------------------------------------------
    padding left-right
*/
.td-pb-padding-side {
  padding: 0px 19px 0px 20px;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
    padding: 0px 17px 0px 17px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    padding: 0px 10px 0px 10px;
  }
}


/*  ----------------------------------------------------------------------------
    margin left-right
*/
.td-pb-margin-side {
  margin: 0px 19px 0px 20px;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
    margin: 0px 17px 0px 17px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    margin: 0px 10px 0px 10px;
  }
}


/*  ----------------------------------------------------------------------------
    padding left-right for default page builder elements
*/
.wpb_content_element {
  padding: 0px 19px 20px 20px;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
    padding: 0px 17px 17px 17px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    padding: 0px 10px 17px 10px;
  }
}

/*  ----------------------------------------------------------------------------
    remove border for first row in container
    @todo check this Radu if is correct
*/
.td-container {
  .td-pb-row:first-child {
    .wpb_wrapper {
      .td_block_wrap:nth-of-type(1) {
        //border-top: 0;
      }
    }
  }
}
.td-container .wpb_row:first-child .td_block_wrap {
  border-top: 0;
}



/*  ----------------------------------------------------------------------------
    border top class for cell
*/

.td-pb-border-top {
  border-top:1px solid @td_grid_border_color;
}


// a border class for elements that need a top border and don't have design option (tabs)
.td-top-border {
  border-top:1px solid @td_grid_border_color !important;
}

// remove left border if you want on a column
.td-no-left-border {
  border-left: 0px !important;
}


/*  ----------------------------------------------------------------------------
    hacks
*/


.wpb_raw_code {
  margin-bottom: 0px !important;
}

.wpb_row, .wpb_content_element, ul.wpb_thumbnails-fluid > li, .last_toggle_el_margin, .wpb_button {
  margin-bottom: 0px;
}

p {
  margin-top: 0px;
}



/*  ----------------------------------------------------------------------------
    visual editor live
*/


/* body.view-mode - in live editor with guides off, body.compose-mode in live editor with guides on */
body.compose-mode, body.view-mode {
  [class*="vc_span"] {
    padding: 0px 0px 0px 0px !important;
  }
}


/* row edit controlls in live edit mode */
body.compose-mode .controls-out-tl {
  top:0px !important;
}



body.compose-mode .controls-bc {
  z-index: 99999;
}
body.compose-mode .control-btn-append {
  top:0px !important;

}