.mx_image_background {
  background-color: #f2f2f2;
}

.td-visibility-hidden { // used to hide date from tc
  visibility: hidden;
}




/*  ----------------------------------------------------------------------------
    from bootstrap
*/

// Clearfix
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: '';
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}

// Border Radius
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}

.transition(@transition1, @transition2) {
  -webkit-transition: @transition1, @transition2;
  -moz-transition: @transition1, @transition2;
  -o-transition: @transition1, @transition2;
  transition: @transition1, @transition2;
}

.transition_important(@transition) {
  -webkit-transition: @transition !important;
  -moz-transition: @transition !important;
  -o-transition: @transition !important;
  transition: @transition !important;
}

.transform-origin(@string) {
  -webkit-transform-origin: @string;
  -moz-transform-origin: @string;
  -o-transform-origin: @string;
  transform-origin: @string;
}


// Opacity
.opacity(@value) {
  @ieval: @value*100;
  opacity: @value;
  -ms-filter: %("progid:DXImageTransform.Microsoft.Alpha(Opacity='%a')", @ieval);
  filter: alpha(opacity=@ieval);
}

// Drop shadows
.box-shadow(@shadow) {
  -webkit-box-shadow: @shadow;
  -moz-box-shadow: @shadow;
  box-shadow: @shadow;
}

// Box sizing
.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
  -moz-box-sizing: @boxmodel;
  box-sizing: @boxmodel;
}

.scale (@factor) {
  -webkit-transform: scale(@factor);
  -moz-transform: scale(@factor);
  -ms-transform: scale(@factor);
  -o-transform: scale(@factor);
}


.toRGBA(@color, @alpha) {
  color: rgba(red(@color), green(@color), blue(@color), @alpha)
}


/*
usage:
.td-block-row {
  .mx-row(td-block-span);
}

@all_span_selector - is the begining of the span selector
 */
.mx-row-and-span(@all_span_selector) {
  .mx-row();

  [class*="@{all_span_selector}"] {
    .mx-span();
  }
}

// make a single row
.mx-row() {
  *zoom: 1;

  &:before,
  &:after {
    display: table;
    content: "";
  }

  &:after {
    clear: both;
  }
}

// make all the spans put it in [class*="span_prefix"] selector
.mx-span() {
  display: block;
  min-height: 1px;
  float: left;

  padding-right: 20px;
  padding-left: 20px;

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

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


.transform(@string){
  transform: @string;
  -webkit-transform: @string;
  -moz-transform: @string;
  -ms-transform: @string;
  -o-transform: @string;
}

.transform_important(@string){
  transform: @string !important;
  -webkit-transform: @string !important;
  -moz-transform: @string !important;
  -ms-transform: @string !important;
  -o-transform: @string !important;
}

.transform_important(@string){
  transform: @string !important;
  -webkit-transform: @string !important;
  -moz-transform: @string !important;
  -ms-transform: @string !important;
  -o-transform: @string !important;
}