.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
  text-shadow: @string;
}
.box-shadow (@string) {
  -webkit-box-shadow: @string;
  -moz-box-shadow:    @string;
  box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
  -moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
  box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
  -webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  -moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
  box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.box-sizing (@type: border-box) {
  -webkit-box-sizing: @type;
  -moz-box-sizing:    @type;
  box-sizing:         @type;
}
.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius:    @radius;
  border-radius:         @radius;
  -moz-background-clip:    padding;
  -webkit-background-clip: padding-box;
  background-clip:         padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
  -webkit-border-top-right-radius:    @topright;
  -webkit-border-bottom-right-radius: @bottomright;
  -webkit-border-bottom-left-radius:  @bottomleft;
  -webkit-border-top-left-radius:     @topleft;
  -moz-border-radius-topright:        @topright;
  -moz-border-radius-bottomright:     @bottomright;
  -moz-border-radius-bottomleft:      @bottomleft;
  -moz-border-radius-topleft:         @topleft;
  border-top-right-radius:            @topright;
  border-bottom-right-radius:         @bottomright;
  border-bottom-left-radius:          @bottomleft;
  border-top-left-radius:             @topleft;
  -moz-background-clip:    padding;
  -webkit-background-clip: padding-box;
  background-clip:         padding-box;
}
.opacity (@opacity: 0.5) {
  -webkit-opacity: 	@opacity;
  -moz-opacity: 		@opacity;
  opacity: 		@opacity;
}
.gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(top, @startColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @endColor);
  background: -ms-linear-gradient(top, @startColor, @endColor);
  background: -o-linear-gradient(top, @startColor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
  background-color: @startColor;
  background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
  background-image: -webkit-linear-gradient(left, @startColor, @endColor);
  background-image: -moz-linear-gradient(left, @startColor, @endColor);
  background-image: -ms-linear-gradient(left, @startColor, @endColor);
  background-image: -o-linear-gradient(left, @startColor, @endColor);
}
.animation (@name, @duration: 300ms, @ease: ease, @delay: 0s, @iteration: infinite ) {
  -webkit-animation: @name @duration @ease @delay @iteration;
  -moz-animation:    @name @duration @ease @delay @iteration;
  -ms-animation:     @name @duration @ease @delay @iteration;
  -o-animation:      @name @duration @ease @delay @iteration;
  animation:        @name @duration @ease @delay @iteration;
}
.transition (@transition) {
  -webkit-transition: @transition;
  -moz-transition:    @transition;
  -ms-transition:     @transition;
  -o-transition:      @transition;
  transition:      @transition;
}
.transform(@string){
  -webkit-transform: @string;
  -moz-transform: 	 @string;
  -ms-transform: 	 @string;
  -o-transform: 	 @string;
  transform: 		 @string;
}
.scale (@factor) {
  -webkit-transform: scale(@factor);
  -moz-transform: 	 scale(@factor);
  -ms-transform: 		 scale(@factor);
  -o-transform: 		 scale(@factor);
}
.rotate (@deg) {
  -webkit-transform: rotate(@deg);
  -moz-transform: 	 rotate(@deg);
  -ms-transform: 		 rotate(@deg);
  -o-transform: 		 rotate(@deg);
  transform: rotate(@deg);
}
.skew (@deg, @deg2) {
  -webkit-transform:       skew(@deg, @deg2);
  -moz-transform: 	 skew(@deg, @deg2);
  -ms-transform: 		 skew(@deg, @deg2);
  -o-transform: 		 skew(@deg, @deg2);
}
.translate (@x, @y:0) {
  -webkit-transform:       translate(@x, @y);
  -moz-transform: 	 translate(@x, @y);
  -ms-transform: 		 translate(@x, @y);
  -o-transform: 		 translate(@x, @y);
  transform:       translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
  -webkit-transform:       translate3d(@x, @y, @z);
  -moz-transform: 	 translate3d(@x, @y, @z);
  -ms-transform: 		 translate3d(@x, @y, @z);
  -o-transform: 		 translate3d(@x, @y, @z);
  transform: 		 translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
  -webkit-perspective: 	@value;
  -moz-perspective: 	@value;
  -ms-perspective: 	@value;
  perspective: 		@value;
}
.transform-origin (@x:center, @y:center) {
  -webkit-transform-origin: @x @y;
  -moz-transform-origin:    @x @y;
  -ms-transform-origin:     @x @y;
  -o-transform-origin:      @x @y;
}
@remBase: 16;
@remCalc-30: unit(-30/@remBase, rem);
@remCalc-20: unit(-20/@remBase, rem);
@remCalc-15: unit(-15/@remBase, rem);
@remCalc-14: unit(-14/@remBase, rem);
@remCalc-10: unit(-10/@remBase, rem);
@remCalc-9: unit(-9/@remBase, rem);
@remCalc-7: unit(-7/@remBase, rem);
@remCalc-6: unit(-6/@remBase, rem);
@remCalc-4: unit(-4/@remBase, rem);
@remCalc-2: unit(-2/@remBase, rem);
@remCalc0: unit(0/@remBase, rem);
@remCalc1: unit(1/@remBase, rem);
@remCalc1_5: unit(1.5/@remBase, rem);
@remCalc2: unit(2/@remBase, rem);
@remCalc3: unit(3/@remBase, rem);
@remCalc4: unit(4/@remBase, rem);
@remCalc5: unit(5/@remBase, rem);
@remCalc6: unit(6/@remBase, rem);
@remCalc7: unit(7/@remBase, rem);
@remCalc8: unit(8/@remBase, rem);
@remCalc9: unit(9/@remBase, rem);
@remCalc10: unit(10/@remBase, rem);
@remCalc11: unit(11/@remBase, rem);
@remCalc12: unit(12/@remBase, rem);
@remCalc13: unit(13/@remBase, rem);
@remCalc14: unit(14/@remBase, rem);
@remCalc15: unit(15/@remBase, rem);
@remCalc16: unit(16/@remBase, rem);
@remCalc17: unit(17/@remBase, rem);
@remCalc18: unit(18/@remBase, rem);
@remCalc19: unit(19/@remBase, rem);
@remCalc20: unit(20/@remBase, rem);
@remCalc22: unit(22/@remBase, rem);
@remCalc23: unit(23/@remBase, rem);
@remCalc24: unit(24/@remBase, rem);
@remCalc25: unit(25/@remBase, rem);
@remCalc26: unit(26/@remBase, rem);
@remCalc27: unit(27/@remBase, rem);
@remCalc28: unit(28/@remBase, rem);
@remCalc30: unit(30/@remBase, rem);
@remCalc32: unit(32/@remBase, rem);
@remCalc34: unit(34/@remBase, rem);
@remCalc35: unit(35/@remBase, rem);
@remCalc36: unit(36/@remBase, rem);
@remCalc38: unit(38/@remBase, rem);
@remCalc40: unit(40/@remBase, rem);
@remCalc41: unit(41/@remBase, rem);
@remCalc44: unit(44/@remBase, rem);
@remCalc45: unit(45/@remBase, rem);
@remCalc50: unit(50/@remBase, rem);
@remCalc54: unit(54/@remBase, rem);
@remCalc55: unit(55/@remBase, rem);
@remCalc58: unit(58/@remBase, rem);
@remCalc60: unit(60/@remBase, rem);
@remCalc64: unit(64/@remBase, rem);
@remCalc65: unit(65/@remBase, rem);
@remCalc70: unit(70/@remBase, rem);
@remCalc74: unit(74/@remBase, rem);
@remCalc75: unit(75/@remBase, rem);
@remCalc76: unit(76/@remBase, rem);
@remCalc80: unit(80/@remBase, rem);
@remCalc82: unit(82/@remBase, rem);
@remCalc83: unit(83/@remBase, rem);
@remCalc85: unit(85/@remBase, rem);
@remCalc100: unit(100/@remBase, rem);
@remCalc105: unit(105/@remBase, rem);
@remCalc128: unit(128/@remBase, rem);
@remCalc138: unit(138/@remBase, rem);
@remCalc150: unit(150/@remBase, rem);
@remCalc155: unit(155/@remBase, rem);
@remCalc200: unit(200/@remBase, rem);
@remCalc270: unit(270/@remBase, rem);
@remCalc300: unit(300/@remBase, rem);
@remCalc350: unit(350/@remBase, rem);
@remCalc438: unit(438/@remBase, rem);
.display-flex( @flow: column, @wrap: nowrap, @justify: center, @align: center )
{
  display: -webkit-box;
  display: -mox-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: -ms-flex;
  display: flex;
  .if ( @flow ) when ( @flow = 'column' )
  {
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    box-orient: vertical;
  }
  .if ( @flow ) when ( @flow = 'row' )
  {
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    box-orient: horizontal;
  }
  -webkit-flex-flow: @flow @wrap;
  -moz-flex-flow: @flow @wrap;
  -ms-flex-flow: @flow @wrap;
  flex-flow: @flow @wrap;
  -webkit-justify-content: @justify;
  -moz-justify-content: @justify;
  -ms-justify-content: @justify;
  justify-content: @justify;
  -webkit-box-pack: @justify;
  -moz-box-pack: @justify;
  -ms-flex-pack: @justify;
  -webkit-box-align: @align;
  -moz-box-align: @align;
  -webkit-align-items: @align;
  -moz-align-items: @align;
  -ms-align-items: @align;
  -ms-flex-align: @align;
  align-items: @align;
}
.set-flex(@level)
{
  -webkit-box-flex: @level;      
  -moz-box-flex: @level;
  -webkit-flex: @level;
  -moz-flex: @level;
  -ms-flex: @level;
  flex: @level;
}
@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
.at2x(@path, @w: auto, @h: auto) {
  background-image: url(@path);
  background-repeat: no-repeat no-repeat;
  background-size: @w @h;
  @at2x_path: replace(@path, "(\.\w+)$", "@2x$1");
  @media @highdpi {
    background-image: url(@at2x_path);
  }
}
.placeholder( @color )
{
  &::-webkit-input-placeholder
  {
    color: @color;
  }
  &:-moz-placeholder
  {
    color: @color;
  }
  &::-moz-placeholder
  {
    color: @color;
  }
  &:-ms-input-placeholder
  {
    color: @color;
  }
}
.calc( @property, @value )
{
  @{property}: ~"calc(@{value})";
}
.darkerColor( @col1, @col2 )
{
  .if ( @col2 ) when ( lightness(@col2) > lightness(@col1) )
  {
    color: darken(@col1, 10%);
  }
  .if ( @col2 ) when ( lightness(@col2) < lightness(@col1))
  {
    color: darken(@col2, 10%);
  }
}
.darkerColor (@a,@b, @property) when (lightness(@a) >= lightness(@b)) {
  @{property}: darken(@b, 10%);
}
.darkerColor (@a,@b, @property) when (lightness(@a) < lightness(@b)) {
  @{property}: darken(@a, 10%);
}
.retina(@path, @cap: 2, @size: "auto auto", @extras: ~"") {
  @lowretina: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";
  @2xpath: replace(@path, "(\.\w+)$", "@2x$1");
  
  background-image: url(@path) @extras;
  background-size: @size;
  
  @media @lowretina {
    background-image: url(@2xpath) @extras;
    background-size: @size;
  }
  
  .create-queries() when (@cap >= 2) {
    .loop(@env) when (@env <= @cap) {
      @retinapath: replace(@path, "(\.\w+)$", "@@{env}x$1");
      @media (-webkit-min-device-pixel-ratio: @env),
      (min-resolution: @env * 96dpi) {
        background-image: url(@retinapath) @extras;
        background-size: @size;
      }
      .loop((@env + 1));    // next iteration
    }
    .loop(2);
  }
  .create-queries();
}
.add-drop-shadow(@elevate: false, @diffused: false, @soft: false) when (@elevate = true) and (@diffused = false) {
    -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.add-drop-shadow(@elevate: false, @diffused: false, @soft: false) when (@elevate = true) and (@diffused = true) {
    -webkit-box-shadow: 0px 3px 5px 3px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 3px 5px 3px rgba(0, 0, 0, 0.08);
}
.add-drop-shadow(@elevate: false, @diffused: false, @soft: false) when (@elevate = false) and (@diffused = false) and (@soft = false) {
    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}
.add-drop-shadow(@elevate: false, @diffused: false, @soft: false) when (@elevate = false) and (@diffused = false) and (@soft = true) {
    -webkit-box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 5px 0px rgba(0, 0, 0, 0.02);
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 5px 0px rgba(0, 0, 0, 0.02);
}
.add-drop-shadow(@elevate: false, @diffused: false, @soft: false) when (@elevate = false) and (@diffused = true) {
    box-shadow: 0px 3px 20px 5px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 3px 20px 5px rgba(0, 0, 0, 0.05);
}
.add-drop-shadow-animation(@attribute: box-shadow)
{
    & when ( @attribute = 'box-shadow')
    {
        transition: -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    & when not( @attribute = 'box-shadow')
    {
      transition: @attribute 280ms cubic-bezier(0.4, 0, 0.2, 1);
    }
}
.ripple()
{
    content: '';
    display: block;
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    border-radius: 25%;
    -webkit-border-radius: 25%;
    transform: scale(0);
    -webkit-transform: scale(0);
    pointer-events: none;
}
.ripple-animation()
{
    //animation: ripple 225ms ease-out;
    -webkit-animation: 225ms mdc-ripple;
    -webkit-animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    animation: 225ms mdc-ripple-fg-radius-in forwards, 75ms mdc-ripple-fg-opacity-in forwards;
}
.overflow-fix()
{
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  //outline: none;
  -webkit-user-select: none;
  -webkit-appearance: none;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate(0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
}
.link(@underline: true)
{
  &  when ( @underline = true )
  {
      text-decoration: underline;
  }
  .transition( color 167ms ease-in);
  color: @linkColor;
  &:hover
  {
      color: darken( @linkColor, 20%);
  }
}
@keyframes mdc-ripple-fg-radius-in {
  from {
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    transform: scale(0.3);
  }
  to {
    transform: scale(1);
  }
}
@keyframes mdc-ripple-fg-opacity-in {
  from {
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    opacity: 0;
  }
  to {
    opacity: 0.4;
  }
}
.make-full-height_mobile()
{
    @media @small-only
    {
        .calc(min-height, ~"100vh - @{remCalc45}");
        margin-top: @remCalc-20;
    }
    @media @medium-only
    {
        .calc(min-height, ~"100vh - @{remCalc45}");
        margin-top: @remCalc-20;
    }
}
.make-full-height_submenu()
{
    @media @small-only
    {
        .calc(min-height, ~"100vh - @{remCalc45} - @{remCalc50}");
        margin-top: @remCalc-20;
    }
    @media @medium-only
    {
        .calc(min-height, ~"100vh - @{remCalc45} - @{remCalc50}");
        margin-top: @remCalc-20;
    }
    @media @large-up
    {
        .calc(min-height, ~"100vh - @{remCalc55}");
        margin-top: @remCalc-20;
    }
    @media @xlarge-up
    {
        .calc(min-height, ~"100vh - @{remCalc75}");
        margin-top: @remCalc-20;
    }
}
.make-full-height_no_submenu() {
    @media @large-up
    {
        .calc(min-height, ~"100vh");
        margin-top: @remCalc-20;
    }
    @media @xlarge-up
    {
        .calc(min-height, ~"100vh");
        margin-top: @remCalc-20;
    }
}
.make-full-height (@includeMobile: false, @includeSubmenu: true) when (@includeMobile = false) and (@includeSubmenu = false) {
    .make-full-height_no_submenu();
}
.make-full-height (@includeMobile: false, @includeSubmenu: true) when (@includeMobile = false) and (@includeSubmenu = true) {
    .make-full-height_submenu();
}
.make-full-height (@includeMobile: false, @includeSubmenu: true) when (@includeMobile = true) and (@includeSubmenu = false) {
    .make-full-height_mobile();
    .make-full-height_no_submenu();
}
.make-full-height (@includeMobile: false, @includeSubmenu: true) when (@includeMobile = true) and (@includeSubmenu = true) {
    .make-full-height_mobile();
    .make-full-height_submenu();
}
.remove-content-page-margins()
{
    margin-left: @remCalc-10;
    margin-right: @remCalc-10;
    margin-top: @remCalc-20;
    @media @medium-up
    {
        margin-left: @remCalc-20;
        margin-right: @remCalc-20;
    }
}
.disable-selection()
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.clearfix() {
  *zoom:1;
  &:before, &:after { content: " "; display: table; }
  &:after { clear: both; }
}
.fixed-button()
{
   .transition(padding-bottom 250ms ease);
    &--fixed
    {
        padding-bottom: @remCalc10;
        padding-top: @remCalc10;
        background: @backgroundColor;
        position: fixed;
        left: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        z-index: 800;
        margin-top: 0;
        margin-bottom: 0;
    }
}
@-webkit-keyframes shake
{
    10%, 90% {
      -webkit-transform: translateX(-1px);
    }
    20%, 80% {
      -webkit-transform: translateX(2px);
    }
    30%, 50%, 70% {
      -webkit-transform: translateX(-4px);
    }
    40%, 60% {
      -webkit-transform: translateX(4px);
    }
}
@keyframes shake
{
    10%, 90% {
      transform: translateX(-1px);
    }
    20%, 80% {
      transform: translateX(2px);
    }
    30%, 50%, 70% {
      transform: translateX(-4px);
    }
    40%, 60% {
      transform: translateX(4px);
    }
}
@-webkit-keyframes bounceInUp
{
    0%,100%,60%,75%,90%
    {
      -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1);
    }
    0%
    {
      opacity: 0;
      -webkit-transform: translateY(3000px);
    }
    60%
    {
      opacity: 1;
      -webkit-transform: translateY(-20px);
    }
    75%
    {
      -webkit-transform: translateY(10px);
    }
    90%
    {
      -webkit-transform: translateY(-5px);
    }
    100%
    {
      -webkit-transform: translateY(0);
    }
}
@keyframes bounceInUp
{
    0%,100%,60%,75%,90%
    {
      animation-timing-function: cubic-bezier(0.215,.61,.355,1)
    }
    0%
    {
      opacity: 0;
      transform: translateY(3000px);
    }
    60%
    {
      opacity: 1;
      transform: translateY(-20px);
    }
    75%
    {
      transform: translateY(10px);
    }
    90%
    {
      transform: translateY(-5px);
    }
    100%
    {
      transform: translateY(0);
    }
}
@keyframes onAutoFillStart {
  0%
  {
      background-color: #fff;
  }
  100%
  {
      background-color: #fff;
  }
}
@keyframes onAutoFillCancel {
  0%
  {
      background-color: #fff;
  }
  100%
  {
      background-color: #fff;
  }
}
@newCol1: #777777;
@newCol2: #ffffff;
// Panel Bg Colour
@newCol3: #ffffff;
// Font colour on panels
@newCol4: #000000;
// Font colour on background
@newCol5: #000000;
@versionFolder: '';
@imagesFolder: '@{versionFolder}images';
@cssFolder: '@{versionFolder}css';
@accentColor: @newCol1;
@accentFontColor: @newCol2;
@panelBgColour: @newCol3;
@fontColourForPanel: @newCol4;
@colorOnBackground: @newCol5;
@actionButtonBackgroundColor: #999999;
@actionButtonFontColor: #fff;
@leftLogoUrl: '@{imagesFolder}/givergy-logo.svg';
@topBarLogoUrl: '@{imagesFolder}/givergy-logo.svg';
@logoutLogoUrl: '@{imagesFolder}/givergy-logo.svg';
@backgroundUrl: '@{imagesFolder}/bg.png';
@font: "open-sans",sans-serif;
@customFontFaces: "";
@errorColor: #D0021B;
@linkColor: #3D95CE;
@backgroundColor: #f5f5f5;
@fontsFolder: '@{versionFolder}fonts';
.webfontsrc(@font, @tag) {
  @srcUrl: '@{fontsFolder}/@{font}.eot';
  @eotSrcUrl: '@{fontsFolder}/@{font}.eot?#iefix';
  @woffSrcUrl: '@{fontsFolder}/@{font}.woff?v=1.101';
  @ttfSrcUrl: '@{fontsFolder}/@{font}.ttf';
  @svgSrcUrl: '@{fontsFolder}/@{font}.svg#@{tag}';
  src: url(@srcUrl);
  src: url(@eotSrcUrl) format('embedded-opentype'),
    url(@woffSrcUrl) format('woff'),
    url(@ttfSrcUrl) format('truetype'),
    url(@svgSrcUrl) format('svg');
}
@font-face {
  font-family: 'open-sans';
  font-weight: normal;
  font-style: normal;
  .webfontsrc('opensans-regular-webfont', 'OpenSansRegular');
}
// @font-face
@font-face {
  font-family: 'open-sans';
  font-weight: normal;
  font-style: italic;
  .webfontsrc('opensans-regularitalic-webfont', 'OpenSansItalic');
}
@font-face {
  font-family: 'open-sans';
  font-weight: bold;
  font-style: normal;
  .webfontsrc('opensans-semibold-webfont', 'OpenSans-Semibold');
}
@form-spacing: 1rem;
@small-range: 0em, 40em;
@small-range-lower: 0em;
@small-range-upper: 40em;
@medium-range: 40.063em, 64em;
@medium-range-lower: 40.063em;
@medium-range-upper: 64em;
@large-range: 64.063em, 90em;
@large-range-lower: 64.063em;
@large-range-upper: 90em;
@xlarge-range: 90.063em, 120em;
@xlarge-range-lower: 90.063em;
@xlarge-range-upper: 120em;
@xxlarge-range: 120.063em;
@screen: "only screen";
@landscape: ~"@{screen} and (orientation: landscape)";
@portrait: ~"@{screen} and (orientation: portrait)";
@small-up: @screen;
@small-only: ~"@{screen} and (max-width: @{small-range-upper})";
@medium-up: ~"@{screen} and (min-width:@{medium-range-lower})";
@medium-only: ~"@{screen} and (min-width:@{medium-range-lower}) and (max-width:@{medium-range-upper})";
@medium-down: ~"@{screen} and (max-width:@{medium-range-upper})";
@large-up: ~"@{screen} and (min-width:@{large-range-lower})";
@large-only: ~"@{screen} and (min-width:@{large-range-lower}) and (max-width:@{large-range-upper})";
@large-down: ~"@{screen} and (max-width:@{large-range-upper})";
@xlarge-up: ~"@{screen} and (min-width:@{xlarge-range-lower})";
@xlarge-only: ~"@{screen} and (min-width:@{xlarge-range-lower}) and (max-width:@{xlarge-range-upper})";
@xlarge-down: ~"@{screen} and (max-width:@{xlarge-range-upper})";
@xxlarge-up: ~"@{screen} and (min-width:@{xxlarge-range})";
// Legacy
@small: @medium-up;
@medium: @medium-up;
@large: @large-up;
.alertify,
.alertify-show,
.alertify-log
{
	-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	   -moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	    -ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	     -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
	        transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275); 
}
.alertify-hide
{
	-webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	   -moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	    -ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	     -o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	        transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
}
.alertify-log-hide
{
	-webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	   -moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	    -ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	     -o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
	        transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045); 
}
.alertify-cover
{
	position: fixed;
	z-index: 99999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #000;
	filter: alpha(opacity=40);
	opacity: 0.4;
}
.alertify-cover-hidden
{
	display: none;
}
.alertify
{
	position: fixed; z-index: 99999;
	top: 50px; left: 50%;
	width: 550px;
	margin-left: -275px;
	opacity: 1;
}
.alertify-hidden
{
	-webkit-transform: translate(0,-150px);
		-moz-transform: translate(0,-150px);
		-ms-transform: translate(0,-150px);
			-o-transform: translate(0,-150px);
			transform: translate(0,-150px);
	opacity: 0;
	display: none;
}
:root *> .alertify-hidden {
	display: block;
	visibility: hidden;
}
.alertify-logs {
	position: fixed;
	z-index: 5000;
	top: 10px;
	margin-left: 1.25rem;
	right: 1.25rem;
	width: 300px;
}
.alertify-logs-hidden {
	display: none;
}
.alertify-log
{
	display: block;
	margin-top: 10px;
	position: relative;
	right: -300px;
	opacity: 0;
}
.alertify-log-show
{
	right: 0;
	opacity: 1;
}
.alertify-log-hide
{
	-webkit-transform: translate(300px, 0);
	-moz-transform: translate(300px, 0);
	-ms-transform: translate(300px, 0);
	-o-transform: translate(300px, 0);
	transform: translate(300px, 0);
	opacity: 0;
}
.alertify-dialog
{
	padding: 25px;
}
.alertify-resetFocus
{
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.alertify-inner
{
	text-align: center;
}
.alertify-text
{
	margin-bottom: 15px;
	width: 100%;
	-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
			box-sizing: border-box;
	font-size: 100%;
}
.alertify-buttons
{
}
.alertify-button,
.alertify-button:hover,
.alertify-button:active,
.alertify-button:visited
{
	background: none;
	text-decoration: none;
	border: none;
	
	line-height: 1.5;
	font-size: 100%;
	display: inline-block;
	cursor: pointer;
	margin-left: 5px;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
}
@media @small-only
{
	.alertify,
	.alertify-logs
	{
		width: auto;
                right: 0.625em;
                //top: 0px;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
		        box-sizing: border-box;
	}
	.alertify {
		left: 5%;
		margin: 0;
	}
}
.alertify,
.alertify-log
{
}
.alertify
{
	background: #FFF;
	-webkit-background-clip: padding;     
	   -moz-background-clip: padding;     
			background-clip: padding-box; 
	.border-radius( @remCalc15 );
	.add-drop-shadow(true, true, true);
}
.alertify-dialog
{
	padding: 0;
}
.alertify-inner
{
	text-align: left;
}
.alertify-message
{
	padding: 15px;
	margin: 0;
	.alertify-message-title
	{
		font-size: @remCalc18;
		font-weight: bold;
	}
	.alertify-message-submessage
	{
		font-size: @remCalc14;
		font-weight: normal;
		color: #7A797A;
	}
}
.alertify-text-wrapper
{
	padding: 0 15px;
}
.alertify-text
{
	color: #555;
	border-radius: 4px;
	padding: 8px;
	background-color: #FFF;
	border: 1px solid #CCC;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.alertify-text:focus
{
	border-color: rgba(82,168,236,.8);
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}
.alertify-buttons
{
	padding: 14px 15px 15px;
	background: #FFF;
	text-align: right;
	.border-radius( @remCalc15 );
}
.alertify-button,
.alertify-button:hover,
.alertify-button:focus,
.alertify-button:active
{
	margin-left: 10px;
	font-weight: normal;
	padding: 4px 12px;
	text-decoration: none;
	font-size: @remCalc18;
}
.alertify-button:focus
{
	outline: none;
}
.alertify-button:active
{
	position: relative;
}
.alertify-button-cancel,
.alertify-button-cancel:hover,
.alertify-button-cancel:focus,
.alertify-button-cancel:active
{
	color: #A0A0A0;
	background-color: #fff;
}
.alertify-button-cancel:hover,
.alertify-button-cancel:focus,
.alertify-button-cancel:active
{
	color: darken(#A0A0A0, 20%);
}
.alertify-button-ok,
.alertify-button-ok:hover,
.alertify-button-ok:focus,
.alertify-button-ok:active {
	color: @accentColor;
	background-color: #fff;
}
.alertify-button-ok:hover,
.alertify-button-ok:focus,
.alertify-button-ok:active
{
	color: darken(@accentColor, 20%);
}
.alertify-log
{
    background: #1F1F1F;
    background: rgba(0,0,0,.9);
    padding: 15px;
    border-radius: 4px;
    color: #FFF;
    line-height: 1.5;
}
.alertify-log-error
{
        background: #f04124;
        background: rgba(240,65,36,.9);
        border: 1px solid #de2b0f;
}
.alertify-log-success
{
        background: #43AC6A;
        background: rgba(67,172,106,.9);
        border: 1px solid #3a945b;
}
.alertify-log-info
{
	background: #efefef;
	background: rgba(239,239,239,.9);
	border: 1px solid darken(#efefef, 10%);
	.clearfix();
	h3
	{
		color: #000;
	}
	p
	{
		color: #555555;
	}
	a,
	a:visited
	{
		color: #000;
		text-decoration: none;
	}
}
.alertify-log-close-button
{
	color: #000;
	position: absolute;
	right: 10px;
	top: 10px;
	width: 14px;
	height: 14px;
    @bgUrl: '@{cssFolder}/images/cross.svg';
	background-image: url(@bgUrl);
}
@minimumLayoutMarginBottom: @remCalc44;
html
{
  font-size: 100%;
  &.with-dialog
  {
      overflow: hidden;
  }
}
body {
  background: @backgroundColor;
  color: @colorOnBackground;
  font-family: @font;
  .grecaptcha-badge {
      visibility: hidden;
  }
}
[data-abide] .error small.error,
[data-abide] span.error,
[data-abide] small.error
{
   background: transparent;
   font-size: @remCalc14;
}
figure
{
    margin: 0;
}
.off-canvas
{
    .top-bar
    {
      @colMenuIcon: #000000;
      background: #f5f5f5;
      &__title
      {
          &__logo
          {
            background: url(@topBarLogoUrl) no-repeat center center;
            background-size: auto 100%;
            background-position: right;
            margin-right: @remCalc10;
          }
      }
      &__menu__icon {
        span  {
          -webkit-box-shadow: 1px 10px 1px 1px @colMenuIcon,
          1px 16px 1px 1px @colMenuIcon,
          1px 22px 1px 1px @colMenuIcon;
          box-shadow: 0 10px 0 1px @colMenuIcon,
          0 16px 0 1px @colMenuIcon,
          0 22px 0 1px @colMenuIcon;
        }
        &:hover span {
          .add-box-shadow(@colMenuIconHover) {
            -webkit-box-shadow: 1px 10px 1px 1px @colMenuIconHover,
            1px 16px 1px 1px @colMenuIconHover,
            1px 22px 1px 1px @colMenuIconHover;
            box-shadow: 0 10px 0 1px @colMenuIconHover,
            0 16px 0 1px @colMenuIconHover,
            0 22px 0 1px @colMenuIconHover;
          }
          & when (@colMenuIcon = #000000) {
             .add-box-shadow(lighten(@colMenuIcon, 30%));
          }
          & when not(@colMenuIcon = #000000) {
             .add-box-shadow(darken(@colMenuIcon, 30%));
          }
        }
      }
      &__menu__text
      {
        color: @colMenuIcon;
      }
      &__search
      {
        &__text
        {
            color: @colMenuIcon;
        }
        &__icon
        {
          svg
          {
              fill: @colMenuIcon;
          }
        }
      }
    }
    .top-subbar
    {
      background-color: transparent;
      &__item
      {
        color: @accentFontColor;
          &::after {
              background-color: darken(@accentColor, 20%);
          }
      }
    }
    &__inner-wrap
    {
      &__content
      {
        padding-top: @remCalc20;
        padding-left: @remCalc10;
        padding-right: @remCalc10;
        
        > *
        {
           position: relative;
        }
      }
      &__loader
      {
        width: 100%;
        height: 100vh;
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        background: #f5f5f5;
        z-index: 900;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        &--show
        {
          display: block;
        }
        &__content
        {
            position: absolute;
            left: 50%;
            top: 50%;
            .translate(-50%,-50%);
            .translate3d(-50%,-50%,0);
            width: auto;
            height: auto;
            color: @colorOnBackground;
            font-size: @remCalc16;
            word-wrap: break-word;
            white-space: nowrap;
            @media @xlarge-up
            {
                font-size: @remCalc20;
            }
            &:before
            {
                content:  "";
                display: inline-block;
                white-space: nowrap;
                border: solid @remCalc2 transparent;
                border-top-color: @colorOnBackground;
                border-left-color: @colorOnBackground;
                .border-radius( @remCalc10 );
                .animation(pace-spinner, 400ms, linear, 0s, infinite);
                width:  @remCalc14;
                height:  @remCalc14;
                position: relative;
                top:  @remCalc1;
                @media @xlarge-up
                {
                    width:  @remCalc20;
                    height:  @remCalc20;
                    border-width: @remCalc3;
                    top:  @remCalc2;
                }
            }
            &--with-message
            {
                &:before
                {
                  margin-right:  @remCalc10;
                  @media @xlarge-up
                  {
                      margin-right:  @remCalc15;
                  }
                }
            }
        }
      }
    }
    &__left-menu
    {
      background: #fff;
      &--logged
      {
          [data-menu-name="Login"],
          [data-menu-name="Register"]
          {
             display: none !important;
          }
          [data-menu-name="My Account"],
          [data-menu-name="Log Out"],
          [data-menu-name="My Bids"]
          {
              display: block !important;
          }
      }
      &__list {
        &__logo-wrapper
        {
            padding: 0px @remCalc15;
            &__logo {
                width: 100%;
                height: @remCalc150;
                margin-top: @remCalc10;
                margin-bottom: @remCalc10;
                background: url(@leftLogoUrl) no-repeat center center;
                background-size: contain;
                @media @medium-up
                {
                  margin-top: @remCalc15;
                  margin-bottom: @remCalc15;
                }
                @media @xlarge-up
                {
                    margin-top: @remCalc30;
                    margin-bottom: @remCalc30;
                }
            }
        }
        &__item
        {
          a
          {
             span
             {
                color: #000;
             }
          }
          &--skiplinks
          {
              display: block;
              width: 100%;
              a
              {
                 width: 0;
                 height: 0;
                 color: #000;
                 display: block;
                 text-align: center;
                 &:focus
                 {
                    width:auto;
                    height:auto;
                    margin-top: @remCalc5;
                 }
              }
          }
          &--selected,
          &:hover
          {
            a
            {
              span
              {
                font-weight: bold;
                color: #000;
                &::before
                {
                  background-color: @accentColor;
                }
              }
            }
          }
        }
        &__separator
        {
          .calc( width, ~"100% - @{remCalc20}" );
          margin-left: @remCalc10;
        }
        &__social-media-links
        {
          .display-flex(row, nowrap, flex-start, flex-end);
          .set-flex(1 1 auto);
          margin-bottom: @remCalc0;
          margin-top: @remCalc20;
          padding-left: @remCalc15;
          padding-right: @remCalc15;
          min-height: @remCalc32;
          @media @xlarge-up
          {
              margin-top: @remCalc40;
              min-height: @remCalc40;
          }
          .icon
          {
            width: @remCalc32;
            height: @remCalc32;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding: 0;
            margin: 0 @remCalc15 0 0;
            cursor: pointer;
            transition: fill 500ms ease-in-out;
            &:last-of-type
            {
               margin-right: 0;
            }
            &:hover
            {
            }
          }
          .facebook-link
          {
              fill: #44619d;
              &:hover
              {
                fill: darken( #44619d, 20% );
              }
          }
          .twitter-link
          {
              fill: #2AA9E0;
              &:hover
              {
                fill: darken( #2AA9E0, 20% );
              }
          }
          .linkedin-link
          {
              fill: #0077B5;
              &:hover
              {
                fill: darken( #0077B5, 20% );
              }
          }
          .instagram-link
          {
              fill: #E1306C;
              &:hover
              {
                fill: darken( #E1306C, 20% );
              }
          }
          .youtube-link
          {
                fill: #FF0000;
                &:hover
                {
                  fill: darken( #FF0000, 20% );
                }
          }
          .vimeo-link
          {
                fill: #51BAEE;
                &:hover
                {
                  fill: darken( #51BAEE, 20% );
                }
          }
          .snapchat-link
          {
            fill: #FFFC00;
            &:hover
            {
              fill: darken( #FFFC00, 20% );
            }
          }
          .tikTok-link
          {
            fill: #000000;
            &:hover
            {
              fill: lighten( #000000, 50% );
            }
          }
        }
        &__givergy-logo
        {
          a {
            padding-top: @remCalc20;
            padding-left: @remCalc15;
            padding-right: @remCalc15;
            padding-bottom: @remCalc10;
            img
            {
                width: 100%;
                height: @remCalc58;
            }
            @media @xlarge-up
            {
                padding-top: @remCalc40;
                padding-bottom: @remCalc20;
            }
          }
        }
      }
      [data-menu-name="Log Out"], [data-menu-name="My Account"], [data-menu-name="My Bids"]
      {
          display: none;
      }
    }
    &__banner
    {
        background-color: transparent;
        color: #fff;
        font-size: @remCalc14;
        &--error
        {
          background: @errorColor;
        }
        &--show
        {
           transition-delay: 0s, 0s;
           background-color: #6a9ce2;
        }
    }
    &--show-subbar
    {
        .top-subbar
        {
            transition-delay: 0s, 0s;
            background-color: @accentColor;
        }
    }
}
// if touch device
.touch
{
  .off-canvas__left-menu__list
  {
	&__item:not(.selected)
	{
	  a:hover
	  {
		span {
		  color: #000 !important;
		}
	  }
	}
  }
}
.off-screen
{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.skipwrapper
{
    margin: 0;
}
.user-is-tabbing
{
  *:focus
  {
      outline-width: 5px;
      outline-style: solid;
      outline-color: Highlight;
  }
  .litecheckbox
  {
    input
    {
        &:focus
        {
            ~ label
            {
                border: #3d95ce @remCalc5 solid;
                &::after
                {
                  top: @remCalc3;
                  left: @remCalc2;
                }
            }
        }
    }
  }
  
  @media (-webkit-min-device-pixel-ratio:0)
  {
    *:focus
    {
      outline-color: -webkit-focus-ring-color;
      outline-style: auto;
    }
  }
}
// components
.loader
{
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background: #f5f5f5;
  z-index: 1001;
  &:before
  {
      position: absolute;
      content: "";
      left: 50%;
      top: 50%;
      .calc( left, ~"50% - @{remCalc7}" );
      .calc( top, ~"50% - @{remCalc7}" );
      
      width:  @remCalc14;
      height:  @remCalc14;
      border: solid @remCalc2 transparent;
      border-top-color: #000;
      border-left-color: #000;
      .border-radius( @remCalc10 );
      .animation(pace-spinner, 400ms, linear, 0s, infinite);
  }
  &--semiopacity
  {
    opacity: 0.5;
  }
}
.error-data-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  min-height: @remCalc50;
  .error-data {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    white-space: nowrap;
    .translate(-50%, -50%) !important;
    .translate3d(-50%,-50%,0) !important;
  }
}
.a-search
{
  position: relative;
  @search-color: #828282;
  input
  {
    background: #1e1e1e;
    display: block;
    padding-left:  @remCalc30;
    width: 100%;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    margin: 0;
    .border-radius( @remCalc15 ) !important;
    border-color: #1e1e1e;
    color: @search-color;
    box-shadow: none;
    //line-height: 1.2;
    &:focus {
      background: #1e1e1e;
      border-color: #1e1e1e;
      outline: none;
      .box-shadow ( none );
    }
    .placeholder( @search-color );
  }
  svg
  {
    display: block;
    position: absolute;
    left:  @remCalc13;
    top:  @remCalc7;
    width:  @remCalc11;
    height:  @remCalc11;
    fill: #828282;
  }
  &:before
  {
    content:  "";
    position: absolute;
    display: none;
    right:  @remCalc30;
    top:  @remCalc7;
    width:  @remCalc14;
    height:  @remCalc14;
    @border-width: @remCalc2;
    border: solid @border-width transparent;
    border-top-color: #29d;
    border-left-color: #29d;
    border-radius:  @remCalc10;
    .animation( pace-spinner 400ms linear infinite );
  }
  &.show
  {
    &:before
    {
      display: inline-block;
    }
  }
}
.a-select
{
  position: relative;
  &:before
  {
    content:  "";
    position: absolute;
    display: none;
    right:  @remCalc30;
    top:  @remCalc12;
    width:  @remCalc14;
    height:  @remCalc14;
    @border-width: @remCalc2;
    border: solid @border-width transparent;
    border-top-color: #29d;
    border-left-color: #29d;
    .border-radius( @remCalc10 );
    -webkit-animation: pace-spinner 400ms linear infinite;
    -moz-animation: pace-spinner 400ms linear infinite;
    -ms-animation: pace-spinner 400ms linear infinite;
    -o-animation: pace-spinner 400ms linear infinite;
    animation: pace-spinner 400ms linear infinite;
  }
  &.center:before
  {
    left:  @remCalc10;
    top:  @remCalc8;
    right: initial;
    right: auto;
  }
  &.show
  {
    &:before
    {
      display: inline-block;
    }
  }
}
@buttonSuccessBgColor: #3786d5;
@buttonSuccessTextColor: #fff;
@buttonValidBgColor: @accentColor;
@buttonValidTextColor: @accentFontColor;
@buttonErrorBgColor: @errorColor;
@buttonErrorTextColor: contrast(@buttonErrorBgColor, #000, #fff);
.a-button
{
    .display-flex(row, nowrap, center, center);
    border-width: 0;
    background-color: @accentColor;
    color: @accentFontColor;
    white-space: normal;
    text-overflow: ellipsis;
    margin: 0;
    position: relative;
    width: auto;
    &:hover,
    &:focus
    {
        background-color: darken(@accentColor, 20%);
    }
    &::after
    {
        background-color: lighten(@accentColor, 20%);
    }
    &__label
    {
        //margin: 0 auto;
        &--ellipsis
        {
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
    &__loader
    {
        display: none;
        position: absolute;
        left:  @remCalc22;
        top:  @remCalc11;
        width:  @remCalc14;
        height:  @remCalc14;
        @border-width: @remCalc2;
        border: solid @border-width transparent;
        border-top-color: @accentFontColor;
        border-left-color: @accentFontColor;
        .border-radius( @remCalc10 );
        .animation (pace-spinner, 400ms, linear, 0s, infinite );
    }
    &__thick
    {
        display: none;
        position: absolute;
        left:  @remCalc22;
        top:  @remCalc11;
        width:  @remCalc15;
        height: @remCalc13;
        svg
        {
          width:  @remCalc15;
          height: @remCalc13;
          position: absolute;
          top: 0;
          left: 0;
        }
        fill: #fff;
    }
    &__exclamation
    {
        display: none;
        position: absolute;
        left:  @remCalc22;
        top:  @remCalc8;
        width:  @remCalc20;
        height: @remCalc20;
        svg
        {
          width:  @remCalc20;
          height: @remCalc20;
          position: absolute;
          top: 0;
          left: 0;
          circle
          {
              fill: #fff;
          }
          path
          {
              fill: @buttonErrorBgColor;
          }
        }
    }
    &--round
    {
        .border-radius( @remCalc40 );
        .overflow-fix();
        overflow: hidden;
        padding-left: @remCalc50;
        padding-right: @remCalc50;
        &.a-button--small-padding
        {
            padding-left: @remCalc20;
            padding-right: @remCalc20;
        }
        &::after
        {
          .ripple();
        }
        &:hover
        {
            .add-drop-shadow(true);
        }
    }
    &--bigger
    {
        height: @remCalc54;
        font-size: 100%;
        @media @medium-up
        {
            font-size: 120%;
        }
        &.a-button
        {
            &--round
            {
                padding-left: @remCalc60;
                padding-right: @remCalc60;
            }
            &--small-padding
            {
                padding-left: @remCalc30;
                padding-right: @remCalc30;
            }
        }
        .a-button__loader
        {
            left:  @remCalc25;
            top: @remCalc17;
            width:  @remCalc20;
            height:  @remCalc20;
            @border-width: @remCalc3;
        }
        .a-button__thick
        {
          left:  @remCalc30;
          top: @remCalc19;
          width:  @remCalc20;
          height: @remCalc16;
          svg
          {
            width:  @remCalc20;
            height: @remCalc16;
          }
        }
        .a-button__exclamation
        {
            left:  @remCalc22;
            top:  @remCalc15;
            width:  @remCalc25;
            height: @remCalc25;
            svg
            {
              width:  @remCalc25;
              height: @remCalc25;
            }
        }
    }
    &--grey
    {
        background-color: @actionButtonBackgroundColor;
        color: @actionButtonFontColor;
        &:hover,
        &:focus
        {
            background-color: contrast(@backgroundColor, darken(@actionButtonBackgroundColor, 20%), lighten(@actionButtonBackgroundColor, 20%));
            color: @actionButtonFontColor;
        }
        &:after
        {
            background-color: lighten(@actionButtonBackgroundColor, 20%);
        }
        .a-button__loader
        {
            border-top-color: @actionButtonFontColor;
            border-left-color: @actionButtonFontColor;
        }
        .a-button__thick
        {
            fill: @actionButtonFontColor
        }
    }
    &--focused
    {
        &.a-button
        {
            &--round
            {
                .add-drop-shadow(true);
                &::after
                {
                    .ripple-animation();
                }
            }
        }
    }
    &--loading
    {
        .a-button
        {
            &__loader
            {
                display: block;
            }
            &__exclamation
            {
                display: none;
            }
            &__thick
            {
                display: none;
            }
        }
    }
    &--valid
    {
        background: @buttonValidBgColor;
        color: @buttonValidTextColor;
        &:hover,
        &:focus
        {
            background: @buttonValidBgColor;
            color: @buttonValidTextColor;
        }
    }
    &--invalid
    {
        background: @buttonErrorBgColor;
        color: @buttonErrorTextColor;
        &:hover,
        &:focus
        {
            background: @buttonErrorBgColor;
            color: @buttonErrorTextColor;
        }
        .a-button
        {
            &__loader
            {
                display: none;
            }
            &__exclamation
            {
                display: block;
            }
            &__thick
            {
                display: none;
            }
        }
    }
    &--saved
    {
        background: @buttonSuccessBgColor;
        color: @buttonSuccessTextColor;
        &:hover,
        &:focus
        {
            background: @buttonSuccessBgColor;
            color: @buttonSuccessTextColor;
        }
        .a-button
        {
            &__loader
            {
                display: none;
            }
            &__exclamation
            {
                display: none;
            }
            &__thick
            {
                display: block;
            }
        }
    }
    &--small-padding
    {
        padding-left: @remCalc20;
        padding-right: @remCalc20;
    }
    &--reverse
    {
        background-color: @accentFontColor;
        color: @accentColor;
        border: @remCalc1 solid @accentColor;
        &:hover,
        &:focus
        {
            background-color: lighten(@accentColor, 20%);
            color: @accentColor;
            box-shadow: none;
        }
        &::after
        {
            background-color: lighten(@accentFontColor, 20%);
        }
    }
}
.litecheckbox {
  width: @remCalc20;
  height: @remCalc20;
  position: relative;
  margin: 0;
  @media @large-up
  {
      width: @remCalc30;
      height: @remCalc30;
  }
  label {
    width: @remCalc20;
    height: @remCalc20;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    background: #fff;
    
    border: @remCalc1 solid #dddddd;
    .border-radius( @remCalc4 );
    //.box-shadow( ~"inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5)" );
    @media @large-up
    {
        width: @remCalc30;
        height: @remCalc30;
    }
    &:after {
      content: '';
      width: @remCalc12;
      height: @remCalc6;
      position: absolute;
      top: @remCalc5;
      left: @remCalc4;
      border: @remCalc2 solid @colorOnBackground;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      .rotate(-45deg);
      @media @large-up
      {
          width: @remCalc19;
          height: @remCalc9;
          top: @remCalc7;
          left: @remCalc6;
          border-width: @remCalc2;
      }
    }
    &:hover::after {
      opacity: 0.0;
    }
  }
  &.small{
    width: @remCalc14;
    height: @remCalc14;
    label {
      width: @remCalc14;
      height: @remCalc14;
      .border-radius( @remCalc3 );
      //.box-shadow( ~"inset 0px 1px 1px white, 0px 1px 2px rgba(0, 0, 0, 0.5)" );
      &:after {
        width: @remCalc9;
        height: @remCalc6;
        top: @remCalc3;
        left: @remCalc3;
      }
    }
  }
  input[type=checkbox] {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 0;
    + label {
      margin: 0;
    }
    &:checked + label:after {
      opacity: 1;
    }
  }
  input[type="checkbox"] + label {
    display: inline-block;
    margin: 0;
    vertical-align: baseline;
  }
  input[type="checkbox"]:disabled + label{
    border: none;
    background: white;
    box-shadow: inset 0 0px 0px rgba(255, 255, 255, 0);
    cursor: default;
    &:hover::after{
      opacity: 0;
    }
  }
  input[type="checkbox"]:not(:checked):disabled + label {
    &:after {
      content: '✖';
      opacity: 1;
      border:0px;
      top: @remCalc3;
      left: @remCalc3;
      color: #333;
      .rotate(0deg);
    }
    &:hover::after{
    }
  }
}
.literadio {
  width: @remCalc20;
  height: @remCalc20;
  position: relative;
  margin: 0 0 0 0;
  display: inline-block;
  label {
    width: @remCalc20;
    height: @remCalc20;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    .border-radius( @remCalc50);
    .box-shadow( ~"inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5)" );
    &:after {
      content: '';
      width: @remCalc16;
      height: @remCalc16;
      position: absolute;
      top: @remCalc2;
      left: @remCalc2;
      background: @remCalc5 @colorOnBackground;
      opacity: 0;
      .border-radius(@remCalc50);
    }
    &:hover::after {
      opacity: 0.0;
    }
  }
  input[type=radio] {
    visibility: hidden;
    margin: 0;
    + label {
      margin: 0;
    }
    &:checked + label:after {
      opacity: 1;
    }
  }
}
.table
{
  display: table;
}
.table-row
{
  display: table-row;
}
.table-cell
{
   display: table-cell;
}
.gmail-button,
.facebook-button,
.twitter-button,
.email-button,
.whatsapp-button,
.snapchat-button
{
  .display-flex(row, nowrap, flex-start, center);
  .transition(all 300ms ease);
  height:  @remCalc30;
  cursor: pointer;
  width: 100%;
  margin: 0;
  padding: 0;
  span {
    color: #fff;
    padding-left:  @remCalc10;
    font-size:  @remCalc12;
    @media @medium-up {
      font-size:  @remCalc12;
    }
    display: block;
  }
}
.gmail-button {
  background-color: #a82d22;
  .gmail {
    height:  @remCalc13;
    width:  @remCalc18;
    margin-left:  @remCalc10;
    display: block;
  }
  &:hover
  {
    background: darken( #a82d22, 20% );
  }
}
.facebook-button {
  background: #44619d;
  .facebook {
    height:  @remCalc14;
    width:  @remCalc6;
    margin-left:  @remCalc10;
    display: block;
  }
  &:hover
  {
    background: darken( #44619d, 20% );
  }
}
.twitter-button {
  background: #2AA9E0;
  span {
    color: #fff;
  }
  .twitter {
    height:  @remCalc12;
    width:  @remCalc15;
    margin-left:  @remCalc10;
    display: block;
  }
  &:hover
  {
    background: darken( #2AA9E0, 20% );
  }
}
.email-button
{
    background: #666666;
    span{
      color: #fff;
    }
    .email {
      height:  @remCalc12;
      width:  @remCalc17;
      margin-left:  @remCalc10;
      display: block;
  }
  &:hover
  {
      background: darken( #666666, 20% );
  }
}
.whatsapp-button
{
    background: #075E54;
    span{
      color: #fff;
    }
    .whatsapp {
      height:  @remCalc12;
      width:  @remCalc17;
      margin-left:  @remCalc10;
      display: block;
  }
  &:hover
  {
      background: darken( #075E54, 20% );
  }
}
.snapchat-button
{
  background: #FFFC00;
  span{
    color: #000;
  }
  .snapchat {
    height:  @remCalc14;
    width:  @remCalc14;
    margin-left:  @remCalc10;
    display: block;
  }
  &:hover
  {
    background: darken( #FFFC00, 20% );
  }
}
.facebook-share,
.twitter-share,
.email-share,
.whatsapp-share,
.snapchat-share
{
  svg
  {
    margin-left:  @remCalc10 !important;
  }
  span
  {
    padding-left:  @remCalc7 !important;
    padding-right:  @remCalc7 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &:hover
  {
    outline: none;
    box-shadow: 0 0 @remCalc5 #2B72D5;
  }
}
.givergy-button
{
  border-right: solid @remCalc4 #a63981 !important;
  border-left: solid @remCalc4 #2594c5 !important;
  background: rgba(0,0,0,.75) !important;
  &:before,
  &:after{
    position: absolute;
    z-index: 1;
    display: block;
    width: 100%;
    height: 4px;
    content: '';
    background-color: #2594c5;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF2594C5', endColorstr='#FFA63981');
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiP…dpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0 50%, 100% 50%, color-stop(0, #2594c5), color-stop(14%, #0958a6), color-stop(28%, #273968), color-stop(42%, #332779), color-stop(57%, #5e3764), color-stop(71%, #821f82), color-stop(87%, #841e82), color-stop(100%, #a63981));
    background-image: -moz-linear-gradient(left, #2594c5 0, #0958a6 14%, #273968 28%, #332779 42%, #5e3764 57%, #821f82 71%, #841e82 87%, #a63981 100%);
    background-image: -webkit-linear-gradient(left, #2594c5 0, #0958a6 14%, #273968 28%, #332779 42%, #5e3764 57%, #821f82 71%, #841e82 87%, #a63981 100%);
    background-image: linear-gradient(to right, #2594c5 0, #0958a6 14%, #273968 28%, #332779 42%, #5e3764 57%, #821f82 71%, #841e82 87%, #a63981 100%);
  }
  &:before{
    top: 0;
    left: 0;
  }
  &:after{
    bottom: 0;
    left: 0;
  }
  &:hover{
    background: #54237d !important;
    border-right-color: #54237d !important;
    border-left-color: #54237d !important;
    &:before,
    &:after{
      background: #54237d;
    }
  }
}
.no-data{
  a:not(.button)
  {
    margin: 0;
    color: @colorOnBackground;
    text-decoration: underline;
    font-size: 1rem;
    font-weight: bold;
    display: inline;
  }
}
.input-text
{
    border: solid 1px #dddddd;
    background-color: #ffffff;
    border-radius: @remCalc10;
}
.button-box-shadow
{
    box-shadow: @remCalc0 @remCalc1_5  @remCalc2 @remCalc1 #cccccc;
}
.tooltip-info
{
  @bgUrl: '@{imagesFolder}/tooltip/info2.svg';
  background-image: url(@bgUrl);
  background-size: 100% 100%;
  background-position: 0 0;
  width: @remCalc25;
  height: @remCalc25;
  left: @remCalc20;
  position: absolute;
  bottom: @remCalc20;
  &.small
  {
    width: @remCalc18;
    height: @remCalc18;
    &.inline
    {
      padding: @remCalc17 0;
      margin-left: @remCalc5;
    }
    &.inline-text {
      margin-bottom: @remCalc-4;
    }
  }
}
.round-button
{
    width: @remCalc50;
    height: @remCalc50;
    border-radius: 50%;
    position: relative;
    .overflow-fix();
    .transition( background-color 167ms ease-in);
    .disable-selection();
    &::after
    {
        .ripple();
    }
    &__label
    {
        font-size: @remCalc40;
        position: absolute;
        .disable-selection();
    }
    &--focused
    {
        &::after
        {
            .ripple-animation();
        }
    }
    &--remove
    {
        background-color: #999999;
        color: #fff;
        &::after
        {
            background-color: darken(#999999, 20%);
        }
        &:hover
        {
            background-color: darken( #999999, 20%);
        }
        &:visited
        {
            background-color: #999999;
        }
        .round-button__label
        {
            top: @remCalc-9;
            left: @remCalc19;
            &::before
            {
                content: "-";
                display: inline;
            }
        }
    }
    &--add
    {
        background-color: @accentColor;
        color: @accentFontColor;
        &::after
        {
            background-color: lighten(@accentColor, 20%);
        }
        &:hover
        {
            background-color: darken( @accentColor, 20%);
        }
        &:visited
        {
            background-color: @accentColor;
        }
        .round-button__label
        {
            top: @remCalc-6;
            left: @remCalc14;
            &::before
            {
                content: "+";
                display: inline;
            }
        }
    }
}
.i-button
{
  display: inline-block;
  width: @remCalc35;
  height: @remCalc30;
  border: @remCalc1 solid #ccc;
  border-bottom: @remCalc3 solid #ccc;
  .border-radius(@remCalc4);
  .gradient(#ffffff, #f5f5f5);
  margin-right: @remCalc3;
  margin-bottom: @remCalc16;
  .transition(background);
  position: relative;
  box-sizing: content-box;
  &:last-child
  {
    margin-right: 0;
  }
  a
  {
    width: 100%;
    height: 100%;
    position: relative;
    display: block;
    .thick {
      display: none;
    }
    > * {
      position: absolute;
      left: 50%;
      top: 50%;
      .translate(-50%, -50%);
    }
  }
  &__loader
  {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    color: #000;
    background: #fff;
    &:before
    {
      content: "";
      position: absolute;
      display: inline-block;
      .calc( left, ~"50% - @{remCalc7}" );
      .calc( top, ~"50% - @{remCalc7}" );
      width: @remCalc14;
      height: @remCalc14;
      border: solid @remCalc2 transparent;
      border-top-color: #bc0a7f;
      border-left-color: #bc0a7f;
      border-radius: @remCalc10;
      -webkit-animation: pace-spinner 400ms linear infinite;
      -moz-animation: pace-spinner 400ms linear infinite;
      -ms-animation: pace-spinner 400ms linear infinite;
      -o-animation: pace-spinner 400ms linear infinite;
      animation: pace-spinner 400ms linear infinite;
      margin-right: @remCalc10;
    }
  }
  &--loading
  {
      .i-button
      {
          &__loader
          {
              display: block;
          }
      }
  }
  &--do-stop
  {
    z-index: 1000;
    right: @remCalc10;
    top: @remCalc10;
    position: absolute;
    box-shadow: 0px @remCalc1 @remCalc2 @remCalc0 rgba(126, 126, 126, 0.5);
    a
    {
        fill: #ed1c24;
    }
  }
  &:hover,
  &:focus
  {
    .gradient(lighten(#f5f5f5, -10%), lighten(#f5f5f5, -10%));
  }
}
.progress-wrapper
{
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  .progress
  {
    .calc( top, ~"50% - @{remCalc10}" );
    left: 40%;
    width: 20%;
    height: @remCalc20;
    position: absolute;
    .meter
    {
        .box-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
    }
  }
}
.imagelightbox-loading
{
    width: 100wh;
    height: 100vh;
    position: fixed;
}
.switch
{
  position: relative;
  display: block;
  width: @remCalc54;
  height: @remCalc24;
  input
  {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
  }
  .slider
  {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d7d9db;
    -webkit-transition: .4s;
    transition: .4s;
  }
  .slider:before
  {
    position: absolute;
    content: "";
    height: @remCalc20;
    width: @remCalc20;
    left: @remCalc2;
    bottom: @remCalc2;
    background-color: #fff;
    -webkit-transition: .4s;
    transition: .4s;
  }
  input:checked + .slider {
    background-color: #76D571;
  }
  input:focus + .slider {
    box-shadow: 0 0 @remCalc1 #76D571;
  }
  input:checked + .slider:before
  {
    -webkit-transform: translateX(@remCalc30);
    -ms-transform: translateX(@remCalc30);
    transform: translateX(@remCalc30);
  }
  
  .slider.round
  {
    border-radius: @remCalc30;
  }
  .slider.round:before {
    border-radius: 50%;
  }
}
.input-counter
{
  position: absolute;
  top: @remCalc22;
  right: @remCalc10;
  color: @inputFontColor;
  font-size: @remCalc12;
  &::after
  {
    clear: both;
  }
  span
  {
    &.max
    {
      color: @inputErrorColor;
    }
  }
}
.socialButtons
{
  width: 100%;
  &__title {
      font-weight: bold;
  }
  &__buttons
  {
    margin-top:  @remCalc10;
    .display-flex(row, wrap, space-between, center);
    margin-right: @remCalc-10;
    &__button
    {
        margin-top:  @remCalc10;
        margin-right:  @remCalc10;
        min-width: @remCalc105;
        text-decoration: none !important;
        .set-flex(1);
        @media @large-up
        {
        }
        &:last-of-type
        {
            //margin-right:  @remCalc0;
        }
    }
  }
}
.gallery
{
    &__scroller
    {
        height: 100%;
        width: 100%;
        &__item
        {
          padding: 0;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: top center;
          height: 100%;
          width: 100%;
        }
    }
    &__overlay
    {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: @accentColor;
      opacity: 1;
      z-index: 101;
    }
}
.place-bid-form,
.buy-now-form,
.raffle-form
{
    background: @accentColor;
    margin: 0;
    position: relative;
    bottom: 0;
    width: 100%;
    left: 0;
    overflow: visible;
    z-index: 200;
    > .row-flex-center
    {
      margin: 0;
    }
    .amount-wrapper
    {
      background: #fff;
      border: @remCalc1 solid #bbb;
      .border-radius(@remCalc4);
    }
    .currency-wrapper
    {
      padding-right: @remCalc5;
    }
    .number-text-input
    {
      background: #fff;
      border: @remCalc1 solid #bbb;
      .border-radius(@remCalc4);
      input
      {
        padding: @remCalc5;
      }
      .error
      {
        left: @remCalc0 !important;
      }
    }
    .currency
    {
      font-size: @remCalc18;
      line-height: 100%;
      color: #4d4d4d;
      font-weight: normal;
      margin-bottom: 0;
      display: block;
      .display-flex(column, nowrap, center, center);
    }
    input
    {
      background: transparent;
      color: #4d4d4d;
      border: 0px none;
      margin: 0;
      height: @remCalc38;
      width: 100%;
      padding-right: @remCalc10;
      //line-height: normal;
      line-height: 100%;
      padding-top: 0rem;
      padding-bottom: 0rem;
      padding-left: 0rem;
      .placeholder( #66717b );
      &::-webkit-input-placeholder
      {
          line-height: normal;
          font-size: @remCalc18;
      }
      &:-moz-placeholder
      {
        font-size: @remCalc18;
      }
      &::-moz-placeholder
      {
        font-size: @remCalc18;
      }
      &:-ms-input-placeholder
      {
        line-height: normal;
        font-size: @remCalc18;
      }
      &.error
      {
        color: darken(#ff0000, 10%);
        .placeholder( #66717b );
      }
      &[name=amount]
      {
          font-size: @remCalc18;
      }
    }
    .copy
    {
        color: #ffffff;
        text-align: center;
    }
    small.error
    {
      position: absolute;
      margin: 0 !important;
      top: @remCalc7 !important;
      left: @remCalc-30 !important;
      padding: 0.375rem 0.5625rem 0.5625rem !important;
      .transition( all 300ms ease-in ) !important;
      .translate(0, 0 );
      .translate3d(0, 0, 0);
      z-index: -1 !important;
      white-space: nowrap !important;
      font-size: @remCalc13 !important;
      height: auto !important;
      width: auto !important;
      opacity: 0;
    }
    .error
    {
      small.error
      {
        .translate(0, -100% );
        .translate3d(0, -100%, 0);
        opacity: 1;
        color: @accentFontColor;
      }
      input
      {
        color: #ff0000;
      }
      &::-webkit-input-placeholder
      {
        color: #ff0000;
      }
      &:-moz-placeholder
      {
        color: #ff0000;
      }
      &::-moz-placeholder
      {
        color: #ff0000;
      }
      &:-ms-input-placeholder
      {
        color: #ff0000;
      }
    }
    [type=submit],
    [type=button]
    {
      padding-left: @remCalc15;
      padding-right: @remCalc15;
      padding-top: @remCalc7;
      padding-bottom: @remCalc7;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: @accentFontColor;
      color: @accentColor;
      margin: 0;
      width: 100%;
      font-size: @remCalc18;
      @media @medium-up
      {
          padding-left: @remCalc40;
          padding-right: @remCalc40;
      }
      &:hover
      {
        background: contrast(@accentFontColor, lighten(@accentFontColor,20%), darken(@accentFontColor,20%));
      }
    }
    .auction-closed
    {
        h3
        {
          color: @accentFontColor;
          margin: 0;
        }
    }
    .textAreaRow {
        margin-top: @remCalc15;
        margin-bottom: @remCalc25;
        .text-area__field
        {
            top: @remCalc20;
            &--empty
            {
                opacity: 1;
            }
            &::placeholder
            {
                font-size: @remCalc14;
            }
        }
        .input-counter {
            top: @remCalc155;
            color: @accentFontColor;
        }
    }
}
.buy-now-form,
.raffle-form
{
    .auction-open
    {
        text-align: center;
        .a-button
        {
           display: inline-block;
           width: 50%;
        }
    }
}
.raffle-form
{
  small.error
  {
      left: @remCalc0!important;
  }
}
.categories
{
    padding: @remCalc10 @remCalc0 @remCalc30 @remCalc0;
    @media @medium-up
    {
        padding: @remCalc20 @remCalc0 @remCalc20 @remCalc0;
        width: 60%;
        margin: 0 auto;
    }
    @media @xlarge-up
    {
        width: 40%;
    }
    &__item
    {
        .display-flex( row,  nowrap, flex-start, center );
        margin-bottom:  @remCalc20;
        width: 100%;
        height: @remCalc80;
        background: #fff;
        overflow: hidden;
        position: relative;
        padding:  @remCalc20  @remCalc10;
        text-decoration: none !important;
        .border-radius(@remCalc5);
        .add-drop-shadow(false, true);
        .add-drop-shadow-animation(all);
        @media @medium-up
        {
            padding:  @remCalc25  @remCalc20;
            margin-bottom:  @remCalc25;
            height: auto;
        }
        @media @xlarge-up
        {
            padding:  @remCalc40  @remCalc20;
            margin-bottom:  @remCalc30;
            height: auto;
        }
        &:hover
        {
            .add-drop-shadow(true, true);
            background-color: darken(#fff, 5%);
        }
        &::after
        {
            background-color: darken(#fff, 20%);
            .ripple();
        }
        &__icon
        {
            width: @remCalc32;
            height: @remCalc32;
            fill: #7f7f7f;
            @media @medium-up
            {
                width: @remCalc32;
                height: @remCalc32;
            }
            @media @xlarge-up
            {
                width: @remCalc40;
                height: @remCalc40;
            }
        }
        &__label
        {
            font-size: @remCalc18;
            .set-flex(1);
            margin-left:  @remCalc10;
            margin-right:  @remCalc10;
            color: #222;
            @media @medium-up
            {
                font-size: @remCalc24;
                margin-left:  @remCalc20;
                margin-right:  @remCalc20;
            }
            @media @xlarge-up
            {
                font-size: @remCalc28;
                margin-left:  @remCalc30;
                margin-right:  @remCalc30;
            }
        }
        &__button
        {
            background-color: #999999;
            color: #fff;
            border-radius:  @remCalc20;
            padding:  @remCalc5  @remCalc20;
        }
        &--selected
        {
            background: #222;
            .categories
            {
                &__item
                {
                    &__icon
                    {
                        fill: #ffffff;
                    }
                    &__label
                    {
                        color: #fff;
                    }
                    &__button
                    {
                        background-color: #fff;
                        color: #000;
                    }
                }
            }
            &:hover
            {
                background-color: lighten(#222, 10%);
            }
        }
        &--focused
        {
            &::after
            {
                .ripple-animation();
            }
        }
        &:last-of-type
        {
            margin-bottom:  @remCalc0;
        }
    }
}
.touch
{
  .categories
  {
    &__item
    {
        &:hover
        {
            box-shadow: 0px 3px 20px 5px rgba(0, 0, 0, 0.05);
            background: #fff;
        }
        &.special:hover
        {
        }
    }
  }
}
.search-bar
{
    input[type=text]
    {
        background: #fff;
        border: 0 none;
        color: #000;
        .border-radius(@remCalc5);
        font-size: @remCalc16;
        padding: @remCalc10 @remCalc10;
        height: auto;
        width: 100%;
        .placeholder( #000 );
        .add-drop-shadow(false, true);
        .add-drop-shadow-animation();
        @media @medium-up
        {
            font-size:  @remCalc20;
            padding: @remCalc13 @remCalc13;
        }
        @media @xlarge-up
        {
            font-size:  @remCalc24;
            padding: @remCalc15 @remCalc15;
        }
        &:focus
        {
            .add-drop-shadow(true, true);
        }
    }
    .a-button
    {
        height: auto;
        padding: @remCalc8 @remCalc20;
        margin-left: @remCalc10;
        height: 100%;
        @media @medium-up
        {
            padding: @remCalc10 @remCalc40;
            margin-left: @remCalc20;
        }
        @media @xlarge-up
        {
            padding: @remCalc10 @remCalc40;
            margin-left: @remCalc20;
            height: @remCalc54;
        }
    }
    small.error
    {
        margin-bottom: 0px;
        position: absolute;
        left: 0;
        z-index: 1000;
        color: @colorOnBackground;
    }
}
@inputFontColor: #283036;
@inputErrorColor: #D0021B;
@inputValidColor: #047329;
.input
{
   // .display-flex(row, nowrap, flex-start, center);
    display: block;
    height: @remCalc64;
    margin: 0 0 @remCalc15 0;
    position: relative;
    overflow: visible;
    cursor: text;
    .border-radius(@remCalc10);
    .add-drop-shadow(false, true);
    .add-drop-shadow-animation();
    background: #fff;
    @media @medium-up
    {
        margin: 0 0 @remCalc20 0;
    }
    &--focused
    {
       // implementation scroll down
    }
    &--loading
    {
        &:before
        {
            content:  "";
            position: absolute;
            display: block;
            right:  @remCalc15;
            top:  @remCalc22;
            width:  @remCalc20;
            height:  @remCalc20;
            @border-width: @remCalc2;
            border: solid @border-width transparent;
            border-top-color: #000;
            border-left-color: #000;
            .border-radius( @remCalc10 );
            -webkit-animation: pace-spinner 400ms linear infinite;
            -moz-animation: pace-spinner 400ms linear infinite;
            -ms-animation: pace-spinner 400ms linear infinite;
            -o-animation: pace-spinner 400ms linear infinite;
            animation: pace-spinner 400ms linear infinite;
        }
    }
    &__field
    {
       // implementation scroll down
    }
    &__label
    {
       // implementation scroll down
    }
    &__icon
    {
      // implementation scroll down
    }
    &__invalid-bar
    {
        -webkit-text-size-adjust: none;
        position: absolute;
        left: 0;
        bottom: @remCalc-7;
        background-color: @inputErrorColor;
        height: @remCalc10;
        width: 100%;
        .translate3d(0, 100%, 0);
    }
    &__icon
    {
        width: @remCalc25;
        height: @remCalc25;
        left: @remCalc20;
        position: absolute;
        bottom: @remCalc20;
        z-index: 9;
        &--right
        {
          top: @remCalc20;
          right: @remCalc15;
          left: auto;
          bottom: auto;
        }
        &--clickable
        {
            cursor: pointer;
        }
        &--show-password
        {
          width: @remCalc25;
          height: @remCalc25;
          top: @remCalc20;
          z-index: 10;
          .transition(all 150ms ease);
          &--on
          {
              fill: @buttonSuccessBgColor;
          }
        }
        &--tick
        {
          width: @remCalc20;
          height: @remCalc17;
          top: @remCalc23;
          fill: @inputValidColor;
          display: block;
          opacity: 0;
          .transition( opacity 150ms ease);
        }
    }
    &--with-no-label
    {
        .input__field
        {
            top:  @remCalc22;
        }
    }
    &--small
    {
        height: @remCalc40;
        .border-radius( @remCalc5 );
        .input
        {
            &__field
            {
                top: @remCalc9;
                font-size: @remCalc14;
            }
            &__icon
            {
                &--right
                {
                    top: @remCalc11;
                }
            }
        }
    }
}
.input--focused
{
    .add-drop-shadow(true, true);
}
.input__label
{
    position: absolute;
    .calc( width, ~"100% - @{remCalc40}");
    left: @remCalc20;
    top: @remCalc19;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform-origin: 0 50%;
    transition-property: color, transform;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: scale(0.85) translateY(-20px);
    transform: scale(0.85) translate3d(0,-20px,0);
    color: #000;
    z-index: 2;
    font-size: @remCalc16;
    -webkit-text-size-adjust: none;
    @media @medium-up
    {
        font-size: @remCalc18;
        bottom: @remCalc17;
    }
    @media @xlarge-up
    {
        font-size: @remCalc20;
    }
    &--extra
    {
        font-size: @remCalc12;
        @media @small-only
        {
            font-size: @remCalc8;
            bottom: @remCalc13;
        }
        @media @medium-up
        {
            font-size: @remCalc14;
            bottom: @remCalc15;
        }
        @media @xlarge-up
        {
            font-size: @remCalc14;
            bottom: @remCalc13;
        }
    }
    &--with-left-icon
    {
        left: @remCalc60;
        .calc( width, ~"100% - @{remCalc80}" );
    }
    &--with-right-icon
    {
      .calc( width, ~"100% - @{remCalc65}" );
    }
    &--with-right-2icons
    {
        .calc( width, ~"100% - @{remCalc65}" );
    }
    &--with-left-icon.input__label--with-right-icon
    {
        .calc( width, ~"100% - @{remCalc65} - @{remCalc40}" );
    }
    &--with-left-icon.input__label--with-right-2icons
    {
        .calc( width, ~"100% - @{remCalc65} - @{remCalc50}" );
    }
}
.input__field
{
    display: block;
    position: absolute;
    left: @remCalc20;
    bottom: @remCalc12;
    padding: 0;
    margin: 0;
    font-size: @remCalc18;
    height: @remCalc22;
    line-height: @remCalc22;
    font-family: sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    .calc( width, ~"100% - @{remCalc40}");
    outline: 0;
    border: none;
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
    color: @inputFontColor;
    .placeholder( lighten(@inputFontColor, 20%) );
    border-bottom: 0 none;
    @media @medium-up
    {
        font-size: @remCalc20;
        height: @remCalc24;
        line-height: @remCalc24;
        bottom: @remCalc10;
    }
    @media @xlarge-up
    {
        font-size: @remCalc22;
        height: @remCalc26;
        line-height: @remCalc26;
        bottom: @remCalc8;
    }
    &--empty
    {
        opacity: 0;
        + .input__label, + .input__label .input__label--extra
        {
            transform: scale(1) translateY(0px);
            color: lighten(@inputFontColor, 20%);
        }
        &.input__field--invalid
        {
            + .input__label
            {
                -webkit-animation: shake 500ms linear both;
                animation: shake 500ms linear both;
                animation-delay: 0.2s;
            }
        }
    }
    &--focused
    {
        opacity: 1;
        + .input__label
        {
            transform: scale(0.85) translateY(-20px);
            color: #000;
            cursor: default;
        }
        &.input
        {
            &__field
            {
                &--invalid
                {
                    + .input__label
                    {
                        -webkit-animation: none !important;
                        animation: none !important;
                    }
                }
            }
        }
    }
    &--invalid
    {
        -webkit-animation: shake 500ms linear both;
        animation: shake 500ms linear both;
        .placeholder( lighten(@inputErrorColor, 20%) );
        color: @inputErrorColor;
        > *,
        > input
        {
            color: @inputErrorColor;
        }
        + .input__label
        {
            color: @inputErrorColor;
            > *
            {
                color: @inputErrorColor;
            }
        }
        + .input__label + .input__invalid-bar {
          -webkit-animation: bounceInUp 500ms linear both;
          animation: bounceInUp 500ms linear both;
        }
    }
    &--valid
    {
        ~ .input__icon--tick
        {
            opacity: 1;
        }
        ~ .input__icon--show-password
        {
            right: @remCalc45;
        }
    }
    &--with-left-icon
    {
        left: @remCalc60;
        .calc( width, ~"100% - @{remCalc80}" );
    }
    &--with-right-icon
    {
      .calc( width, ~"100% - @{remCalc65}" );
    }
    &--with-right-2icons
    {
        .calc( width, ~"100% - @{remCalc65}" );
        &.input__field--valid
        {
            .calc( width, ~"100% - @{remCalc100}" );
        }
    }
    &--with-left-icon.input__field--with-right-icon
    {
        .calc( width, ~"100% - @{remCalc65} - @{remCalc25}" );
    }
    &--with-left-icon.input__field--with-right-2icons
    {
        .calc( width, ~"100% - @{remCalc65} - @{remCalc50}" );
        &.input__field--valid
        {
            .calc( width, ~"100% - @{remCalc65} - @{remCalc75}" );
        }
    }
}
.inputRow
{
    margin-bottom: @remCalc20;
    &__label
    {
        display: block;
        font-size: @remCalc16;
        margin-bottom: @remCalc10;
    }
    &--disabled
    {
        margin-bottom: 0;
        .inputRow__label
        {
            color: #7D7C7D;
            margin-bottom: 0;
        }
    }
    .input
    {
        margin-bottom: @remCalc0;
        &--disabled
        {
            background: transparent;
            box-shadow: none;
            .input__field
            {
                left: 0;
            }
            .input__label
            {
                color: #7D7C7D;
                left: 0;
            }
            .mandatory
            {
                display: none;
            }
            &.input--with-no-label
            {
                height: @remCalc24;
                .input__field
                {
                    top: 0;
                }
            }
        }
    }
    &.error
    {
        input
        {
            .placeholder( lighten(@inputErrorColor, 20%) );
        }
        small.error
        {
            padding-bottom: 0;
            font-size: @remCalc14;
            margin-bottom: 0;
            width: 100%;
            text-transform: none;
        }
    }
    &__hint
    {
        display: block !important;
        height: auto !important;
        font-size: @remCalc14 !important;
        width: 100% !important;
        padding: @remCalc6 @remCalc9 @remCalc0 @remCalc9 !important;
        color: @colorOnBackground !important;
    }
}
@inputFontColor: #283036;
@inputErrorColor: #D0021B;
@inputValidColor: #047329;
.text-area
{
   // .display-flex(row, nowrap, flex-start, center);
    display: block;
    height: @remCalc270;
    margin: 0 0 @remCalc15 0;
    position: relative;
    overflow: visible;
    cursor: text;
    .border-radius(@remCalc10);
    .add-drop-shadow(false, true);
    .add-drop-shadow-animation();
    background: #fff;
    @media @medium-up
    {
        margin: 0 0 @remCalc20 0;
    }
    &--small {
        height: @remCalc150;
    }
    &--focused
    {
       // implementation scroll down
    }
    &__field
    {
       // implementation scroll down
    }
    &__label
    {
       // implementation scroll down
    }
    &__icon
    {
      // implementation scroll down
    }
    &__invalid-bar
    {
        -webkit-text-size-adjust: none;
        position: absolute;
        left: 0;
        bottom: @remCalc-7;
        background-color: @inputErrorColor;
        height: @remCalc10;
        width: 100%;
        .translate3d(0, 100%, 0);
    }
    &__icon
    {
        width: @remCalc25;
        height: @remCalc25;
        left: @remCalc20;
        position: absolute;
        bottom: @remCalc20;
        &--right
        {
          top: @remCalc20;
          right: @remCalc15;
          left: auto;
          bottom: auto;
        }
        &--clickable
        {
            cursor: pointer;
        }
    }
}
.text-area--focused
{
    .add-drop-shadow(true, true);
}
.text-area__label
{
    position: absolute;
    .calc( width, ~"100% - @{remCalc40}");
    left: @remCalc20;
    top: @remCalc19;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    white-space: nowrap;
    transform-origin: 0 50%;
    transition-property: color, transform;
    transition-duration: 0.3s;
    color: #000;
    z-index: 2;
    font-size: @remCalc16;
    -webkit-text-size-adjust: none;
    @media @medium-up
    {
        font-size: @remCalc18;
        bottom: @remCalc17;
    }
    @media @xlarge-up
    {
        font-size: @remCalc20;
        bottom: @remCalc15;
    }
    &--extra{
        font-size: @remCalc12;
            @media @medium-up
            {
                font-size: @remCalc14;
                bottom: @remCalc15;
            }
            @media @xlarge-up
            {
                font-size: @remCalc16;
                bottom: @remCalc13;
            }
    }
    &--with-left-icon
    {
        left: @remCalc60;
        .calc( width, ~"100% - @{remCalc80}" );
    }
    &--with-right-icon
    {
      .calc( width, ~"100% - @{remCalc65}" );
    }
    &--with-right-2icons
    {
        .calc( width, ~"100% - @{remCalc65}" );
    }
    &--with-left-icon.text-area__label--with-right-icon
    {
        .calc( width, ~"100% - @{remCalc65} - @{remCalc25}" );
    }
    &--with-left-icon.text-area__label--with-right-2icons
    {
        .calc( width, ~"100% - @{remCalc65} - @{remCalc50}" );
    }
}
.text-area__field
{
    display: block;
    z-index: 3;
    position: absolute;
    left: @remCalc20;
    bottom: @remCalc12;
    top: @remCalc60;
    padding: 0;
    margin: 0;
    height: auto;
    border: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    resize: none;
    font-size: @remCalc18;
    line-height: @remCalc22;
    font-family: sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    .calc( width, ~"100% - @{remCalc40}");
    background-color: transparent;
    -webkit-tap-highlight-color: transparent;
    color: @inputFontColor;
    .placeholder( lighten(@inputFontColor, 20%) );
    border-bottom: 0 none;
    @media @medium-up
    {
        font-size: @remCalc20;
        line-height: @remCalc24;
        bottom: @remCalc10;
    }
    @media @xlarge-up
    {
        font-size: @remCalc22;
        line-height: @remCalc26;
        bottom: @remCalc8;
    }
    &--empty
    {
        opacity: 0;
        + .text-area__label, + .text-area__label .text-area__label--extra
        {
          color: lighten(@inputFontColor, 20%);
        }
    }
    &--focused
    {
        opacity: 1;
        + .text-area__label
        {
          color: #000;
          cursor: default;
        }
    }
    &:focus{
        background: unset;
        border-color: unset;
        box-shadow: unset;
    }
    &--invalid
    {
        -webkit-animation: shake 500ms linear both;
        animation: shake 500ms linear both;
        .placeholder( lighten(@inputErrorColor, 20%) );
        color: @inputErrorColor;
        > *
        {
            color: @inputErrorColor;
        }
        + .text-area__label
        {
            color: @inputErrorColor;
            > *
            {
                color: @inputErrorColor;
            }
        }
        + .text-area__label + .input__invalid-bar {
          -webkit-animation: bounceInUp 500ms linear both;
          animation: bounceInUp 500ms linear both;
        }
    }
    &--with-left-icon
    {
        left: @remCalc60;
        .calc( width, ~"100% - @{remCalc80}" );
    }
    &--with-right-icon
    {
      .calc( width, ~"100% - @{remCalc65}" );
    }
    &--with-right-2icons
    {
        .calc( width, ~"100% - @{remCalc65}" );
        &.text-area__field--valid
        {
            .calc( width, ~"100% - @{remCalc100}" );
        }
    }
    &--with-left-icon.text-area__field--with-right-icon
    {
        .calc( width, ~"100% - @{remCalc65} - @{remCalc25}" );
    }
    &--with-left-icon.text-area__field--with-right-2icons
    {
        .calc( width, ~"100% - @{remCalc65} - @{remCalc50}" );
        &.text-area__field--valid
        {
            .calc( width, ~"100% - @{remCalc65} - @{remCalc75}" );
        }
    }
}
.textAreaRow {
    margin-bottom: @remCalc20;
    .text-area
    {
        margin-bottom: @remCalc0;
    }
    &.error
    {
        text-area
        {
            .placeholder( lighten(@inputErrorColor, 20%) );
        }
        small.error {
            padding-bottom: 0;
            font-size: @remCalc14;
            margin-bottom: 0;
            width: 100%;
            text-transform: none;
        }
    }
    &__hint
    {
        display: block !important;
        height: auto !important;
        font-size: @remCalc14 !important;
        width: 100% !important;
        padding: @remCalc6 @remCalc9 @remCalc0 @remCalc9 !important;
    }
}
@inputFontColor: #283036;
@inputErrorColor: #D0021B;
.select
{
    &:extend(.input);
    height: @remCalc82;
    &--focused
    {
        &:extend(.input--focused);
    }
    &__label
    {
        &:extend(.input__label);
        // transform: scale(0.85) translateY(-40px);
        // transform: scale(0.85) translate3d(0,-40px,0);
    }
    &__field
    {
        &:extend(.input__field);
        height: @remCalc41;
        padding: @remCalc8 @remCalc40 @remCalc8 @remCalc8;
        margin-bottom: 0;
        .transition( width 150ms ease );
        &--invalid
        {
            -webkit-animation: shake 500ms linear both;
            animation: shake 500ms linear both;
            .placeholder( @inputErrorColor );
            color: @inputErrorColor;
            + .select__label
            {
                color: @inputErrorColor;
            }
            + .select__label + .select__invalid-bar {
                -webkit-animation: bounceInUp 500ms linear both;
                animation: bounceInUp 500ms linear both;
            }
        }
        &--valid
        {
            &.select__field--with-right-icon
            {
                .calc( width, ~"100% - @{remCalc80}" );
            }
            ~ .select__icon--tick
            {
                opacity: 1;
            }
        }
        &--with-right-icon
        {
        }
    }
    &__icon
    {
        width: @remCalc25;
        height: @remCalc25;
        left: @remCalc20;
        position: absolute;
        bottom: @remCalc20;
        &--right
        {
          top: @remCalc20;
          right: @remCalc25;
          left: auto;
          bottom: auto;
        }
        &--clickable
        {
            cursor: pointer;
        }
        &--tick
        {
          width: @remCalc20;
          height: @remCalc17;
          top: @remCalc38;
          fill: @inputValidColor;
          display: block;
          opacity: 0;
          .transition( opacity 150ms ease 150ms );
        }
    }
}
.inputRow
{
    .select
    {
        margin-bottom: @remCalc0;
    }
}
.credit-card-form
{
    width: 100%;
    position: relative;
    @creditCardFontColor: #283036;
    @creditCardErrorColor: #D0021B;
    @creditCardLinkColor: #3D95CE;
    .small
    {
       font-size: @remCalc14;
    }
    .loader
    {
        background: @backgroundColor;
        .calc( width, ~"100% + @{remCalc30}");
        .calc( height, ~"100% + @{remCalc30}");
        top: @remCalc-15;
        left: @remCalc-15;
        z-index: 700;
    }
    .show-payment-form > .card-label
    {
        margin: 0;
    }
    .payment-method-icon
    {
        display: none;
        position: absolute;
        left: auto;
        right: @remCalc14;
        .calc( top, ~"50% - @{remCalc14}" );
        text-indent: -999em;
        width: @remCalc44;
        height: @remCalc28;
        background-repeat: no-repeat;
        border: @remCalc1 solid transparent;
        .border-radius(@remCalc1);
        .retina('images/cards_sprite.png', 1.5, 86px auto);
        &.visa,
        &.visaelectron
        {
          display: block;
          background-position: 0 -380px;
        }
        &.maestro
        {
          display: block;
          background-position: 0 -240px;
        }
        &.amex
        {
          display: block;
          background-position: 0 -352px
        }
        &.mastercard
        {
          display: block;
          background-position: 0 -268px;
        }
        &.dinersclub
        {
          display: block;
          background-position: 0 -128px;
        }
        &.discover
        {
          display: block;
          background-position: 0 -156px;
        }
        &.jcb
        {
          display: block;
          background-position: 0 -212px;
        }
        &.cvv-icon
        {
          display: block;
          background-position: 0 -100px;
          bacground-color: #fff;
          border: @remCalc1 solid rgba(0,0,0,0.2);
        }
        &.cid-icon
        {
          display: block;
          background-position: 0 -296px;
          bacground-color: #fff;
          border: @remCalc1 solid rgba(0,0,0,0.2);
        }
    }
    .row
    {
        display: block;
        clear: both;
        margin: 0;
        padding: 0;
        .column
        {
          display: inline-block;
          margin: 0;
          padding: 0;
        }
        .half
        {
          width: 48%;
        }
    }
    .payment-method-item
    {
        height: @remCalc64;
        margin: 0 0 @remCalc15 0;
        padding: @remCalc5 @remCalc45 @remCalc5 @remCalc10;
        position: relative;
        cursor: pointer;
        .border-radius(@remCalc10);
        .add-drop-shadow(false, true);
        background: #fff;
        .transition(background-color 167ms ease-in);
        @media @medium-up
        {
            margin: 0 0 @remCalc20 0;
        }
        .display-flex(row, nowrap, flex-start, center);
        &__icon
        {
            display: block;
            position: relative;
            left: 0;
            right: auto;
            top: 0;
            text-indent: -999em;
        }
        &__description-col
        {
            .set-flex(1);
            .display-flex(row, wrap, flex-start, center);
            margin-left: @remCalc10;
        }
        &__type
        {
            color: @creditCardFontColor;
            font-weight: bold;
            font-size: @remCalc16;
            margin-right: @remCalc8;
        }
        &__description
        {
            color: lighten(@creditCardFontColor, 20%);
            font-size: @remCalc16;
            .set-flex(1);
            white-space: nowrap;
        }
        &__tick
        {
            position: absolute;
            width: @remCalc20;
            height: @remCalc10;
            .calc( top, ~"50% - @{remCalc8}" );
            right: @remCalc20;
            &:after
            {
              content: "";
              position: absolute;
              width: @remCalc0;
              height: @remCalc3;
              background: #009CDE;
              .transform(translate(@remCalc8, @remCalc11) rotate(-45deg));
              transform-origin: left;
              transition: all 150ms;
              transition-delay: 0ms;
              transition-timing-function: ease-in;
          }
          &:before
          {
              content: "";
              position: absolute;
              width: @remCalc0;
              height: @remCalc3;
              background: #009CDE;
              .transform(translate(@remCalc1, @remCalc6) rotate(45deg));
              transform-origin: left;
              transition: all 150ms;
              transition-delay: 150ms;
              transition-timing-function: ease-in;
          }
        }
        &:hover,
        &--focused
        {
            background: darken(#fff, 3%);
        }
        &--selected
        {
            .payment-method-item
            {
                &__tick
                {
                    &:before
                    {
                      width: 10px;
                      transition-delay: 0ms;
                    }
                    &:after
                    {
                        width: 20px;
                        transition-delay: 150ms;
                    }
                }
            }
        }
        &--small
        {
            .payment-method-item
            {
                &__tick
                {
                    right: @remCalc15;
                }
                &--selected
                {
                    padding-right: @remCalc40;
                }
            }
        }
    }
    .show-all-payment-method
    {
        position: relative;
    }
    button
    {
      border: none;
      background: 0 0;
      -webkit-appearance: none;
      //padding: @remCalc18 @remCalc10;
      margin: 0;
      &.link
      {
        color: @creditCardLinkColor;
        text-decoration: underline;
        background-color: transparent;
        border: none;
        .transition(color 167ms ease-in);
        &:hover,
        &active {
          color: darken(@creditCardLinkColor, 20%);
        }
      }
      &.link-small
      {
        font-size: @remCalc12;
      }
      &.center
      {
          margin: 0 auto;
          display: block;
      }
    }
}
body:not(.user-is-tabbing)
{
  .credit-card-form
  {
    &:focus
    {
        outline: none;
    }
  }
  .show-all-payment-method
  {
        &:focus
        {
           outline: none;
        }
  }
}
@checkoutItemFontColor: @colorOnBackground;
.checkout-item
{
    width: 100%;
    .display-flex(row, nowrap, flex-start, flex-start);
    margin-bottom: @remCalc20;
    &__title
    {
        .display-flex(row, nowrap, flex-start, flex-start);
        cursor: pointer;
        &__number
        {
            text-align: left;
            font-size: @remCalc24;
            line-height: @remCalc24;
            color: @checkoutItemFontColor;
        }
        &__title
        {
            font-size: @remCalc16 !important;
            font-weight: normal;
            text-align: left;
            color: @checkoutItemFontColor;
            margin-left: @remCalc20;
            @media @large-up
            {
              font-size: @remCalc18 !important;
            }
        }
        &:hover
        {
            .checkout-item
            {
                &__title
                {
                    &__title
                    {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    &__amount
    {
        .set-flex(1);
        text-align: right;
        font-size: @remCalc16 !important;
        font-weight: normal;
        color: @checkoutItemFontColor !important;
        @media @large-up
        {
          font-size: @remCalc18;
        }
    }
    &__delivery
    {
        display: none;
        &__item
        {
            width: @remCalc60;
            text-align: center;
        }
        &--show
        {
          .display-flex(row, nowrap, center, flex-start);
        }
    }
    &--with-selection
    {
        .display-flex(row, nowrap, flex-start, center);
    }
    &--no-link
    {
        .checkout-item
        {
            &__title
            {
                cursor: default;
                &:hover
                {
                    .checkout-item
                    {
                        &__title
                        {
                            &__title
                            {
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
.top-subbar
{
    &__item
    {
        font-size: @remCalc16;
        @media @large-up
        {
            font-size: @remCalc20;
        }
        @media @xlarge-up
        {
            font-size: @remCalc22;
        }
    }
}
.digits
{
    width: 100%;
    .display-flex(row, nowrap, space-between, center);
    &__item
    {
        .border-radius( @remCalc5);
        text-align: center;
        border-width: @remCalc1;
        border-style: solid;
        padding: @remCalc3 @remCalc5;
        &:-webkit-autofill {
            // Expose a hook for JavaScript when auto fill is shown.
            // JavaScript can capture 'animationstart' events
            animation: onAutoFillStart 100ms ease 0s;
            // Make the backgound color become yellow _really slowly_
            transition: background-color 50000s ease-in-out 0s;
        }
        &:not(:-webkit-autofill) {
        // Expose a hook for JS onAutoFillCancel
        // JavaScript can capture 'animationstart' events
            animation-name: onAutoFillCancel;
        }
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        &--invalid:not(:-webkit-autofill)
        {
            border-color: #c51a1a;
            -webkit-animation: shake 500ms linear both;
            animation: shake 500ms linear both;
        }
        &--focused
        {
            .add-drop-shadow(true, true);
        }
    }
}
.accordion
{
    background: #fff;
    margin: 0;
    &__item
    {
        border-bottom: @remCalc2 solid #ddd;
        padding: @remCalc20 @remCalc20;
        margin: 0;
        &:last-of-type
        {
            border-bottom: 0;
        }
        &__title
        {
            background: #fff;
            width: 100%;
            padding: 0;
            margin: 0;
            font-size: @remCalc16;
            line-height: 1.5;
            cursor: default;
            .display-flex(row, nowrap, flex-start, center);
            color: lighten(#000000, 70%);
            &:hover,
            &:focus
            {
                background: #fff;
                color: lighten(#000000, 70%);
            }
            &__number
            {
                display: block;
                border:  @remCalc1 solid lighten(#000000, 70%);
                padding:  @remCalc0  @remCalc8;
                border-radius: 50%;
                margin-right:  @remCalc10;
                font-weight: bold;
                .transition( all 167ms ease-in);
            }
            &__text
            {
                .set-flex(1);
                text-align: left;
                font-weight: bold;
                .transition( color 167ms ease-in);
            }
            &__action
            {
                font-size: @remCalc14;
                margin-left:  @remCalc10;
                .link(false);
            }
        }
        &__content
        {
            height: 0;
            overflow: hidden;
            position: relative;
            .loader
            {
                z-index: 999;
            }
            .no-data
            {
                .display-flex(row, nowrap, center, center);
            }
        }
        &--active
        {
            .accordion
            {
                &__item
                {
                    &__title
                    {
                        color: #000000;
                        &:hover,
                        &:focus
                        {
                            color: #000000;
                        }
                        &__number
                        {
                            border-color: #000000;
                        }
                    }
                    &__content
                    {
                        height: auto;
                        overflow: visible;
                        min-height: @remCalc50;
                    }
                }
            }
        }
        &--complete
        {
            &:hover:not(.accordion__item--active)
            {
                cursor: pointer;
                .accordion
                {
                    &__item
                    {
                        &__title
                        {
                            color: lighten(#000000, 40%);
                            cursor: pointer;
                            &__number
                            {
                                border-color: lighten(#000000, 40%);
                            }
                            &:hover,
                            &:focus
                            {
                                color: lighten(#000000, 40%);
                            }
                        }
                    }
                }
            }
        }
    }
}
.radio
{
    .display-flex(row, nowrap, flex-start, flex-start);
    &__col1
    {
        margin-right: @remCalc15;
    }
    &__col2
    {
        margin-top: -@remCalc2;
    }
}
.currencyInputRow
{
    .amount-wrapper
    {
        margin-bottom: @remCalc0;
    }
    .currency-wrapper
    {
        font-size: @remCalc18;
        padding-top: @remCalc4;
    }
    .input-wrapper
    {
        .input
        {
            border-radius: @remCalc0 @remCalc10 @remCalc10 @remCalc0;
            .input__field
            {
                left: @remCalc5;
            }
        }
        small.error
        {
            position: absolute;
            width: 250px;
            left: @remCalc-30;
            color: @errorColor
        }
    }
}
// views
.staticPage
{
    padding-bottom:  @remCalc40;
    font-size: @remCalc16;
    @media @xlarge-up
    {
        font-size: @remCalc18;
    }
    &__wrapper
    {
        width: 100%;
        display: block;
        @media @medium-up
        {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
        }
    }
    &__actions
    {
        display: none;
        margin-top:  @remCalc30;
        margin-bottom:  @remCalc40;
        text-align: center;
        &__button
        {
            display: inline-block;
        }
    }
    h1, h2, h3, h4, h5, h6
    {
        color: @colorOnBackground;
    }
    img,
    iframe {
      margin-bottom: @remCalc12;
      max-width: 100%;
      height: auto;
    }
    img[style*="float: left"],
    iframe[style*="float: left"] {
      margin-left: 0;
      margin-right: @remCalc12;
    }
    img[style*="float: right"],
    iframe[style*="float: right"] {
      margin-left: @remCalc12;
      margin-right: 0;
    }
    p > img[style*="display: block"]:last-child,
    p > img[style*="display: inline"]:last-child,
    p > iframe[style*="display: block"]:last-child,
    p > iframe[style*="display: inline"]:last-child{
      margin-bottom: 0;
    }
    figure
    {
        margin: 0;
    }
    a:not(.button, .socialButtons__buttons__button),
    a:not(.button, .socialButtons__buttons__button):visited
    {
       margin: 0;
       color: @accentColor;
       text-decoration: underline;
       font-size: 1rem;
       font-weight: bold;
       display: inline;
       &:hover,
       &:focus
       {
            color: darken(@accentColor, 20%);
       }
    }
}
.homeView
{
  .staticPage__wrapper
  {
      width: 100%;
  }
  .bottom
  {
     .display-flex(row, wrap, flex-start, flex-start);
      &__copy {
      }
      &__comments {
        width: 100%;
        @media @medium-up
        {
          .set-flex(1);
          min-width: @remCalc300;
          margin-left: @remCalc20;
        }
        @media @large-up
        {
          min-width: @remCalc438;
        }
      }
      @media @medium-only {
        .display-flex(row, nowrap, flex-start, flex-start);
      }
      @media @large-up
      {
          padding-left: @remCalc20;
          padding-right: @remCalc20;
          .display-flex(row, nowrap, center, flex-start);
      }
  }
  .raised-container
  {
    position: relative;
    .remove-content-page-margins();
    margin-bottom: @remCalc20;
    @media @medium-up
    {
        margin-bottom: @remCalc100;
    }
    &--with-raised
    {
        margin-bottom: @remCalc70;
        @media @medium-up
        {
            margin-bottom: @remCalc100;
        }
    }
    .venue
    {
      position: relative;
      width: 100%;
      overflow: hidden;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      @media @small-only
      {
        height: @remCalc100;
      }
      @media @medium-only
      {
        height: @remCalc200;
      }
      @media @large-up
      {
        height: @remCalc300;
      }
      // img
      // {
      //   width: 100%;
      //   // height: 100%;
      //   max-width:100%;
      //   max-height:100%;
      //   margin: 0;
      //   padding: 0;
      // }
      .overlay
      {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 1;
      }
    }
    .top
    {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: @remCalc28;
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px rgba(0,0,0,0.2);
      width: 90%;
      @media @medium-up
      {
          font-size: @remCalc60;
      }
    }
    .value-container, .raised-totalizer-container
    {
      background: @accentColor;
      padding:  @remCalc10 @remCalc20;
      position: relative;
      border-radius: 60px;
      max-width: 80%;
      overflow: hidden;
      .drop-shadow(0px, 3px, 57px, 4px, 0.4);
      .label-text,
      .amount,
      .raised-and-target-container
      {
        margin: 0;
        text-align: center;
        line-height: 1;
        overflow: hidden;
        word-break: normal;
        text-overflow: ellipsis;
        font-weight: normal;
        white-space: nowrap;
      }
      .label-text
      {
        color: @accentFontColor;
        margin-bottom: @remCalc10;
        font-size: @remCalc16;
        padding-left: @remCalc0;
        padding-right: @remCalc0;
        @media @medium-up
        {
            padding-left: @remCalc80;
            padding-right: @remCalc80;
        }
        @media @large-up
        {
            font-size: @remCalc20;
        }
      }
      .raised-and-target-container
      {
            .display-flex(row, nowrap, flex-start, center);
            color: @accentFontColor;
            margin-bottom: @remCalc10;
            font-size: @remCalc16;
            overflow: unset;
            @media @medium-up{}
            .labels
            {
                width: 40%;
            }
            .raised-label
            {
                margin-right: 10%;
            }
            .target-label
            {
                margin-left: 10%;
            }
      }
      .amount-container{
        font-size: @remCalc15;
        color: @accentFontColor;
        .display-flex(row, nowrap, flex-start, center);
        margin-top:  @remCalc-10;
        @media @medium-up
        {
            font-size: @remCalc35;
        }
        .amounts{
            width: 100%;
            text-align: center;
        }
        .raised-amount
        {
            margin-right: 10%;
            font-weight: bolder;
        }
        .target-amount
        {
        }
      }
      .progressBar
      {
          margin-top: @remCalc10;
          &__bar
          {
              border-radius: @remCalc50;
              background: rgba(0, 0, 0, 0.25);
              box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
              &__current
              {
                 height: @remCalc12;
                 border-radius:  @remCalc50;
                 background-image:
                 linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
                 @media @small-only
                 {
                    height: @remCalc9;
                 }
              }
              &--moved
              {
                  .progressBar
                  {
                      &__bar
                      {
                          &__current
                          {
                              background-color: @accentFontColor;
                          }
                      }
                  }
              }
          }
      }
      .amount
      {
        font-size: @remCalc30;
        color: @accentFontColor;
        @media @medium-up
        {
          font-size: @remCalc70;
        }
      }
      .loader
      {
        background: @accentColor;
        &:before{
          border-top-color: @accentFontColor;
          border-left-color: @accentFontColor;
        }
      }
      height: auto;
      width: auto;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
      @media @small-only
      {
          min-width: 60%;
      }
      @media @medium-up
      {
          padding:  @remCalc20 @remCalc70;
      }
      @media @large-up
      {
          min-width: auto;
      }
    }
  }
}
@listItemBgColor: @panelBgColour;
@listItemFontColor: @fontColourForPanel;
@listItemPreviewFontColor: @colorOnBackground;
.list-item
{
  .display-flex(column, nowrap, center, center);
  margin: 0;
  &__wrapper
  {
    margin-bottom: @remCalc30;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    background-color: @listItemBgColor;
    cursor: pointer;
    border-radius: @remCalc10;
    position: relative;
    overflow: hidden;
    -webkit-user-select: text !important;
    user-select: text !important;
    -ms-user-select: text !important;
	
    padding: @remCalc20;
    .display-flex(column, nowrap, flex-start, flex-start);
    .add-drop-shadow(false);
    .add-drop-shadow-animation();
    .overflow-fix();
    &::after
    {
      background-color: darken(@listItemBgColor, 20%);
      .ripple();
    }
    &--focused,
    &:hover
    {
        .add-drop-shadow(true);
    }
    &--focused
    {
      &::after
      {
          .ripple-animation();
      }
    }
  }
  &__top-image
  {
      width: 100%;
      padding: 0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      &__overlay
      {
        background: @listItemBgColor;
        width: 100%;
        height: 100%;
        opacity: 1;
      }
  }
  &__under-image
  {
    width: 100%;
    .display-flex(column, nowrap, flex-start, flex-start);
    &__title-column
    {
      width: 100%;
      &__number
      {
          width: 100%;
          text-align: left;
          font-size: @remCalc24;
          line-height: @remCalc24;
          font-weight: normal;
          color: contrast(@listItemBgColor, @accentColor, @accentFontColor);
          padding-bottom: @remCalc10;
          padding-top: @remCalc20;
          margin: 0;
      }
      &__title, &__sponsor-strap-line
      {
          width: 100%;
          font-size: @remCalc16;
          font-weight: normal;
          overflow: hidden;
          text-align: left;
          height: @remCalc55;
          color: @listItemFontColor;
          margin: 0;
          -webkit-user-select: text !important;
          user-select: text !important;
          -ms-user-select: text !important;
          @media @large-up
          {
            font-size: @remCalc18;
            height: @remCalc60;
          }
      }
      &__sponsor-strap-line
      {
        min-height: 105px;
      }
    }
    &__subtitle-row
    {
        width: 100%;
        .display-flex(row, nowrap, flex-start, center);
        &__sub1
        {
          width: 40%;
          border-radius: @remCalc20;
          padding: @remCalc10 @remCalc20;
          text-align: center;
          font-weight: normal;
          font-size: @remCalc16;
          overflow: hidden;
          background-color: @accentColor;
          color: @accentFontColor;
          &--empty
          {
             background-color: transparent;
          }
          &--sealed
          {
            width: 60%;
          }
        }
        &__sub2
        {
            margin-left: @remCalc20;
            .set-flex(1);
            font-weight: normal;
            font-size: @remCalc16;
            overflow: hidden;
            text-align: left;
            color: @listItemFontColor;
        }
    }
  }
  &--preview
  {
    .display-flex(column, nowrap, flex-start, center);
    .list-item
    {
      &__wrapper
      {
          .display-flex(row, nowrap, flex-start, flex-start);
          border-radius: 0px;
          cursor: default;
          width: 100%;
          margin-bottom: 0;
          padding: 0;
          background: transparent;
          .drop-shadow(0px, 0px, 0px, 0px, 0);
          &:hover
          {
            .drop-shadow(0px, 0px, 0px, 0px, 0);
          }
      }
      &__top-image
      {
         .set-flex(1);
      }
      &__under-image
      {
          margin-left: @remCalc10;
          width: 70%;
          @media @medium-up
          {
                margin-left: @remCalc30;
          }
          @media @large-up
          {
                width: 80%;
          }
          &__title-column
          {
             .display-flex(row, nowrap, flex-start, flex-start);
              margin-bottom: @remCalc20;
              margin-left: @remCalc5;
              @media @medium-up
              {
                    margin-left: 0;
              }
              &__number
              {
                  padding-top: 0px;
                  padding-right: @remCalc15;
                  width: auto;
                  font-weight: bold;
                  color: @listItemPreviewFontColor;
                  padding-bottom: 0px;
                  @media @medium-up
                  {
                    font-size: @remCalc30;
                    line-height: 1.2;
                  }
                  @media @xlarge-up
                  {
                    font-size: @remCalc36;
                    line-height: 1.2;
                  }
              }
              &__title, &__sponsor-strap-line
              {
                  height: auto;
                  color: @listItemPreviewFontColor;
                  .set-flex(1);
                  @media @medium-up
                  {
                    font-size: @remCalc24;
                    line-height: 1.3;
                  }
                  @media @xlarge-up
                  {
                    font-size: @remCalc30;
                    line-height: 1.3;
                  }
              }
          }
          &__subtitle-row
          {
            &__sub1
            {
                padding-left:  @remCalc20;
                padding-right:  @remCalc20;
                width: auto;
                @media @medium-up
                {
                    padding-left:  @remCalc30;
                    padding-right:  @remCalc30;
                    font-size: @remCalc20;
                }
                @media @xlarge-up
                {
                    padding-left:  @remCalc40;
                    padding-right:  @remCalc40;
                    font-size: @remCalc24;
                }
            }
            &__sub2
            {
                color: @listItemPreviewFontColor;
                @media @medium-up
                {
                  font-size: @remCalc20;
                }
                @media @xlarge-up
                {
                  font-size: @remCalc24;
                }
            }
          }
      }
    }
    &.list-item--no-image
    {
        .list-item
        {
            &__under-image
            {
                margin-left: @remCalc0;
                width: 100%;
            }
        }
    }
  }
  &--no-bid
  {
    .list-item
    {
      &__under-image
      {
          &__title-column
          {
             margin-bottom: 0;
          }
          &__subtitle-row
          {
             display: none;
          }
      }
    }
  }
}
.lotList
{
  .make-full-height(true);
  padding-top: @remCalc20;
  .list
  {
    .display-flex(row, wrap, flex-start, flex-start);
    .list-item
    {
        width: 100%;
        &__wrapper
        {
          width: 100%;
        }
        @media @medium-up
        {
           width: 50%;
           &__wrapper
           {
              width: 90%;
           }
        }
        @media only screen and (min-width: 73.75rem)
        {
           width: 33.333%;
           &__wrapper
           {
              width: 90%;
           }
        }
    }
  }
   .next-loader
   {
      height: @remCalc30;
      display: none;
      position: relative;
      .loader
      {
         display: block;
         &:before
         {
            top: 0;
         }
      }
   }
}
.touch
{
   .list-item, .sponsor-item
   {
      &__wrapper
      {
        &:hover
        {
            .add-drop-shadow(false);
        }
      }
   }
}
.loginPage
{
    form
    {
        fieldset
        {
          .input-label
          {
              .input-field
              {
                  &[name=password],
                  &[name=pin]
                  {
                    -webkit-text-security: disc;
                  }
              }
              svg.paddlock {
                top: @remCalc30;
              }
              svg.account {
                top: @remCalc30;
              }
          }
          .error
          {
            small.error{
                //padding: @remCalc6 @remCalc9 0 @remCalc9;
            }
          }
        }
    }
}
@loginBgColor: transparent;
@loginTextColor: @colorOnBackground;
@loginActionButtonBackgroundColor: #999999;
@loginActionButtonFontColor: #fff;
@loginLinkColor: @linkColor;
@loginDigitBgColor: #ffffff;
@loginDigitFocusColor: #3786d5;
@loginDigitTextColor: contrast(@loginDigitBgColor, #000000, rgb(255, 255, 255));
@loginDigitBorderColor: contrast(@loginDigitBgColor, darken(@loginDigitBgColor, 20%), lighten(@loginDigitBgColor, 20%));
@loginDigitErrorColor: #c51a1a;
.login-button-grey()
{
    background-color: @loginActionButtonBackgroundColor;
    color: @loginActionButtonFontColor;
    &:hover,
    &:focus
    {
        background-color: darken(@loginActionButtonBackgroundColor, 20%);
        color: @loginActionButtonFontColor;
    }
    &:after
    {
        background-color: lighten(@loginActionButtonBackgroundColor, 20%);
    }
    .a-button__loader
    {
        border-top-color: @loginActionButtonFontColor;
        border-left-color: @loginActionButtonFontColor;
    }
    .a-button__thick
    {
        fill: @loginActionButtonFontColor;
    }
}
.login-button-saved()
{
    background: @buttonSuccessBgColor;
    color: @buttonSuccessTextColor;
    &:hover,
    &:focus
    {
        background: @buttonSuccessBgColor;
        color: @buttonSuccessTextColor;
    }
    .a-button__loader
    {
        display: none;
    }
    .a-button__thick
    {
        display: block;
    }
}
.login-button-valid()
{
    background: @buttonValidBgColor;
    color: @buttonValidTextColor;
    &:hover,
    &:focus
    {
        background: @buttonValidBgColor;
        color: @buttonValidTextColor;
    }
}
.login-button-invalid()
{
    background: @buttonErrorBgColor;
    color: @buttonErrorTextColor;
    &:hover,
    &:focus
    {
        background: @buttonErrorBgColor;
        color: @buttonErrorTextColor;
    }
}
.login-view()
{
    width: 100%;
    background: @loginBgColor;
    padding: @remCalc20;
    .border-radius(@remCalc5);
    margin-bottom: @remCalc40;
    @media @medium-up
    {
        margin-top:  @remCalc50;
        width: 50%;
        margin-left: auto;
        margin-right: auto;
        padding: @remCalc40;
    }
    @media @xlarge-up
    {
        width: 40%;
        padding: @remCalc80;
    }
    small.error
    {
        color: @errorColor;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .submit-row
    {
        display: none;
        &.error
        {
            display: block;
        }
    }
}
.login-header()
{
    font-size: @remCalc24;
    text-align: left;
    font-weight: bold;
    color: @accentColor;
    margin-bottom: @remCalc30;
}
.login-message()
{
    font-size: @remCalc16;
    color: @loginTextColor;
    text-align: left;
    font-weight: bold;
    @media @xlarge-up
    {
        font-size: @remCalc18;
    }
    b
    {
        color: @loginLinkColor;
    }
}
.login-sub-message()
{
    font-size: @remCalc14;
    color: @loginTextColor;
    text-align: left;
    font-weight: normal;
    @media @xlarge-up
    {
        font-size: @remCalc16;
    }
}
.login-form()
{
    margin-top:  @remCalc40;
    fieldset
    {
        padding: 0;
        margin: 0;
        min-width: 0%;
        max-width: 100%;
        overflow: visible;
    }
    .input
    {
        &__field
        {
        }
    }
    &__link
    {
        text-decoration: none;
        color: @loginLinkColor;
        .transition( color 167ms ease-in);
        &:hover
        {
            color: darken( @loginLinkColor, 20%);
        }
        &--accent
        {
            color: @accentColor;
            &:hover
            {
                color: darken( @accentColor, 20%);
            }
        }
    }
    &__actions
    {
        margin-top: @remCalc40;
        &__button
        {
            margin: 0 auto;
            @media @large-up
            {
            }
        }
        .a-button
        {
            &--grey
            {
                .login-button-grey();
            }
            &--valid
            {
                .login-button-valid();
            }
            &--invalid
            {
                .login-button-invalid();
            }
            &--saved
            {
                .login-button-saved();
            }
        }
    }
    &__separator
    {
        .login-separator();
    }
    .error
    {
        label,
        label.error
        {
            color: @errorColor;
            a
            {
                color: @errorColor;
            }
        }
    }
}
.login-forgot()
{
    margin-top: @remCalc40;
    .forgot-error
    {
        padding:  @remCalc20 0 0 0 !important;
    }
    &__header
    {
        font-size: @remCalc20;
        font-weight: bold;
        color: @accentColor;
        margin-bottom: @remCalc30;
    }
    &__message
    {
        font-size: @remCalc14;
        color: @loginTextColor;
        text-align: left;
    }
    &__buttons
    {
        margin-top: @remCalc40;
        .a-button--grey
        {
            .login-button-grey();
        }
        .a-button--saved
        {
            .login-button-saved();
        }
        &__button
        {
            width: 75%;
            margin: 0 auto;
            .a-button__label
            {
                width: auto;
            }
        }
    }
    &__footer
    {
        .login-footer();
    }
}
.login-digits (@smallSize: 100%, @mediumSize: 80%, @largeSize: 60%)
{
    .display-flex(row, nowrap, center, center);
    .digits
    {
        width: @smallSize;
        @media @medium-up
        {
            width: @mediumSize;
        }
        @media @large-up
        {
            width: @largeSize;
        }
        &__item
        {
            background-color: @loginDigitBgColor;
            color: @loginDigitTextColor;
            border-color: @loginDigitBorderColor;
            &--invalid
            {
                border-color: @loginDigitErrorColor;
            }
            &--focused
            {
                @loginDigitsBoxShadowColor: rgba(red(@loginDigitFocusColor), green(@loginDigitFocusColor), blue(@loginDigitFocusColor), 0.2);
                border-color: @loginDigitFocusColor;
                -webkit-box-shadow: 0px 0px 5px 3px @loginDigitsBoxShadowColor;
                box-shadow: 0px 0px 5px 3px @loginDigitsBoxShadowColor;
            }
        }
    }
}
.login-footer()
{
    margin-top: @remCalc20;
    text-align: center;
    color: @loginTextColor;
    font-size: @remCalc16;
    @media @xlarge-up
    {
        font-size: @remCalc18;
    }
}
.login-separator
{
    margin-top: @remCalc40;
    margin-bottom: @remCalc40;
    &__line
    {
        margin: 0;
    }
}
@biddingInfoBackgroundColor: #999999;
@biddingInfoFontColor: #fff;
.bidding-view()
{
  .display-flex(column, nowrap, flex-start, flex-start);
  padding-bottom: @remCalc40;
  @media medium-up
  {
     padding: @remCalc20 @remCalc20 @remCalc40 @remCalc20;
  }
}
.bidding-header()
{
  .calc( width , ~"100% + @{remCalc20}" );
  background: #fff;
  margin-left: @remCalc-10;
  margin-right: @remCalc-10;
  margin-top: @remCalc-20;
  padding-left: @remCalc10;
  padding-right: @remCalc10;
  padding-top: @remCalc10;
  padding-bottom: @remCalc10;
  @media @medium-up
  {
      padding-top: @remCalc15;
      padding-bottom: @remCalc15;
      padding-left: @remCalc15;
      padding-right: @remCalc15;
  }
  @media @xlarge-up
  {
      padding-top: @remCalc20;
      padding-bottom: @remCalc20;
      padding-left: @remCalc20;
      padding-right: @remCalc20;
  }
}
.bidding-body()
{
    margin-top:  @remCalc40;
    width: 100%;
    .set-flex(1 1 auto);
    display: block;
    @media @medium-up
    {
        margin-top:  @remCalc20;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    @media @xlarge-up
    {
        margin-top:  @remCalc50;
        width: 60%;
    }
    &__icon
    {
        margin-bottom: @remCalc20;
        svg
        {
            width: @remCalc80;
            height: @remCalc80;
            display: block;
            margin: 0 auto;
            .path
            {
                stroke: #28c55c !important;
            }
            .circ {
                opacity: 0;
                stroke-dasharray: 300;
                stroke-dashoffset: 300;
                .transition(all 1s);
            }
            .tick {
                stroke-dasharray: 150;
                stroke-dashoffset: 150;
                .transition(stroke-dashoffset 1s 0.5s ease-out);
            }
        }
        &--show
        {
            svg
            {
                .path {
                    opacity: 1;
                    stroke-dashoffset: 0;
                }
            }
        }
    }
}
.bidding-title()
{
    font-size: @remCalc26;
    color: @colorOnBackground;
    margin-bottom: @remCalc30;
    text-align: center;
    @media @medium-up
    {
        font-size: @remCalc32;
    }
    @media @xlarge-up
    {
        font-size: @remCalc40;
    }
    &--mobile-smaller
    {
        @media @small-only
        {
            font-size: @remCalc20;
        }
    }
}
.bidding-message()
{
    font-size: @remCalc16;
    color: @colorOnBackground;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-bottom: @remCalc20;
    @media @medium-up
    {
        margin-bottom: @remCalc70;
    }
    @media @xlarge-up
    {
        margin-bottom: @remCalc100;
        font-size: @remCalc18;
    }
    a:not(.button),
    a:not(.button):visited,
    a:not(.button):focus,
    &__link
    {
        .link();
    }
}
.bidding-info()
{
    background-color: @biddingInfoBackgroundColor;
    padding:  @remCalc10 @remCalc10;
    .border-radius( @remCalc5 );
    //margin-top: @remCalc30;
    //  margin-bottom: @remCalc20;
    .display-flex(column, nowrap, flex-start, flex-start);
    @media @medium-up
    {
        //margin-top: @remCalc30;
        margin-bottom: @remCalc40;
        padding:  @remCalc15;
    }
    @media @xlarge-up
    {
        //margin-top: @remCalc50;
        margin-bottom: @remCalc70;
        padding:  @remCalc20;
    }
    &__row
    {
        width: 100%;
        .display-flex(row, nowrap, flex-start, flex-start);
        margin-bottom: @remCalc10;
        &:last-of-type
        {
            margin-bottom: @remCalc0;
        }
        &__col
        {
          width: 50%;
          text-align: center;
        }
    }
    &__label
    {
      font-size: @remCalc18;
      color: @biddingInfoFontColor;
      white-space: nowrap;
      @media @medium-up
      {
        font-size: @remCalc24;
      }
      &--small
      {
          font-size: @remCalc14;
          font-weight: bold;
          @media @medium-up
          {
              font-size: @remCalc20;
          }
      }
    }
    &__value
    {
        font-size: @remCalc20;
        font-weight: bold;
        color: @biddingInfoFontColor;
        @media @medium-up
        {
          font-size: @remCalc30;
        }
        &--small
        {
            font-size: @remCalc14;
            font-weight: normal;
            @media @medium-up
            {
                font-size: @remCalc20;
            }
        }
    }
    &__row--details
    {
        margin-top: @remCalc20;
        .display-flex(row, nowrap, flex-start, flex-start);
        &__col
        {
            width: auto;
            text-align: left;
            margin-right: @remCalc10;
            &:last-of-type
            {
                margin-right: 0;
            }
        }
    }
}
.bidding-actions()
{
    .fixed-button();
    &__wrapper
    {
        .display-flex(row, nowrap, space-around, center);
    }
    &__button
    {
        width: 46%;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        @media @medium-up
        {
            width: 40%;
        }
        @media @xlarge-up
        {
            width: 30%;
        }
    }
}
.bidding-form()
{
    width: 100%;
    background: @accentColor;
    color: @accentFontColor;
    padding: @remCalc20 @remCalc10;
    margin-top: @remCalc20;
    @media @medium-up
    {
        padding: @remCalc20;
    }
    &--fixed
    {
        @media @small-only
        {
            position: fixed;
            left: 0;
            bottom: 0;
            top: auto;
            width: 100%;
            z-index: 2000;
            margin-top: 0;
            margin-bottom: 0;
        }
    }
}
.bidding-social()
{
    width: 100%;
    margin-bottom: @remCalc40;
    margin-top: @remCalc30;
    overflow: visible;
    @media @medium-up
    {
        margin-bottom: @remCalc40;
        margin-top: @remCalc30;
    }
    @media @xlarge-up
    {
        margin-bottom: @remCalc80;
        margin-top: @remCalc60;
    }
}
.bidding-max-bidding()
{
    margin-top: @remCalc30;
    &__title
    {
        font-size: @remCalc20;
        color: @colorOnBackground;
        margin-bottom: @remCalc30;
        text-align: center;
        @media @medium-up
        {
            font-size: @remCalc24;
        }
        @media @xlarge-up
        {
            font-size: @remCalc32;
        }
    }
    &__message
    {
        font-size: @remCalc16;
        color: @colorOnBackground;
        text-align: center;
        margin: 0;
        padding: 0;
        @media @xlarge-up
        {
        font-size: @remCalc18;
        }
    }
    &__bid-form
    {
        background: @accentColor;
        color: @accentFontColor;
        padding: @remCalc20 @remCalc10;
        margin-top: @remCalc30;
        @media @medium-up
        {
            padding: @remCalc20;
        }
    }
}
.bidding-minimum-view(@extraSpace: 0px)
{
    .calc( padding-bottom , ~"@{minimumLayoutMarginBottom} + @{extraSpace}" );
}
.bidding-minimum-view-constant(@extraSpace: 0px)
{
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
    .calc( padding-bottom , ~"var(--safe-area-inset-bottom) + @{minimumLayoutMarginBottom} + @{extraSpace}");
}
.bidding-minimum-view-env(@extraSpace: 0px)
{
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    .calc( padding-bottom , ~"var(--safe-area-inset-bottom) + @{minimumLayoutMarginBottom} + @{extraSpace}");
}
.bidding-minimum-actions()
{
    padding-bottom: @minimumLayoutMarginBottom;
}
.bidding-minimum-actions-constant()
{
    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
    .calc(padding-bottom, ~"var(--safe-area-inset-bottom) + @{minimumLayoutMarginBottom}" );
}
.bidding-minimum-actions-env()
{
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    .calc(padding-bottom, ~"var(--safe-area-inset-bottom) + @{minimumLayoutMarginBottom}" );
}
// EDGE hack disable
.edge,
.ie
{
    svg
    {
        .circ,
        .tick
        {
            stroke-dasharray: 0 !important;
            stroke-dashoffset: 0 !important;
        }
    }
}
@checkoutAmountBackgroundColor: #999999;
@checkoutAmountFontColor: #fff;
.checkout-view()
{
    padding-bottom: @remCalc40;
    position: relative;
    @media @medium-up
    {
        padding: @remCalc20 @remCalc0 @remCalc40 @remCalc0;
        width: 60%;
        margin: 0 auto;
    }
    @media @xlarge-up
    {
        width: 40%;
    }
    > .loader
    {
        margin-top: @remCalc-10;
        margin-left: @remCalc-10;
        .calc( width,  ~"100% + @{remCalc20}" );
        .calc( height,  ~"100% + @{remCalc20}" );
        @media @medium-up
        {
            margin-top: @remCalc-20;
            margin-left: @remCalc-20;
            .calc( width,  ~"100% + @{remCalc40}" );
            .calc( height,  ~"100% + @{remCalc40}" );
        }
    }
    a:not(.button),
    a:not(.button):visited,
    a:not(.button):focus,
    &__link
    {
        .link();
    }
}
.checkout-header()
{
    font-size: @remCalc24;
    text-align: left;
    font-weight: bold;
    color: @accentColor;
    margin-bottom: @remCalc30;
}
.checkout-message()
{
    font-size: @remCalc16;
    color: @colorOnBackground;
    margin: 0;
    padding: 0;
    @media @xlarge-up
    {
      font-size: @remCalc18;
    }
}
.checkout-form()
{
    margin-top: @remCalc30;
    position: relative;
    color: @colorOnBackground;
    .payment-loader
    {
        opacity: 0.7;
        background-color: @backgroundColor;
        margin-top: @remCalc-20;
        margin-left: @remCalc-20;
        .calc( width,  ~"100% + @{remCalc40}" );
        .calc( height,  ~"100% + @{remCalc40}" );
    }
    .choose-payment-loader
    {
      background-color: @backgroundColor;
      opacity: 1;
      margin-top: @remCalc-20;
      margin-left: @remCalc-20;
      .calc( width,  ~"100% + @{remCalc40}" );
      .calc( height,  ~"100% + @{remCalc40}" );
    }
    &__payment
    {
        margin-bottom: @remCalc15;
        @media @medium-up
        {
            margin-bottom: @remCalc20;
        }
    }
    &__amount
    {
        color: @checkoutAmountFontColor;
        background-color: @checkoutAmountBackgroundColor;
        font-weight: normal;
        font-size: @remCalc20;
        padding: @remCalc20;
        .border-radius(@remCalc10);
        text-align: center;
        width: 100%;
        @media @medium-up
        {
          font-size: @remCalc26;
        }
    }
    &__actions
    {
        width: 100%;
        .display-flex(row, nowrap, space-around, center);
        margin-top: @remCalc40;
        &__button
        {
        }
    }
    .error
    {
        small.error
        {
            color: @errorColor;
        }
        label,
        label.error
        {
            color: @errorColor;
            a
            {
                color: @errorColor;
            }
        }
    }
}
.checkout-checkbox(@align: flex-start)
{
    .display-flex(row, nowrap, flex-start, @align);
    font-size: @remCalc16;
    margin-bottom: @remCalc20;
    &__col1
    {
        margin-right: @remCalc15;
    }
    &__col2
    {
    }
}
.registerView
{
    .checkout-view();
    @media @xlarge-up
    {
        width: 40%;
    }
    .mandatory
    {
        color: @errorColor;
    }
    &__header
    {
        .checkout-header();
    }
    &__message
    {
        .checkout-message();
    }
    &__form
    {
        .checkout-form();
        fieldset
        {
            //margin-bottom: @remCalc20;
            .register-form-password-error-label
            {
                br
                {
                    display: none;
                }
            }
        }
    }
    &__client-terms-and-conditions
    {
        text-align: center;
        margin-top: @remCalc40;
        font-size: @remCalc14;
    }
    &__gift-aid-now,
    &__tax-receipt,
    &__mailing
    {
        .checkout-checkbox();
    }
    &__gift-aid-now-address,
    &__tax-receipt-address
    {
        margin-top: @remCalc20;
    }
    &__actions
    {
        margin-top: @remCalc30;
        &__button
        {
            width: auto;
            margin: 0 auto;
        }
    }
}
.off-canvas--minimum
{
    .registerView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .registerView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .registerView
        {
            .bidding-minimum-view-env();
        }
    }
}
.registerView2
{
    .checkout-view();
    @media @xlarge-up
    {
        width: 40%;
    }
    &__header
    {
        .checkout-header();
    }
    &__client-terms
    {
        &__header
        {
            margin-top: @remCalc40;
            margin-bottom: @remCalc10;
            font-weight: bold;
            font-size: @remCalc16;
        }
        &__subheader
        {
            margin-bottom: @remCalc10;
            margin-top: @remCalc30;
        }
        &__options
        {
            .display-flex(row, wrap, flex-start, flex-start);
            margin-bottom: @remCalc20;
            &__option
            {
                .checkout-checkbox(center);
                margin-right: @remCalc20;
                &:last-of-type
                {
                    margin-right: 0;
                }
            }
        }
        &__footer
        {
            font-size: @remCalc14;
            @media @medium-up
            {
                font-size: @remCalc16;
            }
        }
    }
    &__mailing
    {
        &__header
        {
            margin-top: @remCalc40;
            margin-bottom: @remCalc10;
            font-weight: bold;
            font-size: @remCalc16;
        }
        &__option
        {
            .checkout-checkbox(center);
            margin-bottom: @remCalc20;
        }
        &__footer
        {
            font-size: @remCalc14;
            @media @medium-up
            {
                font-size: @remCalc16;
            }
        }
    }
    &__addition-statement
    {
        margin-top: @remCalc30;
    }
    &__actions
    {
        margin-top: @remCalc60;
        &__button
        {
            width: auto;
            margin: 0 auto;
        }
    }
}
.off-canvas--minimum
{
    .registerView2
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .registerView2
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .registerView2
        {
            .bidding-minimum-view-env();
        }
    }
}
.registerSuccessView
{
    .checkout-view();
    &__header
    {
        .checkout-header();
    }
    &__message
    {
        .checkout-message();
    }
    &__actions
    {
        margin-top: @remCalc100;
        &__button
        {
            width: auto;
            margin: 0 auto;
        }
    }
    &__confirm
    {
        margin-top: @remCalc100;
        &__header
        {
            font-weight: bold;
            margin-bottom: @remCalc10;
            .display-flex(row, nowrap, flex-start, center);
            &__icon
            {
                border-radius: 50%;
                padding: @remCalc10;
                background: #aaaaaa;
                margin-right: @remCalc10;
                .display-flex(column, nowrap, center, center);
                svg
                {
                    fill: #fff;
                    width: @remCalc20;
                    height: @remCalc15;
                }
            }
        }
        &__message
        {
        }
    }
}
.off-canvas--minimum
{
    .registerSuccessView
    {
        .bidding-minimum-view();
    }
}
.dialog
{
    .registerSuccessView
    {
        width: 100%;
        padding-bottom: 0;
        padding-top: 0;
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .registerSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .registerSuccessView
        {
            .bidding-minimum-view-env();
        }
    }
}
.sendPersonalLinkSuccessView
{
    .login-view();
    &__header
    {
        .login-header();
    }
    &__message
    {
        .login-message();
    }
    &__sub-message
    {
        .login-sub-message();
        margin-top: @remCalc20;
    }
    &__actions
    {
        margin-top: @remCalc100;
        &__button
        {
            width: auto;
            margin: 0 auto;
        }
    }
    &__footer
    {
        margin-top: @remCalc30;
        text-align: center;
    }
}
.off-canvas--minimum
{
    .sendPersonalLinkSuccessView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .sendPersonalLinkSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .sendPersonalLinkSuccessView
        {
            .bidding-minimum-view-env();
        }
    }
}
.messageView
{
    margin-top:  @remCalc40;
    width: 100%;
    display: block;
    @media @medium-up
    {
        margin-top:  @remCalc50;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    &__header
    {
        .bidding-title();
    }
    &__message
    {
        .bidding-message();
    }
    &__actions
    {
        .bidding-actions();
        margin-top:  @remCalc30;
        margin-bottom:  @remCalc40;
        &__button
        {
            width: auto;
        }
    }
}
@itemPreviewFormHeight: @remCalc85;
.itemPreviewSeparator()
{
  width: 100%;
  height: 2px;
  margin-top: @remCalc20;
  margin-bottom: @remCalc20;
  background-color: #c1c0c0;
  border-width: 0px;
}
.itemDescriptionTableCell()
{
    padding: @remCalc5 @remCalc20 @remCalc5 @remCalc0;
    vertical-align: top;
    @media @medium-up
    {
        padding-right: @remCalc40;
    }
    &:first-child
    {
        padding-left: 0;
    }
    &:last-child
    {
        padding-right: 0;
    }
}
.itemPreviewView
{
   .calc(padding-bottom, ~"@{itemPreviewFormHeight} + @{remCalc20}");
   position: relative;
   .make-full-height();
   padding-top: @remCalc20;
   @media @large-up
   {
      padding: @remCalc20;
      .display-flex(column, nowrap, flex-start, flex-start);
   }
   &__header
   {
      width: 100%;
   }
   &__separator
   {
      .itemPreviewSeparator();
   }
   &__body
   {
      width: 100%;
      display: block;
      margin-top: @remCalc20;
      .display-flex(column, nowrap, flex-start, flex-start);
      .set-flex(1 1 auto);
      &__row1
      {
          width: 100%;
          .display-flex(column, nowrap, flex-start, flex-start);
          margin-bottom: @remCalc0;
          @media @large-up
          {
              .display-flex(row, nowrap, flex-start, flex-start);
              margin-bottom: @remCalc40;
          }
          &__col1
          {
              width: 100%;
              margin-bottom: @remCalc20;
              @media @large-up
              {
                  width: 50%;
                  margin-right: @remCalc20;
                  margin-bottom: 0;
              }
              @media @xlarge-up
              {
                  width: 60%;
              }
          }
          &__col2
          {
             width: 100%;
             .display-flex(column, nowrap, flex-start, flex-start);
             @media @large-up
             {
               .calc( width, ~"50% - @{remCalc20}" );
             }
             @media @xlarge-up
             {
               .calc( width, ~"40% - @{remCalc20}" );
             }
             &__row1
             {
                width: 100%;
                margin-bottom: @remCalc20;
             }
             &__row2
             {
                width: 100%;
             }
          }
      }
      &__row2
      {
         width: 100%;
         .display-flex(column, nowrap, flex-start, flex-start);
         .set-flex(1 1 auto);
         &__row1
         {
            .set-flex(1 1 auto);
           .display-flex(row, wrap, flex-start, flex-start);
           width: 100%;
           &__col1
           {
             .set-flex(1 1 auto);
             .display-flex(column, nowrap, flex-start, flex-start);
           }
           &__col2
           {
             width: 100%;
             @media @medium-up
             {
               margin-left: @remCalc20;
              .calc( width, ~"50% - @{remCalc20}" );
             }
             @media @xlarge-up
             {
               .calc( width, ~"40% - @{remCalc20}" );
             }
           }
           @media @medium-up {
             .display-flex(row, nowrap, flex-start, flex-start);
           }
         }
      }
   }
   &__photo
   {
      position: relative;
      width: 100%;
   }
   &__description,
   &__donated_by
   {
      width: 100%;
      font-size: @remCalc16;
      color: lighten(@colorOnBackground, 10%);
      line-height: 1.5;
      overflow-x: auto;
      table
      {
          margin-bottom: @remCalc20;
          thead
          {
              tr
              {
                th
                {
                    text-align: left;
                    .itemDescriptionTableCell();
                }
              }
          }
          tbody
          {
              tr
              {
                td
                {
                    .itemDescriptionTableCell();
                }
              }
          }
      }
      @media @medium-up
      {
          font-size: @remCalc16;
      }
      @media @xlarge-up
      {
          font-size: @remCalc16;
      }
   }
   &__description
   {
      width: auto;
   }
   &__donated_by
   {
        margin-top: @remCalc30;
        background: @accentColor;
        color: @accentFontColor;
        padding-left: @remCalc10;
   }
   &__bid-info
   {
      width: 100%;
      background: @accentColor;
      color: @accentFontColor;
      padding: @remCalc20;
      &__row
      {
          .display-flex(row, nowrap, space-between, flex-start);
          margin-bottom: @remCalc20;
          width: 100%;
          position: relative;
          &__label
          {
              font-size: @remCalc16;
              text-align: left;
              @media @medium-up
              {
                font-size: @remCalc20;
              }
          }
          &__value
          {
              text-align: right;
              //padding-left: @remCalc10;
              font-size: @remCalc18;
              font-weight: bold;
              white-space: nowrap;
              @media @medium-up
              {
                font-size: @remCalc20;
              }
          }
          &--last
          {
              margin-bottom: @remCalc0;
          }
      }
   }
   &__quantity
   {
       .display-flex(row, nowrap, flex-start, center);
       &__price
       {
           .set-flex(1);
           font-size:  @remCalc16;
           padding-right: @remCalc20;
       }
       &__actions
       {
       }
   }
   &__actions
   {
       .display-flex(row, nowrap, center, center);
       &__button
       {
           display: block;
           margin: 0 @remCalc10 0 @remCalc10;
           padding: 0;
           line-height: 1.5;
           overflow: hidden;
           background-color: #999999;
           .overflow-fix();
       }
       &__selected-quantity
       {
           height: @remCalc50;
           width: @remCalc50;
           .display-flex(column, nowrap, center, center);
           font-size: @remCalc20;
           color: #000;
           &__error
           {
               color: #ff0000;
               margin-top: @remCalc5;
           }
       }
   }
   &__bid-form
   {
      width: 100%;
      background: @accentColor;
      color: @accentFontColor;
      padding: @remCalc20 @remCalc10;
      margin-bottom: @remCalc20;
      .transition(padding-bottom 250ms ease);
      @media @large-up
      {
          margin-bottom: 0;
          padding: @remCalc20;
      }
      &--fixed
      {
          padding-bottom: @remCalc25;
          @media @medium-down
          {
              position: fixed;
              left: 0;
              bottom: 0;
              top: auto;
              width: 100%;
              z-index: 1000;
              margin-top: 0;
              margin-bottom: 0;
          }
      }
   }
    .slick-dots {
    position: relative;
    li {
      &.slick-active button:before {
          background-color: @accentColor;
      }
    }
  }
}
.touch
{
   .itemPreviewView
   {
        .list-item
        {
            &--preview
            {
                .list-item
                {
                    &__wrapper
                    {
                        &:hover
                        {
                            .drop-shadow(0px, 0px, 0px, 0px, 0);
                        }
                    }
                }
            }
        }
    }
}
.off-canvas--move-right
{
    .itemPreviewView
    {
        &__bid-form
        {
            &--fixed
            {
                position: absolute;
                margin-left: @remCalc-10;
                margin-right: @remCalc-10;
                .calc( width , ~"100% + @{remCalc10} + @{remCalc10}" );
            }
        }
    }
}
.off-canvas--minimum
{
    .itemPreviewView
    {
        .bidding-minimum-view(@itemPreviewFormHeight);
        &__bid-form
        {
            &--fixed
            {
                .bidding-minimum-actions();
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .itemPreviewView
        {
            .bidding-minimum-view-constant(@itemPreviewFormHeight);
            &__bid-form
            {
                &--fixed
                {
                    .bidding-minimum-actions-constant();
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .itemPreviewView
        {
            .bidding-minimum-view-env(@itemPreviewFormHeight);
            &__bid-form
            {
                &--fixed
                {
                    .bidding-minimum-actions-env();
                }
            }
        }
    }
}
.placeBid
{
    .make-full-height(true);
}
.placeBidSuccessView
{
  .bidding-view();
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
      &__maximum-bid
      {
          .bidding-max-bidding();
      }
      &__social
      {
          .bidding-social();
      }
      &__actions
      {
          .bidding-actions();
          &__button
          {
             width: auto;
          }
      }
  }
}
.off-canvas--minimum
{
    .placeBidSuccessView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .placeBidSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .placeBidSuccessView
        {
            .bidding-minimum-view-env();
        }
    }
}
.placeDonationSuccessView
{
  .bidding-view();
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
      &__social
      {
          .bidding-social();
      }
      &__actions
      {
          .bidding-actions();
          &__button
          {
             width: auto;
          }
      }
  }
}
.off-canvas--minimum
{
    .placeDonationSuccessView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .placeDonationSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .placeDonationSuccessView
        {
            .bidding-minimum-view-env();
        }
    }
}
@placeBidErrorFormHeight: @remCalc85;
.placeBidErrorView
{
  .bidding-view();
  .calc(padding-bottom, ~"@{placeBidErrorFormHeight} + @{remCalc20}");
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
      &__bid-info
      {
          .bidding-info();
      }
      &__bid-form
      {
          .bidding-form();
      }
  }
}
.off-canvas--move-right
{
    .placeBidErrorView
    {
        &__body
        {
            &__bid-form
            {
                &--fixed
                {
                    position: absolute;
                    margin-left: @remCalc-10;
                    margin-right: @remCalc-10;
                    .calc( width , ~"100% + @{remCalc10} + @{remCalc10}" );
                }
            }
        }
    }
}
.off-canvas--minimum
{
    .placeBidErrorView
    {
        .bidding-minimum-view(@placeBidErrorFormHeight);
        &__body
        {
            &__bid-form
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .placeBidErrorView
        {
            .bidding-minimum-view-constant(@placeBidErrorFormHeight);
            &__body
            {
                &__bid-form
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .placeBidErrorView
        {
            .bidding-minimum-view-env(@placeBidErrorFormHeight);
            &__body
            {
                &__bid-form
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-env();
                    }
                }
            }
        }
    }
}
.placeDonationErrorView
{
  .bidding-view();
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
  }
}
.off-canvas--minimum
{
    .placeDonationErrorView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .placeDonationErrorView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .placeDonationErrorView
        {
            .bidding-minimum-view-env();
        }
    }
}
.lotSearchListView,
.raffleSearchListView
{
    @media @medium-up
    {
        padding: @remCalc20;
    }
    &__header
    {
        .checkout-header();
    }
    &__search-form
    {
    }
    &__results
    {
        position: relative;
        min-height: @remCalc100;
        margin-top: @remCalc40;
        @media @large-up
        {
            margin-top: @remCalc50;
        }
        .loader
        {
           &:before
           {
                top:  @remCalc20;
           }
        }
        .results
        {
            .display-flex(row, wrap, flex-start, flex-start);
            .list-item
            {
                width: 100%;
                &__wrapper
                {
                    width: 100%;
                }
                @media @medium-up
                {
                    width: 50%;
                    &__wrapper
                    {
                        width: 90%;
                    }
                }
                @media @large-up
                {
                    width: 33.333%;
                    &__wrapper
                    {
                        width: 90%;
                    }
                }
            }
        }
        .no-results
        {
            display: block;
            margin: 0 auto;
        }
    }
}
.logoutView
{
    .make-full-height(true, false);
    position: relative;
    &__contents
    {
      width: 80%;
      height: auto;
      position: absolute;
      top: 50%;
      left: 50%;
      .translate(-50%, -50%);
      .translate3d(-50%,-50%,0);
    }
    &__logo
    {
       @bgUrl: '@{logoutLogoUrl}';
       height:  @remCalc75;
       width: 100%;
       background: url(@bgUrl) no-repeat center center;
       background-size: auto 100%;
       background-size: contain;
       display: block;
       margin-bottom: 0;
    }
    &__message
    {
        margin-top:  @remCalc45;
        text-align: center;
        p,
        h4
        {
            color: @colorOnBackground;
        }
    }
    &__actions
    {
        margin-top:  @remCalc20;
        &__button
        {
            margin: 0 auto;
        }
    }
}
.myAccountPage
{
   .intro-logged
   {
      @media @medium-up{
         margin-top: @remCalc30;
      }
   }
}
.forgotPasswordPage {
}
.resetPasswordView
{
    .login-view();
    &__header
    {
      .login-header();
    }
    &__message
    {
      .login-message();
    }
    &__form
    {
       .login-form();
       .reset-password-form-password-error-label
       {
          br
          {
              display: none;
          }
       }
    }
}
.setupPasswordView
{
   .login-view();
   &__header
   {
      .login-header();
   }
   &__message
   {
      .login-message();
   }
   &__form
   {
      .login-form();
      &__button
      {
          margin-bottom: @remCalc10;
      }
      .setup-password-form-password-error-label
      {
         br
         {
             display: none;
         }
      }
   }
}
@confirmBidActionsHeight: @remCalc74;
.confirmBidView
{
  .bidding-view();
  .calc(padding-bottom, ~"@{confirmBidActionsHeight} + @{remCalc20}");
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
      &__form
      {
           //margin-bottom: @remCalc20;
           position: relative;
           @media @medium-up
           {
                margin-bottom: @remCalc40;
           }
           @media @xlarge-up
           {
                margin-bottom: @remCalc70;
           }
      }
      &__bid-actions
      {
          .bidding-actions();
      }
  }
}
.off-canvas--minimum
{
    .confirmBidView
    {
        .bidding-minimum-view(@confirmBidActionsHeight);
        &__body
        {
            &__bid-actions
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .confirmBidView
        {
            .bidding-minimum-view-constant(@confirmBidActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .confirmBidView
        {
            .bidding-minimum-view-env(@confirmBidActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-env();
                    }
                }
            }
        }
    }
}
.off-canvas--move-right
{
    .confirmBidView
    {
        &__body
        {
            &__bid-info
            {
                margin-bottom: @remCalc20;
                @media @medium-up
                {
                    margin-bottom: @remCalc60;
                }
            }
            &__bid-actions
            {
                &--fixed
                {
                    position: relative;
                    margin-left: @remCalc-10;
                    margin-right: @remCalc-10;
                    .calc( width , ~"100% + @{remCalc10} + @{remCalc10}" );
                }
            }
        }
    }
}
@confirmDonationActionsHeight: @remCalc74;
.confirmDonationView
{
  .bidding-view();
  .calc(padding-bottom, ~"@{confirmDonationActionsHeight} + @{remCalc20}");
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
      &__bid-info
      {
          .bidding-info();
          @media @medium-up
          {
               margin-bottom: @remCalc60;
          }
      }
      &__bid-actions
      {
          .bidding-actions();
          &__button
          {
              padding-left: @remCalc10 !important;
              padding-right: @remCalc10 !important;
          }
      }
  }
}
.off-canvas--minimum
{
    .confirmDonationView
    {
        .bidding-minimum-view(@confirmDonationActionsHeight);
        &__body
        {
            &__bid-actions
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .confirmDonationView
        {
            .bidding-minimum-view-constant(@confirmDonationActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .confirmDonationView
        {
            .bidding-minimum-view-env(@confirmDonationActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-env();
                    }
                }
            }
        }
    }
}
.off-canvas--move-right
{
    .confirmDonationView
    {
        &__body
        {
            &__bid-info
            {
                margin-bottom: @remCalc20;
                @media @medium-up
                {
                    margin-bottom: @remCalc60;
                }
            }
            &__bid-actions
            {
                &--fixed
                {
                    position: relative;
                    margin-left: @remCalc-10;
                    margin-right: @remCalc-10;
                    .calc( width , ~"100% + @{remCalc10} + @{remCalc10}" );
                }
            }
        }
    }
}
@confirmDonationActionsHeight: @remCalc74;
.reconcileUnPaidDonationView
{
  .bidding-view();
  .calc(padding-bottom, ~"@{confirmDonationActionsHeight} + @{remCalc20}");
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
           margin-bottom: 1rem;
          &__meta
          {
               font-size: @remCalc18;
               font-weight:normal;
               text-align: center;
          }
      }
      &__message
      {
          .bidding-message();
      }
      &__bid-info
      {
          .bidding-info();
          &__label{
               text-align: left;
               padding-left: .8rem;
          }
          @media @medium-up
          {
               margin-bottom: @remCalc60;
               &__label{
                    padding-left: 10rem;
               }
          }
      }
      &__bid-actions
      {
          .bidding-actions();
          &__button
          {
              padding-left: @remCalc10 !important;
              padding-right: @remCalc10 !important;
              margin-bottom: @remCalc20;
              &__link{
                text-align: center;
                text-decoration: underline;
                margin-bottom:0rem;
              }
          }
      }
  }
}
.off-canvas--minimum
{
    .reconcileUnPaidDonationView
    {
        .bidding-minimum-view(@confirmDonationActionsHeight);
        &__body
        {
            &__bid-actions
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .reconcileUnPaidDonationView
        {
            .bidding-minimum-view-constant(@confirmDonationActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .reconcileUnPaidDonationView
        {
            .bidding-minimum-view-env(@confirmDonationActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-env();
                    }
                }
            }
        }
    }
}
.off-canvas--move-right
{
    .reconcileUnPaidDonationView
    {
        &__body
        {
            &__bid-info
            {
                margin-bottom: @remCalc20;
                @media @medium-up
                {
                    margin-bottom: @remCalc60;
                }
            }
            &__bid-actions
            {
                &--fixed
                {
                    position: relative;
                    margin-left: @remCalc-10;
                    margin-right: @remCalc-10;
                    .calc( width , ~"100% + @{remCalc10} + @{remCalc10}" );
                }
            }
        }
    }
}
.giftAidComponentView
{
  &__header
  {
    font-size: @remCalc24;
  }
  &__message
  {
    margin-bottom: @remCalc15;
  }
  &__status
  {
    &__row
    {
      .checkout-checkbox();
    }
  }
}
.off-canvas--minimum
{
  .giftAidComponentView
  {
    .bidding-minimum-view();
  }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  .off-canvas--minimum
  {
    .giftAidComponentView
    {
      .bidding-minimum-view-constant();
    }
  }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .off-canvas--minimum
  {
    .giftAidComponentView
    {
      .bidding-minimum-view-env();
    }
  }
}
.stripeCustomCheckoutView
{
    .checkout-view();
    &__header
    {
        .checkout-header();
    }
    &__message
    {
        .checkout-message();
        margin-bottom: @remCalc50;
    }
    &__products
    {
        &__empty
        {
            margin-top:  @remCalc40;
            .display-flex(row, nowrap, center, flex-start);
            svg
            {
              width: 76px;
              height: 83px;
              * {
                fill:#9b9b9b;
                stroke:#9b9b9b;
              }
            }
        }
        &__delivery-header
        {
           .display-flex(row, nowrap, center, flex-start);
           margin-bottom: @remCalc20;
           float: left;
           &::after
           {
              clear: both;
           }
           &__label
           {
                width: @remCalc60;
                font-size: @remCalc14;
                font-weight: normal;
                text-align: center;
                color: @checkoutItemFontColor;
                @media @large-up
                {
                  font-size: @remCalc16;
                }
           }
        }
    }
    &__payLaterTickets, &__fundraisingSection
    {
        border-bottom: 1px solid #c1c0c0;
        margin-bottom: @remCalc20;
        &__header{
            margin-bottom: @remCalc10;
            .display-flex(row, nowrap, flex-start, flex-start);
            &__col1
            {
                margin-right: @remCalc15;
            }
            &__col2
            {
                margin-top: -@remCalc5;
            }
        }
    }
    &__totals
    {
        margin-top: @remCalc10;
        margin-bottom: @remCalc30;
        &__label
        {
            font-size: @remCalc16;
            font-weight: bold;
            text-align: right;
            color: @checkoutItemFontColor;
            .set-flex(1);
            @media @large-up
            {
              font-size: @remCalc18;
            }
        }
        &__value
        {
            font-size: @remCalc16;
            font-weight: normal;
            text-align: right;
            color: @checkoutItemFontColor;
            margin-left: @remCalc20;
            @media @large-up
            {
              font-size: @remCalc18;
            }
        }
        &__row
        {
            .display-flex(row, nowrap, flex-end, flex-start);
            margin-top: @remCalc20;
            clear: both;
            &--bigger
            {
              .stripeCustomCheckoutView
              {
                  &__totals
                  {
                      &__label
                      {
                          font-size: @remCalc20;
                          @media @large-up
                          {
                            font-size: @remCalc22;
                          }
                      }
                      &__value
                      {
                          font-size: @remCalc20;
                          @media @large-up
                          {
                            font-size: @remCalc22;
                          }
                      }
                  }
              }
            }
        }
        &__separator
        {
            width: 60%;
            float: right;
            margin-bottom: @remCalc10;
            @media @medium-up
            {
                width: 50%;
            }
        }
    }
    &__gift-aid-now
    {
        .checkout-checkbox();
    }
    &__gift-aid-now-address
    {
        margin-top: @remCalc20;
    }
    &__downloadStatement
    {
        margin-top: @remCalc20;
    }
    &__premiums
    {
        .checkout-checkbox();
        margin-top:  @remCalc20;
        margin-bottom: 0;
        text-align: justify;
        font-size: @remCalc16;
    }
    &__body
    {
        margin-top:  @remCalc30;
    }
    &__form
    {
        .checkout-form();
        &__payment
        {
            &__message
            {
            }
            &__submessage
            {
            }
            &__actions
            {
                .display-flex(column, nowrap, space-between, flex-start);
                &__button
                {
                    width: 100%;
                    margin-bottom: @remCalc20;
                    &:last-child
                    {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}
.off-canvas--minimum
{
    .stripeCustomCheckoutView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .stripeCustomCheckoutView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .stripeCustomCheckoutView
        {
            .bidding-minimum-view-env();
        }
    }
}
.checkoutConfirmationView
{
  .bidding-view();
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
          margin-bottom: @remCalc40;
          text-align: left;
          &__items
          {
              width: 50%;
              margin-bottom: @remCalc40;
              margin-top: @remCalc40;
              &__item
              {
                  .display-flex(row, nowrap, flex-start, flex-start);
                  margin-bottom: @remCalc10;
                  &__col1
                  {
                      text-align: left;
                      width: 60%;
                      font-weight: normal;
                  }
                  &__col2
                  {
                      text-align: right;
                      font-weight: bold;
                  }
              }
          }
      }
      &__actions
      {
          .bidding-actions();
          &__button
          {
             width: auto;
          }
      }
  }
  &__recurringDonation__promo
  {
    margin-bottom: @remCalc30;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    background-color: @panelBgColour;
    border-radius: @remCalc10;
    position: relative;
    overflow: hidden;
    padding: @remCalc20;
    .add-drop-shadow(false);
    .add-drop-shadow-animation();
    .overflow-fix();
    &::after
    {
        background-color: darken(@panelBgColour, 20%);
        .ripple();
    }
    &--focused,
    &:hover
    {
        .add-drop-shadow(true);
    }
    &--focused
    {
        &::after
        {
            .ripple-animation();
        }
    }
    &__header
    {
        .checkout-header();
        margin-bottom: @remCalc15;
    }
  }
}
.off-canvas--minimum
{
    .checkoutConfirmationView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .checkoutConfirmationView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .checkoutConfirmationView
        {
            .bidding-minimum-view-env();
        }
    }
}
.checkoutErrorView
{
  .bidding-view();
  &__title
  {
      .bidding-title();
  }
  &__message
  {
      .bidding-message();
      margin-bottom: @remCalc40;
  }
  &__actions
  {
      .bidding-actions();
      &__button
      {
          width: auto;
      }
  }
}
.off-canvas--minimum
{
    .checkoutErrorView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .checkoutErrorView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .checkoutErrorView
        {
            .bidding-minimum-view-env();
        }
    }
}
@ticketsActionsHeight: @remCalc74;
.tickets-alignment-content()
{
    padding-left: @remCalc10;
    padding-right: @remCalc10;
    @media @medium-up
    {
        padding: @remCalc0;
        width: 60%;
        margin: 0 auto;
    }
    @media @xlarge-up
    {
        width: 40%;
    }
}
.ticketsListView
{
    .remove-content-page-margins();
    .calc(padding-bottom, ~"@{ticketsActionsHeight}");
    &__message-wrapper
    {
        background: #fff;
        position: relative;
        overflow: hidden;
        .add-drop-shadow(false, false);
        width: 100%;
        &__message
        {
            .tickets-alignment-content();
            height:  @remCalc300;
            overflow: hidden;
            @media only screen and (max-width: 320px)
            {
               height:  @remCalc200;
            }
            @media @medium-up
            {
                height:  @remCalc350;
            }
            h2
            {
                font-size: @remCalc27;
            }
            h3
            {
                font-size: @remCalc16;
                margin-bottom: @remCalc5;
            }
            figure.image
            {
                margin-left: @remCalc-10;
                margin-right: @remCalc-10;
                .calc( width, ~"100% + @{remCalc20}");
                margin-bottom: @remCalc20;
                @media @medium-up
                {
                    margin-left: @remCalc-20;
                    margin-right: @remCalc-20;
                    .calc( width, ~"100% + @{remCalc40}");
                }
                figcaption
                {
                    text-align: center;
                    font-size: @remCalc-14;
                }
            }
        }
        &__button
        {
            width: 100%;
            display: block;
            text-align: center;
            cursor: pointer;
            margin-top: @remCalc10;
            margin-bottom: @remCalc10;
            color: @accentColor;
            font-size: @remCalc14;
            box-shadow: 0 @remCalc40 @remCalc50 @remCalc80 #fff;
            position: relative;
            bottom: 0;
            &--show-less
            {
                box-shadow: none;
            }
            &:hover
            {
                color: contrast( #fff, darken( @accentColor, 20%), lighten( @accentColor, 20%));
            }
        }
    }
    &__products__header
    {
        .tickets-alignment-content();
        color: #4a4a4a;
        font-size: @remCalc20;
        margin-top: @remCalc40 !important;
    }
    &__products
    {
        .tickets-alignment-content();
        margin-top: @remCalc20 !important;
        &--no-data
        {
            text-align: center;
        }
        @media @medium-up
        {
            margin-bottom: @remCalc40 !important;
        }
    }
    &__actions
    {
        .display-flex(row, nowrap, space-around, center);
        .fixed-button();
        &__button
        {
            width: 90%;
            @media @medium-up
            {
                width: auto;
            }
        }
    }
    .error
    {
        small.error
        {
            color: @errorColor;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
        }
    }
 }
.off-canvas--minimum
{
    .ticketsListView
    {
        .bidding-minimum-view(@ticketsActionsHeight);
        &__actions
        {
            &--fixed
            {
                .bidding-minimum-actions();
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .ticketsListView
        {
            .bidding-minimum-view-constant(@ticketsActionsHeight);
            &__actions
            {
                &--fixed
                {
                    .bidding-minimum-actions-constant();
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .ticketsListView
        {
            .bidding-minimum-view-env(@ticketsActionsHeight);
            &__actions
            {
                &--fixed
                {
                    .bidding-minimum-actions-env();
                }
            }
        }
    }
}
.off-canvas--move-right
{
    .ticketsListView
    {
        &__actions
        {
            &--fixed
            {
                position: relative;
                margin-left: @remCalc-10;
                margin-right: @remCalc-10;
                .calc( width , ~"100% + @{remCalc10} + @{remCalc10}" );
            }
        }
    }
}
.checkRegistrationView
{
   .login-view();
   &__header
   {
      .login-header();
   }
   &__message
   {
      .login-message();
   }
   &__form
   {
      .login-form();
      &__link
      {
          font-size: @remCalc16;
          font-weight: bold;
          @media @xlarge-up
          {
              font-size: @remCalc18;
          }
      }
   }
   &__footer
   {
      .login-footer();
   }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .placeBidSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .placeBidSuccessView
        {
            .bidding-minimum-view-env();
        }
    }
}
.loginWithPasswordView
{
   .login-view();
   &__header
   {
      .login-header();
   }
   &__message
   {
      .login-message();
   }
   &__form
   {
      .login-form();
      &__button
      {
          margin-bottom: @remCalc10;
      }
   }
   &__forgot
   {
      .login-forgot();
   }
}
.loginWithPinView
{
   .login-view();
   .submit-row
   {
        &.error
        {
            padding:  @remCalc20 0 0 0 !important;
        }
   }
   &__header
   {
      .login-header();
   }
   &__message
   {
      .login-message();
   }
   &__form
   {
      .login-form();
      &__header
      {
          color: @loginTextColor;
          margin-bottom: @remCalc20;
      }
      &__digits
      {
          .login-digits();
      }
      &__button
      {
          margin-bottom: @remCalc10;
      }
   }
   &__forgot
   {
        .login-forgot();
   }
}
@loginWithSMSDigitBgColor: @loginTextColor;
@loginWithSMSDigitTextColor: contrast(@loginWithSMSDigitBgColor, #000000, rgb(255, 255, 255));
@loginWithSMSDigitBorderColor: contrast(@loginWithSMSDigitBgColor, darken(@loginWithSMSDigitBgColor, 10%), lighten(@loginWithSMSDigitBgColor, 10%));
.loginWithSMSCodeView
{
   .login-view();
   .submit-row
   {
        &.error
        {
            padding:  @remCalc20 0 0 0 !important;
        }
   }
   &__header
   {
      .login-header();
   }
   &__message
   {
      .login-message();
   }
   &__form
   {
      .login-form();
      &__header
      {
          color: @loginTextColor;
          margin-bottom: @remCalc20;
      }
      &__digits
      {
          .login-digits(100%, 100%, 100%);
      }
      &__resend
      {
          margin-top: @remCalc20;
          text-align: left;
          &__header
          {
            margin-bottom: @remCalc10;
          }
          &__button
          {
          }
      }
      &__button
      {
          margin-bottom: @remCalc10;
      }
      &__footer
      {
          margin-top: @remCalc20;
          text-align: center;
          color: @loginTextColor;
      }
   }
}
.checkInLinkView
{
    margin-top:  @remCalc40;
    width: 100%;
    display: block;
    @media @medium-up
    {
        margin-top:  @remCalc50;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    &__header
    {
        .bidding-title();
    }
    &__message
    {
        .bidding-message();
    }
    &__actions
    {
        margin: @remCalc100 auto @remCalc20 auto;
        width: 100%;
        .resend-error
        {
            text-align: center;
        }
        &__button
        {
             margin: 0 auto;
        }
    }
}
.off-canvas--minimum
{
    .checkInLinkView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .checkInLinkView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .checkInLinkView
        {
            .bidding-minimum-view-env();
        }
    }
}
.forgotPasswordSuccessView
{
    margin-top:  @remCalc40;
    width: 100%;
    display: block;
    @media @medium-up
    {
        margin-top:  @remCalc50;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
    &__header
    {
        .bidding-title();
    }
    &__message
    {
        .bidding-message();
    }
}
.redirectToCheckoutView
{
    .make-full-height(true);
}
.rafflesListView
{
    .checkout-view();
    &__header
    {
        .checkout-header();
    }
    &__message
    {
        .checkout-message();
        margin-bottom: @remCalc50;
    }
    &__products
    {
      margin-bottom: @remCalc40;
      &__list {
        width: 100%;
        margin-top: @remCalc20;
        td, th {
          text-align: center;
          padding-right: @remCalc10;
          padding-bottom: @remCalc16;
          vertical-align: top;
          &:last-of-type{
            padding-right: 0px;
          }
        }
        th{
          padding-bottom: @remCalc20;
        }
        td {
          padding-top: @remCalc10;
        }
        .title {
          text-align: left;
        }
        td.quantity {
          padding-top: 0px;
        }
        select {
           margin: 0;
           text-align: right;
        }
        a
        {
           line-height: normal;
           text-decoration: underline;
        }
      }
    }
    &__extra-details
    {
        margin-bottom: @remCalc40;
    }
    &__actions
    {
        .display-flex(row, nowrap, center, flex-start);
    }
    .error
    {
        small.error
        {
            color: @errorColor;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
        }
    }
 }
@confirmRaffleActionsHeight: @remCalc74;
.confirmRafflePurchaseView
{
  .bidding-view();
  .calc(padding-bottom, ~"@{confirmRaffleActionsHeight} + @{remCalc20}");
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
        &__purchase-Label
        {
            .bidding-message();
            font-size: @remCalc32;
        }
      &__bid-info
      {
          .bidding-info();
      }
      &__bid-actions
      {
          .bidding-actions();
          &__button
          {
              width: auto;
          }
      }
  }
}
.off-canvas--minimum
{
    .confirmRafflePurchaseView
    {
        .bidding-minimum-view(@confirmRaffleActionsHeight);
        &__body
        {
            &__bid-actions
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .confirmRafflePurchaseView
        {
            .bidding-minimum-view-constant(@confirmRaffleActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .confirmRafflePurchaseView
        {
            .bidding-minimum-view-env(@confirmRaffleActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-env();
                    }
                }
            }
        }
    }
}
.off-canvas--move-right
{
    .confirmRafflePurchaseView
    {
        &__body
        {
            &__bid-info
            {
                margin-bottom: @remCalc20;
                @media @medium-up
                {
                    margin-bottom: @remCalc60;
                }
            }
            &__bid-actions
            {
                &--fixed
                {
                    position: relative;
                    margin-left: @remCalc-10;
                    margin-right: @remCalc-10;
                    .calc( width , ~"100% + @{remCalc10} + @{remCalc10}" );
                }
            }
        }
    }
}
.rafflePurchaseErrorView
{
  .bidding-view();
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
  }
}
.off-canvas--minimum
{
    .rafflePurchaseErrorView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .rafflePurchaseErrorView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .rafflePurchaseErrorView
        {
            .bidding-minimum-view-env();
        }
    }
}
.rafflePurchaseSuccessView
{
  .bidding-view();
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
      &__social
      {
          .bidding-social();
      }
      &__actions
      {
          .bidding-actions();
          &__button
          {
             width: auto;
          }
      }
  }
}
.off-canvas--minimum
{
    .rafflePurchaseSuccessView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .rafflePurchaseSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .rafflePurchaseSuccessView
        {
            .bidding-minimum-view-env();
        }
    }
}
@raffleItemPreviewFormHeight: @remCalc138;
.raffleItemPreviewView
{
    .calc(padding-bottom, ~"@{raffleItemPreviewFormHeight} + @{remCalc20}");
    @media @large-up
    {
        padding: @remCalc20;
    }
}
.off-canvas--minimum
{
    .raffleItemPreviewView
    {
        .bidding-minimum-view(@remCalc128);
        &__bid-form
        {
            &--fixed
            {
                .bidding-minimum-actions();
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .raffleItemPreviewView
        {
            .bidding-minimum-view-constant(@raffleItemPreviewFormHeight);
            &__bid-form
            {
                &--fixed
                {
                    .bidding-minimum-actions-constant();
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .raffleItemPreviewView
        {
            .bidding-minimum-view-env(@raffleItemPreviewFormHeight);
            &__bid-form
            {
                &--fixed
                {
                    .bidding-minimum-actions-env();
                }
            }
        }
    }
}
.uploadView
{
    .checkout-view();
    @media @xlarge-up
    {
        width: 40%;
    }
    .mandatory
    {
        color: @errorColor;
    }
    &__header
    {
        .checkout-header();
    }
    &__form
    {
        .checkout-form();
        fieldset
        {
            margin-bottom: @remCalc20;
        }
        &__upload-previews
        {
            margin-top: @remCalc20;
            position: relative;
            .progress-wrapper
            {
                .meter
                {
                    display: none;
                }
            }
        }
    }
    &__message
    {
        .checkout-message();
    }
    &__actions
    {
        margin-top: @remCalc30;
        &__button
        {
            width: auto;
            margin: 0 auto;
        }
    }
}
.off-canvas--minimum
{
    .uploadView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .uploadView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .uploadView
        {
            .bidding-minimum-view-env();
        }
    }
}
.uploadSuccessView
{
    .make-full-height(true, false);
    position: relative;
    &__contents
    {
        width: 80%;
        height: auto;
        position: absolute;
        top: 30%;
        left: 50%;
        .translate(-50%, -50%);
        .translate3d(-50%,-50%,0);
    }
    &__message1,
    &__message2
    {
        margin-top:  @remCalc45;
        text-align: center;
        p,
        h4
        {
            color: @colorOnBackground;
        }
    }
    &__actions
    {
        margin-top:  @remCalc70;
        &__button
        {
            margin: 0 auto;
        }
    }
}
@dialog-close-size: @remCalc55;
@dialog-close-x-width: @remCalc20;
@dialog-close-padding: @remCalc10;
.dialog
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1100;
    .display-flex( column,  nowrap, center, center );
    background-color: transparent;
    -webkit-overflow-scrolling: touch;
    transition: background-color 0.1s;
    padding: @remCalc10;
    &__content
    {
        position: relative;
        .border-radius( @remCalc5);
        margin: auto;
        padding: @remCalc20;
        .add-drop-shadow(false, true);
        background: #fff;
        @media @medium-up
        {
            padding: @remCalc50;
        }
    }
    &--show
    {
        background-color: rgba(0,0,0,0.4);
        .dialog
        {
            &__content
            {
                -webkit-animation: dialog-show 0.3s;
                animation: dialog-show 0.3s;
            }
        }
    }
    &--hide
    {
        background-color: transparent;
        .dialog
        {
            &__content
            {
                -webkit-animation: dialog-hide 0.3s;
                animation: dialog-hide 0.3s;
            }
        }
    }
}
// Appearance animation
@-webkit-keyframes dialog-show {
    0% {
        -webkit-transform: scale(.7);
    }
    45% {
        -webkit-transform: scale(1.05);
    }
    80% {
        -webkit-transform: scale(.95);
    }
    100% {
        -webkit-transform: scale(1);
    }
}
@keyframes dialog-show {
    0% {
        transform: scale(.7);
    }
    45% {
        transform: scale(1.05);
    }
    80% {
        transform: scale(.95);
    }
    100% {
        transform: scale(1);
    }
}
  // Disppearance animation
  @keyframes dialog-hide {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(.5);
      opacity: 0;
    }
  }
.completeRegistrationView
{
    .bidding-body();
    &__header
    {
        .bidding-title();
    }
    &__message
    {
        .bidding-message();
    }
}
.ticketItem
{
    background-color: #fff;
    .add-drop-shadow(false, false, false);
    border-radius: @remCalc10;
    margin-bottom: @remCalc30;
    &__row
    {
        padding: @remCalc10 @remCalc20;
    }
    &__title
    {
        font-size:  @remCalc16;
        margin-bottom: @remCalc20;
        font-weight: bold;
    }
    &__price-section
    {
        .display-flex(row, nowrap, flex-start, center);
        &__price
        {
            .set-flex(1);
            font-size:  @remCalc16;
            padding-right: @remCalc20;
        }
        &__actions
        {
        }
    }
    &__actions
    {
        .display-flex(row, nowrap, center, center);
        &__button
        {
            display: block;
            margin: 0;
            padding: 0;
            line-height: 1.5;
            overflow: hidden;
            .overflow-fix();
        }
        &__selected-quantity
        {
            height: @remCalc50;
            width: @remCalc50;
            .display-flex(column, nowrap, center, center);
            font-size: @remCalc20;
            color: #000;
        }
    }
    &__description-section
    {
        padding: @remCalc10 @remCalc20;
        border-top: @remCalc1 solid #e7e7e7;
        &__description
        {
            display: none;
            color: #4a4a4a;
            font-size: @remCalc14;
            margin-bottom: @remCalc20;
            @media @large-up
            {
                font-size: @remCalc16;
            }
        }
        &__button
        {
            font-size: @remCalc14;
            color: #377ef7;
            .transition( background-color 167ms ease-in);
            &:hover
            {
                color: darken(#377ef7, 20%);
            }
        }
    }
}
.ticekts-booking-tab-content()
{
    margin-top: @remCalc20;
}
.tickets-booking-tab-content-actions()
{
    margin-top: @remCalc30;
    &__button
    {
        width: auto;
        margin: 0 auto;
    }
}
.tickets-booking-form()
{
    border: @remCalc1 solid #ddd;
    border-radius: @remCalc10;
    margin-bottom: @remCalc30;
    .mandatory
    {
        color: @errorColor;
    }
    &__header
    {
        padding:  @remCalc20 @remCalc20;
        .display-flex(row, nowrap, flex-start, center);
        &__title
        {
            color: @accentColor;
            font-size: @remCalc18;
            margin: 0;
            .set-flex(1);
        }
        &__actions
        {
            &__action
            {
                text-decoration: none !important;
            }
        }
    }
    &__wrapper
    {
        border-top: @remCalc1 solid #ddd;
        padding:  @remCalc20 @remCalc20 @remCalc20 @remCalc20;
    }
    .error small.error
    {
        color: @errorColor;
    }
}
.tickets-booking-form-footer()
{
    margin-top: @remCalc20;
    text-align: center;
    color: @colorOnBackground;
    font-size: @remCalc14;
    @media @xlarge-up
    {
        font-size: @remCalc16;
    }
}
.ticketsBooking
{
    .remove-content-page-margins();
    @media @medium-up
    {
        padding: @remCalc0 @remCalc0 @remCalc40 @remCalc0;
        width: 60%;
        margin: 0 auto;
    }
    @media @xlarge-up
    {
        width: 40%;
    }
    &__banner
    {
        &__icon
        {
            width: @remCalc15;
            height: @remCalc15;
            margin-right: @remCalc10;
            fill: #fff;
        }
    }
    &__accordion
    {
        margin-top: @remCalc40;
    }
    &__order-summary
    {
        > div
        {
            .ticekts-booking-tab-content();
        }
        .loader
        {
            background: #fff;
        }
        &__promo
        {
            &__label
            {
                display: block;
                font-size: @remCalc14;
                margin-top: @remCalc10;
                margin-bottom: @remCalc10;
                .link(false);
            }
            .inputRow
            {
                margin: 0;
                .input__field--valid ~ .input__icon--tick
                {
                    opacity: 0;
                }
            }
            &__wrapper
            {
                .display-flex(row, nowrap, flex-start, center);
                &--hide
                {
                    display: none;
                }
            }
            &__value
            {
                .set-flex(1);
            }
            &__actions
            {
                margin-left: @remCalc20;
            }
        }
        &__products
        {
            border-bottom: @remCalc1 solid #ddd;
            &__item
            {
                .display-flex(row, nowrap, flex-start, center);
                margin-bottom: @remCalc10;
                &__title
                {
                    font-size: @remCalc14;
                    .set-flex(1);
                    @media @large-up
                    {
                        font-size: @remCalc16;
                    }
                }
                &__amount
                {
                    font-size: @remCalc14;
                    text-align: right;
                    color: lighten(@colorOnBackground, 40%);
                    @media @large-up
                    {
                        font-size: @remCalc16;
                    }
                }
                &__actions
                {
                    width: 0;
                    height: @remCalc22;
                    overflow: hidden;
                    .transition( width 167ms ease-in );
                    @media @large-up
                    {
                        height: @remCalc25;
                    }
                    &--show
                    {
                        width: @remCalc32;
                    }
                    &__delete
                    {
                        cursor: pointer;
                        display: block;
                        height: @remCalc22;
                        width: @remCalc22;
                        @media @large-up
                        {
                            height: @remCalc25;
                        }
                        svg
                        {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }
        &__totals
        {
            &__row
            {
                .display-flex(row, nowrap, flex-start, center);
                margin-top:  @remCalc20;
                &--top
                {
                    .display-flex(row, nowrap, flex-start, flex-start);
                }
            }
            &__label
            {
                font-size: @remCalc14;
                .set-flex(1);
                font-weight: bold;
                margin-right:  @remCalc20;
                @media @large-up
                {
                    font-size: @remCalc16;
                }
            }
            &__value
            {
                font-size: @remCalc14;
                font-weight: bold;
                text-align: right;
                &.discount-amount
                {
                    color: #68ce84;
                }
                &__row2
                {
                    margin-top: @remCalc10;
                }
                @media @large-up
                {
                    font-size: @remCalc16;
                }
            }
        }
        &__premiums
        {
            .checkout-checkbox();
            font-size:  @remCalc14;
            @media @large-up
            {
                font-size: @remCalc16;
            }
        }
        &__ticket-booking-fees
        {
            .checkout-checkbox();
            font-size:  @remCalc14;
            @media @large-up
            {
                font-size: @remCalc16;
            }
        }
        &__empty
        {
            margin-top:  @remCalc40;
            .display-flex(row, nowrap, center, flex-start);
            svg
            {
              width: @remCalc76;
              height: @remCalc83;
              * {
                fill:#9b9b9b;
                stroke:#9b9b9b;
              }
            }
        }
    }
    &__info {
        .display-flex(row, nowrap, flex-start, center);
        background: none;
        padding: @remCalc20 0 @remCalc20 0;
        margin-bottom: @remCalc30;
        &__icon {
            padding: @remCalc20;
            margin-right: @remCalc10;
            .display-flex(row, nowrap, center, center);
            border-radius: @remCalc5;
            position: relative;
            svg {
                width: @remCalc30;
                height: @remCalc40;
            }
        }
    }
    &__details
    {
        > div
        {
            .ticekts-booking-tab-content();
        }
        &__form
        {
            &__attending
            {
                .checkout-checkbox(center);
            }
        }
        &__actions
        {
        }
    }
    &__questions
    {
        > div
        {
            .ticekts-booking-tab-content();
        }
        .loader
        {
            background: #fff;
        }
        &__form
        {
            .mandatory
            {
                color: @errorColor;
            }
            .error small.error
            {
                color: @errorColor;
            }
        }
        &__actions
        {
            .tickets-booking-tab-content-actions();
        }
    }
    &__add-tables
    {
        > div
        {
            .ticekts-booking-tab-content();
        }
        a
        {
            .link();
        }
        &__list
        {
            &__item
            {
                background-color: #fff;
                .add-drop-shadow(false, false, true);
                border-radius: @remCalc10;
                margin-bottom: @remCalc30;
                &__form
                {
                    .tickets-booking-form();
                }
            }
        }
        &__actions
        {
            .tickets-booking-tab-content-actions();
        }
        &__footer
        {
            .tickets-booking-form-footer();
        }
    }
    &__assign-tickets
    {
        > div
        {
            .ticekts-booking-tab-content();
        }
        .loader
        {
            background: #fff;
        }
        a
        {
            .link();
        }
        &__form
        {
            .tickets-booking-form();
            &__attending
            {
                .checkout-checkbox(center);
            }
            &__show-additional-link,
            &__hide-additional-link
            {
                .link(false);
                display: block;
                margin-top: @remCalc10;
                align-items: center;
            }
            [name=dietaryRequirements]
            {
                &.input__field--empty
                {
                    ~ .input__icon--tick
                    {
                        opacity: 0;
                    }
                }
            }
            &__actions
            {
                .tickets-booking-tab-content-actions();
            }
        }
        &__duplicate-error
        {
            font-size: @remCalc14;
            padding-top: @remCalc10;
            color: @errorColor;
            display: none;
        }
        &__actions
        {
            margin-top: @remCalc20;
            margin-bottom: @remCalc50;
            &__button
            {
                width: 100%;
                margin: 0 auto;
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-top: @remCalc10;
                @media @medium-up
                {
                    width: 60%;
                }
                @media @large-up
                {
                    width: 40%;
                }
            }
        }
        &__footer
        {
            .tickets-booking-form-footer();
        }
    }
    &__confirm-order
    {
        > div
        {
            .ticekts-booking-tab-content();
        }
        .loader
        {
            background: #fff;
        }
    }
    &__payment
    {
        > div
        {
            .ticekts-booking-tab-content();
        }
        .loader
        {
            background: #fff;
        }
        a
        {
            .link();
        }
        &__info
        {
			padding-left: @remCalc35;
			padding-right: @remCalc35;
			display: none;
        }
		&__label
		{
			font-weight: bold;
		}
        &__actions
        {
            &__button
            {
            	margin:0 auto;
                width: 46%;
                padding-top: 0;
                padding-bottom: 0;
                padding-left: @remCalc10 !important;
                padding-right: @remCalc10 !important;
                @media @medium-up
                {
                    width: 40%;
                }
                @media @xlarge-up
                {
                    width: 30%;
                }
            }
        }
        &__footer
        {
            .tickets-booking-form-footer();
            margin-top: @remCalc40;
        }
    }
}
.off-canvas--minimum
{
    .ticketsBooking
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .ticketsBooking
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .ticketsBooking
        {
            .bidding-minimum-view-env();
        }
    }
}
.paymentProvider-message()
{
    font-size: @remCalc16;
    color: @colorOnBackground;
    margin: 0 0 @remCalc20 0;
    padding: 0;
    @media @xlarge-up
    {
      font-size: @remCalc18;
    }
}
.paymentProvider
{
    position: relative;
    &__choose
    {
        &__message
        {
            .paymentProvider-message();
        }
        &__options
        {
            &__apple-pay-button
            {
            }
            &__card-pay-button
            {
                width: 100%;
                margin-top: @remCalc20;
                &__icon
                {
                    width: @remCalc30;
                    height: @remCalc16;
                    fill: #ffffff;
                    display: inline;
                    padding-left: @remCalc5;
                    margin-bottom: @remCalc-2;
                }
            }
        }
    }
    &__credit-card
    {
        &__message
        {
            .paymentProvider-message();
        }
        &__switch-to-apple-pay
        {
            .link();
            margin-top: @remCalc20;
            margin-bottom: @remCalc20;
            text-align: center;
        }
        &__form
        {
        }
    }
    &__loader
    {
        .calc( width , ~"100% + @{remCalc30}" );
        .calc( height , ~"100% + @{remCalc30}" );
        top: @remCalc-15;
        left: @remCalc-15;
    }
}
.ticketsBookingConfirmed
{
    padding-bottom: @remCalc40;
    position: relative;
    @media @medium-up
    {
        padding: @remCalc20 @remCalc0 @remCalc40 @remCalc0;
        width: 60%;
        margin: 0 auto;
    }
    &__header
    {
        font-size: @remCalc20;
        text-align: left;
        font-weight: bold;
        color: @accentColor;
        margin-bottom: @remCalc10;
    }
    &__info
    {
        .display-flex(row, nowrap, flex-start, flex-start );
        background: #fcfcfc;
        padding:  @remCalc20;
        border-radius: @remCalc5;
        border:  @remCalc1 solid darken(#fcfcfc, 10%);
        margin-bottom: @remCalc20;
        &__icon
        {
            background: #f5f5f5;
            padding:  @remCalc20;
            .display-flex(row, nowrap, center, center );
            border-radius: @remCalc5;
            position: relative;
            svg
            {
                width: @remCalc30;
                height: @remCalc40;
            }
            &__counter
            {
                .display-flex(row, nowrap, center, center );
                width: @remCalc30;
                height: @remCalc30;
                border-radius: 50%;
                .add-drop-shadow();
                background: #fff;
                color: @accentColor;
                font-size: @remCalc14;
                position: absolute;
                bottom: @remCalc-10;
                right: @remCalc-10;
            }
        }
        &__details
        {
            .set-flex(1);
            margin-left: @remCalc40;
            color: @colorOnBackground;
            &__header
            {
                font-size: @remCalc16;
                color: @accentColor;
                margin-bottom: @remCalc0;
                @media @xlarge-up
                {
                    font-size: @remCalc18;
                }
            }
            &__paragraph
            {
                margin-bottom: @remCalc0;
                font-size: @remCalc14;
                @media @xlarge-up
                {
                    font-size: @remCalc16;
                }
            }
        }
    }
    &__products
    {
        margin-bottom: @remCalc10;
        &__header
        {
            font-size: @remCalc14;
            font-weight: bold;
            margin-bottom: @remCalc10;
            @media @large-up
            {
                font-size: @remCalc16;
            }
        }
    }
    &__totals
    {
        margin-bottom: @remCalc20;
        &__row
        {
            .display-flex(row, nowrap, flex-start, center);
            margin-top:  @remCalc20;
            &.discount-amount-row
            {
                .ticketsBookingConfirmed__totals__value
                {
                    color: #68ce84;
                }
            }
            &--bigger
            {
              .ticketsBookingConfirmed
              {
                  &__totals
                  {
                      &__label
                      {
                      }
                      &__value
                      {
                          font-weight: bold;
                      }
                  }
              }
            }
        }
        &__label
        {
            font-size: @remCalc14;
            .set-flex(1);
            font-weight: bold;
            margin-right:  @remCalc20;
            @media @large-up
            {
                font-size: @remCalc16;
            }
        }
        &__value
        {
            font-size: @remCalc14;
            font-weight: normal;
            text-align: right;
            @media @large-up
            {
                font-size: @remCalc16;
            }
        }
    }
    &__sent_confirmation
    {
        padding:  @remCalc20;
        background: #fcfcfc;
        border-radius: @remCalc5;
        margin-bottom: @remCalc20;
        border:  @remCalc1 solid darken(#fcfcfc, 10%);
        font-size: @remCalc14;
        @media @large-up
        {
            font-size: @remCalc16;
        }
        b
        {
            color: #3175f6;
        }
    }
    &__next_step
    {
        margin-bottom: @remCalc70;
        p
        {
            font-size: @remCalc12;
        }
    }
    &__actions
    {
        &__wrapper
        {
            .display-flex(row, nowrap, space-around, center);
        }
        &__button
        {
            width: 46%;
            padding-top: 0;
            padding-bottom: 0;
            @media @medium-up
            {
                width: 40%;
            }
            @media @xlarge-up
            {
                width: 30%;
            }
        }
    }
}
.off-canvas--minimum
{
    .ticketsBookingConfirmed
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .ticketsBookingConfirmed
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .ticketsBookingConfirmed
        {
            .bidding-minimum-view-env();
        }
    }
}
.ticketsExpiredView
{
    .checkout-view();
    &__header
    {
        .checkout-header();
    }
    &__message
    {
        .checkout-message();
    }
    &__actions
    {
        margin-top: @remCalc100;
        &__button
        {
            width: auto;
            margin: 0 auto;
        }
    }
}
.off-canvas--minimum
{
    .ticketsExpiredView
    {
        .bidding-minimum-view();
    }
}
.dialog
{
    .ticketsExpiredView
    {
        width: 100%;
        padding-bottom: 0;
        padding-top: 0;
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .ticketsExpiredView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .ticketsExpiredView
        {
            .bidding-minimum-view-env();
        }
    }
}
.ticketsQuestionsList
{
    display: block;
    margin: 0;
    padding: 0;
    &__items
    {
        margin: 0;
        padding: 0;
    }
    &__item
    {
        margin-bottom: @remCalc20;
        list-style-type: none;
        &__title
        {
            width: 100%;
            color: #000;
            margin-bottom: @remCalc10;
            font-size: @remCalc16;
        }
        &__body
        {
            padding: @remCalc0 @remCalc20 @remCalc0 @remCalc5;
            &__answer
            {
                width: 100%;
            }
            &__options
            {
                &__option
                {
                    margin-bottom: @remCalc10;
                    width: 100%;
                    .display-flex(row, wrap, flex-start, center);
                    &__type
                    {
                        width: auto;
                        height:  auto;
                        &__radio,
                        &__checkbox
                        {
                            padding: 0;
                            margin: 0;
                        }
                    }
                    &__value
                    {
                        .set-flex(1);
                        margin-left: @remCalc20;
                        color: #000;
                        font-size: @remCalc16;
                    }
                }
            }
        }
    }
}
.upload-content
{
  height: @remCalc100;
  width: @remCalc150;
  border: @remCalc1 solid #cccccc;
  position: relative;
  margin-right: @remCalc10;
  margin-bottom: @remCalc10;
  background-color: #fff;
  background-size: auto 90%;
  background-repeat: no-repeat no-repeat;
  background-position: center center;
  float: left;
  video
  {
    width: 100%;
    height: 100%;
  }
  .i-button
  {
      &--do-stop
      {
          display: none;
      }
  }
  > span {
    top: 50%;
    left: 50%;
    position: absolute;
    .translate(-50%, -50%);
  }
  .progress {
    bottom: 0;
    left: 0;
    position: absolute;
    margin: 0;
    width: 100%;
    padding: 0;
    border: 0 none;
  }
  &.error
  {
    &:before
    {
      position: absolute;
      content: "Download error";
      display: block;
      text-align: center;
      left: 50%;
      top: 50%;
      .translate(-50%, -50%);
    }
  }
}
.edit-content
{
  cursor: pointer;
  > span, .progress
  {
    display: none;
  }
  &.deleteable
  {
      .i-button
      {
          &--do-stop
          {
              display: block;
          }
      }
  }
}
@bidConversionActionsHeight: @remCalc74;
.bidConversionView
{
    .bidding-view();
    .calc(padding-bottom, ~"@{bidConversionActionsHeight} + @{remCalc20}");
    &__header
    {
        .bidding-header();
    }
    &__body
    {
        .bidding-body();
        &__title
        {
            .bidding-title();
        }
        &__message
        {
            .bidding-message();
        }
    
        &__bid-info
        {
            .bidding-info();
            @media @medium-up
            {
                margin-bottom: @remCalc60;
            }
            &__label
            {
                padding-top: @remCalc7;
            }
        }
        &__bid-actions
        {
            .bidding-actions();
            &__button
            {
                padding-left: @remCalc10 !important;
                padding-right: @remCalc10 !important;
            }
        }
        .amount-wrapper
        {
            background: #fff;
            border: @remCalc1 solid #bbb;
            .border-radius(@remCalc4);
            margin-bottom: 0;
            @media @medium-up
            {
                width: 75%;
            }
        }
        .currency-wrapper
        {
            padding-right: @remCalc5;
        }
        .currency
        {
            font-size: @remCalc18;
            line-height: 100%;
            color: #4d4d4d;
            font-weight: normal;
            margin-bottom: 0;
            display: block;
            .display-flex(column, nowrap, center, center);
        }
        input
        {
            background: transparent;
            color: #4d4d4d;
            border: 0px none;
            margin: 0;
            height: @remCalc32;
            width: 100%;
            padding-right: @remCalc10;
            padding-top: 0rem;
            padding-bottom: 0rem;
            padding-left: 0rem;
            font-weight: normal;
            line-height: 100%;
            display: block;
            .placeholder( #66717b );
            &::-webkit-input-placeholder
            {
                line-height: normal;
                font-size: @remCalc18;
            }
            &:-moz-placeholder
            {
                font-size: @remCalc18;
            }
            &::-moz-placeholder
            {
                font-size: @remCalc18;
            }
            &:-ms-input-placeholder
            {
                line-height: normal;
                font-size: @remCalc18;
            }
            &.error
            {
                color: darken(#ff0000, 10%);
                .placeholder( #66717b );
            }
            &[name=amount]
            {
                font-size: @remCalc20;
            }
        }
        small.error
        {
            position: absolute;
            margin: 0 !important;
            top: @remCalc7 !important;
            left: @remCalc-30 !important;
            padding: 0.375rem 0.5625rem 0.5625rem !important;
            .transition( all 300ms ease-in ) !important;
            .translate(0, 0 );
            .translate3d(0, 0, 0);
            white-space: nowrap !important;
            font-size: @remCalc13 !important;
            height: auto !important;
            width: auto !important;
            opacity: 0;
        }
        .error
        {
            small.error
            {
                .translate(0, -100% );
                .translate3d(0, -100%, 0);
                opacity: 1;
                color: @accentFontColor;
            }
            input
            {
                color: #ff0000;
            }
            &::-webkit-input-placeholder
            {
                color: #ff0000;
            }
            &:-moz-placeholder
            {
                color: #ff0000;
            }
            &::-moz-placeholder
            {
                color: #ff0000;
            }
            &:-ms-input-placeholder
            {
                color: #ff0000;
            }
        }
    }
}
.off-canvas--minimum
{
    .bidConversionView
    {
        .bidding-minimum-view(@bidConversionActionsHeight);
        &__body
        {
            &__bid-actions
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .bidConversionView
        {
            .bidding-minimum-view-constant(@bidConversionActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .bidConversionView
        {
            .bidding-minimum-view-env(@bidConversionActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-env();
                    }
                }
            }
        }
    }
}
.off-canvas--move-right
{
    .bidConversionView
    {
        &__body
        {
            &__bid-info
            {
                margin-bottom: @remCalc20;
                @media @medium-up
                {
                    margin-bottom: @remCalc60;
                }
            }
            &__bid-actions
            {
                &--fixed
                {
                    position: relative;
                    margin-left: @remCalc-10;
                    margin-right: @remCalc-10;
                    .calc( width , ~"100% + @{remCalc10} + @{remCalc10}" );
                }
            }
        }
    }
}
.ticketsManage, .addOnTickets
{
    padding-bottom: @remCalc40;
    position: relative;
    background: #fff;
    padding-left: @remCalc20;
    padding-right: @remCalc20;
    @media @medium-up
    {
        padding: @remCalc20 @remCalc20 @remCalc40 @remCalc20;
        width: 80%;
        margin: 0 auto;
    }
    &__header
    {
        font-size: @remCalc20;
        text-align: left;
        font-weight: bold;
        color: @accentColor;
        margin-bottom: @remCalc10;
    }
    &__subheader
    {
        font-size: @remCalc14;
        text-align: left;
        font-weight: normal;
        color: #000;
        margin-bottom: @remCalc20;
    }
    &__info
    {
        .display-flex(row, nowrap, flex-start, flex-start );
        background: none;
        padding:  @remCalc20 0 @remCalc20 0;
        border-bottom:  @remCalc1 solid darken(#fcfcfc, 10%);
        margin-bottom: @remCalc30;
        &__header
        {
            display: block;
            color: #000;
            font-size: @remCalc18;
            text-align: left;
            font-weight: bold;
            margin-bottom: 0;
            margin-top: @remCalc10;
        }
        &__icon
        {
            background: #F8F8F8;
            padding:  @remCalc20;
            .display-flex(row, nowrap, center, center );
            border-radius: @remCalc5;
            position: relative;
            svg
            {
                width: @remCalc30;
                height: @remCalc40;
            }
            &__counter
            {
                .display-flex(row, nowrap, center, center );
                width: @remCalc30;
                height: @remCalc30;
                border-radius: 50%;
                .add-drop-shadow();
                background: #fff;
                color: @accentColor;
                font-size: @remCalc14;
                position: absolute;
                bottom: @remCalc-10;
                right: @remCalc-10;
            }
        }
        &__details
        {
            .set-flex(1);
            margin-left: @remCalc40;
            color: @colorOnBackground;
            &__header
            {
                font-size: @remCalc16;
                color: @accentColor;
                margin-bottom: @remCalc0;
                @media @xlarge-up
                {
                    font-size: @remCalc18;
                }
            }
            &__paragraph
            {
                margin-bottom: @remCalc0;
                font-size: @remCalc14;
                @media @xlarge-up
                {
                    font-size: @remCalc16;
                }
            }
        }
    }
    &__highLightWarning{
        background: linear-gradient(0deg, rgba(255, 207, 80, 0.1), rgba(255, 207, 80, 0.1)),
        linear-gradient(0deg, #FFF9E9, #FFF9E9) top center;
        display: flex;
        align-items: center;
    }
    &__products
    {
        margin-bottom: @remCalc10;
        &__header
        {
            font-size: @remCalc18;
            font-weight: bold;
            color: #000;
            margin-bottom: @remCalc20;
            @media @large-up
            {
                font-size: @remCalc16;
            }
        }
    }
    &__no-data
    {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        display: none;
        .make-full-height(true, true);
        &__icon
        {
            padding:  @remCalc20;
            .display-flex(row, nowrap, center, center );
            position: relative;
            svg
            {
                width: @remCalc30;
                height: @remCalc40;
            }
        }
        &__header
        {
            color: #000;
            font-size: @remCalc14;
            text-align: center;
            margin-bottom: @remCalc40;
        }
        &__actions
        {
        }
        &--show
        {
            .display-flex(column, nowrap, center, center );
        }
    }
    &--no-data
    {
        background: transparent;
    }
}
.off-canvas--minimum
{
    .ticketsManage
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .ticketsManage
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .off-canvas--minimum
    {
        .ticketsManage
        {
            .bidding-minimum-view-env();
        }
    }
}
.ticketsAccept
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .display-flex(column, nowrap, center, center );
    &__icon
    {
        padding:  @remCalc20;
        .display-flex(row, nowrap, center, center );
        position: relative;
        svg
        {
            width: @remCalc30;
            height: @remCalc40;
            -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
            animation: sk-rotateplane 1.2s infinite ease-in-out;
        }
    }
    &__header
    {
        color: #000;
        font-size: @remCalc14;
        text-align: center;
        margin-bottom: @remCalc40;
        &--error
        {
            color: @errorColor;
        }
    }
}
@-webkit-keyframes sk-rotateplane
{
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@keyframes sk-rotateplane
{
    0%
    {
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50%
    {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100%
    {
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }
.commentsListView {
  position: relative;
  > .loader {
    z-index: 1;
  }
}
.show-more-button {
  border: @remCalc1 solid #9b9b9b;
  color: #a0a0a0;
  background-color: #fff;
  font-size: @remCalc20;
  width: 100%;
  margin-top: 20px;
  .transition(background-color 300ms ease-in);
  &:hover
  {
      background-color: @accentColor;
      color: contrast(@accentColor, #000000, #ffffff);
  }
}
.comments-header {
  font-size: @remCalc20;
  font-weight: bold;
  margin-top: 0;
}
.comments-list {
  background: #fff;
  .border-radius(@remCalc10);
  .add-drop-shadow(false);
  padding: 0 @remCalc15 0 @remCalc15;
  .no-data
  {
    padding: @remCalc15;
  }
}
.comments-list-item {
  border-bottom: @remCalc1 solid #e8e8e8;
  width: 100%;
  padding-top: @remCalc15;
  padding-bottom: @remCalc15;
  &:last-child {
    border-bottom: none;
  }
  &__wrapper {
    .display-flex(row, nowrap, flex-start, flex-start);
  }
  &__profile-icon
  {
      width: @remCalc32;
      height: @remCalc32;
      .background {
        fill: #e8e8e8;
      }
  }
  &__details
  {
      .set-flex(1);
      margin-left: @remCalc7;
     &__name {
       color: #5b5b5b;
       margin-bottom: @remCalc5;
       font-weight: bold;
     }
    &__comment {
      color: #9d9d9d;
    }
  }
  &__amount
  {
     color: #5b5b5b;
    font-weight: bold;
  }
}
.giftAidView
{
  .checkout-view();
  &__header
  {
    .checkout-header();
  }
  &__message
  {
    .checkout-message();
    margin-bottom: @remCalc10;
  }
  &__form
  {
    .checkout-form();
    &__row
    {
      .checkout-checkbox();
    }
    &__actions
    {
      .display-flex(column, nowrap, center, center);
    }
  }
}
.off-canvas--minimum
{
  .giftAidView
  {
    .bidding-minimum-view();
  }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  .off-canvas--minimum
  {
    .giftAidView
    {
      .bidding-minimum-view-constant();
    }
  }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .off-canvas--minimum
  {
    .giftAidView
    {
      .bidding-minimum-view-env();
    }
  }
}
.setupView
{
    .make-full-height(true);
    padding: @remCalc10 @remCalc10 @remCalc10 @remCalc30;
    @media @medium-up
    {
        padding: @remCalc30 @remCalc100 @remCalc20 @remCalc100;
    }
    &__form
    {
        .details-panels
        {
            display: flex;
            flex-wrap: wrap;
            .details-panel
            {
                margin: 0;
                &__wrapper
                {
                    min-height: 250px;
                    min-width: 250px;
                    margin-bottom: @remCalc30;
                    margin-top: 0;
                    margin-left: 0;
                    margin-right: 0;
                    background-color: @panelBgColour;
                    border-radius: @remCalc10;
                    position: relative;
                    overflow: hidden;
                    padding: @remCalc20;
                    .add-drop-shadow(false);
                    .add-drop-shadow-animation();
                    .overflow-fix();
                    &::after
                    {
                        background-color: darken(@panelBgColour, 20%);
                        .ripple();
                    }
                    &--focused,
                    &:hover
                    {
                        .add-drop-shadow(true);
                    }
                    &--focused
                    {
                        &::after
                        {
                            .ripple-animation();
                        }
                    }
                    .amountList, .frequencyList{
                        margin-top: 20px;
                    }
                }
                .date
                {
                    min-height: @remCalc200;
                    .dateInputRow
                    {
                        margin: @remCalc10 @remCalc0 @remCalc0 @remCalc0;
                    }
                    .tooltipEndDate
                    {
                        bottom: @remCalc0;
                        top: @remCalc20;
                    }
                    .endDateLabel
                    {
                        position: absolute;
                        left: @remCalc50;
                        top: @remCalc20;
                    }
                }
                @media @medium-up
                {
                    width: 50%;
                    &__wrapper
                    {
                        width: 90%;
                    }
                }
                @media only screen and (min-width: 73.75rem)
                {
                    width: 50%;
                    &__wrapper
                    {
                        width: 90%;
                    }
                }
            }
        }
    }
    &__actions
    {
        &__button
        {
            width: auto;
            float: right;
            @media @medium-up
            {
                margin-bottom: @remCalc10;
                margin-right: @remCalc40;
            }
        }
    }
}
.touch
{
   .details-panel
   {
      &__wrapper
      {
        &:hover
        {
            .add-drop-shadow(false);
        }
      }
   }
}
.recurringDonationsPaymentView, .recurringDonationsPaymentSuccessView
{
    .checkout-view();
    &__header, .paymentProvider__credit-card__message
    {
        .checkout-header();
        margin-bottom: @remCalc15;
    }
    &__details
    {
        margin-bottom: @remCalc30;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        background-color: @panelBgColour;
        border-radius: @remCalc10;
        position: relative;
        overflow: hidden;
        padding: @remCalc20;
        .add-drop-shadow(false);
        .add-drop-shadow-animation();
        .overflow-fix();
        &::after
        {
            background-color: darken(@panelBgColour, 20%);
            .ripple();
        }
        &--focused,
        &:hover
        {
            .add-drop-shadow(true);
        }
        &--focused
        {
            &::after
            {
                .ripple-animation();
            }
        }
        .info
        {
            margin-bottom: @remCalc10;
            .detailLabel
            {
                color: gray;
            }
            .detailData
            {
                margin-left: @remCalc8;
            }
            .premium-checkbox-section
            {
                display:flex;
                margin-top: @remCalc7;
                .premium-checkbox
                {
                    margin-right: @remCalc10;
                }
            }
        }
        .date
        {
            display: inline-grid;
            @media @large-up
            {
                .left-margin
                {
                    margin-left: @remCalc40;
                }
            }
        }
    }
}
.recurringDonationListView
{
    &__header
    {
        @media @large-up
        {
            margin-left: @remCalc50;
        }
    }
}
.recurringDonationListItemView__details
{
    margin: 0;
    &__wrapper
    {
        display: flex;
        justify-content: space-around;
        margin-bottom: @remCalc30;
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        background-color: @panelBgColour;
        border-radius: @remCalc10;
        position: relative;
        overflow: hidden;
        padding: @remCalc20;
        .add-drop-shadow(false);
        .add-drop-shadow-animation();
        .overflow-fix();
        &::after
        {
            background-color: darken(@panelBgColour, 20%);
            .ripple();
        }
        &--focused,
        &:hover
        {
            .add-drop-shadow(true);
        }
        &--focused
        {
            &::after
            {
                .ripple-animation();
            }
        }
        .detail
        {
            .row
            {
                .info
                {
                    float: left;
                    .detailLabel
                    {
                        color: gray;
                    }
                    @media @medium-up
                    {
                        width: 290px;
                    }
                }
            }
        }
    }
}