.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;
}
.flex-no-wrap {
  .display-flex(row, nowrap, flex-start, flex-start);
}
.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-80: unit(-80/@remBase, rem);
@remCalc-57: unit(-57/@remBase, rem);
@remCalc-40: unit(-40/@remBase, rem);
@remCalc-30: unit(-30/@remBase, rem);
@remCalc-20: unit(-20/@remBase, rem);
@remCalc-18: unit(-18/@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-8: unit(-8/@remBase, rem);
@remCalc-7: unit(-7/@remBase, rem);
@remCalc-6: unit(-6/@remBase, rem);
@remCalc-5: unit(-5/@remBase, rem);
@remCalc-4: unit(-4/@remBase, rem);
@remCalc-3: unit(-3/@remBase, rem);
@remCalc-2: unit(-2/@remBase, rem);
@remCalc-1: unit(-1/@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);
@remCalc21: unit(21/@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);
@remCalc29: unit(29/@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);
@remCalc37: unit(37/@remBase, rem);
@remCalc38: unit(38/@remBase, rem);
@remCalc40: unit(40/@remBase, rem);
@remCalc41: unit(41/@remBase, rem);
@remCalc42: unit(42/@remBase, rem);
@remCalc43: unit(43/@remBase, rem);
@remCalc44: unit(44/@remBase, rem);
@remCalc45: unit(45/@remBase, rem);
@remCalc46: unit(46/@remBase, rem);
@remCalc47: unit(47/@remBase, rem);
@remCalc48: unit(48/@remBase, rem);
@remCalc50: unit(50/@remBase, rem);
@remCalc52: unit(52/@remBase, rem);
@remCalc54: unit(54/@remBase, rem);
@remCalc55: unit(55/@remBase, rem);
@remCalc56: unit(56/@remBase, rem);
@remCalc57: unit(57/@remBase, rem);
@remCalc58: unit(58/@remBase, rem);
@remCalc60: unit(60/@remBase, rem);
@remCalc61: unit(61/@remBase, rem);
@remCalc64: unit(64/@remBase, rem);
@remCalc65: unit(65/@remBase, rem);
@remCalc70: unit(70/@remBase, rem);
@remCalc72: unit(72/@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);
@remCalc86: unit(86/@remBase, rem);
@remCalc87: unit(87/@remBase, rem);
@remCalc88: unit(88/@remBase, rem);
@remCalc96: unit(96/@remBase, rem);
@remCalc100: unit(100/@remBase, rem);
@remCalc102: unit(102/@remBase, rem);
@remCalc105: unit(105/@remBase, rem);
@remCalc120: unit(120/@remBase, rem);
@remCalc128: unit(128/@remBase, rem);
@remCalc138: unit(138/@remBase, rem);
@remCalc150: unit(150/@remBase, rem);
@remCalc155: unit(155/@remBase, rem);
@remCalc160: unit(160/@remBase, rem);
@remCalc170: unit(170/@remBase, rem);
@remCalc180: unit(180/@remBase, rem);
@remCalc190: unit(190/@remBase, rem);
@remCalc192: unit(192/@remBase, rem);
@remCalc200: unit(200/@remBase, rem);
@remCalc210: unit(210/@remBase, rem);
@remCalc220: unit(220/@remBase, rem);
@remCalc230: unit(230/@remBase, rem);
@remCalc240: unit(240/@remBase, rem);
@remCalc250: unit(250/@remBase, rem);
@remCalc270: unit(270/@remBase, rem);
@remCalc288: unit(288/@remBase, rem);
@remCalc300: unit(300/@remBase, rem);
@remCalc318: unit(318/@remBase, rem);
@remCalc340: unit(340/@remBase, rem);
@remCalc350: unit(350/@remBase, rem);
@remCalc385: unit(385/@remBase, rem);
@remCalc390: unit(390/@remBase, rem);
@remCalc400: unit(400/@remBase, rem);
@remCalc412: unit(412/@remBase, rem);
@remCalc420: unit(420/@remBase, rem);
@remCalc438: unit(438/@remBase, rem);
@remCalc450: unit(450/@remBase, rem);
@remCalc500: unit(500/@remBase, rem);
@remCalc550: unit(550/@remBase, rem);
@remCalc563: unit(563/@remBase, rem);
@remCalc576: unit(576/@remBase, rem);
@remCalc600: unit(600/@remBase, rem);
@remCalc612: unit(612/@remBase, rem);
@remCalc680: unit(680/@remBase, rem);
@remCalc700: unit(700/@remBase, rem);
@remCalc800: unit(800/@remBase, rem);
@remCalc855: unit(855/@remBase, rem);
@remCalc900: unit(900/@remBase, rem);
@remCalc1000: unit(1000/@remBase, rem);
@remCalc1352: unit(1352/@remBase, rem);
@remCalc1500: unit(1500/@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();
        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;
  }
}
.padding()
{
    padding-left: @remCalc16;
    padding-right: @remCalc16;
    @media @medium-up
    {
      padding-left: @remCalc24;
      padding-right: @remCalc24;
    }
}
.hoverAccent(@property: background-color)
{
    @{property}: contrast(@accentFontColor, lighten(@accentColor,10%), darken(@accentColor,10%));
    svg path {
      fill: contrast(@accentColor, #fff, #000);
    }
}
.hoverAccentFaded(@property: background-color)
{
    @{property}: contrast(@accentFontColor, lighten(@accentFadedColor,10%), darken(@accentFadedColor,10%));
    svg path {
      fill: contrast(@accentColor, #fff, #000);
    }
}
@newCol1: #777777;
@newCol2: #ffffff;
// Accent faded color
@newCol6: #abaaaa;
// Navigation bar color
@newCol7: #ffffff;
// Navigation bar text color
@newCol8: #5E6871;
@versionFolder: '';
@imagesFolder: '@{versionFolder}images';
@cssFolder: '@{versionFolder}css';
@accentColor: @newCol1;
@accentFontColor: @newCol2;
@accentFadedColor: @newCol6;
@linkColor: @accentFadedColor;
@errorColor: #D0021B;
@backgroundColor: #F2F2F2;
@lightGrey: #F0F1F2;
@mediumGrey: #6a767a;
@darkGrey: #303539;
@blue: #089DD9;
@darkBlue: #243776;
@magentaDark: #6c3471;
@panelBgColour: #ffffff;
@navBarColor: @newCol7;
@navBarTextColor: @newCol8;
@fontColourForPanel: @darkGrey;
@colorOnBackground: @darkGrey;
@actionButtonBackgroundColor: #464646;
@actionButtonFontColor: #fff;
@topBarLogoUrl: '@{imagesFolder}/givergy-logo.svg';
@logoutLogoUrl: '@{imagesFolder}/givergy-logo.svg';
@liteScreensaverPortraitUrl: '@{imagesFolder}/givergy-logo.svg';
@liteScreensaverLandscapeUrl: '@{imagesFolder}/givergy-logo.svg';
@backgroundUrl: '@{imagesFolder}/bg.png';
@font: "FS Elliot Pro","open-sans",sans-serif;
@customFontFaces: "";
@errorColor: #D0021B;
@linkColor: @accentFadedColor;
@backgroundColor: #F2F2F2;
@lightGrey: #F0F1F2;
@mediumGrey: #6a767a;
@darkGrey: #303539;
@blue: #089DD9;
@inputBackgroundColor: #FAFAFB;
@inputBorderColor: #D7D9DB;
@fontsFolder: '@{versionFolder}fonts';
.webfontsrc(@font, @tag) {
  @srcUrl: '@{fontsFolder}/@{font}.eot';
  @eotSrcUrl: '@{fontsFolder}/@{font}.eot?#iefix';
  @woffSrcUrl: '@{fontsFolder}/@{font}.woff?v=1.101';
  @woff2SrcUrl: '@{fontsFolder}/@{font}.woff2';
  @ttfSrcUrl: '@{fontsFolder}/@{font}.ttf';
  @svgSrcUrl: '@{fontsFolder}/@{font}.svg#@{tag}';
  src: url(@srcUrl);
  src: url(@eotSrcUrl) format('embedded-opentype'),
    url(@woff2SrcUrl) format('woff2'),
    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');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: normal;
  font-style: italic;
  .webfontsrc('montserrat-v26-latin-500italic', 'Montserrat');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: normal;
  font-style: normal;
  .webfontsrc('montserrat-v26-latin-500', 'Montserrat');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: bold;
  font-style: normal;
  .webfontsrc('montserrat-v26-latin-700', 'Montserrat');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: bold;
  font-style: italic;
  .webfontsrc('montserrat-v26-latin-700italic', 'Montserrat');
}
@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;
@footerFadedColor: lighten(@accentColor, 30%);
html
{
  font-size: 100%;
  &.with-dialog
  {
      overflow: hidden;
  }
}
body {
  background: #fff;
  color: @colorOnBackground;
  font-family: @font;
  .display-flex(column, nowrap, flex-start, flex-start);
  min-height: 100vh;
  width: 100%;
  h1,h2,h3,h4,h5,h6
  {
      color: @darkGrey;
  }
  p {
    color: @mediumGrey;
  }
  .grecaptcha-badge {
      visibility: hidden;
  }
  @media @large-up {
    background: @backgroundColor;
  }
}
[data-abide] .error small.error,
[data-abide] span.error,
[data-abide] small.error
{
   background: transparent;
   font-size: @remCalc14;
}
figure
{
    margin: 0;
}
.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;
}
.admin-preview-border {
  position: relative;
  border: @remCalc2 dashed #000;
}
.admin-preview-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: @remCalc4;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 0 0 @remCalc4 @remCalc4;
  padding: @remCalc2 @remCalc4;
  background-color: #000;
  .admin-preview-badge-text {
    margin: 0;
    font-weight: 600;
    font-size: @remCalc10;
    color: @panelBgColour;
    font-family: "Nunito Sans", sans-serif;
  }
}
.admin-preview-icon-eye {
  width: @remCalc24;
  height: @remCalc24;
  background-color: @panelBgColour;
  -webkit-mask-image: url(../css/images/eye.svg);
  mask-image: url(../css/images/eye.svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.user-is-tabbing
{
  *:focus
  {
      outline-width: 5px;
      outline-style: solid;
      outline-color: Highlight;
      outline-offset: -5px;
  }
  .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;
    }
  }
}
.layout {
  [data-menu-name="Checkout"],
  [data-menu-name="My Account"],
  [data-menu-name="Log Out"],
  [data-menu-name="My Bids"],
  [data-menu-name="Favourites"]
  {
      display: none !important;
  }
  &__preview-admin-box {
    * {
      margin: 0;
    }
    background-color: #000;
    width: 100%;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &__do-show {
    width: @remCalc24;
    height: @remCalc24;
    background-color: @panelBgColour;
    -webkit-mask-image: url(../css/images/eye.svg);
    mask-image: url(../css/images/eye.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  &__preview-admin-blocks {
    display: flex;
    gap: @remCalc8;
  }
  &__preview-admin-text {
    font-size: @remCalc15;
    font-family: "Nunito Sans", sans-serif;
    color: @panelBgColour;
    border: none;
    background-color: transparent;
    padding: 0;
    &:hover {
      background-color: transparent;
    }
  }
  &__inactive-campaign-message {
    font-size: 13px;
    background: #BC2B87;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    b {
      text-decoration: underline;
    }
    @media @medium-down
    {
      position: relative;
      top: @remCalc57;
      padding-left: @remCalc10;
      padding-right: @remCalc10;
    } 
  }
  &__header--desktop {
    background-color: @navBarColor;
    height: @remCalc100;
    position: relative;
    z-index: 1001;
    padding: @remCalc30;
    width: 100%;
    .display-flex(row, nowrap, space-between, center);
    .layout__header__left {
      width: @remCalc160;
      height: @remCalc76;
      background: url(@topBarLogoUrl) no-repeat center center;
      background-size: contain;
      background-position: left;
    }
    .layout__header__middle {
    }
    .layout__header__nav {
      margin: 0;
      padding: 0;
      .display-flex(row, nowrap, flex-start, center);
      gap: @remCalc10;
      @media @xlarge-up {
        gap: @remCalc30;
      }
      &__item {
          list-style-type: none;
          &__title {
            color: @navBarTextColor;
            font-size: @remCalc20;
            padding: @remCalc12 @remCalc12 @remCalc12 @remCalc12;
            line-height: 1;
            .border-radius(@remCalc12);
            .display-flex(row, nowrap, center, center);
            .transition(all 0.1s ease-in-out);
            span {
              font-weight: bold;
              text-align: center;
            }
          }
          &__title-icon {
            width: @remCalc40;
            height: @remCalc35;
            display: inline-block;
            position: relative;
            mask-position: center;
            mask-repeat: no-repeat;
            mask-size: contain;
            background-color: @accentColor;
          }
          &__icon {
            width: @remCalc16;
            height: @remCalc9;
            display: inline-block;
            position: relative;
            margin-left: @remCalc10;
            fill: @navBarTextColor;
            transform: rotate(180deg);
            .transition(transform 0.1s ease-in-out);
          }
          &--selected {
            .layout__header__nav__item__title {
              color: contrast(@accentColor, #000, #fff);
              background-color: @accentColor;
            }
            .layout__header__nav__item__icon {
              fill: @navBarTextColor;
            }
            &:hover,
            &:focus {
              .layout__header__nav__item__title {
                background-color: contrast(@accentFontColor, lighten(@accentColor,10%), darken(@accentColor,10%)) !important;
              }
            }
          }
          &:hover,
          &--open {
            .layout__header__nav__item__title {
              color: contrast(@accentColor, #000, #fff);
              background-color: @accentColor;
            }
            .layout__header__nav__item__icon {
              fill: contrast(@accentColor, #000, #fff);
              transform: rotate(0deg);
            }
          }
          &--open {
              .layout__header__nav__sub {
                height: fit-content;
                padding-top: @remCalc24;
                padding-bottom: @remCalc24;
                left: 0;
                top: 0;
                margin-top: @remCalc100;
                width: 100%;
            }
          }
          &--alternative {
            .layout__header__nav__item__title {
              padding: @remCalc12 @remCalc24;
              color: contrast(@accentColor, #000, #fff);
              background-color: @accentColor;
            }
            &:hover,
            &:focus {
              .layout__header__nav__item__title {
                .hoverAccent();
              }
            }
          }
          &--only-icon {
            .transition(opacity 0.1s ease-in-out);
            .layout__header__nav__item__title {
              padding: 0;
              color: @accentFontColor;
              background-color: rgba(255, 255, 255, 0);
            }
            .layout__header__nav__item__title-label {
              display: none;
            }
            &:hover,
            &--selected,
            &--open {
              .layout__header__nav__item__title {
                background-color: @navBarColor;
              }
              .layout__header__nav__item__title-icon {
                .hoverAccent();
              }
            }
          }
          &--favorite {
            position: relative;
            .amount {
              .display-flex(row, nowrap, center, center);
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              font-weight: 600;
              font-size: @remCalc14;
              color: @accentFontColor;
              pointer-events: none;
            }
          }
      }
      &__sub {
        height: 0;
        overflow: hidden;
        padding: 0 @remCalc24;
        margin: 0;
        position: absolute;
        background: @panelBgColour;
        box-shadow: 0px @remCalc2 @remCalc4 0px rgba(0, 0, 0, 0.12);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: @remCalc24;
        &__item {
          padding: @remCalc18 @remCalc24;
          .border-radius(@remCalc12);
          list-style-type: none;
          display: block;
          flex: 0 0 calc(20%);
          background-color: fade(@accentColor, 4%);
          a {
            .display-flex(row, nowrap, flex-start, flex-start);
            margin: 0;
            padding: 0;
            gap: @remCalc16;
            &:hover {
              .layout__header__nav__sub__item__title {
                text-decoration: underline;
              }
            }
          }
          &__icon {
            width: @remCalc60;
            height: @remCalc60;
            mask-size: contain;
            mask-position: top right;
            mask-repeat: no-repeat;
            background-color: #000;
          }
          &__title-wrapper {
            .display-flex(column, nowrap, flex-start, flex-start);
          }
          &__title
          {
            font-size: @remCalc20;
            color: @accentColor;
            font-weight: bold;
          }
          &__description {
            font-size: @remCalc16;
            color: @darkGrey;
          }
          &--selected {
            .layout__header__nav__sub__item__title {
                text-decoration: underline;
            }
          }
        }
      }
    }
  }
  &__header--mobile {
    background-color: @navBarColor;
    height: @remCalc80;
    position: fixed;
    width: 100%;
    z-index: 1001;
    padding: @remCalc16;
    .transition(transform 0.2s ease-in-out);
    .display-flex(row, nowrap, space-between, center);
    .layout__header__left {
      width: @remCalc120;
      height: @remCalc47;
      background: url(@topBarLogoUrl) no-repeat center center;
      background-size: contain;
      background-position: left;
    }
    .layout__header__right {
      .display-flex(row, nowrap, flex-start, center);
      gap: @remCalc16;
      .a-button {
        padding: @remCalc8 @remCalc16;
      }
    }
    .hamburger-inner {
      background-color: @accentColor;
      &::before,
      &::after {
        background-color: @accentColor;
      }
    }
    .layout__header__menu {
       position: absolute;
       top: @remCalc80;
       left: 0;
       width: 100%;
       display: none;
       box-shadow: 0px @remCalc2 @remCalc4 0px rgba(0, 0, 0, 0.12);
    }
    &.layout__header--open {
        position: absolute;
        .layout__header__menu {
          display: block;
        }
    }
    .layout__header__nav {
      margin: 0;
      padding: 0;
      background-color: #fff;
      .display-flex(column, nowrap, flex-start, flex-start);
      gap: @remCalc12;
      padding: @remCalc20 0;
      &__item {
          list-style-type: none;
          width: 100%;
          padding: 0 @remCalc16;
          @bgColor: fade(@accentColor, 4%);
          &__title {
            color: @accentColor;
            background-color: @bgColor;
            width: 100%;
            font-size: @remCalc20;
            padding: @remCalc18;
            .border-radius(@remCalc12);
            .display-flex(row, nowrap, space-between, center);
            .transition(all 0.1s ease-in-out);
            span {
              font-weight: bold;
            }
            &:hover,
            &:focus
            {
                background-color: fade(@accentColor, 8%);
            }
          }
          &__icon {
            width: @remCalc16;
            height: @remCalc9;
            display: inline-block;
            position: relative;
            margin-left: @remCalc10;
            fill: @fontColourForPanel;
            transform: rotate(180deg);
          }
          &--with-submenu {
          }
          &--alternative
          {
            .layout__header__nav__item__title {
              .display-flex(row, nowrap, center, center);
              color: @accentFontColor;
              background-color: @accentFadedColor;
              &:hover,
              &:focus
              {
                  .hoverAccentFaded();
              }
            }
          }
          &--selected,
          &--open {
            .layout__header__nav__item__icon {
              transform: rotate(0deg);
            }
          }
          &--open {
              .layout__header__nav__sub {
                height: auto;
                margin-top: @remCalc6;
            }
          }
      }
      &__sub {
        height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        margin-left: @remCalc24;
        .display-flex(column, nowrap, flex-start, flex-start);
        gap: @remCalc6;
        &__item {
          padding: @remCalc18;
          display: block;
          list-style-type: none;
          width: 100%;
          background-color: fade(@accentColor, 4%);
          border-radius: @remCalc12;
          a {
            .display-flex(row, nowrap, flex-start, flex-start);
            gap: @remCalc16;
            margin: 0;
            padding: 0;
            &:hover {
              .layout__header__nav__sub__item__title {
                text-decoration: underline;
              }
            }
          }
          &__icon {
            width: @remCalc60;
            height: @remCalc60;
            mask-size: contain;
            mask-position: top right;
            mask-repeat: no-repeat;
            background-color: #000;
            @media @large-up {
              width: @remCalc40;
              height: @remCalc40;
            }
          }
          &__title-wrapper {
            .display-flex(column, nowrap, flex-start, flex-start);
            gap: @remCalc5;
          }
          &__title
          {
            font-size: @remCalc16;
            color: @accentColor;
            font-weight: bold;
          }
          &__description {
            font-size: @remCalc14;
            color: @darkGrey;
          }
          &--selected {
            .layout__header__nav__sub__item__title {
                text-decoration: underline;
            }
          }
        }
      }
    }
  }
  &__header--desktop {
    display: none;
  }
  @media @large-up {
    &__header--desktop {
      .display-flex(row, nowrap, space-between, center);
    }
    &__header--mobile {
      display: none;
    }
  }
  &__content {
    padding-top: @remCalc20;
    padding-bottom: @remCalc40;
    margin: @remCalc80 auto 0 auto;
    .set-flex(1);
    height: fit-content;
    width: 100%;
    .display-flex(column, nowrap, flex-start, normal);
    @media @large-up {
      padding-top: @remCalc40;
      padding-bottom: @remCalc80;
      margin-top: 0;
    }
    > *
    {
       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 @large-up
          {
              font-size: @remCalc20;
          }
          &:before
          {
              content:  "";
              display: inline-block;
              white-space: nowrap;
              border: solid @remCalc4 transparent;
              border-top-color: @accentColor;
              border-left-color: @accentColor;
              .border-radius( 50% );
              .animation(pace-spinner, 400ms, linear, 0s, infinite);
              width:  @remCalc30;
              height:  @remCalc30;
              position: relative;
              top:  @remCalc9;
          }
          &--with-message
          {
              &:before
              {
                margin-right:  @remCalc15;
              }
          }
      }
    }
  }
  &__footer {
    width: 100%;
    padding: @remCalc30;
    background-color: @navBarColor;
    &__menu {
      .display-flex(row, wrap, flex-start, flex-start);
      gap: @remCalc30;
    }
    &__nav {
      margin: 0;
      padding: 0;
      .display-flex(row, wrap, flex-start, flex-start);
      gap: @remCalc30;
      &__item {
          list-style-type: none;
          width: 100%;
          &__title {
            color: @navBarTextColor;
            font-size: @remCalc20;
            margin: 0 0 @remCalc10 0;
            padding: 0;
            span {
              font-weight: bold;
            }
          }
          &:hover {
            .layout__footer__nav__item__title {
              span {
                text-decoration: underline;
              }
            }
          }
          @media @medium-up {
            width: auto;
          }
      }
      &__sub {
        margin: 0;
        padding: 0;
        .display-flex(column, nowrap, flex-start, flex-start);
        gap: @remCalc10;
        &__item {
          list-style-type: none;
          &__title
          {
            color: @navBarTextColor;
            &:hover {
              span {
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
    &__separator {
      border-color: @navBarTextColor;
    }
    &__legal-social
    {
      .display-flex(row, wrap, center, center);
      gap: @remCalc20;
      &--no-social
      {
          gap: 0;
          .layout__footer__social-media-links {
            min-height: 0 !important;
          }
      }
    }
    &__social-media-links {
      .display-flex(row, wrap, center, center);
      .set-flex(1 1 auto);
      gap: @remCalc24;
      width: 100%;
      min-height: @remCalc32;
      .icon
      {
        width: auto;
        height: auto;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        padding: 0;
        cursor: pointer;
        transition: opacity 100ms ease-in-out;
        opacity: 0.5;
        fill: @fontColourForPanel;
        path {
          fill: @fontColourForPanel;
        }
        &:last-of-type
        {
            margin-right: 0;
        }
        &:hover
        {
          opacity: 0.7;
        }
      }
      @media @large-up
      {
        .display-flex(row, wrap, flex-start, center);
        width: auto;
      }
    }
    &__legal {
      .display-flex(row, wrap, center, flex-start);
      gap: @remCalc10;
      &__nav {
        margin: 0;
        padding: 0;
        .display-flex(row, wrap, flex-start, flex-start);
        gap: @remCalc20;
        &__item {
          list-style-type: none;
          padding-right: @remCalc20;
          border-right: @remCalc1 solid @navBarTextColor;
          &__title
          {
            color: @navBarTextColor;
            font-size: @remCalc16;
            &:hover {
              text-decoration: underline;
            }
            @media @large-up {
              font-size: @remCalc18;
            }
          }
          &:last-of-type {
            border-right: none;
          }
        }
      }
      &__text {
        margin: 0;
        color: @navBarTextColor;
        text-align: center;
        a {
          font-size: @remCalc16;
        }
        @media @large-up {
          margin: 0 0 0 @remCalc20;
          a {
            font-size: @remCalc18;
          }
        }
      }
    }
    @media @medium-up
    {
      &__nav {
        gap: @remCalc50;
      }
      &__legal {
        &__nav {
          &__item {
            &:last-of-type {
              border-right: @remCalc1 solid @navBarTextColor;
            }
          }
        }
      }
    }
    @media @large-up
    {
        &__menu {
          gap: @remCalc70;
          margin-bottom: @remCalc50;
        }
        &__nav {
          gap: @remCalc70;
        }
        &__legal-social
        {
          .display-flex(row, wrap, flex-start, center);
        }
        &__legal {
          .display-flex(row, wrap, flex-start, flex-start);
        }
    }
  }
  &__persistent_alert
  {
  	position: fixed;
	top: 5px;
	right: 5px;
	max-width: 90%;
	padding: 10px;
	border-radius: 5px;
	background-color: #FF9800;
	color: white;
	box-shadow: 0 2px 8px rgba(255, 152, 0, 0.6);
	transform: none;
	z-index: 9999;
  }
  &--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"],
      [data-menu-name="Checkout"],
      [data-menu-name="Favourites"]
      {
          display: block !important;
      }
  }
}
.layout--minimum
{
  .layout__footer {
    .bidding-minimum-view();
  }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  .layout--minimum
  {
      .layout__footer
      {
          .bidding-minimum-view-constant();
      }
  }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .layout--minimum
  {
      .layout__footer
      {
          .bidding-minimum-view-env();
      }
  }
}
.skip-nav {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 9999;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    transition: top 0.2s ease;
}
.skip-nav:focus {
    top: 6px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@minimumLayoutMarginBottom: @remCalc44;
@footerFadedColor: lighten(@accentColor, 30%);
.donateOnlyLayout {
  //had to do a dirty patch since accentColor = newCol6
  //is reused for donateonlylayout outer background
  //and (automatically set from a defined map in page builder)
  a:not(.a-button):not(.exclude-donate-style) {
    color: darken(@accentFadedColor, 40%) !important;
    &:hover {
      color: @accentColor !important;
    }
  }
  .a-button.exclude-donate-style:focus {
    background-color: none !important;
    color:#000 !important;
  }
  
  button:not(.exclude-donate-style) {
    background: darken(@accentFadedColor, 15%) !important;
    &:hover {
      background: @accentColor !important;
    }
  }
  input[type='checkbox'] {
    &:checked+label {
      background-color: @accentColor !important;
    }
    &:checked+label::after {
      background-color: @accentColor !important;
    }
  }
  .donor-tip-selected {
    color: @accentColor !important;
  }
  .literadio input:checked+label::after {
    background: @remCalc5 @accentColor !important;
  }
  .stripeCustomCheckoutView {
    &__fundraisingSection .checkout-item__amount {
      color: @accentColor !important;
    }
    &__premiums__info-icon svg {
      fill: @accentColor !important;
    }
  }
  .credit-card-form button.link {
    background-color: transparent !important;
  }
  background: @accentFadedColor;
  color: @colorOnBackground;
  font-family: @font;
  .display-flex(column, nowrap, flex-start, flex-start);
  min-height: 100vh;
  width: 100%;
  gap: @remCalc24;
  h1,h2,h3,h4,h5,h6
  {
    color: @darkGrey;
  }
  p {
    color: @mediumGrey;
  }
  > div:has(.grecaptcha-badge) {
    display: none;
  }
  .pace {
    margin-bottom: -24px;
  }
  @media @large-up {
    background: @accentFadedColor;
  }
  [data-menu-name="Checkout"],
  [data-menu-name="My Account"],
  [data-menu-name="Log Out"],
  [data-menu-name="My Bids"],
  [data-menu-name="Favourites"]
  {
      display: none !important;
  }
  .panel {
    max-width: @remCalc800;
  }
  &__inactive-campaign-message {
    font-size: 13px;
    background: #fff;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 73px;
    gap: @remCalc16;
    padding: @remCalc12;
    margin-bottom: -@remCalc24;
    p {
      margin: 0;
    }
    b {
      text-decoration: underline;
    }
    @media @medium-down
    {
      position: relative;
      top: @remCalc57;
      padding-left: @remCalc10;
      padding-right: @remCalc10;
    } 
  }
  &__header {
    background-color: @accentFadedColor;
    height: @remCalc60;
    position: relative;
    z-index: 1001;
    max-width: @remCalc800;
    width: 100%;
    padding: 0 @remCalc24;
    margin: @remCalc24 auto 0 auto;
    .display-flex(row, nowrap, space-between, center);
    @media @small-only {
      gap: @remCalc12;
    }
    &__hr {
      border-bottom: 1px solid @navBarTextColor;
      width: 100%;
      margin: 0;
    }
  }
  &__content {
    margin: 0 auto;
    height: fit-content;
    max-width: @remCalc800;
    .display-flex(column, nowrap, flex-start, normal);
    padding: 0 @remCalc16;
    @media @large-up {
      margin-top: 0;
    }
    > *
    {
       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 @large-up
          {
              font-size: @remCalc20;
          }
          &:before
          {
              content:  "";
              display: inline-block;
              white-space: nowrap;
              border: solid @remCalc4 transparent;
              border-top-color: @accentColor;
              border-left-color: @accentColor;
              .border-radius( 50% );
              .animation(pace-spinner, 400ms, linear, 0s, infinite);
              width:  @remCalc30;
              height:  @remCalc30;
              position: relative;
              top:  @remCalc9;
          }
          &--with-message
          {
              &:before
              {
                margin-right:  @remCalc15;
              }
          }
      }
    }
    .confirmDonationView, .checkoutPageView {
      max-width: @remCalc800;
      &__right, .itemViewRightPanels {
        display: none;
      }
    }
    .checkoutConfirmationView{
      min-width: @remCalc600;
      
        @media @small-only {
          min-width: @remCalc400;
        }
    }
    .donateOnlyItemView {
      display: flex;
      max-width: @remCalc800;
      flex-flow: column;
      gap: @remCalc24;
      &__header {
        &.adjust-for-video {
            margin-top: @remCalc50;
        }
      }
      .itemViewRightPanels {
        display: flex;
        flex-direction: column;
        gap: @remCalc24;
      }
      .fundsAndAmountsView {
        display: flex;
        flex-direction: column;
        gap: @remCalc24;
      }
      &__left, &__right {
        max-width: @remCalc800;
      }
      &__left {
        &__funds_section, &__amounts_section, &__custom_section {
          display: flex;
          flex-direction: column;
          gap: @remCalc12;
          width: 100%;
        }
        &__custom_section {
          .amount-list-item__custom-amount {
            padding-left: 0;
            width: 100%;
            .row-flex-center {
              margin-bottom: 0;
            }
          }
        }
        &__place_donation_section {
          padding: 0;
          margin: 0;
        }
        &__amounts_section {
          .amountsList {
            display: flex;
            flex-direction: column;
            gap: @remCalc12;
            .list {
              grid-template-columns: repeat(3, 1fr) !important;
              gap: @remCalc12;
              .amounts-list-item {
                display: flex;
                flex-direction: column;
                gap: @remCalc12;
              }
              .amount-list-item {
                padding: @remCalc12 0;
                &--with-image {
                  grid-column: span 3;
                  .amount-list-item {
                    padding: 0;
                    &__wrapper {
                      flex-direction: row;
                      justify-content: flex-start;
                      @media @small-only {
                        flex-direction: column;
                        align-items: flex-start;
                      }
                    }
                    &__details {
                      display: flex;
                      flex-direction: column;
                      gap: @remCalc16;
                      padding: 0 @remCalc32;
                      @media @small-only {
                        padding: @remCalc32;
                      }
                      .description p {
                        font-size: @remCalc14;
                        margin: 0;
                      }
                    }
                    &__header {
                      .title {
                        font-size: @remCalc16;
                      }
                    }
                  }
                }
                &__image {
                  background-color: @mediumGrey;
                  flex-shrink: 0;
                  height: @remCalc128;
                  width: @remCalc192;
                  @media @small-only {
                    width: 100%;
                  }
                }
                &__header {
                  .title {
                    font-size: @remCalc20;
                    font-weight: bold;
                  }
                }
                &__wrapper {
                  align-items: center;
                  background-color: #FAFAFB;
                  border: @remCalc1 solid #D7D9DB;
                  border-radius: @remCalc8;
                  box-shadow: unset;
                  justify-content: center;
                  &.selected {
                    border: @remCalc2 solid  @accentColor;
                    background-color: @accentFadedColor;
                    color: @accentColor;
                  }
                }
              }
            }
          }
        }
        &__funds_list {
          &-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #FAFAFB;
            border: @remCalc1 solid #D7D9DB;
            border-radius: @remCalc8;
            padding: @remCalc12 @remCalc18;
            cursor: pointer;
            height: @remCalc64;
            @media @small-only {
              height: @remCalc48;
            }
          }
          &-selected {
            .sectionTitle();
            font-size: @remCalc20;
            font-weight: bold;
          }
          &-icon {
            content: url("data:image/svg+xml; utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368' stroke='%235f6368' stroke-width='40'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
          }
          &-list {
            display: none;
            list-style: none;
            margin: 0;
            padding: 0;
            background-color: #FAFAFB;
            border: @remCalc1 solid #D7D9DB;
            border-radius: @remCalc8;
            margin-top: @remCalc12;
            overflow: hidden;
          }
          &-item {
            padding: @remCalc12 @remCalc18;
            cursor: pointer;
            font-size: @remCalc20;
            color: #4a4a4a;
            transition: background-color 0.3s ease;
          }
          &-item:hover {
            background-color: #f5f5f5;
          }
        }
      }
      &__social-buttons {
        padding: 0;
        .socialButtons__buttons {
          gap: @remCalc24;
          &__button {
            height: @remCalc44 !important;
            width: @remCalc44 !important;
            svg {
              height: 95%;
              width: 95%;
              fill: @accentColor;
            }
          }
        }
      }
      .panel {
        border-radius: @remCalc12;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.1);
        gap: @remCalc24;
        padding: @remCalc40;
        max-width: @remCalc800;
        @media @small-only {
          padding: @remCalc24;
        }
        &__title {
          color: @fontColourForPanel;
          font-size: @remCalc25;
          font-weight: bolder;
          padding: 0;
          @media @small-only {
            font-size: @remCalc18;
          }
          &__subtitle {
            color: #868E94;
            font-size: @remCalc20;
            font-weight: normal;
            @media @small-only {
              font-size: @remCalc16;
            }
          }
        }
        &__header {
          padding: 0;
        }
        &__content {
          padding: 0;
        }
      }
    }
  }
  &__footer {
    max-width: @remCalc800;
    padding-bottom: @remCalc24;
    background-color: @accentFadedColor;
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    &__legal-social
    {
      .display-flex(row, wrap, center, center);
      gap: @remCalc20;
      &--no-social
      {
          gap: 0;
          .layout__footer__social-media-links {
            min-height: 0 !important;
          }
      }
    }
    &__legal {
      .display-flex(row, wrap, center, flex-start);
      gap: @remCalc10;
      &__nav {
        margin: 0;
        padding: 0;
        .display-flex(row, wrap, flex-start, flex-start);
        gap: @remCalc20;
        &__item {
          list-style-type: none;
          &__title
          {
            color: @navBarTextColor;
            font-size: @remCalc16;
            &:hover {
              text-decoration: underline;
            }
            @media @large-up {
              font-size: @remCalc18;
            }
          }
        }
      }
      &__text {
        margin: 0;
        color: @navBarTextColor;
        text-align: center;
        a {
          font-size: @remCalc16;
        }
        @media @large-up {
          margin: 0 0 0 @remCalc20;
          a {
            font-size: @remCalc18;
          }
        }
      }
    }
  }
  &__persistent_alert
  {
  	position: fixed;
	top: 5px;
	right: 5px;
	max-width: 90%;
	padding: 10px;
	border-radius: 5px;
	background-color: #FF9800;
	color: white;
	box-shadow: 0 2px 8px rgba(255, 152, 0, 0.6);
	transform: none;
	z-index: 9999;
  }
  &--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"],
      [data-menu-name="Checkout"],
      [data-menu-name="Favourites"]
      {
          display: block !important;
      }
  }
}
.skip-nav {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: #fff;
    padding: 8px;
    text-decoration: none;
    z-index: 9999;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    transition: top 0.2s ease;
}
.skip-nav:focus {
    top: 6px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
html:has(body.preview-mode) {
  pointer-events: none;
  overflow-x: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .donateOnlyLayout__content {
    max-width: @remCalc385;
    padding: @remCalc16;
    .socialButtons__buttons {
      a {
        height: @remCalc32 !important;
        width: @remCalc32!important;
      }
    }
  }
}
span.jq-dte {
  position: absolute;
  bottom: @remCalc8;
  left: @remCalc20;
  width: 220px;
}
span.jq-dte-inner {
  border: none;
  white-space: nowrap;
}
span.jq-dte input {
  border: none;
  text-align: center;
  margin: 0;
  padding: 0;
  outline: none;
  vertical-align: middle;
  font-size: @remCalc18;
  height: @remCalc22;
  line-height: @remCalc22;
  color: @inputFontColor;
  .placeholder( lighten(@inputFontColor, 20%) );
  @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;
  }
}
span.jq-dte input.error {
  background-color: #ff9999;
  color: #000000;
}
span.jq-dte.readonly,
span.jq-dte.readonly span.jq-dte-inner,
span.jq-dte.readonly input {
  background-color: #f2f2f2;
  color: #666666;
}
span.jq-dte input.hint {
  color: #999999;
}
span.jq-dte span.separator {
  color: #999999;
  top: @remCalc3;
  position: relative;
  font-size: @remCalc18;
  line-height: @remCalc22;
  height: @remCalc22;
  @media @medium-up
  {
    font-size: @remCalc20;
    height: @remCalc24;
    line-height: @remCalc24;
  }
  @media @xlarge-up
  {
    font-size: @remCalc22;
    height: @remCalc26;
    line-height: @remCalc26;
  }
}
span.jq-dte span.jq-dte-tooltip {
  display: inline-block;
  font-family: sans-serif;
  font-size: 14px;
  background-color: #f5f5b5;
  border: 1px solid #666666;
  margin: 0;
  padding: 1px 3px;
  line-height: 125%;
  z-index: 99;
}
span.jq-dte span.jq-dte-errorbox {
  display: inline-block;
  font-family: sans-serif;
  font-size: @remCalc14;
  margin: 0;
  padding: 1px 3px;
  line-height: 125%;
  white-space: nowrap;
  color: @errorColor;
}
.error {
  span.jq-dte input {
    color: @inputErrorColor;
  }
}
// components
.loader
{
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background: @panelBgColour;
  z-index: 1001;
  &:before
  {
      position: absolute;
      content: "";
      left: 50%;
      top: 50%;
      .calc( left, ~"50% - @{remCalc15}" );
      .calc( top, ~"50% - @{remCalc15}" );
      
      width:  @remCalc30;
      height:  @remCalc30;
      border: solid @remCalc4 transparent;
      border-top-color: @accentColor;
      border-left-color: @accentColor;
      .border-radius( 50% );
      .animation(pace-spinner, 400ms, linear, 0s, infinite);
  }
  &--semiopacity
  {
    opacity: 0.5;
  }
}
.error-data-wrapper {
  width: 100%;
  height: 100%;
  min-height: @remCalc300;
  .error-data {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    white-space: nowrap;
    .translate(-50%, -50%) !important;
    .translate3d(-50%,-50%,0) !important;
    color: @darkGrey;
  }
}
.a-search
{
  position: relative;
  height: @remCalc48;
  input
  {
    background: @lightGrey;
    width: 100%;
    height: 100%;
    display: block;
    border: @remCalc2 solid @lightGrey;
    color: @darkGrey;
    .border-radius(@remCalc20);
    font-size: @remCalc20;
     .placeholder( @mediumGrey );
    padding-left:  @remCalc48;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    margin: 0;
    .border-radius( @remCalc100 ) !important;
    .placeholder( @mediumGrey );
    box-shadow: none;
    &:focus {
      outline: none;
      border: @remCalc2 solid @blue;
    }
  }
  svg
  {
    display: block;
    position: absolute;
    left:  @remCalc18;
    top:  @remCalc12;
    width:  @remCalc24;
    height:  @remCalc24;
    fill: @mediumGrey;
  }
  &: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: @accentFadedColor;
@buttonValidTextColor: @accentFontColor;
@buttonErrorBgColor: @errorColor;
@buttonErrorTextColor: contrast(@buttonErrorBgColor, #000, #fff);
.a-button
{
    .display-flex(row, nowrap, center, center);
    border-width: 0;
    background-color: @accentFadedColor;
    color: @accentFontColor;
    white-space: normal;
    text-overflow: ellipsis;
    font-weight: bold;
    margin: 0;
    position: relative;
    width: auto;
    height: @remCalc43;
    &:hover,
    &:focus
    {
      .hoverAccentFaded();
    }
    &::after
    {
      .hoverAccentFaded();
    }
    &__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;
          }
        }
    }
    &--outline {
      background-color: transparent;
      border: @remCalc2 solid #D7D9DB;
      color: @fontColourForPanel;
      &:hover {
        background-color: transparent;
        border-color: @fontColourForPanel;
        color: @fontColourForPanel;
      }
    }
    &--round
    {
        .border-radius( @remCalc12 );
        .overflow-fix();
        overflow: hidden;
        padding-left: @remCalc10;
        padding-right: @remCalc10;
        &.a-button--small-padding
        {
            padding-left: @remCalc20;
            padding-right: @remCalc20;
        }
        &::after
        {
          .ripple();
        }
        &:hover
        {
            .add-drop-shadow(true);
        }
    }
    &--fullround
    {
        .border-radius( 100% );
        .overflow-fix();
        overflow: hidden;
        padding: @remCalc12 !important;
        width: @remCalc48;
        height: @remCalc48;
        svg
        {
          width: @remCalc24;
          height: @remCalc24;
          padding: @remCalc4
        }
        &.a-button--small-padding
        {
            padding-left: @remCalc20;
            padding-right: @remCalc20;
        }
        &::after
        {
          .ripple();
        }
        &:hover
        {
            .add-drop-shadow(true);
        }
    }
    &--bigger
    {
        height: @remCalc61;
        font-size: @remCalc18;
        @media @medium-up
        {
            font-size: @remCalc20;
        }
        &.a-button
        {
            &--round
            {
                padding-left: @remCalc15;
                padding-right: @remCalc15;
            }
            &--small-padding
            {
                padding-left: @remCalc10;
                padding-right: @remCalc10;
            }
        }
        .a-button__loader
        {
            left:  @remCalc25;
            top: @remCalc20;
            width:  @remCalc20;
            height:  @remCalc20;
            @border-width: @remCalc3;
        }
        .a-button__thick
        {
          left:  @remCalc30;
          top: @remCalc21;
          width:  @remCalc20;
          height: @remCalc16;
          svg
          {
            width:  @remCalc20;
            height: @remCalc16;
          }
        }
        .a-button__exclamation
        {
            left:  @remCalc22;
            top:  @remCalc17;
            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
        }
    }
    &--primary
    {
        background-color: @accentColor;
        &:hover,
        &:focus
        {
            .hoverAccent();
        }
        &:after
        {
            background-color: lighten(@accentColor, 20%);
        }
    }
    &--primary__outline
    {
      border: @remCalc2 solid @accentColor;
      background: #fff;
      color: @accentColor;
      &:hover,
      &:focus
      {
        .hoverAccent();
      }
      &:after
      {
        background-color: #fff;
      }
    }
    &--focused
    {
        &.a-button
        {
            &--round
            {
                .add-drop-shadow(true);
                &::after
                {
                    .ripple-animation();
                }
            }
        }
    }
    &--loading
    {
        .a-button
        {
            &__loader
            {
                display: block;
            }
            &__exclamation
            {
                display: none;
            }
            &__thick
            {
                display: none;
            }
        }
    }
    &--disabled
    {
      pointer-events: none;
      &:hover,
      &:focus
      {
          background: @accentFadedColor;
          box-shadow: none;
      }
    }
    &--valid
    {
        background: @buttonValidBgColor;
        color: @buttonValidTextColor;
        &:hover,
        &:focus
        {
            background: contrast(@buttonValidTextColor, lighten(@buttonValidBgColor,10%), darken(@buttonValidBgColor,10%));
            color: @buttonValidTextColor;
        }
    }
    &--invalid
    {
        background: @buttonErrorBgColor;
        color: @buttonErrorTextColor;
        &:hover,
        &:focus
        {
            background: contrast(@buttonErrorTextColor, lighten(@buttonErrorBgColor,10%), darken(@buttonErrorBgColor,10%));
            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: @accentFadedColor;
        border: @remCalc1 solid @accentFadedColor;
        &:hover,
        &:focus
        {
            background-color: @accentFadedColor;
            color: @accentFontColor;
            box-shadow: none;
        }
        &::after
        {
            .hoverAccentFaded();
        }
    }
    &--clear {
      background-color: transparent;
        &:hover,
        &:focus
        {
            background-color: transparent;
            outline: @remCalc2 solid @accentColor;
        }
    }
    &--icon {
        width: @remCalc24 !important;
        height: @remCalc24;
        margin-left: auto;
        padding: @remCalc8;
        border-radius: @remCalc4;
    }
}
.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 @darkGrey;
      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: @remCalc20;
    height: @remCalc20;
    label {
      width: @remCalc20;
      height: @remCalc20;
      .border-radius( @remCalc3 );
      //.box-shadow( ~"inset 0px 1px 1px white, 0px 1px 2px rgba(0, 0, 0, 0.5)" );
      &:after {
        width: @remCalc12;
        height: @remCalc6;
        top: @remCalc5;
        left: @remCalc4;
      }
    }
  }
  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 0px 2px #9FA8AB" );
    &:after {
      content: '';
      width: @remCalc16;
      height: @remCalc16;
      position: absolute;
      top: @remCalc2;
      left: @remCalc2;
      background: @remCalc5 @accentFadedColor;
      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;
}
.share-button,
.gmail-button,
.facebook-button,
.twitter-button,
.email-button,
.whatsapp-button,
.snapchat-button
{
  .display-flex(row, nowrap, center, center);
  .transition(all 300ms ease);
  .border-radius(@remCalc8);
  height: @remCalc40 !important;
  width: @remCalc40 !important;
  cursor: pointer;
  margin: 0;
  padding: 0;
  background-color: fade(@accentFadedColor, 4%);
  svg {
    width: 60%;
    height: 60%;
    fill: @accentFadedColor;
  }
  &:hover,
  &:focus
  {
      background-color: fade(@accentFadedColor, 12%);
  }
}
.gmail-button {
}
.facebook-button {
}
.twitter-button {
}
.email-button
{
}
.whatsapp-button
{
}
.snapchat-button
{
}
.share,
.facebook-share,
.twitter-share,
.email-share,
.whatsapp-share,
.snapchat-share
{
}
.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-weight: norma;
    display: inline;
    color: @accentFadedColor;
  }
}
.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
{
  background-image: url('@{imagesFolder}/tooltip/info2.svg');
  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: @remCalc40;
    height: @remCalc40;
    border-radius: 50%;
    position: relative;
    .overflow-fix();
    .transition( background-color 167ms ease-in);
    .disable-selection();
    .display-flex(row, nowrap, center, center);
    &::after
    {
        .ripple();
    }
    &__label
    {
        font-size: @remCalc30;
        .disable-selection();
        display: block;
        width: 100%;
        height: 100%;
        .display-flex(row, nowrap, center, center);
    }
    &--focused
    {
        &::after
        {
            .ripple-animation();
        }
    }
    &--remove
    {
        background-color: #464646;
        color: #fff;
        &::after
        {
            background-color: #464646;
        }
        &:hover
        {
            background-color: darken( #464646, 20%);
        }
        &:visited
        {
            background-color: #464646;
        }
        .round-button__label
        {
            &::before
            {
                content: "-";
                display: inline;
            }
        }
    }
    &--add
    {
        background-color: @accentFadedColor;
        color: @accentFontColor;
        &::after
        {
            .hoverAccentFaded();
        }
        &:hover
        {
            .hoverAccentFaded();
        }
        &:visited
        {
            background-color: @accentFadedColor;
        }
        .round-button__label
        {
            &::before
            {
                content: "+";
                display: inline;
            }
        }
    }
    &--bigger {
      width: @remCalc50;
      height: @remCalc50;
      .round-button__label {
        font-size: @remCalc40;
      }
    }
    &--small {
      width: @remCalc32;
      height: @remCalc32;
      .round-button__label {
          font-size: @remCalc26;
      }
    }
}
.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;
    }
  }
}
.filter-button {
  position: relative;
  height: @remCalc48;
  border: @remCalc2 solid @lightGrey !important;
  background-color: #fff;
  color: @darkGrey;
  .display-flex(row, nowrap, flex-start, center);
  padding-left: @remCalc19 !important;
  padding-right: @remCalc19 !important;
  .border-radius(@remCalc100);
  font-size: @remCalc20;
  &__icon {
    margin-right: @remCalc7;
    font-size: @remCalc24;
  }
  &__badge {
    position: absolute;
    top: @remCalc6;
    right: @remCalc9;
    background: @accentColor;
    width: @remCalc10;
    height: @remCalc10;
    .border-radius(@remCalc100);
    font-size: @remCalc12;
    .display-flex(row, nowrap, center, center);
    color: @accentColor;
    padding-left: @remCalc5;
    padding-right: @remCalc5;
    overflow: hidden;
  }
  svg {
    width: @remCalc18;
    height: @remCalc18;
    path {
      fill: @darkGrey;
    }
  }
  &:hover,
  &:focus {
     background-color: rgba(108, 52, 113, 0.08);
     color: @accentColor;
     svg {
        path {
          fill: @accentColor;
        }
     }
  }
}
.sectionTitle() {
	font-family: 'Montserrat';
	text-fill-color: @darkGrey;
	font-weight: bold;
}
.tab-item() {
  list-style: none;
  background: transparent;
  position: relative;
  height: 90%;
  .display-flex(row, nowrap, center, center);
  padding: @remCalc2;
}
.tab-link() {
  text-decoration: none !important;
  font-weight: bold !important;
  white-space: nowrap;
  font-size: @remCalc20 !important;
  
  @media @large-up {
    font-size: @remCalc24 !important;
  }
}
.tab-indicator() {
  content: '';
  display: block;
  width: 100%;
  height: @remCalc6;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: @remCalc4 @remCalc4 0 0;
}
.tabs {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  .display-flex(row, nowrap, flex-start, flex-start);
  gap: @remCalc24;
  height: @remCalc64;
  margin: 0;
  padding: 0;
  &__item {
    .tab-item();
    .tab-link();
    color: @accentColor !important;
    margin: @remCalc4;
    a {
      .tab-link();
      color: @accentColor !important;
    }
    &--selected::after {
      .tab-indicator();
      background: @accentFadedColor;
    }
    &__uncolored {
      .tab-item();
      padding-top: @remCalc16;
      a {
        .tab-link();
        color: @mediumGrey !important;
      }
      &--selected {
        a { color: @darkGrey !important; }
        &::after {
          .tab-indicator();
          background: @darkGrey;
        }
      }
    }
  }
}
.panel__header .tabs {
  height: @remCalc88 !important;
}
.video-player
{
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  > iframe
  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }    
}
.socialButtons
{
  width: 100%;
  &__title {
      color: @darkGrey;
      font-weight: bold;
      font-size: @remCalc16;
      margin-bottom: @remCalc10;
  }
  &__buttons
  {
    .display-flex(row, wrap, flex-start, center);
    gap: @remCalc16;
    &__button
    {
    }
  }
   &--reorder {
    .email-button {
      order: 1;
    }
    .facebook-button {
      order: 2;
    }
    .twitter-button {
      order: 3;
    }
    .whatsapp-button {
      order: 4;
    }
    
    .snapchat-button {
      order: 5;
    }
  }
}
.gallery
{
    &__scroller
    {
        height: 100%;
        width: 100%;
        &__item
        {
          padding: 0;
          background-size: contain;
          background-repeat: no-repeat;
          background-position: center center;
          height: 100%;
          width: 100%;
          .display-flex(column, nowrap, center, center);
        }
    }
    &__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
{
    margin: 0;
    position: relative;
    bottom: 0;
    width: 100%;
    left: 0;
    overflow: visible;
    z-index: 200;
    > .row-flex-center
    {
      margin: 0;
    }
    .amount-wrapper
    {
      border: @remCalc2 solid @mediumGrey;
      .border-radius(@remCalc12);
      margin-bottom: @remCalc20;
    }
    .currency-wrapper
    {
      padding: @remCalc16;
      border-right: @remCalc1 solid @mediumGrey;
    }
    .input-wrapper
    {
      margin-left: @remCalc10;
      .display-flex(row, nowrap, center, center);
    }
    .number-text-input
    {
      background: #fff;
      border: @remCalc1 solid #bbb;
      .border-radius(@remCalc4);
      input
      {
        padding: @remCalc5;
      }
      .error
      {
        left: @remCalc0 !important;
      }
    }
    .currency
    {
      color: @accentColor;
      font-weight: bold;
      font-size: @remCalc24;
      line-height: 100%;
      margin-bottom: 0;
      display: block;
      .display-flex(column, nowrap, center, center);
    }
    input
    {
      background: transparent;
      color: @accentColor;
      font-weight: bold;
      border: 0px none;
      margin: 0;
      width: 100%;
      padding-right: @remCalc10;
      //line-height: normal;
      line-height: 100%;
      padding-top: 0rem;
      padding-bottom: 0rem;
      padding-left: 0rem;
      .placeholder( @mediumGrey );
      &::-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: @remCalc24;
      }
    }
    .copy
    {
        color: #ffffff;
        text-align: center;
    }
    small.error
    {
      position: absolute;
      margin: 0 !important;
      top: @remCalc14 !important;
      left: @remCalc-18 !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: #ff0000;
      }
      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;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0;
      width: 100%;
    }
    .auction-closed
    {
        h3
        {
          color: @accentColor;
          margin: 0;
        }
    }
    .textAreaRow {
        margin-top: @remCalc15;
        .text-area
        {
          border: @remCalc2 solid @mediumGrey;
        }
        .text-area__field
        {
            top: @remCalc20;
            &--empty
            {
                opacity: 1;
            }
            &::placeholder
            {
                font-size: @remCalc16;
            }
        }
        .input-counter {
            top: @remCalc150;
            color: @mediumGrey;
        }
    }
}
.buy-now-form,
.raffle-form
{
    .auction-open
    {
        text-align: center;
    }
}
.raffle-form
{
  small.error
  {
      left: @remCalc0!important;
  }
}
.categories
{
    min-width: 90vw;
    @media @medium-up
    {
        margin: 0 auto;
        min-width: @remCalc300;
    }
    &__header
    {
        font-size: @remCalc16;
        color: @accentColor;
        font-weight: bold;
        padding: @remCalc20;
        border-bottom: @remCalc1 solid @lightGrey;
    }
    &__content
    {
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        max-height: @remCalc250;
    }
    &__footer
    {
        padding: @remCalc20;
        border-top: @remCalc1 solid @lightGrey;
        text-align: right;
        &__button
        {
            .link();
            text-decoration: none;
        }
    }
    &__item
    {
        .display-flex( row,  nowrap, flex-start, center );
        width: 100%;
        height: @remCalc50;
        background: #fff;
        overflow: hidden;
        position: relative;
        text-decoration: none !important;
        border-bottom: @remCalc1 solid @lightGrey;
        &__radio {
            padding-left: @remCalc20;
            padding-right: @remCalc20;
        }
        &__label
        {
            padding-right: @remCalc20;
            font-size: @remCalc14;
            .set-flex(1);
            color: @darkGrey;
            // @media @medium-up
            // {
            //     font-size: @remCalc16;
            // }
            // @media @xlarge-up
            // {
            //     font-size: @remCalc18;
            // }
        }
        &:last-of-type
        {
            margin-bottom:  0;
            border-bottom: 0 none;
        }
    }
}
.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(@remCalc12);
    .add-drop-shadow-animation();
    border: @remCalc1 solid @lightGrey;
    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(false, 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: 1;
        + .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;
            border: 0 none;
            .input__field
            {
                left: 0;
                border: 0 none !important;
            }
            .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-animation();
    background: #fff;
    border: @remCalc1 solid @lightGrey;
    @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(false, 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;
    @placeholderColor: #d7d9db;
    .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;
      }
    }
    &__header {
      padding: 0;
      margin-bottom: @remCalc24;
      font-size: @remCalc20;
      font-weight: 600;
      color: @darkGrey;
    }
    .row {
      .display-flex(row, nowrap, flex-start, center);
      width: 100%;
      gap: @remCalc24;
      &::after {
        content: none;
      }
      &::before {
        content: none;
      }
    }
    .postal-code-row {
      input::placeholder {
        font-size: @remCalc18;
        font-weight: 700;
        color: @placeholderColor;
      }
    }
    .card-input-wrapper {
      width: 100%;
      .stripe-input-wrapper {
        top: 50%;
        transform: translateY(-50%);
      }
      label {
        border-width: @remCalc2;
        border-color: @lightGrey;
        .box-shadow(none);
        &:has(.input__field--valid),
        &:has(.input__field--invalid),
        &:has(.input__field--complete) {
          .placeholder {
            display: none;
          }
        }
        &:has(.input__field--invalid) {
          border-color: @errorColor;
        }
      }
      .input--focused {
        outline: 2px solid @accentFadedColor;
        outline-offset: -2px;
        .placeholder {
          display: none;
        }
      }
      .error {
        outline: 2px solid @errorColor;
        outline-offset: -2px;
      }
      input {
        top: 50%;
        transform: translateY(-50%);
      }
      .placeholder {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        .display-flex(row, wrap, space-between, center);
        padding-left: @remCalc16;
        padding-right: @remCalc16;
        font-size: @remCalc18;
        font-weight: 700;
        color: @placeholderColor;
        background-color: @panelBgColour;
        .border-radius(24px);
      }
    }
    .col-1 {
      padding: 0;
      width: 100%;
      max-width: 628px;;
    }
    .col-2 {
      padding: 0;
      width: 20%;
      min-width: @remCalc200;
    }
    .card-holder-name-input {
      input::placeholder {
        font-size: @remCalc18;
        font-weight: 700;
        color: @placeholderColor;
      }
    }
    .expiration-input {
      margin-left: auto;
    }
    .cvc-input {
      margin-left: auto;
      .default-card-icon {
        position: absolute;
        top: 50%;
        right: @remCalc16;
        z-index: 100;
        margin-top: @remCalc4;
        transform: translateY(-50%);
        svg {
          fill: @darkGrey;
        }
      }
    }
    .save-card {
      &-label {
        .display-flex(column, wrap, flex-start, flex-start);
      }
  
      &-header {
        font-size: @remCalc16;
        font-weight: 700;
        color: @accentColor;
        line-height: 100%;
      }
  
      &-tip {
        font-size: @remCalc14;
        font-weight: 600;
        color: @mediumGrey;
      }
    }
    .litecheckbox {
      width: @remCalc40;
      height: @remCalc24;
      input[type=checkbox]
      {
        &:focus
        {
            ~ label
            {
                border: none;
                outline: @accentColor @remCalc2 solid;
            }
        }
      }
      input[type='checkbox'] + label {
        width: @remCalc40 !important;
        height: @remCalc24;
        border-radius: @remCalc12;
        background-color: @mediumGrey;
        transition: background-color 0.2s linear;
        &::after {
          content: '';
          width: @remCalc20;
          height: @remCalc20;
          border: none;
          border-radius: @remCalc10;
          top: @remCalc1;
          left: @remCalc1;
          background: @panelBgColour;
          opacity: 1 !important;
          transition: left 0.2s linear;
        }
      }
      input[type='checkbox']:checked + label {
        width: @remCalc40;
        height: @remCalc24;
        background-color: @accentFadedColor;
        &::after {
          content: '';
          width: @remCalc20;
          height: @remCalc20;
          border: none;
          border-radius: @remCalc10;
          top: @remCalc1;
          left: @remCalc17;
          background: @panelBgColour;
        }
      }
    }
    @media @medium-down {
      .row {
        justify-content: space-between;
      }
    }
    @media @small-only {
      .row {
        .display-flex(column, wrap, flex-start, center);
        gap: 0;
        .col-1, 
        .col-2 {
          width: 100%;
          max-width: 100%;
        }
      }
    }
}
body:not(.user-is-tabbing)
{
  .credit-card-form
  {
    &:focus
    {
        outline: none;
    }
  }
  .show-all-payment-method
  {
        &:focus
        {
           outline: none;
        }
  }
}
@checkoutItemFontColor: @colorOnBackground;
@borderColor: #f0f1f2;
.checkout-item
{
    .display-flex(row, nowrap, flex-start, center);
    background: #FAFAFB;
    border: @remCalc2 solid @borderColor;
    border-radius: @remCalc8;
    padding: @remCalc12 @remCalc18;
    width: 100%;
    &__header {
        .display-flex(column, nowrap, center, flex-start);
        border-right: @remCalc2 solid @borderColor;
        flex-grow: 1;
        gap: @remCalc2;
        padding-right: @remCalc16;
        &__title {
            color: @checkoutItemFontColor;
            text-align: left;
            font-size: @remCalc16 !important;
            font-weight: 700;
        }
        &__number {
            color: #6a7278;
            text-align: left;
            font-size: @remCalc14;
            font-weight: 400;
        }
        &:hover {
            .checkout-item {
                &__title {
                    &__title {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    &__right
    {
        .display-flex(row, nowrap, flex-start, center);
        gap: @remCalc12;
        padding-left: @remCalc16;
        &__remove-button {
            .display-flex(row, nowrap, center, center);
            background-color: #f5f5f5;
            border: none;
            border-radius: 50%;
            color: @checkoutItemFontColor;
            cursor: pointer;
            font-size: @remCalc20;
            font-weight: bold;
            height: @remCalc40;
            line-height: @remCalc32;
            margin: 0;
            padding: 0;
            text-align: center;
            transition: background-color 0.2s ease;
            vertical-align: middle;
            width: @remCalc40;
            &:hover {
                background-color: #e0e0e0;
            }
        }
        &__amount
        {
            .set-flex(1);
            text-align: right;
            font-size: @remCalc16 !important;
            font-weight: normal;
            color: @checkoutItemFontColor !important;
        }
    }
    &__delivery
    {
        display: none;
        gap: @remCalc12;
        padding-right: @remCalc16;
        border-right: @remCalc2 solid @borderColor;
        &__item
        {
            .display-flex(row, nowrap, center, center);
            gap: @remCalc6;
        }
        &__item__label
        {
            font-size: @remCalc13;
            color: @checkoutItemFontColor;
            white-space: nowrap;
        }
        &--show
        {
          .display-flex(row, nowrap, center, flex-start);
        }
    }
    &--with-delivery
    {
        .checkout-item__header
        {
            padding-left: @remCalc16;
        }
    }
    &--with-selection
    {
        .display-flex(row, nowrap, flex-start, center);
    }
    &--no-link
    {
        .checkout-item
        {
            &__title
            {
                cursor: default;
                &:hover
                {
                    .checkout-item
                    {
                        &__title
                        {
                            &__title
                            {
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media @small-only
{
    .checkout-item
    {
        flex-wrap: wrap;
    }
    .checkout-item__delivery--show
    {
        border-right: none;
        border-top: @remCalc2 solid @borderColor;
        padding-right: 0;
        padding-top: @remCalc12;
        margin-top: @remCalc12;
        width: 100%;
        order: 1;
    }
    .checkout-item--with-delivery .checkout-item__header
    {
        padding-left: 0;
    }
}
.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;
        color: #000;
        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
        }
    }
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: @remCalc24;
}
// views
.panel-view(@desktopThredshold: @large-up)
{
   position: relative;
   height: fit-content;
   background: #fff;
   .border-radius(@remCalc24);
   width: 100%;
   overflow: hidden;
   padding-bottom: @remCalc24;
   .display-flex(column, nowrap, flex-start, flex-start);
   > * {
      width: 100%;
   }
   &__image
   {
      .padding();
      width: 100%;
      @media @large-up
      {
         padding-left: 0;
         padding-right: 0;
      }
   }
   &--no-large-up {
      @media @large-up {
         display: none;
      }
   }
   &--no-large-down {
      @media @small-only {
         display: none;
      }
      @media @medium-only {
         display: none;
      }
   }
   &--no-padding {
      padding: 0 !important;
   }
   @media @desktopThredshold
   {
      .add-drop-shadow(false);
      margin: auto auto;
      padding-bottom: @remCalc32;
      max-width: @remCalc1000;
   }
}
.panel-header() {
   .padding();
   .display-flex(column, nowrap, center, flex-start);
   border-bottom: @remCalc1 solid @lightGrey;
}
.panel-title() {
   font-size: @remCalc24;
   padding-top: @remCalc15;
   padding-bottom: @remCalc15;
   color: @accentColor;
   font-weight: bold;
   margin: 0;
   > * {
      color: unset;
      font-weight: unset;
      font-size: unset;
      margin: 0;
   }
   &--small {
      font-size: @remCalc20;
      color: @darkGrey;
   }
   @media @xlarge-up
   {
      &--small {
         padding-top: @remCalc13;
         padding-bottom: @remCalc13;
      }
      &--bigger {
         padding-top: @remCalc29;
         padding-bottom: @remCalc29;
         font-size: @remCalc32;
      }
   }
}
.panel-actions() {
   .padding();
   padding-top: @remCalc17;
   .display-flex(column-reverse, wrap, space-between, flex-start);
   gap: @remCalc20;
   border-bottom: @remCalc1 solid @lightGrey;
   > * {
      width: 100% !important;
   }
   &__filters {
      .panel-filters();
   }
   @media @large-up
   {
      .display-flex(row, nowrap, space-between, flex-start);
      flex-direction: row;
      > * {
         width: auto !important;
      }
   }
}
.panel-content-actions() {
   .display-flex(row, nowrap, space-around, flex-end);
   .padding();
   align-self: flex-end;
   margin-top: auto;
   &__button,
   .a--button
   {
      width: 100%;
   }
}
.panel-header-title-one() {
   .panel-header();
   .panel-title();
}
.panel-content() {
   .padding();
   padding-top: @remCalc24;
   .display-flex(column, nowrap, flex-start, flex-start);
   .set-flex(1);
   > * {
      width: 100%;
   }
   &__header {
      color: @darkGrey;
      font-size: @remCalc20;
      font-weight: bold;
   }
   p, &__paragraph {
      color: @darkGrey;
      font-size: @remCalc14;
      margin-top: @remCalc10;
   }
   &__actions
   {
      .panel-content-actions();
      padding-left: 0;
      padding-right: 0;
      @media @medium-up
      {
         padding-left: 0;
         padding-right: 0;
      }
   }
   &__center
   {
      .set-flex(1);
      .display-flex(column, nowrap, center, center);
      > * {
         width: 100%;
         text-align: center;
      }
   }
}
.panel-filters() {
   .display-flex(row, wrap, flex-end, flex-start);
   gap: @remCalc20;
   .set-flex(1);
   .a-search
   {
      .set-flex(1);
      min-width: @remCalc150;
   }
   @media @large-up
   {
      .a-search
      {
         max-width: @remCalc400 !important;
      }
   }
}
.panel
{
   .panel-view();
   &__header
   {
      .panel-header()
   }
   &__title
   {
      .panel-title();
   }
   &__actions
   {
      .panel-actions();
   }
   &__content
   {
      .panel-content();
   }
   .list
   {
      @media @xlarge-up
      {
         grid-template-columns: repeat(3, 1fr) !important;
      }
   }
   .next-loader
   {
      height: @remCalc30;
      display: none;
      position: relative;
      .loader
      {
         display: block;
         &:before
         {
            top: 0;
         }
      }
   }
   .no-data {
      .display-flex(row, wrap, center, center);
      width: 100%;
   }
}
.staticPage
{
   &__nav-link 
   {
      .nav-link();
      max-width: fit-content;
   }
    &__back-link
    {
        padding-left: @remCalc16;
        padding-right: @remCalc16;        
        margin: 0 auto @remCalc20 auto;        
        @media @large-up
        {
            padding-left: 0;
            padding-right: 0;
            max-width: @remCalc1000;            
        }
    }
    .panel__content, .bottom__copy {
      overflow: auto;
      width: 100%;
      display: block;
      position: relative;
      font-size: @remCalc16;
      @media @xlarge-up
      {
          font-size: @remCalc20;
      }
      h1, h2, h3, h4, h5, h6 {
          color: @darkGrey;
      }
      p
      {
          color: @darkGrey;
          @media @large-down
          {
              font-size: @remCalc16;
          }
          @media @xlarge-up
          {
              font-size: @remCalc20;
          }
      }
      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),
      a:not(.button):visited
      {
        .link();
      }
  }
}
@home-large-up: ~"@{screen} and (min-width: 93.75rem)";
.homeView
{
  .panel-view(@home-large-up);
  margin-top: @remCalc-20;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  @media @large-up
  {
    margin-top: @remCalc-40;
    max-width: @remCalc1500;
    margin-bottom: @remCalc-80;
    padding-bottom: @remCalc80;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  @media @home-large-up {
    margin-bottom: 0;
    padding-bottom: @remCalc32;
    border-bottom-left-radius: @remCalc24;
    border-bottom-right-radius: @remCalc24;
  }
  
  &__products
  {
    margin: 0 auto;
    background: #fff;
    &__header {
      .panel-actions();
      border-top: @remCalc1 solid @lightGrey;
      @media @large-up
      {
        padding-left: @remCalc80;
        padding-right: @remCalc80;
      }
    }
    &__list {
      .padding();
      margin-top: @remCalc20;
      @media @large-up
      {
          padding-left: @remCalc80;
          padding-right: @remCalc80;
      }
    }
  }
  &__social_buttons {
    &--desktop {
      .padding();
      margin-top: @remCalc40;
      display: none;
      @media @medium-up {
        display: block;
      }
      @media @large-up
      {
          padding-left: @remCalc80;
          padding-right: @remCalc80;
      }
    }
  }
  .staticPage__wrapper
  {
      width: 100%;
  }
  .bottom
  {
     .display-flex(row, wrap, center, flex-start);
     padding: @remCalc32 @remCalc24 @remCalc32 @remCalc24;
     gap: @remCalc24;
     max-width: @remCalc1500;
     margin: 0 auto;
     background: #fff;
      &__copy {
        h1, h2, h3, h4, h5, h6 {
          color: @accentColor;
        }
        p {
          &:last-child {
            margin-bottom: 0;
          }
        }
        .set-flex(1 1 auto);
      }
      &__social_buttons
      {
          width: 100%;
          @media @medium-up
          {
              display: none;
          }
      }
      .buttons {
          .display-flex(row, wrap, center, center);
          .padding();
          width: 100%;
          .a-button {
            .calc(width, ~"50% - @{remCalc5}");
            &:nth-child(even) {
              background-color: @accentColor;
              &:hover,
              &:focus
              {
                .hoverAccent();
              }
              &::after
              {
                .hoverAccent();
              }
            }
          }
          gap: @remCalc10;
          .fixed-button();
      }
      @media @medium-up {
        .display-flex(row, nowrap, flex-start, flex-start);
        .buttons {
          display: none;
        }
      }
      @media @large-up
      {
          padding: @remCalc40 @remCalc80 @remCalc40 @remCalc80;
          gap: @remCalc40;
      }
  }
  .raised-container
  {
    position: relative;
    .venue
    {
      position: relative;
      width: 100%;
      overflow: hidden;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      @media @small-only
      {
        height: @remCalc200;
      }
      @media @medium-only
      {
        height: @remCalc200;
      }
      @media @large-up
      {
        height: @remCalc300;
      }
      .overlay
      {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
      }
    }
    .top
    {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: #fff;
      text-shadow: 1px 1px rgba(0,0,0,0.2);
      width: 90%;
      z-index: 2;
      * {
        color: #fff;
      }
      h1 {
        font-size: @remCalc32;
      }
      h2 {
        font-size: @remCalc30;
      }
      h3 {
        font-size: @remCalc28;
      }
      h4 {
        font-size: @remCalc26;
      }
      h5 {
        font-size: @remCalc24;
      }
      p {
        font-size: @remCalc18;
      }
      .buttons {
        display: none;
      }
      @media @medium-up
      {
          text-align: left;
          h1 {
            font-size: @remCalc56;
          }
          h2 {
            font-size: @remCalc50;
          }
          h3 {
            font-size: @remCalc46;
          }
          h4 {
            font-size: @remCalc42;
          }
          h5 {
            font-size: @remCalc40;
          }
          p {
            font-size: @remCalc32;
          }
          .buttons {
            .display-flex(row, wrap, flex-start, center);
            gap: @remCalc10;
            .a-button
            {
              width: @remCalc220;
              &:nth-child(even) {
                background-color: @accentColor;
                &:hover,
                &:focus
                {
                  .hoverAccent();
                }
                &::after
                {
                  .hoverAccent();
                }
              }
            }
          }
      }
    }    
  }
}
.totaliser() {
  .value-container, .raised-totalizer-container
  {
    background: #fff;
    padding:  @remCalc16 @remCalc40;
    position: relative;
    border-radius: 100px;
    overflow: hidden;
    height: @remCalc87;
    .add-drop-shadow(true, true);
    .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: @darkGrey;
      margin-bottom: @remCalc10;
      font-size: @remCalc16;
      font-weight: bold;
      padding-left: @remCalc0;
      padding-right: @remCalc0;
    }
    .raised-and-target-container
    {
        .display-flex(row, nowrap, space-between, center);
        color: @darkGrey;
        margin-bottom: @remCalc10;
        font-size: @remCalc16;
        font-weight: bold;
        overflow: unset;
        @media @medium-up{}
        .labels
        {
          text-align: center;
          display: flex;
          gap: @remCalc5;
          flex-direction: column;
        }
        .raised-label
        {
          .raised-amount
          {
            color: @accentFadedColor;
            font-weight: bolder;
            font-size: @remCalc24;
          }
        }
        .target-label
        {
          .target-amount
          {
            color: @mediumGrey;
            font-weight: bolder;
            font-size: @remCalc24;
          }
        }
        .spacer {
          width: @remCalc30;
        }
    }
    .amount-container {
      font-size: @remCalc15;
      color: @accentFontColor;
      .display-flex(row, nowrap, space-between, center);
      margin-top:  @remCalc-10;
      @media @medium-up
      {
          font-size: @remCalc35;
      }
      .amounts {          
          text-align: center;        
          .calc( width, ~"50% - @{remCalc15}" );          
      }
      .spacer {
          width: @remCalc30;
      }
      .raised-amount
      {
          color: @accentFadedColor;          
          font-weight: bolder;
          font-size: @remCalc24;        
      }
      .target-amount
      {
        color: @mediumGrey;
        font-weight: bolder;
        font-size: @remCalc24;        
      }
    }
    .progressBar
    {
        margin-top: @remCalc8;
        &__bar
        {
            border-radius: @remCalc50;
            background: @backgroundColor;
            &__current
            {
                height: @remCalc8;
                border-radius:  @remCalc50;
                background-image:
                linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
            }
            &--moved
            {
                .progressBar
                {
                    &__bar
                    {
                        &__current
                        {
                          @step1: lighten(@accentColor, 20% );
                          @step2: lighten(@step1, 10% );
                          @step3: lighten(@step2, 10% );
                          background: linear-gradient(to right, @step1, @step2 50%, @step3 100%);
                        }
                    }
                }
            }
        }
    }
    .amount
    {
      font-size: @remCalc24;
      color: @accentColor;
      font-weight: bold;
    }
    .loader
    {
      background: @accentColor;
      &:before{
        border-top-color: @accentFontColor;
        border-left-color: @accentFontColor;
      }
    }
    @media @small-only
    {
        min-width: 60%;
        max-width: 100%;
    }
    @media @medium-up
    {        
        min-width: @remCalc318;
    }
  }
}
.bottom__raised
{
  .totaliser;
  &--tablet 
  {
    .totaliser;
    .raised-totalizer-container, .value-container 
    {
      display: flex;
      gap: @remCalc6;
      height: @remCalc48;
      min-width: 0;
      padding: @remCalc12 @remCalc32;
    }
    .value-container 
    {
      flex-direction: row;
      align-items: center;
      .amount
      {
        font-size: @remCalc16;
      }
      .label-text
      {
        margin-bottom: @remCalc0;
        font-size: @remCalc16;
        font-weight: normal;
      }
    }
    .raised-totalizer-container
    {
      flex-direction: column;
      .raised-and-target-container 
      {
        display: flex;
        gap: @remCalc12;
        margin-bottom: 0;
        .labels
        {
          display: flex;
          font-size: @remCalc14;
          font-weight: normal;
          gap: @remCalc4;
          width: 100%;
          span 
          {
            font-weight: bold;
          }
        }
      }
      .progressBar
      {
        margin-top: 0;
        &__bar__current
        {
          height: @remCalc3;
        }
      }
    }
  }
}
.layout--minimum
{
    .bottom
    {
        .buttons
        {
            &--fixed
            {
                .bidding-minimum-actions();
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  .layout--minimum
  {
    .bottom
    {
        .buttons
        {
            &--fixed
            {
                .bidding-minimum-actions-constant();
            }
        }
    }
  }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .layout--minimum
  {
    .bottom
    {
        .buttons
        {
            &--fixed
            {
                .bidding-minimum-actions-env();
            }
        }
    }
  }
}
.list
{
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   gap: @remCalc24;
   .no-data {
      .display-flex(row, wrap, center, center);
      grid-column-start: 1;
      grid-column-end: 5;
      width: 100%;
   }
   @media @medium-up
   {
      grid-template-columns: repeat(2, 1fr);
   }
   @media @large-up
   {
   grid-template-columns: repeat(3, 1fr);
   }
   @media @xlarge-up
   {
   grid-template-columns: repeat(4, 1fr);
   }
}
.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);
        }
      }
   }
}
@listItemBgColor: @panelBgColour;
@listItemFontColor: @fontColourForPanel;
@listItemPreviewFontColor: @colorOnBackground;
.list-item
{
  .display-flex(column, nowrap, center, center);
  margin: 0;
  &__wrapper
  {
    width: 100%;
    height: 100%;
    margin: 0;
    background-color: @listItemBgColor;
    cursor: pointer;
    border-radius: @remCalc24;
    position: relative;
    overflow: hidden;
    -webkit-user-select: text !important;
    user-select: text !important;
    -ms-user-select: text !important;
    padding: @remCalc16;
    .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();
      }
    }
    &__admin-preview-border{
      border: 2px dashed #000;
    }
  }
  &__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: @remCalc16;
          line-height: @remCalc21;
          font-weight: bold;
          color: @accentColor !important;
          padding-bottom: @remCalc8;
          padding-top: @remCalc20;
          margin: 0;
      }
      &__title, &__sponsor-strap-line
      {
          width: 100%;
          font-size: @remCalc18 !important;
          font-weight: normal;
          overflow: hidden;
          text-align: left;
          height: @remCalc56;
          color: @listItemFontColor;
          font-weight: bold;
          margin: 0;
          -webkit-user-select: text !important;
          user-select: text !important;
          -ms-user-select: text !important;
          @media @large-up
          {
            font-size: @remCalc18 !important;
            line-height: @remCalc26;
            height: @remCalc56;
          }
      }
      &__sponsor-strap-line
      {
        min-height: 105px;
      }
    }
    &__subtitle-row
    {
        width: 100%;
        .display-flex(row, nowrap, flex-start, center);
        &__sub1
        {
          width: fit-content;
          min-width: 40%;
          border-radius: @remCalc12;
          padding: @remCalc10 @remCalc20;
          text-align: center;
          font-weight: normal;
          font-size: @remCalc18;
          overflow: hidden;
          background-color: @accentColor;
          color: @accentFontColor;
          margin-top: @remCalc10;
          margin-right: auto;
          &--empty
          {
             background-color: transparent;
          }
          &--sealed
          {
            width: 60%;
          }
          &__fav {
            background-color: #fff;
            color: @accentFontColor;
            border-radius: 100%;
            border: 2px solid @mediumGrey;
            padding: 0.625rem;
            margin-top: @remCalc10;
            min-width: @remCalc45;
        
            display: flex;
            justify-content: center;
            align-items: center;
        
            svg path 
            {
                fill: @mediumGrey;
            }
            @media (hover: hover) {
                &:hover
                {
                    background-color: @accentColor;
                    border: 2px solid @accentColor;
      
                    svg path 
                    {
                      fill: @accentFontColor;
                    }
                } 
            }
            &--selected
            {
              background-color: @accentColor;
              border: 2px solid @accentColor;
              border-radius: 100%;
              padding: @remCalc10;
              margin-top: @remCalc10;
              min-width: @remCalc45;
          
              display: flex;
              justify-content: center;
              align-items: center;
              svg path 
              {
                fill: @accentFontColor;
              }
            }
          }
        }
        &__sub2
        {
            .set-flex(1);
            font-weight: normal;
            font-size: @remCalc14;
            overflow: hidden;
            text-align: left;
            color: @accentFadedColor;
            margin-top: @remCalc5;
        }
    }
  }
  &--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
          {
              margin-left: @remCalc5;
              @media @medium-up
              {
                    margin-left: 0;
              }
              &__number
              {
                  font-size: @remCalc24;
                  padding-bottom: @remCalc20;
                  @media @medium-up
                  {
                  }
                  @media @xlarge-up
                  {
                  }
              }
              &__title, &__sponsor-strap-line
              {
                  font-size: @remCalc24 !important;
                  height: @remCalc40 !important;
                  @media @medium-up
                  {
                  }
                  @media @xlarge-up
                  {
                  }
              }
          }
          &__subtitle-row
          {
            &__sub1
            {
                margin-top: @remCalc20;
                padding-left:  @remCalc20;
                padding-right:  @remCalc20;
                width: auto;
                min-width: auto;
                font-size: @remCalc20;
                @media @medium-up
                {
                    padding-left:  @remCalc30;
                    padding-right:  @remCalc30;
                }
                @media @xlarge-up
                {
                    padding-left:  @remCalc40;
                    padding-right:  @remCalc40;
                }
            }
            &__sub2
            {
                font-size: @remCalc16;
                @media @medium-up
                {
                }
                @media @xlarge-up
                {
                }
            }
          }
      }
    }
    &.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;
          }
      }
    }
  }
  &__lock-icon-wrapper {
    position: absolute;
    top: @remCalc24;
    right: @remCalc24;
    .input__icon {
      position: static;
      fill: @accentColor;
    }
  }
}
.lotList
{
  position: relative;
  min-height: @remCalc500;
  .list
  {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: @remCalc24;
    @media @medium-up
    {
       grid-template-columns: repeat(2, 1fr);
    }
    @media @large-up
    {
      grid-template-columns: repeat(3, 1fr);
    }
    @media @xlarge-up
    {
      grid-template-columns: repeat(4, 1fr);
    }
  }
   .next-loader
   {
      height: @remCalc30;
      display: none;
      position: relative;
      .loader
      {
         display: block;
         &:before
         {
            top: 0;
         }
      }
   }
   .no-data {
      .display-flex(row, wrap, center, center);
      width: 100%;
   }
}
.touch
{
   .list-item, .sponsor-item
   {
      &__wrapper
      {
        &:hover
        {
            .add-drop-shadow(false);
        }
      }
   }
}
.passwordProtection {
  .display-flex(row, wrap, center, center);
  width: 100%;
  height: 100%;
  flex-grow: 1;
  gap: @remCalc24;
  &__dialog {
    .display-flex(column, nowrap, flex-start, flex-start);
    gap: @remCalc24;
    padding: @remCalc24;
    box-sizing: border-box;
    width: 100%;
    max-width: @remCalc500;
    .border-radius(@remCalc24);
    .box-shadow(0px 4px 4px 0px rgba(0, 0, 0, 0.12));
    background-color: @panelBgColour;
  }
  &__nav-link {
    .nav-link();
  }
  &__header {
    font-size: @remCalc24;
    font-weight: 700;
  }
  &__lot-title {
    font-size: @remCalc18;
    font-weight: 600;
  }
  &__form {
    .display-flex(column, nowrap, flex-start, center);
    width: 100%;
    gap: @remCalc16;
    margin-top: @remCalc16;
    &-input-wrapper {
      .display-flex(row, nowrap, flex-start, center);
      width: 100%;
    }
    &-input {
      width: 100%;
      min-height: @remCalc44;
      padding: 0 @remCalc16;
      color: @darkGrey;
      border: @remCalc2 solid @lightGrey;
      .border-radius(@remCalc8);
      &::placeholder {
        color: @mediumGrey;
      }
      &:focus {
        border-color: @accentColor;
      }
    }
    &-submit-button {
      width: 100%;
      text-align: center;
      text-transform: uppercase;
    }
  }
  &__form-actions {
    .display-flex(row, nowrap, center, center);
    width: 100%;
    gap: @remCalc12;
    margin-top: @remCalc16;
  }
  &__form-back {
    .nav-link();
    color: @darkGrey;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    background-color: white;
    &:hover {
      color: @accentColor;
    }
  }
}
.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: #fff;
@loginTextColor: @darkGrey;
@loginActionButtonBackgroundColor: @lightGrey;
@loginActionButtonFontColor: #fff;
@loginLinkColor: @accentFadedColor;
@loginDigitBgColor: #ffffff;
@loginDigitFocusColor: #3786d5;
@loginDigitTextColor: contrast(@loginDigitBgColor, #000000, rgb(255, 255, 255));
@loginDigitBorderColor: contrast(@loginDigitBgColor, darken(@loginDigitBgColor, 20%), lighten(@loginDigitBgColor, 20%));
@loginDigitErrorColor: #c51a1a;
@loginViewWidth: @remCalc500;
.login-button-grey()
{
    background-color: @loginActionButtonBackgroundColor;
    color: @loginActionButtonFontColor;
    &:hover,
    &:focus
    {
        background-color: darken(@loginActionButtonBackgroundColor, 10%);
        color: @loginActionButtonFontColor;
    }
    &:after
    {
        background-color: lighten(@loginActionButtonBackgroundColor, 10%);
    }
    .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()
{
    .panel-view();
    align-self: center;
    @media @large-up
    {
        width: @loginViewWidth;
    }
    small.error
    {
        color: @errorColor;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .submit-row
    {
        display: none;
        &.error
        {
            display: block;
        }
    }
}
.login-header()
{
    .panel-header-title-one();
    border-bottom: none;
}
.login-message()
{
    font-size: @remCalc18;
    color: @loginTextColor;
    text-align: left;
    font-weight: bold;
    .padding();
    padding-bottom: @remCalc29;
    border-bottom: @remCalc1 solid @lightGrey;
    b
    {
        color: @loginLinkColor;
    }
}
.login-sub-message()
{
    font-size: @remCalc14;
    color: @loginTextColor;
    text-align: left;
    font-weight: normal;
    padding: @remCalc10 @remCalc24 @remCalc10 @remCalc24;
    @media @xlarge-up
    {
        font-size: @remCalc16;
    }
}
.login-form()
{
    .padding();
    padding-top: @remCalc40;
    fieldset
    {
        padding: 0;
        margin: 0;
        min-width: 0%;
        max-width: 100%;
        overflow: visible;
    }
    .input
    {
        &__field
        {
        }
    }
    &__link
    {
        .link();
        &--accent
        {
            color: @accentColor;
            &:hover
            {
                color: darken( @accentColor, 20%);
            }
        }
    }
    &__actions
    {
        margin-top: @remCalc40;
        &__button
        {
            margin: 0 auto;
            width: 100%;
            font-weight: bold;
            @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: @remCalc20;
    .forgot-error
    {
        padding:  @remCalc20 0 0 0 !important;
    }
    &__header
    {
        font-size: @remCalc20;
        font-weight: bold;
        color: @accentColor;
        margin-bottom: @remCalc30;
        .padding();
    }
    &__message
    {
        font-size: @remCalc14;
        color: @loginTextColor;
        text-align: left;
        .padding();
    }
    &__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: 90%, @mediumSize: 45%, @largeSize: 90%, @xlargeSize: 90%)
{
    .display-flex(row, nowrap, center, center);
    .digits
    {
        width: @smallSize;
        @media @medium-up
        {
            width: @mediumSize;
        }
        @media @large-up
        {
            width: @largeSize;
        }
        @media @xlarge-up
        {
            width: @xlargeSize;
        }
        &__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;
    }
}
.login-captcha-tandc()
{
    margin-top: @remCalc30;
    small {
        font-size: @remCalc14;
        color: @loginTextColor;
    }
    a {
        color: @loginLinkColor;
        text-decoration: underline;
    }
}
@biddingInfoFontColor: #fff;
.bidding-view()
{
  .panel-view();
}
.bidding-header()
{
    padding: @remCalc15 @remCalc24;
    border-bottom: @remCalc1 solid @lightGrey;
    .bidding-list-item();
}
.bidding-list-item()
{
    @media @small-only, @medium-only
    {
        .list-item__wrapper {
            .display-flex(column, wrap, flex-start, flex-start);
        }
        .list-item__top-image
        {
            width: 100%;
            .set-flex(unset);
        }
        .list-item__under-image__subtitle-row__sub2
        {
            margin-top: @remCalc10;
        }
        .list-item__under-image
        {
            width: 100%;
            margin-left: 0;
        }
        .list-item__under-image__title-column
        {
            margin-left: 0 !important;
            &__title {
                height: auto !important;
            }
        }
    }
}
.bidding-body()
{
    .panel-content();
    &__icon
    {
        margin-top: @remCalc50;
        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()
{
    .panel-header-title-one();
    border-bottom: none;
    padding-left: 0;
    padding-right: 0;
    @media @medium-up
    {
        padding-left: 0;
        padding-right: 0;
    }
}
.bidding-message()
{
    a:not(.button),
    a:not(.button):visited,
    a:not(.button):focus,
    &__link
    {
        .link();
    }
}
.bidding-info()
{
    padding: @remCalc24 @remCalc24 0 @remCalc24;
    .display-flex(column, nowrap, flex-start, flex-start);
    @media @small-only
    {
      padding: 0;
    }
    &__row
    {
        width: 100%;
        .display-flex(row, nowrap, center, flex-start);
        margin-bottom: @remCalc10;
        &:last-of-type
        {
            margin-bottom: @remCalc0;
        }
        &__col
        {
          text-align: center;
        }
        @media @small-only
        {
            .display-flex(column, nowrap, center, flex-start);
            &__col
            {
              width: 100%;
              text-align: center;
            }
        }
    }
    &__label
    {
        font-size: @remCalc24;
        color: @fontColourForPanel;
        white-space: nowrap;
        .display-flex(row, wrap, center, flex-start);
        gap: @remCalc24;
        @media @medium-up
        {
            font-size: @remCalc30;
        }
        @media @small-only
        {
            gap: @remCalc6;
        }
        &--small
        {
            font-size: @remCalc20;
            font-weight: bold;
        }
    }
    &__value
    {
        font-size: @remCalc20;
        font-weight: bold;
        color: @accentFadedColor;
        @media @small-only
        {
          font-size: @remCalc24;
        }
        @media @medium-up
        {
          font-size: @remCalc30;
        }
        &--small
        {
            color: @fontColourForPanel;
            font-size: @remCalc16;
            font-weight: normal;
            label {
                font-size: @remCalc16;
                font-weight: normal;
                color: @fontColourForPanel;
            }
        }
    }
    &__row--details
    {
        margin-top: @remCalc20;
        .display-flex(row, nowrap, flex-start, center);
        &__col
        {
            width: auto;
            text-align: left;
            margin-right: @remCalc10;
            &:last-of-type
            {
                margin-right: 0;
            }
        }
    }
}
.bidding-actions()
{
    .fixed-button();
    margin-top: @remCalc50;
    &--fixed {
        .padding();
    }
    &__wrapper
    {
        .display-flex(row, nowrap, center, center);
        width: 100%;
        gap: @remCalc10;
    }
    &__button
    {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        .calc(width, ~"50% - @{remCalc5}");
    }
}
.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: @remCalc20;
    margin-top: 0;
    overflow: visible;    
    @media @medium-up
    {
        margin-bottom: @remCalc20;
        margin-top: @remCalc20;
    }
    @media @xlarge-up
    {
        margin-bottom: @remCalc40;
        margin-top: @remCalc20;
    }
}
.bidding-max-bidding()
{
    margin-top: @remCalc30;
    &__title
    {
        font-size: @remCalc20;
        color: @accentColor;
        margin-bottom: @remCalc30;
        text-align: center;
        @media @medium-up
        {
            font-size: @remCalc24;
        }
        @media @xlarge-up
        {
            font-size: @remCalc32;
        }
    }
    &__message
    {
        font-size: @remCalc16;
        color: @darkGrey;
        text-align: center;
        margin: 0;
        padding: 0;
        @media @xlarge-up
        {
            font-size: @remCalc18;
        }
    }
    &__bid-form
    {
        padding: @remCalc20 @remCalc10;
        margin-top: @remCalc30;
        [type=submit],
        [type=button]
        {
            margin-top: 0 !important;
        }
        @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()
{
    .panel-view();
    > .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()
{
    .panel-header-title-one();
}
.checkout-message()
{
    font-size: @remCalc16;
    color: @darkGrey;
    margin: 0;
    padding: @remCalc24 @remCalc24 0 @remCalc24;
    @media @xlarge-up
    {
      font-size: @remCalc18;
    }
}
.checkout-actions()
{
    width: 100%;
    .display-flex(row, nowrap, space-around, center);
    margin-top: @remCalc40;
    .padding();
    &__button
    {
        width: 100%;
        margin: 0 auto;
    }
}
.checkout-form()
{
    .panel-content();
    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
    {
        .checkout-actions();
    }
    .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
    {
    }
    &__col2
    {
    }
}
.registerView
{
    .login-view();
    .mandatory
    {
        color: @errorColor;
    }
    &__header
    {
        .checkout-header();
        @media @medium-down {
          align-items: center;
        }
    }
    &__message
    {
        .checkout-message();
    }
    &__form
    {
        .checkout-form();
        &__fee-section
        {
        	.checkbox-row
        	{
        		display: flex;
        		justify-content: space-around;
        		align-items: center;
        		div
        		{
        			text-align: center;
        			.litecheckbox
        			{
        				display: inline-block;
        				text-align: center;
        				input
        				{
        					margin: 0 auto;
        					display: block;
        				}
        				label
        				{
        					display: block;
        					margin-top: 5px;
        				}
        			}
        		}
        	}
        }
        fieldset
        {
            //margin-bottom: @remCalc20;
            .register-form-password-error-label
            {
                br
                {
                    display: none;
                }
            }
        }
        a {
            .link();
        }
    }
    &__client-terms-and-conditions
    {
        text-align: center;
        margin-top: @remCalc40;
        font-size: @remCalc14;
        a:not(.a-button) {
            .link();
        }
    }
    &__gift-aid-now,
    &__tax-receipt,
    &__mailing
    {
        .checkout-checkbox();
    }
    &__gift-aid-now-address,
    &__tax-receipt-address
    {
        margin-top: @remCalc20;
    }
    &__actions
    {
        margin-top: @remCalc30;
        &__button
        {
            width: 100%;
            margin: 0 auto;
        }
    }
}
.layout--minimum
{
    .registerView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .registerView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .registerView
        {
            .bidding-minimum-view-env();
        }
    }
}
.registerView2
{
    .login-view();
    &__header
    {
        .checkout-header();
    }
    &__client-terms
    {
        &__header
        {
            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: 100%;
            margin: 0 auto;
        }
    }
    &__form {
        .checkout-form();
        margin-top: 0;
        a {
            .link();
        }
    }
}
.layout--minimum
{
    .registerView2
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .registerView2
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .registerView2
        {
            .bidding-minimum-view-env();
        }
    }
}
.registerSuccessView
{
    .checkout-view();
    &__header
    {
        .checkout-header();
    }
    &__message
    {
        .checkout-message();
    }
    &__actions
    {
        .checkout-actions();
    }
    &__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
        {
        }
    }
}
.layout--minimum
{
    .registerSuccessView
    {
        .bidding-minimum-view();
    }
}
.dialog
{
    .registerSuccessView
    {
        box-shadow: none;
        margin: @dialog-content-padding * -1;
        .calc( width, ~"100% + @{dialog-content-padding} + @{dialog-content-padding}" );
        @media @medium-up {
            margin: @dialog-content-padding-medium * -1;
            .calc( width, ~"100% + @{dialog-content-padding-medium} + @{dialog-content-padding-medium}" );
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .registerSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .registerSuccessView
        {
            .bidding-minimum-view-env();
        }
    }
}
.sendPersonalLinkSuccessView
{
    .login-view();
    &__header
    {
        .login-header();
    }
    &__message
    {
        .login-message();
    }
    &__form
    {
        .login-form();
    }
    &__sub-message
    {
        .login-sub-message();
        margin-top: @remCalc20;
    }
    &__footer
    {
        margin-top: @remCalc30;
        text-align: center;
        a {
           .link();
        }
    }
}
.layout--minimum
{
    .sendPersonalLinkSuccessView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .sendPersonalLinkSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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;
.nav-link()
{
    .display-flex(row, nowrap, flex-start, center);
    svg {
        fill: @accentFadedColor;
        width: @remCalc40;
        height: @remCalc40;
        .transition( fill 167ms ease-in);
    }
    color: @darkGrey;
    font-size: @remCalc20;
    &--left {
        svg {
            margin-right: @remCalc10;
        }
    }
    &--right {
        svg {
            margin-left: @remCalc10;
        }
    }
    &:hover,
    &:focus {
        svg {
            .hoverAccentFaded(fill);
        }
    }
    &--disabled {
        color: @lightGrey;
        svg {
            fill: @lightGrey;
        }
        cursor: normal;
        pointer-events: none;
    }
}
.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
{
   position: relative;
   .display-flex(row, wrap, flex-start, flex-start);
   margin: 0 auto;
   width: 100%;
   .panel {
        min-height: unset !important;
        max-width: unset !important;
        width: 100% !important;
   }
   &__left {
       .display-flex(column, wrap, flex-start, flex-start);
       width: 100%;
       .set-flex(1);
       .panel {
        border-radius: 0;
       }
       .list-item__under-image {
            .padding();
            padding-top: @remCalc24;
        }
        @media @large-up
        {
            gap: @remCalc24;
            .panel {
                .border-radius(@remCalc24);
            }
        }
   }
   &__right {
      .display-flex(column, wrap, flex-start, flex-start);
      width: 100%;
      @media @large-up
      {
        gap: @remCalc24;
        margin-top: @remCalc64;
      }
   }
   @media @large-up
   {
        .display-flex(row, nowrap, flex-start, flex-start);
        .padding();
        gap: @remCalc40;
        &__left {
            width: @remCalc563;
        }
        &__right {
            width: @remCalc412;
        }
   }
   @media @xlarge-up
   {
        padding: 0;
        width: @remCalc1352;
        &__left {
            width: @remCalc900;
        }
   }
   &__header
   {
      width: 100%;
      .bidding-list-item();
   }
   &__photo
   {
      position: relative;
      width: 100%;
      .padding();
      @media @xlarge-up {
        padding-top: @remCalc24;
      }
   }
   &__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;
      }
   }
    &__availability
    {
        margin-top: @remCalc20;
        .padding();
        .display-flex(row, wrap, flex-start, flex-start);
        gap: @remCalc5;
        &__icon {
            width: @remCalc25;
            height: @remCalc24;
            svg {
                fill: @accentColor;
            }
        }
        &__label {
            font-size: @remCalc16;
            font-weight: bold;
            color: @accentColor;
        }
        &__value {
            font-size: @remCalc16;
            font-weight: bold;
            color: @accentFadedColor;
        }
    }
    &__minimum-age 
    {
        margin-top: @remCalc20;
        .padding();
        .display-flex(row, wrap, flex-start, flex-start);
        gap: @remCalc5;
        &__icon {
            width: @remCalc25;
            height: @remCalc24;
            svg {
                fill: @accentColor;
            }
        }
        &__label {
            font-size: @remCalc16;
            font-weight: bold;
            color: @accentColor;
        }
        &__value {
            font-size: @remCalc16;
            font-weight: bold;
            color: @accentFadedColor;
        }
    }
   &__description
   {
      width: auto;
   }
   &__donated_by
   {
        margin-top: @remCalc30;
        background: @accentColor;
        color: @accentFontColor;
        padding-left: @remCalc10;
   }
   &__bid-info,
   &__closed-info
   {
      &__current-bid {
        font-size: @remCalc48;
        color: @accentColor;
        margin-bottom: @remCalc10;
      }
      &__current-bidder {
        font-size: @remCalc16;
        color: @accentFadedColor;
      }
      &__label {
        text-align: left;
        font-weight: bold;
        color: @darkGrey;
      }
      &__time-left {
        .display-flex(row, nowrap, flex-start, center);
        margin-top: @remCalc20;
        &__icon {
            width: @remCalc22;
            height: @remCalc21;
            svg {
                fill: @accentColor;
            }
        }
        &__label {
            font-size: @remCalc16;
            color: @accentColor;
            margin-left: @remCalc10;
            font-weight: bold
        }
        &__value {
            border: @remCalc2 solid fade(@accentColor, 8%);
            background: fade(@accentColor, 4%);
            .border-radius(@remCalc12);
            padding: @remCalc12;
            position: relative;
            display: block;
            margin-left: @remCalc10;
            font-size: @remCalc16;
            font-weight: bold;
            color: @accentColor;
        }
      }
   }
   &__bid-form {
    .transition(padding-bottom 250ms ease);
    @media @large-up
    {
    }
    &--fixed
    {
        padding-bottom: @remCalc25;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        @media @medium-down
        {
            position: fixed;
            left: 0;
            bottom: 0;
            top: auto;
            width: 100%;
            z-index: 1000;
            margin-top: 0;
            margin-bottom: 0;
        }
    }
    &__row {
        .display-flex(row, nowrap, flex-start, center);
        margin-bottom: @remCalc20;
        &__icon {
            width: @remCalc24;
            height: @remCalc24;
            .display-flex(row, nowrap, center, center);
            svg {
                fill: @accentColor;
            }
        }
        &__label {
            font-size: @remCalc16;
            color: @mediumGrey;
            margin-left: @remCalc10;
            font-weight: bold
        }
        &__value {
            font-size: @remCalc16;
            color: @mediumGrey;
            font-weight: bold;
            margin-left: @remCalc10;
        }
      }
   }
   &__closed-info
   {
		.itemPreviewView
		{
			&__bid-info
			{
				&__row
				{
					margin: 0px;
				}
			}
		}
   }
   &__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;
           }
       }
   }
   &__free-items
   {
        padding-left: @remCalc16;
        padding-right: @remCalc16;
        &__item
        {
            border: @remCalc1 solid @lightGrey;
            .display-flex(row, nowrap, flex-start, center);
            padding: @remCalc16;
            .border-radius(@remCalc12);
            gap: @remCalc20;
        }
        &__col
        {
            gap: @remCalc10;
            .display-flex(column, nowrap, flex-start, flex-start);
        }
        &__header
        {
            font-size: @remCalc16;
            color: @accentColor;
            margin: 0;
        }
        &__description
        {
            font-size: @remCalc14;
            color: @mediumGrey;
            text-align: left;
        }
        .a-button
        {
            white-space: nowrap;
            padding: @remCalc16;
        }
   }
   &__navs
   {
        .padding();
        margin-top: @remCalc20;
        .display-flex(row, nowrap, space-between, center);
        border-top: @remCalc1 solid @lightGrey;
        padding-top: @remCalc32;
        gap: @remCalc20;
   }
   &__back-link
   {
        padding-left: @remCalc16;
        padding-right: @remCalc16;
        margin-bottom: @remCalc20;
        @media @large-up
        {
            padding-left: 0;
            padding-right: 0;
            margin-bottom: 0;
        }
   }
   &__nav-link {
        .nav-link();
   }
    .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);
                        }
                    }
                }
            }
        }
    }
}
.layout--minimum
{
    .itemPreviewView
    {
        //.bidding-minimum-view(@itemPreviewFormHeight);
        &__bid-form
        {
            &--fixed
            {
                .bidding-minimum-actions();
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .itemPreviewView
        {
            .bidding-minimum-view-constant(@itemPreviewFormHeight);
            &__bid-form
            {
                &--fixed
                {
                    .bidding-minimum-actions-constant();
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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();
          border-bottom: none;
          .display-flex(column, nowrap, center,  center);
          font-size: @remCalc20;
            
         @media @medium-up
         {
            font-size: @remCalc24;
         }
         @media @xlarge-up
         {
            font-size: @remCalc32;
         }
      }
      &__message
      {
          .bidding-message();
      }
      &__maximum-bid
      {
          .bidding-max-bidding();
      }
      &__social
      {
          .bidding-social();
      }
      &__actions
      {
          .bidding-actions();
          &__button
          {
             width: 100%;
          }
      }
  }
}
.layout--minimum
{
    .placeBidSuccessView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .placeBidSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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;
          }
      }
  }
}
.layout--minimum
{
    .placeDonationSuccessView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .placeDonationSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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}" );
                }
            }
        }
    }
}
.layout--minimum
{
    .placeBidErrorView
    {
        //.bidding-minimum-view(@placeBidErrorFormHeight);
        &__body
        {
            &__bid-form
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .placeBidErrorView
        {
            .bidding-minimum-view-constant(@placeBidErrorFormHeight);
            &__body
            {
                &__bid-form
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .placeBidErrorView
        {
            .bidding-minimum-view-env(@placeBidErrorFormHeight);
            &__body
            {
                &__bid-form
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-env();
                    }
                }
            }
        }
    }
}
.placeDonationErrorView {
	.bidding-view();
	&__header {
		.bidding-header();
		.list-item--preview {
			.list-item {
				&__wrapper {
					flex-wrap: wrap;
				}
				&__under-image {
					width: 50%;
					@media @large-up {
						width: 62%;
					}
					&__title-column {
						&__number {
							font-family: 'Montserrat';
							font-weight: bolder;
							font-size: @remCalc16;
							color: @mediumGrey  !important;
							-webkit-text-stroke: 0.5px @mediumGrey;
							text-fill-color: @mediumGrey;
							padding-bottom: @remCalc5;
						}
						&__title {
							font-size: @remCalc20  !important;
							font-weight: bolder;
							color: @darkGrey;
							-webkit-text-stroke: 0.5px @darkGrey;
							text-fill-color: @darkGrey;
						}
					}
				}
				&__progress-container {
					display: block;
					flex: 1 0 100%;
					.progress-bar {
						width: 100%;
						background-color: #e0e0e0;
						border-radius: @remCalc10;
						overflow: hidden;
						height: @remCalc8;
						margin: @remCalc10 0;
						position: relative;
					}
					.progress-fill {
						background: linear-gradient(90deg, lighten(@accentColor, 15%), lighten(@accentColor, 30%));
						height: 100%;
						width: 0%;
						border-radius: @remCalc10 0 0 @remCalc10;
						transition: width 1s ease-in-out;
						filter: brightness(1.3);
					}
					.target,
					.supporters {
						.sectionTitle();
						color: @darkGrey;
						font-weight: bold;
						letter-spacing: 0.5px;
						font-size: @remCalc14;
						span {
							font-weight: bold;
						}
					}
					.target {
						text-align: right;
					}
				}
			}
		}
	}
	&__body {
		.bidding-body();
		&__title {
			.bidding-title();
		}
		&__message {
			.bidding-message();
		}
	}
}
.layout--minimum {
	.placeDonationErrorView {
		.bidding-minimum-view();
	}
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
	.layout--minimum {
		.placeDonationErrorView {
			.bidding-minimum-view-constant();
		}
	}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	.layout--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-data
        {
            display: block;
            margin: 0 auto;
        }
    }
}
.logoutView
{
    .login-view();
    margin-top: auto;
    margin-bottom: auto;
    &__logo
    {
       height:  @remCalc75;
       width: 100%;
       background: url(@logoutLogoUrl) no-repeat center center;
       background-size: auto 100%;
       background-size: contain;
       display: block;
       margin-bottom: @remCalc40;
    }
    .panel__content__actions {
        margin-top: @remCalc40;
    }
}
html.with-screensaver
{
    width: 100% !important;
    height: 100% !important;
    overflow: hidden  !important;
}
.screenSaverView
{
    height: 100%;
    width: 100%;
    background: url(@liteScreensaverPortraitUrl) #fff no-repeat center center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: cover !important;
    overflow: hidden;
    //background-size: auto 100%;
    //background-repeat: no-repeat;
    z-index: 12000;
    &__contents
    {
        width: 50%;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        background-color: rgba(255, 255, 255, 0.8);
        .add-drop-shadow(false);
        border-radius: 10px;
        padding: 50px;
        .translate(-50%, -50%);
        .translate3d(-50%,-50%,0);
        display: none;
    }
    &__logo
    {
       height:  @remCalc75;
       width: 100%;
       background: url(@logoutLogoUrl) no-repeat center center;
       background-size: auto 100%;
       background-size: contain;
       margin-bottom: 0;
       &--show
       {
             display: block;
       }
    }
    &__message
    {
        margin-top:  @remCalc45;
        text-align: center;
        h4
        {
            font-size: @remCalc24;
        }
        p,
        h4
        {
            color: @colorOnBackground;
        }
    }
    &__actions
    {
       // margin-top:  @remCalc20;
        position: absolute;
        bottom: 10%;
        right: 0;
        &__button
        {
            font-size: 2em;
            font-family: sans-serif;
            color: #2f2f2f;
            border: solid 0.1em #2f2f2f;
            border-right: none;
            opacity: 0.8;
            padding: 0.25em 0.5em 0.25em 0.5em;
            border-radius: 1em 0 0 1em;
            background-color: #fff !important;
            &:hover
            {
                color: #2f2f2f;
                background-color: darken(#fff, 20%) !important;
            }
        }
    }
    &--portait
    {
        background: url(@liteScreensaverPortraitUrl) #fff no-repeat top center;
    }
    &--landscape
    {
        background: url(@liteScreensaverLandscapeUrl) #fff no-repeat top center;
    }
    &--noscreensaver
    {
        background: none !important;
    }
    @media @portrait
    {
        background: url(@liteScreensaverPortraitUrl) #fff no-repeat top center;
    }
    @media @landscape
    {
        background: url(@liteScreensaverLandscapeUrl) #fff no-repeat top center;
    }
}
.myAccountPage
{
}
.forgotPasswordPage {
}
.resetPasswordView
{
    .login-view();
    min-height: auto;
    &__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();
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
      &__form
      {
           //margin-bottom: @remCalc20;
           position: relative;
			&__fee-section
			{
				.checkbox-row
				{
					display: flex;
					justify-content: space-around;
					align-items: center;
					div
					{
						text-align: center;
						.litecheckbox
						{
							display: inline-block;
							text-align: center;
							input
							{
								margin: 0 auto;
								display: block;
							}
							label
							{
								display: block;
								margin-top: 5px;
							}
						}
					}
				}
			}
           @media @medium-up
           {
                margin-bottom: @remCalc40;
           }
           @media @xlarge-up
           {
                margin-bottom: @remCalc70;
           }
      }
      .giftAidComponentView {
      }
      &__bid-actions
      {
          .bidding-actions();
      }
  }
}
.layout--minimum
{
    .confirmBidView
    {
        //.bidding-minimum-view(@confirmBidActionsHeight);
        &__body
        {
            &__bid-actions
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .confirmBidView
        {
            .bidding-minimum-view-constant(@confirmBidActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .confirmBidView
        {
            .bidding-minimum-view-env(@confirmBidActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-env();
                    }
                }
            }
        }
    }
}
@confirmDonationActionsHeight: @remCalc74;
.confirmDonationView
{
	.calc(padding-bottom, ~"@{confirmDonationActionsHeight} + @{remCalc20}");
	position: relative;
	.display-flex(row, wrap, flex-start, flex-start);
	margin: 0 auto;
	width: 100%;
	@media @large-up {
		.display-flex(row, nowrap, flex-start, flex-start);
		padding-left: @remCalc70;
		padding-right: @remCalc70;
		gap: @remCalc40;
		&__left {
			width: @remCalc855;
		}
		&__right {
			width: @remCalc390;
		}
	}
	@media @xlarge-up {
		padding: 0;
		width: @remCalc1352;
		&__left {
			width: @remCalc900;
		}
	}
    @media @medium-only {
        .itemViewRightPanels {
            display: flex;
            flex: 1 0 100%;
        }
    }
	.panel {
		min-height: unset !important;
		max-width: unset !important;
		width: 100% !important;
	}
    &__left {
		.display-flex(column, wrap, flex-start, flex-start);
		width: 100%;
		.set-flex(1);
		.panel {
			border-radius: 0;
			&__header {
				padding: @remCalc22 @remCalc24 @remCalc22 @remCalc24;
				&__title {
					font-family: 'Montserrat';
					font-weight: bolder;
					font-size: @remCalc32;
					margin-bottom: @remCalc0;
					color: @accentColor;
					-webkit-text-stroke: 0.5px @accentColor;
					text-fill-color: @accentColor;
				}
			}
		}
		&__header {
			.bidding-header();
			.list-item--preview {
				.list-item {
					&__wrapper {
						flex-wrap: wrap;
					}
                    &__top-image--hide {
                        display: none;
                    }
					&__under-image {
						width: 50%;
                        @media @medium-only {
                            width: 100%;
                        }
						@media @large-up {
							width: 62%;
						}
						&__title-column {
							&__number{
								font-family: 'Montserrat';
								font-weight: bolder;
								font-size: @remCalc16;
								color: @mediumGrey !important;
								-webkit-text-stroke: 0.5px @mediumGrey;
								text-fill-color: @mediumGrey;
								padding-bottom: @remCalc5;
							}
							&__title {
								font-size: @remCalc20 !important;
								font-weight: bolder;
								color: @darkGrey;
								-webkit-text-stroke: 0.5px @darkGrey;
								text-fill-color: @darkGrey;
							}
						}
					}
					&__progress-container {
						display: block;
                        flex: 1 0 100%;
                        width:100%;
						.progress-bar {
							width: 100%;
							background-color: #e0e0e0;
							border-radius: @remCalc10;
							overflow: hidden;
							height: @remCalc8;
							margin: @remCalc10 0;
							position: relative;
						}
						.progress-fill {
							background: linear-gradient(90deg, lighten(@accentColor, 15%), lighten(@accentColor, 30%));
							height: 100%;
							width: 0%;
							border-radius: @remCalc10 0 0 @remCalc10;
							transition: width 1s ease-in-out;
							filter: brightness(1.3);
						}
						.target,
						.supporters {
							.sectionTitle();
							color: @darkGrey;
							font-weight: bold;
							letter-spacing: 0.5px;
							font-size: @remCalc14;
							span {
								font-weight: bold;
							}
						}
						.target {
							text-align: right;
						}
					}
				}
			}
		}
		&__body {
			.bidding-body();
			&__title {
				.bidding-title();
				.sectionTitle();
				font-size: @remCalc20;
				color: @accentColor;
				-webkit-text-stroke: 0.5px @accentColor;
				text-fill-color: @accentColor;
				padding-top: @remCalc20;
				&__meta {
					font-size: @remCalc18;
					font-weight: normal;
					text-align: center;
				}
			}
			&__message {
				.bidding-message();
			}
			&__bid-info {
				.bidding-info();
				padding-bottom: @remCalc20;
				margin-bottom:0px !important;
				border-bottom: @remCalc1 solid @lightGrey;
				&__label {
					text-align: left;
					padding-left: .8rem;
					font-size: @remCalc24;
					color: @mediumGrey;
				}
				&__value {
					font-size: @remCalc24;
					color: @darkGrey;
				}
				@media @small-only {
					&__label {
						text-align: center;
						padding-left: 0rem;
					}
				}
				@media @medium-up {
					margin-bottom: @remCalc60;
					&__label {
						padding-left: 10rem;
					}
				}
			}
			&__bid-actions {
				.bidding-actions();
				margin-top: @remCalc16;
				&__button {
					padding-left: @remCalc10  !important;
					padding-right: @remCalc10  !important;
					margin-bottom: @remCalc20;
					&__link {
						text-align: center;
						text-decoration: underline;
						margin-bottom: 0rem;
					}
				}
				[type=button] {
					padding-left: @remCalc15;
					padding-right: @remCalc15;
					margin-top: @remCalc25;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 0;
					width: 100%;
					background-color: @accentColor;
					&:focus {
					  background-color: lighten(@accentColor, 10%);
					}
					&.disabled:hover {
						background-color: lighten(@accentColor, 15%);
					}
				}
			}
		}
		@media @large-up {
			gap: @remCalc24;
			.panel {
				.border-radius(@remCalc24);
			}
		}
	}
}
.layout--minimum
{
    .confirmDonationView
    {
        //.bidding-minimum-view(@confirmDonationActionsHeight);
        &__body
        {
            &__bid-actions
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .confirmDonationView
        {
            .bidding-minimum-view-constant(@confirmDonationActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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 {
	.calc(padding-bottom, ~"@{confirmDonationActionsHeight} + @{remCalc20}");
	position: relative;
	.display-flex(row, wrap, flex-start, flex-start);
	margin: 0 auto;
	width: 100%;
	@media @large-up {
		.display-flex(row, nowrap, flex-start, flex-start);
		padding-left: @remCalc70;
		padding-right: @remCalc70;
		gap: @remCalc40;
		&__left {
			width: @remCalc855;
		}
		&__right {
			width: @remCalc390;
		}
	}
	@media @xlarge-up {
		padding: 0;
		width: @remCalc1352;
		&__left {
			width: @remCalc900;
		}
	}
	.panel {
		min-height: unset !important;
		max-width: unset !important;
		width: 100% !important;
	}
	&__left {
		.display-flex(column, wrap, flex-start, flex-start);
		width: 100%;
		.set-flex(1);
		.panel {
			border-radius: 0;
			&__header {
				padding: @remCalc22 @remCalc24 @remCalc22 @remCalc24;
				&__title {
					font-family: 'Montserrat';
					font-weight: bolder;
					font-size: @remCalc32;
					margin-bottom: @remCalc0;
					color: @accentColor;
					-webkit-text-stroke: 0.5px @accentColor;
					text-fill-color: @accentColor;
				}
			}
		}
		&__header {
			.bidding-header();
			.list-item--preview {
				.list-item {
					&__wrapper {
						flex-wrap: wrap;
					}
					&__under-image {
						width: 50%;
						@media @large-up {
							width: 62%;
						}
						&__title-column {
							&__number{
								font-family: 'Montserrat';
								font-weight: bolder;
								font-size: @remCalc16;
								color: @mediumGrey !important;
								-webkit-text-stroke: 0.5px @mediumGrey;
								text-fill-color: @mediumGrey;
								padding-bottom: @remCalc5;
							}
							&__title {
								font-size: @remCalc20 !important;
								font-weight: bolder;
								color: @darkGrey;
								-webkit-text-stroke: 0.5px @darkGrey;
								text-fill-color: @darkGrey;
							}
						}
					}
					&__progress-container {
						display: block;
                        flex: 1 0 100%;
						.progress-bar {
							width: 100%;
							background-color: #e0e0e0;
							border-radius: @remCalc10;
							overflow: hidden;
							height: @remCalc8;
							margin: @remCalc10 0;
							position: relative;
						}
						.progress-fill {
							background: linear-gradient(90deg, lighten(@accentColor, 15%), lighten(@accentColor, 30%));
							height: 100%;
							width: 0%;
							border-radius: @remCalc10 0 0 @remCalc10;
							transition: width 1s ease-in-out;
							filter: brightness(1.3);
						}
						.target,
						.supporters {
							.sectionTitle();
							color: @darkGrey;
							font-weight: bold;
							letter-spacing: 0.5px;
							font-size: @remCalc14;
							span {
								font-weight: bold;
							}
						}
						.target {
							text-align: right;
						}
					}
				}
			}
		}
		&__body {
			.bidding-body();
			&__title {
				.bidding-title();
				.sectionTitle();
				font-size: @remCalc20;
				color: @accentColor;
				-webkit-text-stroke: 0.5px @accentColor;
				text-fill-color: @accentColor;
				padding-top: @remCalc20;
				&__meta {
					font-size: @remCalc18;
					font-weight: normal;
					text-align: center;
				}
			}
			&__message {
				.bidding-message();
			}
			&__bid-info {
				.bidding-info();
				padding-bottom: @remCalc20;
				margin-bottom:0px !important;
				border-bottom: @remCalc1 solid @lightGrey;
				&__label {
					text-align: left;
					font-size: @remCalc24;
					color: @mediumGrey;
				}
				&__value {
					font-size: @remCalc24;
					color: @darkGrey;
				}
				@media @small-only {
					&__label {
						text-align: center;
						padding-left: 0rem;
					}
				}
				@media @medium-up {
					margin-bottom: @remCalc60;
				}
			}
			&__bid-actions {
				.bidding-actions();
				margin-top: @remCalc16;
				&__button {
					padding-left: @remCalc10  !important;
					padding-right: @remCalc10  !important;
					margin-bottom: @remCalc20;
					&__link {
						text-align: center;
						text-decoration: underline;
						margin-bottom: 0rem;
					}
				}
				[type=button] {
					padding-left: @remCalc15;
					padding-right: @remCalc15;
					margin-top: @remCalc25;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 0;
					width: 100%;
					background-color: @accentColor;
					&:focus {
					  background-color: lighten(@accentColor, 10%);
					}
					&.disabled:hover {
						background-color: lighten(@accentColor, 15%);
					}
				}
			}
		}
		@media @large-up {
			gap: @remCalc24;
			.panel {
				.border-radius(@remCalc24);
			}
		}
	}
}
.layout--minimum {
	.reconcileUnPaidDonationView {
		//.bidding-minimum-view(@confirmDonationActionsHeight);
		&__body {
			&__bid-actions {
				&--fixed {
					.bidding-minimum-actions();
				}
			}
		}
	}
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
	.layout--minimum {
		.reconcileUnPaidDonationView {
			.bidding-minimum-view-constant(@confirmDonationActionsHeight);
			&__body {
				&__bid-actions {
					&--fixed {
						.bidding-minimum-actions-constant();
					}
				}
			}
		}
	}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	.layout--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 {
	padding-top: @remCalc20;
	border-bottom: @remCalc1 solid @lightGrey;
	&__header {
		.sectionTitle();
		font-size: @remCalc20;
		color: @accentColor;
		-webkit-text-stroke: 0.5px @accentColor;
		text-fill-color: @accentColor;
	}
	&__message {
		margin-bottom: @remCalc15;
	}
	&__status {
		&__row {
			.checkout-checkbox();
			.literadio label:after {
				top: -@remCalc2;
				left: -@remCalc2;
				content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%2334C759%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Z%22%2F%3E%3C%2Fsvg%3E");
				background: none;
			}
		}
	}
}
.layout--minimum {
	.giftAidComponentView {
		.bidding-minimum-view();
	}
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
	.layout--minimum {
		.giftAidComponentView {
			.bidding-minimum-view-constant();
		}
	}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	.layout--minimum {
		.giftAidComponentView {
			.bidding-minimum-view-env();
		}
	}
}
.stripeCustomCheckoutView
{
     @boxShadowColor: rgba(0, 0, 0, 0.12);
     @borderRadius: 24px;
     @panelItemPadding: 20px;
     @lightGrey: #6c737b;
     @borderColor: #E7E8EA;
     @placeholderColor: #d7d9db;
    .checkout-view();
    padding: 0 0;
    margin: 0;
    width: 100%;
    .box-shadow(0px 4px 4px 0px @boxShadowColor);
    &__header
    {
        display: flex;
        border-bottom: @remCalc2 solid @borderColor;
        flex-direction: column;
        gap: @remCalc12;
        padding: 0 @remCalc24 @remCalc32 @remCalc24;
        @media @medium-up
        {
            padding-top: @remCalc32;
        }
        &__title
        {
            color: @accentColor;
            font-size: @remCalc26;
            font-weight: 900;
        }
        &__message
        {
            font-size: @remCalc16;
            font-weight: 500;
            color: @mediumGrey;
            .checkout-greeting {
                font-weight: 700;
                color: @darkGrey;
            }
        }
    }
    &__products
    {
        padding: @remCalc24 @remCalc24;
        border-bottom: 1px solid @borderColor;
        &__empty
        {
            margin: 0;
            padding: @remCalc24 0;
            .display-flex(row, nowrap, center, flex-start);
            svg
            {
              width: 76px;
              height: 83px;
              * {
                fill:#9b9b9b;
                stroke:#9b9b9b;
              }
            }
        }
    }
    &__linkedGuestPurchases {
        &__subheader {
            .display-flex(row, nowrap, flex-start, center);
            gap: @remCalc12;
            &__col2 {
                .display-flex(column, nowrap, flex-start, flex-start);
                .linkedGuestsHeaderLabel {
                    color: @mediumGrey;
                }
            }
        }
    }
    &__payLaterTickets, &__fundraisingSection, &__licencedGliRafflePurchases,
    {
        padding: 0;
        
        margin-bottom: @remCalc20;
        &__header, &__subheader {
            margin-bottom: @remCalc16;
            .display-flex(row, nowrap, flex-start, flex-start);
            &__col1
            {
                margin-right: @remCalc15;
            }
            &__col2
            {
                margin-top: -@remCalc5;
                label
                {
                    padding-top: 0px;
                }
            }
        }
    }
    &__fundraisingSection {
        .display-flex(column, wrap, flex-end, flex-start);
        gap: @remCalc8;
        &__list {
            width: 100%;
            .checkoutCollection {
                .display-flex(column, wrap, flex-end, flex-start);
                gap: @remCalc8;
                .checkout-item__wrapper {
                    width: 100%;
                }
            }
        }
    }
    .payment-form {
        background: #fff;
    }
    .desktop_total {
        .checkout_row__header {
            height: @remCalc40;
        }
        @media @medium-down
        {
            display: none !important;
        }
    }
    &__totals
    {
        background: #fff;
        position: fixed;
        bottom: 0;
        z-index: 1000;
        @media @large-up
        {
            position: unset;
            bottom: unset;
            z-index: unset;
        }
        &__label
        {
            font-size: @remCalc20;
            font-weight: 600;
            color: contrast(@accentColor, #000, #fff);
            text-align: left;
            .set-flex(1);
            @media @large-up
            {
              font-size: @remCalc18;
            }
        }
        &__value
        {
            font-size: @remCalc20;
            font-weight: 600;
            color: contrast(@accentColor, #000, #fff);
            text-align: right;
            margin-left: @remCalc20;
            @media @large-up
            {
              font-size: @remCalc18;
            }
        }
        &__row
        {
            .display-flex(row, wrap, flex-end, flex-start);
            clear: both;
            background: @accentColor;
            padding: @remCalc12 @remCalc24;
            @media @large-up
            {
                display: none !important;
            }
            @media @medium-down
            {
                margin-bottom: @remCalc12;
            }
        }
        &__separator
        {
            width: 60%;
            float: right;
            margin-bottom: @remCalc10;
            @media @medium-up
            {
                width: 50%;
            }
        }
        .litecheckbox {
            width: @remCalc24;
            height: @remCalc24;
            label {
                &:after {
                    content: '';
                    width: @remCalc12;
                    height: @remCalc6;
                    top: @remCalc7;
                    left: @remCalc6;
                    border: @remCalc3 solid @panelBgColour;
                    border-top: none;
                    border-right: none;
                    background: transparent;
                    opacity: 0;
                }
            }
            input[type='checkbox'] {
                  & + label {
                        width: @remCalc24;
                        height: @remCalc24;
                  }
                  &:checked + label {
                        background-color: @accentFadedColor;
                  }
                  &:checked + label::after {
                        background-color: @accentFadedColor;
                  }
            }
        }
        &__card-section {
            .display-flex(row, wrap, flex-end, flex-start);
            gap: @remCalc12;
            .show-all-payment-method {
                margin: unset;
            }
        }
    }
    &__gift-aid-now
    {
        .checkout-checkbox();
    }
    &__gift-aid-now-address
    {
        margin-top: @remCalc20;
    }
    &__downloadStatement {
      padding: @remCalc24;
      border-bottom: 2px solid @borderColor;
      &__header {
        margin-bottom: @remCalc12;
        font-size: @remCalc20;
        font-weight: 600;
        color: @darkGrey;
      }
      &__link-description {
        margin-left: @remCalc10;
        font-size: @remCalc18;
        font-weight: 500;
        color: @mediumGrey;
      }
    }
    &__download_statement_link {
      font-size: @remCalc18;
      font-weight: 600;
      color: @accentFadedColor;
    }
    a:not(.button) {
       color: @accentFadedColor;
    }
    a:not(.button):visited {
       color: @accentFadedColor;
    }
    &__premiums, &__donor-tip
    {
        .checkout-checkbox();
        margin-top:  @remCalc20;
        margin-bottom: 0;
        text-align: justify;
        font-size: @remCalc16;
    }
    .checkout_row {
        .display-flex(column, wrap, flex-start, flex-start);
        border-bottom: @remCalc1 solid @borderColor;
        gap: @remCalc16;
        padding: @remCalc16 @remCalc24;
        &__header {
            .display-flex(row, wrap, flex-start, center);
            gap: @remCalc8;
            width: 100%;
            .litecheckbox {
                width: @remCalc40;
                height: @remCalc24;
                input[type=checkbox]
                {
                    &:focus
                    {
                        ~ label
                        {
                            border: none;
                            outline: @accentColor @remCalc2 solid;
                        }
                    }
                }
                input[type='checkbox'] + label {
                    width: @remCalc40 !important;
                    height: @remCalc24;
                    border-radius: @remCalc12;
                    background-color: @mediumGrey;
                    transition: background-color 0.2s linear;
                    &::after {
                        content: '';
                        width: @remCalc20;
                        height: @remCalc20;
                        border: none;
                        border-radius: @remCalc10;
                        top: @remCalc1;
                        left: @remCalc1;
                        background: @panelBgColour;
                        opacity: 1 !important;
                        transition: left 0.2s linear;
                    }
                }
                input[type='checkbox']:checked + label {
                    width: @remCalc40;
                    height: @remCalc24;
                    background-color: @accentFadedColor;
                    &::after {
                        content: '';
                        width: @remCalc20;
                        height: @remCalc20;
                        border: none;
                        border-radius: @remCalc10;
                        top: @remCalc1;
                        left: @remCalc17;
                        background: @panelBgColour;
                    }
                }
            }
            &__icon {
                .display-flex(row, nowrap, center, center);
                background-color: #f5f5f5;
                border: none;
                border-radius: 50%;
                color: @checkoutItemFontColor;
                cursor: pointer;
                font-size: @remCalc20;
                font-weight: bold;
                height: @remCalc40;
                line-height: @remCalc32;
                margin: 0;
                padding: 0;
                text-align: center;
                transition: transform 0.3s ease, background-color 0.2s ease;
                vertical-align: middle;
                width: @remCalc40;
                &:hover {
                    background-color: #e0e0e0;
                }
                &--rotated {
                    transform: rotate(180deg);
                }
            }
            &__text {
                flex-grow: 1;
            }
            &__amount {
                text-align: right;
            }
        }
        &__body {
            border: 1px solid @borderColor;
            background: #FAFAFB;
            background-clip: padding-box;
            border-radius: @remCalc8;
            padding: @remCalc24;
            span {
                color: @accentColor;
            }
            p {
                margin: unset;
            }
            &__top {
                .display-flex(row, nowrap, flex-start, flex-start);
                gap: @remCalc16;
                padding-bottom: @remCalc16;
                svg {
                    min-width: @remCalc36;
                }
            }
            &__details {
                .display-flex(column, wrap, flex-start, flex-start);
                gap: @remCalc12;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease;
                &.visible {
                    max-height: 500px;
                    padding-bottom: @remCalc16;
                }
            }
            &__button {
                .display-flex(row, wrap, flex-start, flex-start);
                color: @accentColor;
                background: unset;
                margin: unset;
                &.rotated {
                    svg {
                        transform: rotate(180deg);
                    }
                }
            }
        }
    }
    &__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;
                    }
                }
            }
        }
    }
    .info-items {
      border-bottom: 1px solid @borderColor;
      padding-bottom: @remCalc24;
      margin-bottom: @remCalc24;
    }
    &__fundraisingSection__header,
    &__licencedGliRafflePurchases__header,
    &__payLaterTickets__header {
      .display-flex(row, nowrap, flex-start, center);
      .stripeCustomCheckoutView__header {
        padding: 0;
        font-size: @remCalc20;
        font-weight: 600;
        color: @darkGrey;
        border: none;
      }
    }
    &__premiums {
      .display-flex(row, nowrap, flex-end, center);
      margin-top: 0;
    }
    &__premiums__col1 {
      .display-flex(row, nowrap, flex-end, center);
      gap: 10px;
      margin-right: 0;
    }
    &__premiums__col2 {
      margin-top: @remCalc16;
      flex-basis: 100%;
    }
    &__premiums__label {
      line-height: 110%;
      font-size: @remCalc20;
      font-weight: 600;
      color: @mediumGrey;
    }
    &__premiums__info {
      .display-flex(row, nowrap, flex-start, flex-start);
      gap: @remCalc10;
      margin-top: @remCalc16;
      padding: @remCalc16;
      border: 2px solid @borderColor;
      .border-radius(16px);
    }
    &__premiums__info-icon {
      margin-top: @remCalc6;
      svg {
        fill: @accentFadedColor;
      }
    }
    &__premiums__description {
      font-size: @remCalc14;
      .premiums-section-label,
      .ticket-booking-fees-section-label {
        font-size: @remCalc14 !important;
        font-weight: 400;
        color: @lightGrey;
      }
    }
    &__premiums__description-label {
      margin-bottom: @remCalc6;
      color: @mediumGrey;
      font-weight: 600;
    }
    &__promo {
      .display-flex(column, nowrap, flex-start, flex-start);
      width: 100%;
      padding: @panelItemPadding;
      gap: @remCalc10;
      border-bottom: 1px solid @borderColor;
      &__row {
        .display-flex(row, nowrap, flex-start, center);
        width: 100%;
        gap: @remCalc10;
      }
      &__input-wrapper {
        flex-grow: 1;
        border: 2px solid @borderColor;
        .border-radius(12px);
        overflow: hidden;
        outline-offset: -2px;
        &:focus-within {
          outline: 2px solid @accentFadedColor;
        }
      }
      &__input {
        width: 100%;
        padding: @remCalc16 @remCalc16 @remCalc10;
        margin: 0;
        color: @darkGrey;
        font-weight: 600;
        caret-color: @accentFadedColor;
        outline: none;
        border: none;
        &::placeholder {
          color: @placeholderColor;
          font-size: @remCalc18;
        }
        &:focus {
          color: @accentFadedColor;
        }
      }
      &__apply {
      }
      &__apply-button {
        display: inline-block;
        height: 55px;
        margin: 0;
        padding: @remCalc10 @remCalc24;
        font-size: @remCalc18;
        font-weight: 600;
        .border-radius(12px);
        background-color: @accentFadedColor;
        &:disabled {
          color: @darkGrey;
          background-color: @borderColor;
        }
      }
      &__icon {
        svg {
          fill: @accentFadedColor;
        }
      }
      &__info {
        color: @lightGrey;
        font-size: @remCalc14;
      }
      &__discount {
        .display-flex(row, nowrap, space-between, center);
        width: 100%;
        box-sizing: border-box;
        padding: 0 @remCalc20;
        &-info {
          color: @darkGrey;
          font-weight: 600;
          font-size: @remCalc16;
        }
        &-amount {
          color: @accentFadedColor;
          font-weight: 600;
          font-size: @remCalc20;
        }
      }
    }
    &__form {
      padding: 0;
        &__payment {
            padding: 0 @remCalc24;
            width: 100%;
            margin: unset;
        
        .paymentProvider__credit-card__message {
          display: none;
        }
      }
      &__actions {
          margin-top: unset;
        .a-button--valid {
          background-color: @accentFadedColor;
        }
      }
      .giftAidSection {
        padding: 0 @remCalc24;
      }
      .taxReceiptSection {
        padding: 0 @remCalc24;
        .taxReceiptView {
          &__header {
            padding-bottom: @remCalc10;
          }
          .request-tax-receipt-header-options {
            .error + div label {
              color: #f04124;
            }
          }
        }
      }
    }
    .literadio {
      label {
        border: 2px solid @mediumGrey;
        .box-shadow(none);
        &::after {
          content: '';
          width: @remCalc10;
          height: @remCalc10;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: @remCalc5 @accentFadedColor;
          opacity: 0;
          .border-radius(@remCalc50);
        }
      }
      input[type='radio']:checked + label {
        background-color: transparent;
        border: 2px solid @accentFadedColor;
      }
    }
    @media @medium-down {
      .box-shadow(none);
    }
    &__add-ons
    {
        padding: 0 @remCalc24;
        border-bottom: 1px solid @borderColor;
        min-height: @remCalc210;
        &.hidden {
            display: none !important;
            visibility: hidden;
            pointer-events: none;
        }
        &__header {
            padding: 0;
            font-size: @remCalc20;
            font-weight: 600;
            color: @darkGrey;
            border: none;
        }
        &__body {
            margin-bottom: @remCalc12;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: @remCalc10;
            .add-raffle-ticket {
                border: 1px solid @borderColor;
                background: #FAFAFB;
                padding: @remCalc8;
                margin-top: @remCalc8;
                border-radius: @remCalc8;
                width: 50%;
                min-height: @remCalc288;
                .raffle-ticket-container {
                    padding: @remCalc18;
                }
                &.hidden {
                    display: none !important;
                    visibility: hidden;
                    pointer-events: none;
                }
                .body-main {
                    display: flex;
                }
                .raffle-ticket-icon {
                    width: @remCalc35;
                    height: @remCalc35;
                    color: @accentColor;
                }
                .raffle-ticket-header {
                    color: @accentColor;
                    font-size: @remCalc20;
                    font-weight: 600;
                    margin-bottom: @remCalc3;
                }
                .raffle-ticket-description {
                    font-size: @remCalc14;
                    color: @mediumGrey;
                }
                .raffle-ticket-button {
                    background-color: @actionButtonFontColor;
                    border: 2px solid @accentColor;
                    color:@accentColor;
                    font-size: @remCalc20;
                    font-weight: 600;
                    border-radius: @remCalc12;
                    transition: all 0.3s ease;
                    &:hover {
                        background-color: @accentColor;
                        color: @actionButtonFontColor;
                    }
                }
                @media @small-only {
                    width: 100%;
                }
            }
            .add-donation {
                border: 1px solid @borderColor;
                background: #FAFAFB;
                padding: @remCalc8;
                margin-top: @remCalc8;
                border-radius: @remCalc8;
                width: 50%;
                min-height: @remCalc288;
                &.hidden {
                    display: none !important;
                    visibility: hidden;
                    pointer-events: none;
                }
                .donation-container {
                    padding: @remCalc18;
                    &__heading {
                        border-bottom: 1px solid @borderColor;
                        color: @accentColor;
                        font-size: @remCalc16;
                        font-weight: 800;
                        padding-bottom: @remCalc12;
                    }
                    &__amounts {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: @remCalc12;
                        padding: @remCalc12 0;
                        margin-bottom: @remCalc16;
                        border-bottom: 1px solid @borderColor;
                        &__btn {
                            padding: @remCalc8 0;
                            border: 2px solid @accentColor;
                            border-radius: @remCalc6;
                            background: #fff;
                            color: @accentColor;
                            font-size: @remCalc16;
                            font-weight: 600;
                            cursor: pointer;
                            margin: unset;
                            &:hover {
                                background: fade(@accentColor, 10);
                            }
                        }
                    }
                    &__custom {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid @borderColor;
                        border-radius: @remCalc4;
                        background: #fff;
                        height: @remCalc56;
                        padding: 0 @remCalc16;
                        &__input {
                            flex: 1;
                            border: none;
                            border-radius: @remCalc6;
                            color: #999;
                            background: transparent;
                        }
                        &__action {
                            border: none;
                            border-radius: @remCalc6;
                            background: transparent;
                            color: @accentColor;
                            font-size: @remCalc16;
                            font-weight: 600;
                            cursor: pointer;
                            margin-bottom: 0;
                            padding: 0;
                            &:hover {
                                background: transparent;
                            }
                        }
                    }
                }
                @media @small-only {
                    width: 100%;
                }
            }
            @media @small-only {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: @remCalc12;
                .add-raffle-ticket,
                .add-donation {
                    width: 100%;
                    min-height: auto;
                }
                .add-donation {
                    min-height: @remCalc160;
                }
                .add-raffle-ticket .body-main {
                    flex-direction: row;
                    align-items: center;
                    gap: @remCalc8;
                }
                .raffle-ticket-button {
                    width: 100%;
                    box-sizing: border-box;
                }
                body.modal-open {
                    height: 100vh;
                    overflow: hidden;
                    position: fixed;
                    width: 100%;
                }
            }
            @media @medium-only {
                .add-raffle-ticket, .add-donation {
                    width: 48%;
                }
            }
            @media @large-only {
                .add-raffle-ticket, .add-donation {
                    width: 48%;
                    .raffle-ticket-button {
                        font-size: @remCalc14;
                    }
                    .custom-input {
                        width: @remCalc20;
                    }
                }
            }
        }
    }
    &__raffle-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        &.hidden {
            display: none;
        }
        .content {
            background: white;
            padding: @remCalc32;
            border-radius: @remCalc8;
            width: 90%;
            max-height: @remCalc680;
            overflow: hidden;
            color: @accentColor;
            max-width: @remCalc500;
        }
        .title {
            margin-bottom: @remCalc24;
            font-size: @remCalc20;
            font-weight: 600;
        }
        .hr-div {
            border-bottom: 1px solid @borderColor;
            margin-bottom: @remCalc24;
        }
        .ticket-description {
            a {
                color: @accentColor;
                text-decoration: none;
            }
        }
        .raffle-overlay__bundle-list {
            max-height: @remCalc340;
            overflow-y: auto;
            padding-right: @remCalc8;
            margin: @remCalc16 0;
            .raffle-bundle-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: @remCalc12;
                border: 1px solid #ddd;
                border-radius: @remCalc6;
                margin-bottom: @remCalc8;
                background: #FAFAFB;
            }
            .raffle-bundle-info {
                .raffle-bundle-title {
                    font-weight: 600;
                    margin-bottom: @remCalc3;
                }
                .raffle-bundle-subtitle {
                    font-size: @remCalc14;
                    color: #666;
                }
            }
            .raffle-bundle-controls {
                display: flex;
                align-items: center;
                button {
                    width: @remCalc32;
                    height: @remCalc32;
                    padding: 0;
                    border: none;
                    color: white;
                    font-size: @remCalc19;
                    border-radius: 50%;
                    box-sizing: border-box;
                    cursor: pointer;
                }
                .raffle-bundle-current {
                    margin: 0 @remCalc8;
                    min-width: @remCalc24;
                    text-align: center;
                    padding-bottom: @remCalc16;
                }
                .raffle-bundle-decrement {
                    background: @borderColor;
                }
                .raffle-bundle-increment {
                    background: @accentColor;
                }
            }
        }
        .raffle-ticket-buttons {
            display: grid;
            width: 100%;
            grid-template-columns: @remCalc120 auto;
            gap: @remCalc12;
            .cancel-ticket {
                background-color: @mediumGrey;
                border: 2px solid @mediumGrey;
                color: @actionButtonFontColor;
                font-size: @remCalc20;
                font-weight: 600;
                border-radius: @remCalc12;
                transition: all 0.3s ease;
                justify-content: center;
                display: flex;
                &:hover {
                    background-color: @actionButtonFontColor;
                    color: @mediumGrey;
                }
            }
            .click-continue {
                background-color: @accentColor;
                border: 2px solid @accentColor;
                color: @actionButtonFontColor;
                font-size: @remCalc20;
                font-weight: 600;
                border-radius: @remCalc12;
                transition: all 0.3s ease;
                &:hover {
                    background-color: @actionButtonFontColor;
                    color: @accentColor;
                }
            }
        }
        @media @small-only {
            justify-content: center;
            align-items: center;
            z-index: 10000;
            .content {
                width: 94%;
                max-width: @remCalc420;
                padding: @remCalc20;
                border-radius: @remCalc10;
            }
            .title { font-size: @remCalc18; }
            .raffle-overlay__bundle-list {
                padding-right: @remCalc4;
                max-height: @remCalc180;
            }
            .raffle-bundle-row {
                align-items: stretch;
                gap: @remCalc8;
                padding: @remCalc10;
            }
            .raffle-bundle-controls {
                margin-top: @remCalc8;
                justify-content: flex-start;
                button {
                    width: @remCalc28; height: @remCalc28;
                    font-size: @remCalc16;
                }
                .raffle-bundle-current { margin: @remCalc6 0; }
            }
            .raffle-ticket-buttons {
                flex-direction: column;
                gap: @remCalc10;
                align-items: stretch;
            }
        }
        @media @medium-only {
            .raffle-ticket-buttons {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
    }
    &__your-details {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        &.hidden {
            display: none;
        }
        .content {
            background: white;
            padding: @remCalc24;
            border-radius: @remCalc8;
            width: 90%;
            max-width: @remCalc680;
            max-height: @remCalc680;
            overflow: hidden;
            color: @accentColor;
        }
        .title {
            margin-bottom: @remCalc24;
            font-size: @remCalc20;
            font-weight: 600;
        }
        .hr-div {
            border-bottom: 1px solid @borderColor;
            margin-bottom: @remCalc24;
        }
        .your-details-form {
            margin-top: @remCalc8;
            .small-label { font-weight: 600; margin-bottom: @remCalc8; display:block; color:@accentColor; }
            .field { margin-bottom: @remCalc12; }
            .input {
                width: 100%;
                padding: @remCalc8 @remCalc12;
                border-radius: @remCalc10;
                border: 1px solid #ececec;
                box-sizing: border-box;
                font-size: @remCalc14;
                color: #333;
                background: #fafafa;
                transition: border .15s ease, box-shadow .15s ease;
                &:focus {
                    outline: none;
                    border-color: @accentColor;
                    box-shadow: 0 0 0 @remCalc3 rgba(188,43,135,0.06);
                    background: #fff;
                }
            }
            .dob-field { position: relative; }
            .dob-input {
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                padding-right: @remCalc40;
                background-repeat: no-repeat;
                background-position: right @remCalc12 center;
            }
            .age-checkbox {
                display: flex;
                gap: @remCalc12;
                align-items: center;
            }
            .two-columns { display:flex; gap:@remCalc12; }
            .two-columns .input { flex:1; min-width: 0; }
            .info-box {
                display:flex;
                gap:@remCalc12;
                align-items:flex-start;
                background:#fbf6fb;
                border-radius:@remCalc8;
                padding:@remCalc8;
                margin: @remCalc12 0;
                border: 1px solid #f0e6f0;
                .info-icon {
                    min-width: @remCalc36;
                    height: @remCalc36;
                    border-radius: 50%;
                    background: #fff;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    color:@accentColor;
                    font-weight:700;
                    border: 1px solid #f1dff1;
                }
                .info-text { color:@accentColor; font-size:@remCalc12; }
                .muted { color:@accentColor; font-size:@remCalc11; margin-top:@remCalc6; }
            }
        }
        .raffle-ticket-buttons {
            display: flex;
            gap: @remCalc16;
            align-items: center;
            justify-content: center;
            .cancel-ticket {
                background-color: @actionButtonFontColor;
                border: 2px solid @accentColor;
                color: @accentColor;
                font-size: @remCalc16;
                font-weight: 600;
                border-radius: @remCalc12;
                transition: all 0.3s ease;
                &:hover {
                    background-color: @accentColor;
                    color: @actionButtonFontColor;
                }
            }
            .add-ticket {
                background-color: @accentColor;
                border: 2px solid @accentColor;
                color: @actionButtonFontColor;
                font-size: @remCalc16;
                font-weight: 600;
                border-radius: @remCalc12;
                transition: all 0.3s ease;
                &:hover {
                    background-color: @actionButtonFontColor;
                    color: @accentColor;
                }
            }
            .click-continue {
                background-color: @accentColor;
                border: 2px solid @accentColor;
                color: @actionButtonFontColor;
                font-size: @remCalc16;
                font-weight: 600;
                border-radius: @remCalc12;
                transition: all 0.3s ease;
                &:hover {
                    background-color: @actionButtonFontColor;
                    color: @accentColor;
                }
            }
        }
        @media @small-only {
            z-index: 10000;
            .content {
                width: 96%;
                max-width: @remCalc420;
                padding: @remCalc16;
                border-radius: @remCalc10;
                max-height: @remCalc600;
            }
            .title {
                margin-bottom: @remCalc8;
            }
            .hr-div {
                margin-bottom: 0;
            }
            .your-details-form {
                input {
                    height: @remCalc40;
                }
                select {
                    height: @remCalc40;
                }
                .two-columns {
                    display: block;
                }
            }
            .two-columns {
                flex-direction: column;
                gap: @remCalc8;
            }
            .info-box {
                padding: @remCalc8;
                .info-text { font-size: @remCalc11; }
            }
            .raffle-ticket-buttons {
                flex-direction: row;
                gap: @remCalc10;
                align-items: stretch;
                justify-content: center;
            }
        }
        @media @medium-only {
            .two-columns { flex-direction: row; }
        }
    }
    .donor_tip_row {
        border-bottom: none;
    }
    &__donation-overlay {
        position: fixed;
        top: 0; left: 0;
        width: 100vw; height: 100vh;
        background: rgba(0,0,0,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        &.hidden {
            display: none;
        }
        .content {
            background: white;
            padding: @remCalc16;
            border-radius: @remCalc8;
            width: 90%;
            max-width: @remCalc680;
            max-height: @remCalc680;
            overflow: hidden;
            color: @accentColor;
        }
        .title {
            margin-bottom: @remCalc12;
            font-size: @remCalc20;
            font-weight: 600;
        }
        .hr-div {
            border-bottom: 1px solid @borderColor;
            margin-bottom: @remCalc12;
        }
        .ticket-description {
            a {
                color: @accentColor;
                text-decoration: none;
            }
        }
        .donation-overlay__bundle-list {
            max-height: @remCalc340;
            overflow-y: auto;
            .donation-overlay__field {
                margin-bottom: @remCalc12;
            }
            .donation-overlay__label {
                display: block;
                font-weight: 600;
                margin-bottom: @remCalc6;
                color: @accentColor;
                font-size: @remCalc14;
            }
            .donation-overlay__amount-wrapper {
                display: flex;
                align-items: center;
                background: #f9f9f9;
                border: 1px solid #e1e1e1;
                border-radius: @remCalc10;
                padding: @remCalc10 @remCalc14;
            }
            .donation-overlay__currency {
                font-weight: 600;
                font-size: @remCalc16;
                color: @accentColor;
                margin-right: @remCalc6;
            }
            .donation-overlay__input {
                flex: 1;
                border: none;
                outline: none;
                background: transparent;
                font-size: @remCalc16;
                font-weight: 600;
                color: #333;
            }
            .donation-overlay__select {
                width: 100%;
                padding: 0 @remCalc14;
                font-size: @remCalc16;
                border: 1px solid #e1e1e1;
                border-radius: @remCalc10;
                background-color: #f9f9f9;
                appearance: none;
                font-weight: 600;
                color: #333;
                margin: unset;
            }
        }
        .donation-overlay__bundle-list-container  {
            max-height: @remCalc240;
            overflow-y: auto;
            margin: @remCalc16 0;
            padding: @remCalc24;
            .donation-overlay__label {
                display: block;
                font-weight: 600;
                margin-bottom: @remCalc6;
                color: @accentColor;
                font-size: @remCalc14;
            }
            .donation-overlay__label-description {
                display: block;
                color: @accentColor;
                font-size: @remCalc10;
                margin-bottom: @remCalc6;
            }
            .extra-inputs-addons {
                margin-bottom: @remCalc10;
            }
            .giftAidView__form__row_addons input {
                width: 100%;
                padding: @remCalc10 @remCalc12;
                border: 1px solid #ccc;
                border-radius: @remCalc6;
                background-color: #fff;
                font-size: @remCalc14;
                color: #333;
                outline: none;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
                box-sizing: border-box;
                margin-bottom: @remCalc10;
            }
            .giftAidView__form__row_addons input::placeholder {
                color: #999;
                font-size: @remCalc13;
            }
            .giftAidView__form__row_addons input:focus {
                border-color: #007bff;
                box-shadow: 0 0 @remCalc4 rgba(0, 123, 255, 0.4);
            }
        }
        .donation-buttons {
            display: flex;
            gap: @remCalc12;
            align-items: center;
            justify-content: center;
            button {
                margin: unset;
            }
            .cancel-donation {
                background-color: @actionButtonFontColor;
                border: 2px solid @accentColor;
                color: @accentColor;
                font-size: @remCalc20;
                font-weight: 600;
                border-radius: @remCalc12;
                transition: all 0.3s ease;
                &:hover {
                    background-color: @accentColor;
                    color: @actionButtonFontColor;
                }
            }
            .add-donation-button {
                background-color: @accentColor;
                border: 2px solid @accentColor;
                color: @actionButtonFontColor;
                font-size: @remCalc20;
                font-weight: 600;
                border-radius: @remCalc12;
                transition: all 0.3s ease;
                &:hover {
                    background-color: @actionButtonFontColor;
                    color: @accentColor;
                }
            }
        }
        @media @small-only {
            .content {
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                box-sizing: border-box;
            }
            .donation-overlay__bundle-list {
                box-sizing: border-box;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .donation-overlay__bundle-list .donation-overlay__field {
                display: block;
                width: 100%;
            }
            .donation-overlay__amount-wrapper {
                padding: @remCalc8 @remCalc10;
            }
            .donation-overlay__select {
                font-size: @remCalc14;
                padding: 0 @remCalc10;
            }
            .donation-buttons {
                flex-direction: column;
                gap: @remCalc10;
                align-items: stretch;
                .cancel-donation, .add-donation-button {
                    width: 100%;
                }
            }
        }
        @media @medium-only {
            .donation-overlay__bundle-list {
                padding: @remCalc20;
            }
        }
    }
}
.layout--minimum
{
    .stripeCustomCheckoutView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .stripeCustomCheckoutView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .stripeCustomCheckoutView
        {
            .bidding-minimum-view-env();
        }
    }
}
.checkoutPageView {
  @boxShadowColor: rgba(0, 0, 0, 0.12);
  @borderRadius: 24px;
  @panelItemPadding: 20px;
  @placeholderColor: #d7d9db;
  position: relative;
  .display-flex(row, wrap, flex-start, flex-start);
  margin: 0 auto;
  width: 100%;
  &__left {
    .display-flex(column, wrap, flex-start, flex-start);
    width: 100%;
    .set-flex(1);
    @media @large-up {
      gap: @remCalc24;
    }
  }
  &__right {
    .display-flex(column, wrap, flex-start, flex-start);
    width: 100%;
    @media @large-up {
      gap: @remCalc24;
    }
  }
  @media @large-up {
    .display-flex(row, nowrap, flex-start, flex-start);
    .padding();
    gap: @remCalc40;
    &__left {
      width: @remCalc563;
    }
    &__right {
      width: @remCalc412;
    }
  }
  @media @xlarge-up {
    padding: 0;
    width: @remCalc1352;
    &__left {
      width: @remCalc900;
    }
  }
  .social-media,
  .totalizer {
    .display-flex(column, wrap, flex-start, flex-start);
    .box-sizing();
    width: 100%;
    background-color: @panelBgColour;
    .border-radius(@borderRadius);
    .box-shadow(0px 4px 4px 0px @boxShadowColor);
    &__header {
      width: 100%;
      padding: @panelItemPadding;
      border-bottom: 1px solid @lightGrey;
    }
    &__buttons {
      padding: 0 @panelItemPadding @panelItemPadding;
    }
    @media @medium-down {
      .box-shadow(none);
    }
  }
  .totalizer {
    position: relative;
    &__stats {
      .display-flex(column, wrap, flex-start, flex-start);
      .box-sizing();
      width: 100%;
      min-height: 135px;
    }
    &__progress {
      .display-flex(column, wrap, flex-start, flex-start);
      .box-sizing();
      padding: 0 @panelItemPadding;
      width: 100%;
      gap: @remCalc16;
    }
    &__progress-header {
      font-size: @remCalc48;
      color: @accentColor;
      line-height: 100%;
      margin: 0;
      padding: 0;
    }
    &__progress-bar-backdrop {
      position: relative;
      width: 100%;
      height: 10px;
      background: #f2f2f2;
      .border-radius(4px);
    }
    &__progress-bar {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 0%;
      height: 100%;
      background: linear-gradient(90deg, @accentFadedColor 0%,  lighten(saturate(@accentFadedColor, 40%), 15%) 100%);
      .border-radius(4px);
    }
    &__target {
      .display-flex(row, nowrap, space-between, center);
      .box-sizing();
      padding: @panelItemPadding;
      width: 100%;
    }
    &__target-supporters,
    &__target-total {
      color: @darkGrey;
      font-weight: 600;
    }
    &__loader {
      .display-flex(row, wrap, center, center);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 10;
      background-color: rgba(255, 255, 255, 0.5);
      &-spinner {
        width: @remCalc32;
        height: @remCalc32;
        border: 5px solid @accentFadedColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
  .amount-wrapper {
    padding: @remCalc16;
    border: 2px solid @lightGrey;
    &:focus-within {
      border-width: @remCalc2;
      border-color: @accentFadedColor;
    }
    .input-wrapper {
      margin: 0;
      &.error {
        input {
          color: @errorColor;
        }
      }
    }
    input {
      caret-color: @accentFadedColor;
      color: @darkGrey;
      outline: none;
      border: none;
      &::placeholder {
        color: @placeholderColor;
        font-size: @remCalc18;
      }
      &:focus {
        color: @accentFadedColor;
      }
    }
  }
}
.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();
      }
  }
  &__recurringDonation__promo
  {
    margin-bottom: @remCalc30;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    background-color: @panelBgColour;
    border-radius: @remCalc10;
    position: relative;
    overflow: hidden;
    .overflow-fix();
    &::after
    {
        background-color: darken(@panelBgColour, 20%);
        .ripple();
    }
    &__header
    {
        .checkout-header();
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: @remCalc15;
        font-size: @remCalc20;
    }
    .recurringDonationsPaymentSuccessView__subHeader
    {
        font-size: @remCalc16;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .setup_donation_button {
        margin: @remCalc20 auto 0 auto;
    }
  }
}
.layout--minimum
{
    .checkoutConfirmationView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .checkoutConfirmationView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .checkoutConfirmationView
        {
            .bidding-minimum-view-env();
        }
    }
}
.checkoutErrorView
{
  .bidding-view();
  &__title
  {
      .bidding-title();
  }
  &__message
  {
      .bidding-message();
      margin-bottom: @remCalc40;
  }
  &__actions
  {
      .bidding-actions();
      &__button
      {
          width: auto;
      }
  }
}
.layout--minimum
{
    .checkoutErrorView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .checkoutErrorView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .checkoutErrorView
        {
            .bidding-minimum-view-env();
        }
    }
}
@ticketsActionsHeight: 60px;
.ticketsListView
{
   position: relative;
   .display-flex(row, wrap, flex-start, flex-start);
   margin: 0 auto;
   width: 100%;
   .panel {
        min-height: unset !important;
        max-width: unset !important;
        width: 100% !important;
   }
   &__left {
       .display-flex(column, wrap, flex-start, flex-start);
       width: 100%;
       .set-flex(1);
       .panel {
        border-radius: 0;
       }
       .list-item__under-image {
            .padding();
            padding-top: @remCalc24;
        }
        @media @large-up
        {
            gap: @remCalc24;
            .panel {
                .border-radius(@remCalc24);
            }
        }
   }
   &__right {
      .display-flex(column, wrap, flex-start, flex-start);
      width: 100%;
      @media @large-up
      {
        gap: @remCalc24;
      }
   }
   @media @large-up
   {
        .display-flex(row, nowrap, flex-start, flex-start);
        .padding();
        gap: @remCalc40;
        &__left {
            width: @remCalc563;
        }
        &__right {
            width: @remCalc412;
        }
   }
   @media @xlarge-up
   {
        padding: 0;
        width: @remCalc1352;
        &__left {
            width: @remCalc900;
        }
   }
    .panel__header__sub
    {
       h1 {
        font-size: @remCalc20;
        color: @darkGrey;
       }
       h2 {
        font-size: @remCalc18;
        color: @darkGrey;
       }
       h3 {
        font-size: @remCalc16;
        color: @darkGrey;
       }
       h4 {
        font-size: @remCalc14;
        color: @darkGrey;
       }
       h4 {
        font-size: @remCalc15;
        color: @darkGrey;
       }
       h6 {
        font-size: @remCalc16;
        color: @darkGrey;
       }
       p {
        color: @darkGrey;
       }
    }
    &__summary
    {
        margin-bottom: @remCalc20;
        .display-flex(row, nowrap, flex-start, center);
        gap: @remCalc20;
        &__icon {
            width: @remCalc27;
            height: @remCalc27;
            svg {
                fill: @accentColor;
            }
        }
        &__label {
            color: @accentColor;
            font-size: @remCalc16;
            font-weight: bold;
        }
    }
    &__products
    {
        margin-top: @remCalc20 !important;
        &--no-data
        {
            text-align: center;
        }
        .ticketItem:last-child {
            margin-bottom: 0;
        }
    }
    .selected-tickets {
        .selected-bundles();
    }
    &__actions
    {
        .display-flex(row, nowrap, space-around, center);
        .fixed-button();
        &__button
        {
            width: 100%;
        }
    }
    .error
    {
        small.error
        {
            color: @errorColor;
            padding-left: 0;
            padding-right: 0;
            text-align: left;
        }
    }
 }
.layout--minimum
{
    .ticketsListView
    {
        //.bidding-minimum-view(@ticketsActionsHeight);
        &__actions
        {
            &--fixed
            {
                .bidding-minimum-actions();
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .ticketsListView
        {
            .bidding-minimum-view-constant(@ticketsActionsHeight);
            &__actions
            {
                &--fixed
                {
                    .bidding-minimum-actions-constant();
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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();
   }
   &__captcha_tandc {
     .login-captcha-tandc();
   }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .placeBidSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .placeBidSuccessView
        {
            .bidding-minimum-view-env();
        }
    }
}
.loginWithPasswordView
{
   .login-view();
   &__header
   {
      .login-header();
      border-bottom: @remCalc1 solid @lightGrey;
   }
   &__message
   {
      .login-message();
      border-bottom: none;
   }
   &__form
   {
      .login-form();
      padding-top: 0;
      &__button
      {
          margin-bottom: @remCalc10;
      }
   }
   &__forgot
   {
      .login-forgot();
   }
}
.loginWithPinView
{
   .login-view();
   .submit-row
   {
        &.error
        {
            padding:  @remCalc20 0 0 0 !important;
        }
   }
   &__header
   {
      .login-header();
      border-bottom: @remCalc1 solid @lightGrey;
      @media @medium-down {
          align-items: center;
      }
   }
   &__message
   {
      .login-message();
   }
   &__form
   {
      .login-form();
      &__header
      {
          color: @loginTextColor;
          margin-bottom: @remCalc20;
          @media @medium-down {
              display: flex;
              justify-content: center;
              margin-bottom: @remCalc40;
          }
      }
      &__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();
      }
      &__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;
      }
   }
}
.purchaseOtpVerifyView
{
   .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();
      }
      &__resend
      {
          margin-top: @remCalc20;
          text-align: left;
          &__text
          {
              margin-right: 0.25em;
          }
          &__link
          {
              color: @loginLinkColor;
              text-decoration: none;
              &:hover
              {
                  text-decoration: underline;
              }
          }
      }
      &__actions
      {
          margin-top: @remCalc20;
      }
   }
}
.checkInLinkView
{
    .panel-view();
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    &__header
    {
        .bidding-title();
    }
    &__message
    {
        .bidding-message();
    }
    &__actions
    {
        margin: @remCalc100 auto @remCalc20 auto;
        width: 100%;
        .resend-error
        {
            text-align: center;
        }
        &__button
        {
             margin: 0 auto;
        }
    }
}
.layout--minimum
{
    .checkInLinkView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .checkInLinkView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .checkInLinkView
        {
            .bidding-minimum-view-env();
        }
    }
}
.forgotPasswordSuccessView
{
    .panel-view();
    &__header {
        .panel-header-title-one();
    }
    &__message {
        .panel-content();
    }
}
.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();
  &__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: 100%;
          }
      }
  }
}
.layout--minimum
{
    .confirmRafflePurchaseView
    {
        //.bidding-minimum-view(@confirmRaffleActionsHeight);
        &__body
        {
            &__bid-actions
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .confirmRafflePurchaseView
        {
            .bidding-minimum-view-constant(@confirmRaffleActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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();
      }
  }
}
.layout--minimum
{
    .rafflePurchaseErrorView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .rafflePurchaseErrorView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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;
          }
      }
  }
}
.layout--minimum
{
    .rafflePurchaseSuccessView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .rafflePurchaseSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .rafflePurchaseSuccessView
        {
            .bidding-minimum-view-env();
        }
    }
}
@raffleItemPreviewFormHeight: @remCalc138;
.selected-bundles()
{
    &__list
    {
        margin-bottom: @remCalc20;
        .display-flex(column, nowrap, flex-start, flex-start);
        gap: @remCalc10;
        margin-left: 0;
    }
    &__item
    {
        list-style-type: none;
        .display-flex(row, nowrap, flex-start, center);
        gap: @remCalc10;
        width: 100%;
        &__quantity
        {
            .display-flex(row, nowrap, center, center);
            color: @darkGrey;
            font-size: @remCalc14;
            .border-radius(50%);
            background-color: @lightGrey;
            width: @remCalc32;
            height: @remCalc32;
        }
        &__title
        {
            color: @accentColor;
            font-size: @remCalc16;
            font-weight: bold;
            .set-flex(1);
            text-align: left;
        }
        &__total
        {
            color: @darkGrey;
            font-size: @remCalc16;
            font-weight: bold;
        }
        &--no-data
        {
            min-height: @remCalc200;
            border: @remCalc1 solid @lightGrey;
            .display-flex(column, nowrap, center, center);
            font-size: @remCalc16;
            font-weight: bold;
            color: @mediumGrey;
            padding: @remCalc24;
            .border-radius(@remCalc5);
            text-align: center;
            width: 100%;
            &__icon {
                .border-radius(50%);
                width: @remCalc32;
                height: @remCalc32;
                background: @lightGrey;
                .display-flex(column, nowrap, center, center);
                margin-bottom: @remCalc10;
                svg {
                    fill: @mediumGrey;
                }
            }
        }
    }
}
.bundle-items()
{
    .bundles__list
    {
        .add-or-remove-items-list()
    }
    .bundles__item {
        .add-or-remove-item()
    }
}
.itemPreviewView__payment-warning {
    display: flex;
    align-items: center;
    margin-left: 1.5rem;
    margin-top: 5px;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 5px;
    border-radius: 4px;
    color: #856404;
    font-size: 14px;
    line-height: 1.4;
    width: fit-content;
}
.itemPreviewView__payment-warning__icon {
    margin-right: 8px;
    font-size: 16px;
}
.itemPreviewView__payment-warning__text {
    font-weight: 500;
}
.raffleItemPreviewView
{
    .list-item__under-image__subtitle-row,
    .list-item__under-image__subtitle-row
    {
        display: none;
    }
    .itemPreviewView__bid-info__time-left
    {
        .padding();
        margin: 0;
    }
    .itemPreviewView__right {
        @media @large-up {
            width: @remCalc612;
        }
    }
    .bundles {
        padding: @remCalc16;
        .bundle-items()
    }
    .selected-bundles {
        .selected-bundles();
    }
}
.layout--minimum
{
    .raffleItemPreviewView
    {
        //.bidding-minimum-view(@remCalc128);
        &__bid-form
        {
            &--fixed
            {
                .bidding-minimum-actions();
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .raffleItemPreviewView
        {
            .bidding-minimum-view-constant(@raffleItemPreviewFormHeight);
            &__bid-form
            {
                &--fixed
                {
                    .bidding-minimum-actions-constant();
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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
    {
        .checkout-actions();
        margin-top: @remCalc30;
    }
}
.layout--minimum
{
    .uploadView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .uploadView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .uploadView
        {
            .bidding-minimum-view-env();
        }
    }
}
.submitView
{
    .display-flex(column, nowrap, flex-start, flex-start);
    .border-radius(@remCalc24);
    position: relative;
    height: fit-content;
    background: #fff;
    width: 100%;
    overflow: hidden;
    > * {
      width: 100%;
    }
    @media @large-up
    {
        .add-drop-shadow(false);
        margin: auto auto;
        max-width: @remCalc1000;
    }
    @media @xlarge-up
    {
        width: 40%;
    }
    .mandatory
    {
        color: @errorColor;
    }
    &__header
    {
        .display-flex(row, nowrap, space-around, stretch);
        border-bottom: @remCalc2 solid @lightGrey;
        padding: @remCalc32;
        
        img 
        {
            max-height: @remCalc32;
        }
    }
    &__form
    {
        .display-flex(column, nowrap, flex-start, stretch);
        gap: @remCalc48;
        padding: 0 @remCalc32 @remCalc48 @remCalc32;
        &__fieldset
        {
            .display-flex(column, nowrap, flex-start, stretch);
            gap: @remCalc32;
            padding-top: @remCalc32;
            &:not(:first-child)
            {
                border-top: @remCalc2 solid @lightGrey;
            }
        }
        &__legend {
            color: @accentFadedColor;
            display: contents;
            font-size: @remCalc17;
            font-weight: 800;
        }
        &__row {
            .display-flex(column, nowrap, flex-start, stretch);
            gap: @remCalc32;
            
            @media @medium-up
            {
                flex-direction: row;
                gap: @remCalc16;
            }
        }
        &__element
        {
            .display-flex(column, nowrap, flex-start, stretch);
            flex: 1;
            gap: @remCalc6;
            overflow: unset;
            label
            {
                overflow: unset;
            }
            textarea {
                height: @remCalc88;
                margin-bottom: 0;
            }
            select {
                margin-bottom: 0;
                background-color: @inputBackgroundColor;
                border-radius: @remCalc4;
                border: @remCalc1 solid @inputBorderColor;
                box-shadow: unset;
            }
            .input {
                background-color: @inputBackgroundColor;
                border-color: @inputBorderColor;
                border-radius: @remCalc4;
                height: @remCalc44;
                margin: 0;
                padding: 0 @remCalc12;
                &:disabled {
                    background-color: @lightGrey;
                    cursor: not-allowed;
                }
            }
            .text-area
            {
                background-color: @inputBackgroundColor;
                border-color: @inputBorderColor;
                border-radius: @remCalc4;
                height: @remCalc88;
                margin-bottom: 0;
                
                textarea {
                    padding: @remCalc6 @remCalc12;
                }
                &__field
                {
                    top: 0;
                    left: 0;
                    width: 100%;
                    font-size: unset;
                }
            }
            .error
            {
                color: @errorColor;
                padding: unset !important;
                width: unset !important;
            }
            &__label
            {
                color: @accentColor;
                font-size: @remCalc14;
                font-weight: 800;
                .error & {
                    color: @errorColor;
                }
            }
            &__help 
            {
                display: flex;
                gap: @remCalc4;
                align-items: center;
                svg
                {
                    fill: @mediumGrey;
                    height: @remCalc18;
                    width: @remCalc18;
                }
                &__text
                {
                    color: @mediumGrey;
                    font-size: @remCalc13;
                }
            }
            &__spinner
            {
                display: flex;
                gap: @remCalc12;
                .input
                {
                    text-align: center;
                    width: @remCalc155;
                }
                .round-button
                {
                    &--remove, &--add
                    {
                        background-color: @mediumGrey;
                    }
                }
            }
            &__input-wrapper {
                .display-flex(row, nowrap, flex-start, center);
                background: @inputBackgroundColor;
                border: @remCalc1 solid @inputBorderColor;
                border-radius: @remCalc4;
                gap: @remCalc8;
                padding: 0 @remCalc12;
                position: relative;
                
                .input {
                    background-color: transparent;
                    border: none;
                    flex: 1;
                    padding: 0;
                    width: 100%;
                }
                &:has(.submitView__form__element__left) .input {
                    order: 2;
                }
                &:has(.submitView__form__element__right) .input {
                    order: 1;
                }
            }
            &__left, &__right {
                font-size: @remCalc12;
                color: @mediumGrey;
                pointer-events: none;
                background: @inputBackgroundColor;
                padding: 0 @remCalc4;
                z-index: 1;
            }
            &__left {
                order: 1;
            }
            &__right {
                order: 2;
            }
            .inputRow 
            {
                display: flex;
                gap: @remCalc6;
                margin-bottom: 0;
                button 
                {
                    background-color: @inputBackgroundColor;
                    border: @remCalc1 solid @inputBorderColor;
                    border-radius: @remCalc4;
                    color: @accentFadedColor;
                    height: @remCalc96;
                    text-decoration: underline;
                    width: @remCalc170;
                }
            }
            &--checkbox
            {
                .display-flex(row, nowrap, flex-start, center);
                gap: @remCalc6;
                input
                {
                    width: @remCalc24;
                    max-height: @remCalc24;
                }
                label {
                  font-size: @remCalc14;
                  font-weight: normal;
                  color: @mediumGrey;
                }
            }
        }
        &__upload-previews
        {
            position: relative;
            .row 
            {
                &::before, &::after
                {
                    content: none;
                }
                .columns
                {
                    display: flex;
                    gap: @remCalc6;
                    padding: 0;
                    .upload-content
                    {
                        background-color: @inputBackgroundColor;
                        border: @remCalc1 solid @inputBorderColor;
                        border-radius: @remCalc4;
                        height: @remCalc96;
                        margin: 0;
                        width: @remCalc170;
                    }
                }
            }
            .progress-wrapper
            {
                .meter
                {
                    display: none;
                }
            }
        }
    }
    .message-base-styles() {
        .display-flex(column, nowrap, flex-start, stretch);
        border-bottom: @remCalc2 solid @lightGrey;
        gap: @remCalc24;
        padding: @remCalc72 @remCalc32;
    }
    &__message
    {
        .message-base-styles();
        &__header
        {
            color: @accentColor;
            font-size: @remCalc35;
            font-weight: 800;
        }
        &__leading
        {
            font-size: @remCalc17;
        }
    }
    &__success
    {
        .message-base-styles();
        align-items: center;
        border-bottom: none;
        &__header
        {
            color: @accentColor;
            font-size: @remCalc25;
            font-weight: 800;
        }
        &__leading
        {
            .display-flex(column, nowrap, flex-start, stretch);
            
            gap: @remCalc12;
            font-size: @remCalc17;
            text-align: center;
            p
            {
                margin-bottom: 0;
            }
        }
    }
    &__actions
    {
        .display-flex(column, nowrap, flex-start, center);
        
        border-top: @remCalc2 solid @lightGrey;
        gap: @remCalc32;
        padding: @remCalc32;
        &__button
        {
            border-radius: @remCalc61/2;
            width: 100%;
        }
        a 
        {
            color: @accentFadedColor;
            text-decoration: underline;
        }
    }
}
.layout--minimum
{
    .uploadView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .uploadView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .uploadView
        {
            .bidding-minimum-view-env();
        }
    }
}
@dialog-close-size: @remCalc55;
@dialog-close-x-width: @remCalc20;
@dialog-close-padding: @remCalc10;
@dialog-content-padding: @remCalc20;
@dialog-content-padding-medium: @remCalc50;
.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: @dialog-content-padding;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        .add-drop-shadow(false, true);
        background: #fff;
        @media @medium-up
        {
            padding: @dialog-content-padding-medium;
        }
    }
    &--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: @remCalc24;
        .display-flex(row, nowrap, flex-start, flex-end);
        gap: @remCalc20;
    }
    &__left
    {
        .display-flex(column, nowrap, flex-start, flex-start);
        .set-flex(1);
        gap: @remCalc10;
    }
    &__title
    {
        font-size:  @remCalc20;
        font-weight: bold;
        color: @accentColor;
    }
    &__price-section
    {
        .display-flex(row, nowrap, flex-start, center);
        &__price
        {
            .set-flex(1);
            font-size:  @remCalc14;
            color: @darkGrey;
        }
        &__actions
        {
            &__selected-quantity
            {
                color: @darkGrey;
            }
        }
    }
    &__actions
    {
        .display-flex(row, nowrap, center, center);
        gap: @remCalc8;
        &__button
        {
            display: block;
            margin: 0;
            padding: 0;
            line-height: 1.5;
            .overflow-fix();
        }
        &__selected-quantity
        {
            height: @remCalc50;
            width: @remCalc50;
            .display-flex(column, nowrap, center, center);
            font-size: @remCalc20;
            color: #000;
            margin-bottom: 0;
            text-align: center;
        }
    }
    &__description-section
    {
        padding: @remCalc10 @remCalc20;
        border-top: @remCalc1 solid #e7e7e7;
        &__description
        {
            display: none;
            color: @darkGrey !important;
            font-size: @remCalc14 !important;
            margin-bottom: @remCalc20;
            > *
            {
                font-size: @remCalc14 !important;
                color: @darkGrey !important;
            }
            @media @large-up
            {
                font-size: @remCalc16 !important;
                > *
                {
                    font-size: @remCalc16 !important;
                }
            }
        }
        &__more-info {
            .display-flex(row, nowrap, flex-start, center);
            color: @accentFadedColor;
            font-size: @remCalc12;
            text-decoration: none;
            margin: 0;
            &__icon {
                margin-left: @remCalc5;
                width: @remCalc14;
                height: @remCalc14;
                svg {
                    fill: @accentFadedColor;
                }
            }
            &.show-info {
                .ticketItem__description-section__more-info__icon {
                    transform: rotate(180deg);
                }
            }
        }
    }
}
.ticekts-booking-tab-content()
{
    margin-top: @remCalc20;
}
.tickets-booking-tab-content-actions()
{
    margin-top: @remCalc30;
    &__button
    {
        width: 100%;
    }
}
.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
{
    .panel-view();
    &__banner
    {
        .panel-header();
        &__title
        {
            .panel-title();
        }
        &__icon
        {
            width: @remCalc15;
            height: @remCalc15;
            margin-right: @remCalc10;
            fill: #fff;
        }
    }
    &__accordion
    {
    }
    &__order-summary
    {
        > div
        {
            .ticekts-booking-tab-content();
        }
        &__donor-tip
        {
            svg
            {
                fill: @checkoutItemFontColor;
            }
            &__header
            {
                font-size: @remCalc16;
                font-weight: bold;
                color: @checkoutItemFontColor;
                display: inline;
                line-height: @remCalc32;
                .set-flex(1);
                @media @large-up
                {
                    font-size: @remCalc18;
                }
            }
            &__label
            {
                a
                {
                    white-space: nowrap;
                }
            }
            &__options
            {
                margin-bottom: 0;
                .radio__col2
                {
                    width: 100%;
                    label
                    {
                        display: flex;
                        width: 100%;
                    }
                }
                .donor-tip-dropdown {
                    width: 100%;
                    position: relative;
                    display: inline-block;
                    border-radius: @remCalc10;
                    box-shadow: 0 @remCalc2 @remCalc10 rgba(0, 0, 0, 0.1);
                    background-color: white;
                }
                .donor-tip-selected {
                    background-color: #f9f9f9;
                    padding: @remCalc5 @remCalc22 @remCalc5 @remCalc5;
                    border: 1px solid #ccc;
                    cursor: pointer;
                    border-radius: @remCalc5;
                    position: relative;
                    min-width: @remCalc75;
                }
                .donor-tip-selected::after {
                    content: url("data:image/svg+xml; utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
                    position: absolute;
                    top: @remCalc5;
                    color: @checkoutItemFontColor;
                    @media @medium-up
                    {
                        top: @remCalc7;
                    }
                }
                .donor-tip-options {
                    display: none;
                    position: absolute;
                    background-color: #f9f9f9;
                    border: 1px solid #ccc;
                    width: 100%;
                    max-height: @remCalc210;
                    min-width: @remCalc160;
                    right: @remCalc2;
                    overflow-y: auto;
                    z-index: 1;
                    border-radius: @remCalc10;
                    box-shadow: 0 @remCalc2 @remCalc10 rgba(0, 0, 0, 0.1);
                }
                .donor-tip-options-header {
                    font-size: @remCalc16;
                    font-weight: bold;
                    color: @checkoutItemFontColor;
                    background-color: #fff;
                    padding: @remCalc10;
                    border-bottom: 1px solid #ccc;
                    position: sticky;
                    top: 0;
                    z-index: 10;
                    display: flex;
                    justify-content: left;
                }
                .donor-tip-options .radio {
                    display: flex;
                    align-items: center;
                    padding: @remCalc10;
                    cursor: pointer;
                    border-bottom: 1px solid #e1e1e1;
                }
                .donor-tip-options .radio:hover {
                    background-color: #f1f1f1;
                }
                .donor-tip-options input[type="radio"]:checked + label {
                    background-color: #e0e0e0;
                    font-weight: bold;
                }
            }
            &__tip-custom-amount-section
            {
                display: none;
                margin-bottom:0px;
                margin-top: @remCalc10;
                .amount-wrapper
                {
                    border: @remCalc2 solid @mediumGrey;
                    .border-radius(@remCalc12);
                }
                .currency-wrapper
                {
                    padding: @remCalc16;
                    border-right: @remCalc1 solid @mediumGrey;
                }
                .input-wrapper
                {
                    margin-left: @remCalc10;
                    .display-flex(row, nowrap, center, center);
                }
                .currency
                {
                    color: @accentColor;
                    font-weight: bold;
                    font-size: @remCalc24;
                    line-height: 100%;
                    margin-bottom: 0;
                    display: block;
                    .display-flex(column, nowrap, center, center);
                }
                input
                {
                    background: transparent;
                    color: @accentColor;
                    font-weight: bold;
                    border: 0px none;
                    margin: 0;
                    width: 100%;
                    padding-right: @remCalc10;
                    line-height: 100%;
                    padding-top: 0rem;
                    padding-bottom: 0rem;
                    padding-left: 0rem;
                    .placeholder( @mediumGrey );
                    &::-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: @remCalc24;
                    }
                }
                small.error
                {
                    position: absolute;
                    margin: 0 !important;
                    top: @remCalc14 !important;
                    left: @remCalc-18 !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: #ff0000;
                    }
                    input
                    {
                        color: #ff0000;
                    }
                    &::-webkit-input-placeholder
                    {
                        color: #ff0000;
                    }
                    &:-moz-placeholder
                    {
                        color: #ff0000;
                    }
                    &::-moz-placeholder
                    {
                        color: #ff0000;
                    }
                    &:-ms-input-placeholder
                    {
                        color: #ff0000;
                    }
                }
            }
        }
        .loader
        {
            background: #fff;
        }
        &__row {
            .display-flex(column, wrap, flex-start, flex-start);
            border-bottom: @remCalc1 solid @borderColor;
            gap: @remCalc12;
            padding: @remCalc24 0;
            &__heading {
                .display-flex(row, wrap, flex-start, center);
                gap: @remCalc8;
                width: 100%;
                &__icon {
                    .display-flex(row, nowrap, center, center);
                    background-color: #f5f5f5;
                    border: none;
                    border-radius: 50%;
                    color: @checkoutItemFontColor;
                    cursor: pointer;
                    font-size: @remCalc20;
                    font-weight: bold;
                    height: @remCalc40;
                    line-height: @remCalc32;
                    margin: 0;
                    padding: 0;
                    text-align: center;
                    transition: transform 0.3s ease, background-color 0.2s ease;
                    vertical-align: middle;
                    width: @remCalc40;
                    &:hover {
                        background-color: #e0e0e0;
                    }
                    &--rotated {
                        transform: rotate(180deg);
                    }
                }
                &__title {
                    flex-grow: 1;
                    font-size: @remCalc17;
                    font-weight: 700;
                }
            }
            &__body {
                .display-flex(column, wrap, flex-start, flex-start);
                background: #f5f5f5;
                background-clip: padding-box;
                border-radius: @remCalc8;
                gap: @remCalc16;
                padding: @remCalc24;
                span {
                    color: @accentColor;
                }
                p {
                    margin: unset;
                }
                &__top {
                    .display-flex(row, nowrap, flex-start, flex-start);
                    gap: @remCalc16;
                    svg {
                        min-width: @remCalc36;
                    }
                }
            }
        }
        &__promo
        {
            .display-flex(column, nowrap, flex-start, flex-start);
            border-bottom: @remCalc1 solid @borderColor;
            gap: @remCalc24;
            padding-bottom: @remCalc24;
            border-top: @remCalc1 solid @borderColor;
            margin-top: @remCalc24;
            &__heading {
                .display-flex(column, nowrap, flex-start, flex-start);
                gap: @remCalc12;
                margin-top: @remCalc24;
                &__title {
                    font-size: @remCalc14;
                    font-weight: 800;
                    margin: unset;
                }
                &__subtitle {
                    font-size: @remCalc14;
                    font-weight: 400;
                    margin: unset;
                }
            }
            &__wrapper
            {
                .display-flex(row, nowrap, flex-start, center);
                gap: @remCalc8;
                width: 100%;
                &__value {
                    width: 100%;
                    .inputRow
                    {
                        margin: 0;
                        .input__field--valid ~ .input__icon--tick
                        {
                            opacity: 0;
                        }
                    }
                }
                &__actions {
                    &__action {
                        background: transparent;
                        border: @remCalc2 solid @accentColor;
                        border-radius: @remCalc4;
                        color: @accentColor;
                        height: @remCalc40;
                        padding: 0 @remCalc32;
                        &:hover {
                            background: @accentColor;
                        }
                    }
                }
            }
        }
        &__products
        {
            &__item
            {
                .display-flex(row, nowrap, flex-start, center);
                background: #FAFAFB;
                border: @remCalc2 solid @borderColor;
                border-radius: @remCalc8;
                padding: @remCalc12 @remCalc18;
                width: 100%;
                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;
              }
            }
        }
        &__actions
        {
            display: flex;
            gap: @remCalc8;
            &__button
            {
                width: 100%;
            }
        }
    }
    &__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);
            }
            &__bookingAs
            {
                display: flex;
                gap: @remCalc12;
                @media @small-only
                {
                    flex-direction: column;
                }
                &__option
                {
                    display: flex;
                    align-items: center;
                    gap: @remCalc6;
                }
            }
            fieldset:not(:last-child) {
                border-bottom: @remCalc1 solid #D7D9DB;
                margin-bottom: @remCalc20;
            }
        }
        &__actions
        {
            .tickets-booking-tab-content-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();
            }
            &__seat
            {
                font-size: @remCalc13;
                font-weight: bold;
            }
        }
        &__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;
                .display-flex(row, nowrap, center, center);
                height: @remCalc52;
                background-color: @accentColor;
                border-radius: @remCalc1000;
                color: @actionButtonFontColor;
                @media @medium-up
                {
                    width: 60%;
                }
                @media @large-up
                {
                    width: 40%;
                }
            }
        }
        &__footer
        {
            .tickets-booking-form-footer();
        }
        &__info {
            .display-flex(row, nowrap, flex-start, center);
            gap: @remCalc12;
            padding: @remCalc16;
            
            font-size: @remCalc13;
            color: @navBarTextColor;   
            background-color: @navBarColor;
            &__title {
                font-weight: bold;
            }
            &__message {
                width: 100%;
                max-width: @remCalc550;
            }
            &__button {
                margin-left: auto;
            }
            .tooltip {
                align-self: flex-start;
            }
        }
    }
    &__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
        {
            .tickets-booking-tab-content-actions();
        }
        .taxReceiptSection {
            .taxReceiptView {
                .request-tax-receipt-header-options {
                    .error + div label {
                        color: #f04124;
                    }
                }
            }
        }
        &__footer
        {
            .tickets-booking-form-footer();
            margin-top: @remCalc40;
        }
    }
    &__add-ons
    {
        @borderColor: #f0f1f2;
        border-bottom: 1px solid @borderColor;
        margin-top: @remCalc24;
        &.hidden {
            display: none !important;
            visibility: hidden;
            pointer-events: none;
        }
        &__header {
            padding: 0;
            font-size: @remCalc16;
            color: @darkGrey;
            border: none;
        }
        &__body {
            margin-bottom: @remCalc12;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: @remCalc10;
            @media @medium-down {
                grid-template-columns: repeat(1, 1fr);
            }
            .add-raffle-ticket {
                border: 1px solid @borderColor;
                padding: @remCalc12 @remCalc28;
                margin-top: @remCalc12;
                border-radius: @remCalc12;
                &.hidden {
                    display: none !important;
                    visibility: hidden;
                    pointer-events: none;
                }
                .raffle-ticket-icon {
                    width: @remCalc35;
                    height: @remCalc35;
                    color: @accentColor;
                }
                .raffle-ticket-header {
                    color: @accentColor;
                    font-size: @remCalc20;
                    font-weight: 600;
                    margin-bottom: @remCalc3;
                }
                .raffle-ticket-description {
                    font-size: @remCalc14;
                    color: @mediumGrey;
                }
                .raffle-bundle-row {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: @remCalc12;
                    border: 1px solid #ddd;
                    border-radius: @remCalc6;
                    margin-bottom: @remCalc8;
                }
                .raffle-bundle-info {
                    .raffle-bundle-title {
                        font-weight: 600;
                        margin-bottom: @remCalc3;
                    }
                    .raffle-bundle-subtitle {
                        font-size: @remCalc14;
                        color: #666;
                    }
                }
                .raffle-bundle-controls {
                    display: flex;
                    align-items: center;
                    button {
                        width: @remCalc32;
                        height: @remCalc32;
                        padding: 0;
                        border: none;
                        color: white;
                        font-size: @remCalc19;
                        border-radius: 50%;
                        box-sizing: border-box;
                        cursor: pointer;
                    }
                    .raffle-bundle-current {
                        margin: 0 @remCalc8;
                        min-width: @remCalc24;
                        text-align: center;
                        padding-bottom: @remCalc16;
                    }
                    .raffle-bundle-decrement {
                        background: @borderColor;
                    }
                    .raffle-bundle-increment {
                        background: @accentColor;
                    }
                }
                .toggle-bundles-btn {
                    background: none;
                    border: none;
                    font-size: 14px;
                    cursor: pointer;
                    color: #333;
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    padding: 4px 0;
                }
                .toggle-icon {
                    display: inline-block;
                    transition: transform 200ms ease;
                }
                .toggle-bundles-btn:hover { color: #000; }
            }
            .add-donation {
                border: 1px solid @borderColor;
                padding: @remCalc12 @remCalc28;
                margin-top: @remCalc12;
                border-radius: @remCalc12;
                &.hidden {
                    display: none !important;
                    visibility: hidden;
                    pointer-events: none;
                }
                .donation-container {
                    .donation-header {
                        font-size: @remCalc20;
                        font-weight: 600;
                        color: @accentColor;
                    }
                    .donation-description {
                        font-size: @remCalc14;
                        color: @mediumGrey;
                        margin-bottom: @remCalc20;
                    }
                    .preset-amounts {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: @remCalc12;
                        margin-bottom: @remCalc16;
                    }
                    .donation-btn {
                        padding: @remCalc8 0;
                        border: 2px solid @accentColor;
                        border-radius: @remCalc6;
                        background: #fff;
                        color: @accentColor;
                        font-size: @remCalc16;
                        font-weight: 600;
                        cursor: pointer;
                        margin: 0;
                    }
                    .donation-btn:hover {
                        background: #f9e1f1;
                    }
                    .donation-btn.selected {
                        background-color: #f9e1f1;
                    }
                    .donation-overlay__field .donation-overlay__label-description {
                        display: block;
                        color: @accentColor;
                        font-size: @remCalc12;
                        margin-bottom: @remCalc10;
                    }
                    .donation-overlay__field .extra-inputs-addons {
                        margin-bottom: @remCalc10;
                    }
                    .donation-overlay__field .giftAidView__form__row_addons input {
                        width: 100%;
                        padding: @remCalc10 @remCalc12;
                        border: 1px solid #ccc;
                        border-radius: @remCalc6;
                        background-color: #fff;
                        font-size: @remCalc14;
                        color: #333;
                        outline: none;
                        transition: border-color 0.2s ease, box-shadow 0.2s ease;
                        box-sizing: border-box;
                        margin-bottom: @remCalc10;
                    }
                    .donation-overlay__field .giftAidView__form__row_addons input::placeholder {
                        color: #999;
                        font-size: @remCalc13;
                    }
                    .donation-overlay__field .giftAidView__form__row_addons input:focus {
                        border-color: #007bff;
                        box-shadow: 0 0 @remCalc4 rgba(0, 123, 255, 0.4);
                    }
                    .custom-wrapper {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: @remCalc8;
                        margin-bottom: @remCalc12;
                        &.hidden {
                            display: none !important;
                            visibility: hidden;
                            pointer-events: none;
                        }
                    }
                    .custom-input {
                        flex: 1;
                        padding: @remCalc8;
                        border: 1px solid #eee;
                        border-radius: @remCalc6;
                        color: #999;
                    }
                    .add-btn {
                        padding: @remCalc8 @remCalc16;
                        border: 2px solid @accentColor;
                        border-radius: @remCalc6;
                        background: #fff;
                        color: @accentColor;
                        font-size: @remCalc16;
                        font-weight: 600;
                        cursor: pointer;
                        margin-bottom: 0;
                    }
                    .add-btn:hover {
                        background: #f9e1f1;
                    }
                    .add-btn.selected {
                        background-color: #f9e1f1;
                    }
                }
            }
            .gift-aid {
                &.hidden {
                    display: none !important;
                    visibility: hidden;
                    pointer-events: none;
                }
            }
        }
    }
    @media @small-only {
        &__add-ons {
            padding: 0;
            &__header {
                font-size: @remCalc12;
            }
            &__body {
                .add-raffle-ticket {
                    padding: @remCalc2 @remCalc8;
                    .raffle-ticket-header {
                        font-size: @remCalc16;
                    }
                    .raffle-ticket-description {
                        font-size: @remCalc12;
                    }
                }
                .add-donation {
                    padding: @remCalc5;
                    .donation-container {
                        .donation-header {
                            font-size: @remCalc16;
                        }
                        .donation-description {
                            font-size: @remCalc12;
                        }
                        .preset-amounts {
                            grid-template-columns: repeat(2, 1fr);
                            margin-bottom: @remCalc8;
                        }
                    }
                }
            }
        }
    }
    #add-ons-button {
        background-color: @accentColor !important;
    }
}
.layout--minimum
{
    .ticketsBooking
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .ticketsBooking
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .ticketsBooking
        {
            .bidding-minimum-view-env();
        }
    }
}
.raffle-dialog {
    .display-flex(column, wrap, flex-start, flex-start);
    background: #fff;
    border-radius: @remCalc12;
    gap: @remCalc24;
    max-width: @remCalc500;
    padding: @remCalc24;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
    transform: translate(-50%, -50%);
    &__actions {
        display: grid;
        width: 100%;
        grid-template-columns: 43px auto;
        gap: @remCalc12;
    }
}
.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
        {
            .display-flex(column, nowrap, flex-start, flex-start);
            gap: @remCalc12;
            &__apple-pay-button
            {
                display: none;
                &.is-visible {
                    display: block;
                    width: 100%;
                    margin-top: @remCalc12;
                    min-height: @remCalc50;
                }
            }
            &__card-pay-button
            {
                width: 100%;
                &__icon
                {
                    width: @remCalc30;
                    height: @remCalc16;
                    fill: #ffffff;
                    display: inline;
                    padding-left: @remCalc5;
                    margin-bottom: @remCalc-2;
                }
            }
            &__daf-pay-button
            {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding: 0;
                border-radius: @remCalc12;
                margin: 0;
                .daf-pay-btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                    margin: 0;
                    border: none;
                    background: rgba(1, 58, 83, 1);
                    color: #fff;
                    font-size: @remCalc14;
                    font-weight: 600;
                    cursor: pointer;
                    box-shadow: 0 2px 0 rgba(0,0,0,0.12);
                    text-decoration: none;
                    -webkit-appearance: none;
                    vertical-align: middle;
                    border-radius: @remCalc12;
                    padding: @remCalc20;
                    &:hover {
                        filter: brightness(1.04);
                    }
                    &:active {
                        transform: translateY(1px);
                    }
                    &__logo {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        min-width: @remCalc40;
                        border-radius: @remCalc6;
                        background: #fff;
                        color: @darkBlue;
                        font-weight: 700;
                        margin-right: @remCalc2;
                        font-size: @remCalc16;
                    }
                    &__label {
                        display: inline-block;
                        line-height: 1;
                    }
                }
                .chariot-button {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 0;
                }
                &:empty {
                    display: none;
                }
            }
        }
    }
    &__credit-card
    {
        &__message
        {
            .paymentProvider-message();
        }
        &__switch-to-apple-pay
        {
            .link();
            margin-top: @remCalc20;
            margin-bottom: @remCalc20;
            text-align: center;
        }
        &__form
        {
            .litecheckbox {
                width: @remCalc40;
                height: @remCalc24;
                input[type=checkbox]
                {
                    &:focus
                    {
                        ~ label
                        {
                            border: none;
                            outline: @accentColor @remCalc2 solid;
                        }
                    }
                }
                input[type='checkbox'] + label {
                    width: @remCalc40 !important;
                    height: @remCalc24;
                    border-radius: @remCalc12;
                    background-color: @mediumGrey;
                    transition: background-color 0.2s linear;
                    &::after {
                        content: '';
                        width: @remCalc20;
                        height: @remCalc20;
                        border: none;
                        border-radius: @remCalc10;
                        top: @remCalc1;
                        left: @remCalc1;
                        background: @panelBgColour;
                        opacity: 1 !important;
                        transition: left 0.2s linear;
                    }
                }
                input[type='checkbox']:checked + label {
                    width: @remCalc40;
                    height: @remCalc24;
                    background-color: @accentFadedColor;
                    &::after {
                        content: '';
                        width: @remCalc20;
                        height: @remCalc20;
                        border: none;
                        border-radius: @remCalc10;
                        top: @remCalc1;
                        left: @remCalc17;
                        background: @panelBgColour;
                    }
                }
            }
        }
    }
    &__loader
    {
        .calc( width , ~"100% + @{remCalc30}" );
        .calc( height , ~"100% + @{remCalc30}" );
        top: @remCalc-15;
        left: @remCalc-15;
    }
}
.ticketsBookingConfirmed
{
    .panel-view();
    &__header
    {
        .panel-header-title-one();
    }
    &__body {
        .panel-content();
    }
    &__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;
            color: @darkGrey;
            @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(column, nowrap, space-around, center);
        }
        &__button
        {
            width: 100%;
            margin-bottom: @remCalc20;
            &:last-child
            {
                margin-bottom: 0;
            }
        }
    }
    .redirect-to-checkout {
        margin-bottom: @remCalc30;
        .click-button {
            cursor: pointer;
            text-decoration: underline;
            font-weight: 600;
            color: #4399d7;
            transition: text-decoration 0.15s ease, color 0.15s ease;
        }
        .click-button:hover {
            text-decoration: none;
        }
        .click-button:active {
            opacity: 0.85;
        }
        .click-button:focus-visible {
            outline: 2px solid currentColor;
            outline-offset: 2px;
            border-radius: 3px;
        }
    }
}
.layout--minimum
{
    .ticketsBookingConfirmed
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .ticketsBookingConfirmed
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .ticketsBookingConfirmed
        {
            .bidding-minimum-view-env();
        }
    }
}
.ticketsExpiredView
{
    .checkout-view();
    &__header
    {
        .checkout-header();
    }
    &__message
    {
        .checkout-message();
    }
    &__actions
    {
        .checkout-actions();
        margin-top: @remCalc100;
    }
}
.layout--minimum
{
    .ticketsExpiredView
    {
        .bidding-minimum-view();
    }
}
.dialog
{
    .ticketsExpiredView
    {
        width: 100%;
        padding-bottom: 0;
        padding-top: 0;
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .ticketsExpiredView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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;
            .inputRow {
                &__label {
                    margin: unset;
                }
            }
        }
        &__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;
            }
        }
    }
}
.layout--minimum
{
    .bidConversionView
    {
         // bidding-minimum-view(@bidConversionActionsHeight);
        &__body
        {
            &__bid-actions
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .bidConversionView
        {
            .bidding-minimum-view-constant(@bidConversionActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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
{
    &__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;
        gap: 10px;
        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
    {
        min-height: @remCalc400;
        display: none;
        &__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;
    }
}
.layout--minimum
{
    .ticketsManage
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .ticketsManage
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .ticketsManage
        {
            .bidding-minimum-view-env();
        }
    }
}
.tab-section() {
  .manage-tickets-tabs-wrapper {
    padding: @remCalc16;
  }
  .manage-tickets-tabs {
    display: flex;
    background-color: #f2f2f2;
    border-radius: @remCalc14;
    padding: @remCalc4;
    justify-content: center;
    gap: @remCalc8;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
  }
  .tab-button {
    .sectionTitle();
    flex: 1;
    padding: @remCalc10 @remCalc20;
    font-size: @remCalc16;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .tab-button.active {
    color: @accentColor;
    background-color: #ffffff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
    border-radius: @remCalc12;
    border: @remCalc2 solid @accentColor;
  }
  .tab-content {
    border-top: @remCalc1 solid @lightGrey;
  }
  .tab-panel {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
  }
}
.panelHeader() {
  .panel__header {
    .sectionTitle();
    .tabs__item {
      a {
        color: @darkGrey !important;
      }
      &--selected {
        a {
          color: lighten(@accentColor, 15%) !important;
        }
      }
    }
  }
}
.editContent() {
  > div {
    margin-top: @remCalc20;
  }
  .loader {
    background: #fff;
  }
  a {
    .link();
  }
  &__form {
    .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 {
      padding: @remCalc4;
      display: flex;
      flex-direction: column;
      gap: @remCalc16;
      hr {
        margin: @remCalc10 0px @remCalc13 0px;
      }
      .ticketsQuestionsList__items:has(li) {
        margin-top: @remCalc10;
      }
      .input {
        display: flex;
        flex-direction: column;
        height: unset;
        border: unset;
        &--focused {
          box-shadow: unset;
        }
        &__field {
          order: 2;
          position: unset;
          border: 1px solid #d7d9db;
          border-radius: @remCalc4;
          padding: @remCalc24 @remCalc12;
        }
        .intl-tel-input {
          display: flex;
          align-items: center;
          .flag-container {
            position: unset;
          }
          input {
            padding-left: unset;
          }
        }
        &__label {
          order: 1;
          position: unset;
          transform: unset;
        }
        &__icon--tick {
          transform: translateY(100%);
        }
      }
      .litecheckbox {
        min-width: @remCalc20;
      }
    }
    .error small.error {
      color: @errorColor;
    }
    &__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 {
      margin-top: @remCalc30;
      &__button {
        width: 100%;
      }
    }
  }
  &__duplicate-error {
    font-size: @remCalc14;
    padding-top: @remCalc10;
    color: @errorColor;
    display: none;
  }
  &__actions {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin-top: @remCalc20;
    gap: @remCalc8;
    @media @medium-down {
      flex-direction: column;
      gap: @remCalc8;
    }
    &__right,
    &__left {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: @remCalc8;
      @media @medium-down {
        flex-direction: column;
        align-items: flex-start;
      }
    }
    &__right {
      flex: 1;
      justify-content: flex-end;
    }
    &__button {
      width: 100%;
      padding-left: 0 !important;
      padding-right: 0 !important;
      color: @actionButtonFontColor;
      border-radius: @remCalc6;
      border: @remCalc2 solid @accentColor;
      background-color: @accentColor;
      height: @remCalc36;
      transition: all 0.3s ease-in-out;
      font-size: @remCalc16;
      max-width: @remCalc200;
      &:hover {
        border-color: @accentFadedColor;
        color: @actionButtonFontColor;
        background-color: @accentFadedColor;
        transition: all 0.3s ease-in-out;
      }
      &[disabled],
      &.disabled {
        opacity: 0.5;
        pointer-events: none;
        filter: grayscale(100%);
      }
    }
    &__button--outline {
      width: 100%;
      padding-left: 0 !important;
      padding-right: 0 !important;
      color: @accentColor;
      border-radius: @remCalc6;
      border: @remCalc2 solid @accentColor;
      background-color: @actionButtonFontColor;
      height: @remCalc36;
      transition: all 0.3s ease-in-out;
      font-size: @remCalc16;
      max-width: @remCalc200;
      &:hover {
        border-color: @accentFadedColor;
        color: @accentFadedColor;
        transition: all 0.3s ease-in-out;
      }
    }
    svg {
      width: @remCalc18;
      height: @remCalc18;
      fill: @accentColor;
      margin-right: @remCalc4;
      path {
        fill: @accentColor;
      }
    }
    &__dropdown {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      &__share-menu,
      &__wallet-menu {
        z-index: 9000;
        margin-top: @remCalc8;
        border-radius: @remCalc4;
        display: flex;
        flex-direction: column;
        min-width: @remCalc250;
        border: 1px solid #eff0f1;
        a {
          padding: @remCalc8 @remCalc12;
          border-bottom: 1px solid #eff0f1;
          &:last-child,
          &:only-child {
            border-bottom: none;
          }
        }
      }
      button {
        all: unset;
        color: @accentColor;
        line-height: 1.5;
        cursor: pointer;
        display: flex;
        align-items: center;
        svg {
          width: @remCalc18;
          height: @remCalc18;
          fill: @accentColor;
          margin-right: @remCalc4;
        }
      }
    }
  }
  &__footer {
    margin-top: @remCalc20;
    text-align: center;
    color: @colorOnBackground;
    font-size: @remCalc14;
    @media @xlarge-up {
      font-size: @remCalc16;
    }
  }
}
.manageActivity {
  .panelHeader();
}
.manifestView {
  .panel__content {
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  .panelHeader();
  &__tabs {
    .tab-section();
  }
  .no-bookings {
    text-align: center;
    margin-top: @remCalc30;
  }
  .bookings-header__copy {
    border: 1px solid #d7d9db;
    border-radius: @remCalc4;
    padding: @remCalc12;
    p {
      margin: unset;
    }
  }
  .bookings-list {
    .booking-group-card {
      border-bottom: 1px solid #ddd;
      background: transparent;
      .booking-group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: @remCalc16 @remCalc20;
        cursor: pointer;
        &__title {
          display: flex;
          flex-direction: column;
          gap: @remCalc10;
          flex: 1;
          .ticket-name {
            font-size: @remCalc15;
            font-weight: bold;
            .sectionTitle();
            color: @accentColor;
          }
          .status--mobile {
            display: flex;
            .pending-status-icon svg {
              fill: @mediumGrey;
            }
            .complete-status-icon svg {
              fill: @accentColor;
            }
            .status-label {
              padding: @remCalc3 @remCalc5;
              font-size: @remCalc15;
            }
            @media @medium-up {
              display: none;
            }
          }
        }
        &__icon {
          display: flex;
          align-items: center;
          .svg.chevron-icon {
            transition: transform 0.3s;
            transform: rotate(0deg);
          }
          .status--desktop {
            display: flex;
            .pending-status-icon svg {
              fill: @mediumGrey;
            }
            .complete-status-icon svg {
              fill: @accentColor;
            }
            .status-label {
              padding: @remCalc3 @remCalc5;
              font-size: @remCalc15;
            }
            @media @medium-down {
              display: none;
            }
          }
        }
        &.open {
          background: @lightGrey;
          .ticket-name {
            color: @accentColor;
          }
          svg.chevron-icon {
            transform: rotate(180deg);
            fill: lighten(@accentColor, 15%);
          }
        }
      }
      .booking-items {
        padding: 0px @remCalc20 @remCalc16;
        background: @lightGrey;
        overflow: visible;
        .booking-group-details {
          display: flex;
          flex-direction: column;
          gap: @remCalc6;
          padding: @remCalc6 0 @remCalc32;
          font-size: @remCalc14;
          &__row {
            line-height: 1.4;
          }
          &__label {
            margin-right: @remCalc4;
          }
        }
        .bookings-subheader {
          font-size: @remCalc16;
          padding: @remCalc24 0px @remCalc16 @remCalc8;
          color: @accentColor;
        }
        .booking-panel {
          padding: @remCalc16;
          background-color: #ffffff;
          border-radius: @remCalc12;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
          margin-bottom: @remCalc12;
          transition: box-shadow 0.2s ease;
          .booking-panel-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          &:hover {
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
          }
          &__number {
            width: @remCalc28;
            height: @remCalc28;
            min-width: @remCalc28;
            border-radius: 50%;
            background-color: @lightGrey;
            color: @darkGrey;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: @remCalc14;
            font-weight: 500;
            .sectionTitle();
            margin-right: @remCalc12;
          }
          &__details {
            flex: 1;
            .guest-name {
              font-size: @remCalc15;
              font-weight: bold;
              .sectionTitle();
              color: @darkGrey;
            }
          }
          &__action {
            cursor: pointer;
            svg {
              fill: @accentColor;
            }
          }
        }
        .bookings-actions {
          display: flex;
          flex-direction: row;
          gap: @remCalc24;
          @media @medium-down {
            flex-direction: column;
          }
          &__action,
          &__action__dropdown {
            position: relative;
            display: inline-block;
            vertical-align: middle;
          }
          &__share-menu,
          &__wallet-menu {
            z-index: 9000;
            min-width: @remCalc160;
            margin-top: @remCalc8;
            border-radius: @remCalc4;
            display: flex;
            flex-direction: column;
            min-width: @remCalc300;
            a {
              padding: @remCalc8 @remCalc12;
              border-bottom: 1px solid #eff0f1;
              &:last-child,
              &:only-child {
                border-bottom: none;
              }
            }
          }
          &__action {
            color: @accentColor;
            display: flex;
            align-items: center;
            svg {
              width: @remCalc18;
              height: @remCalc18;
              fill: @accentColor;
              margin-right: @remCalc4;
              path {
                fill: @accentColor;
              }
            }
            &__dropdown {
              button {
                all: unset;
                color: @accentColor;
                line-height: 1.5;
                cursor: pointer;
                display: flex;
                align-items: center;
                svg {
                  width: @remCalc18;
                  height: @remCalc18;
                  fill: @accentColor;
                  margin-right: @remCalc4;
                }
              }
            }
          }
        }
        .ticket-managers {
          padding: @remCalc24 0 @remCalc16;
          font-size: @remCalc14;
          &__header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: @remCalc12;
            margin-bottom: @remCalc12;
          }
          &__title {
            .sectionTitle();
            color: @accentColor;
            font-size: @remCalc16;
            margin: 0;
          }
          &__add-btn {
            display: inline-flex;
            align-items: center;
            gap: @remCalc4;
            padding: @remCalc8 @remCalc12;
            font-size: @remCalc14;
            font-weight: bold;
            color: @accentColor;
            background: transparent;
            border: none;
            border-radius: @remCalc6;
            cursor: pointer;
            transition: opacity 0.2s;
            .ticket-managers__add-icon {
              width: @remCalc18;
              height: @remCalc18;
              fill: @accentColor;
            }
            &:hover:not(.is-disabled):not(:disabled) {
              opacity: 0.85;
            }
            &.is-disabled,
            &:disabled {
              opacity: 0.5;
              cursor: not-allowed;
              color: @darkGrey;
              .ticket-managers__add-icon {
                fill: @darkGrey;
              }
            }
          }
          &__list {
            list-style: none;
            margin: 0 0 @remCalc12;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: @remCalc12;
          }
          &__item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: @remCalc52;
            padding: @remCalc12 @remCalc24 @remCalc12 @remCalc12;
            box-sizing: border-box;
            background-color: #ffffff;
            border-radius: @remCalc12;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            margin-bottom: 0;
            transition: box-shadow 0.2s ease;
            &:hover {
              box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
            }
          }
          &__icon {
            width: @remCalc28;
            height: @remCalc28;
            min-width: @remCalc28;
            border-radius: 50%;
            background-color: #F5F6F6;
            color: @darkGrey;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: @remCalc12;
            flex-shrink: 0;
            line-height: 0;
            svg {
              width: @remCalc18;
              height: @remCalc18;
              fill: @darkGrey;
              display: block;
              flex-shrink: 0;
            }
          }
          &__details {
            flex: 1;
            min-width: 0;
            display: flex;
            align-items: center;
          }
          &__name {
            .sectionTitle();
            font-size: @remCalc15;
            font-weight: bold;
            color: @darkGrey;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1;
          }
          &__role {
            color: #868E94;
            font-weight: normal;
            font-size: @remCalc14;
          }
          &__right {
            display: inline-flex;
            align-items: center;
            gap: @remCalc24;
            flex-shrink: 0;
            line-height: 1;
            align-self: center;
          }
          &__status {
            display: inline-flex;
            align-items: center;
            gap: @remCalc4;
            font-weight: normal;
            font-size: @remCalc13;
            line-height: 1;
          }
          &__pending {
            color: @darkGrey;
          }
          &__pending-icon {
            width: @remCalc16;
            height: @remCalc16;
            fill: @darkGrey;
            flex-shrink: 0;
            display: block;
          }
          &__accepted,
          &__active {
            color: #2e7d32;
          }
          &__accepted-icon {
            width: @remCalc16;
            height: @remCalc16;
            flex-shrink: 0;
            display: block;
            path,
            circle {
              stroke: #2e7d32;
              fill: none;
            }
          }
          &__actions {
            display: inline-flex;
            align-items: center;
            gap: @remCalc4;
            line-height: 0;
            height: @remCalc24;
          }
          &__edit,
          &__delete {
            margin: 0;
            padding: 0;
            width: @remCalc24;
            height: @remCalc24;
            min-width: @remCalc24;
            min-height: 0;
            background: none;
            border: none;
            cursor: pointer;
            line-height: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            flex-shrink: 0;
            svg {
              width: @remCalc24;
              height: @remCalc24;
              fill: @accentColor;
              display: block;
              margin: 0;
              flex-shrink: 0;
            }
            &:hover svg {
              fill: lighten(@accentColor, 10%);
            }
          }
          &__hint {
            display: flex;
            align-items: center;
            gap: @remCalc4;
            margin: @remCalc16 0 0;
            font-size: @remCalc13;
            color: #868E94;
            line-height: 1.4;
            svg {
              flex-shrink: 0;
              width: @remCalc18;
              height: @remCalc18;
              fill: #868E94;
            }
          }
        }
      }
      .grouped-booking-edit-row {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.3s ease,
          opacity 0.3s ease;
        opacity: 0;
        &.open {
          opacity: 1;
          overflow: visible;
        }
        .edit-booking {
          .editContent();
        }
      }
    }
  }
}
.myTickets,
.my-tickets {
  border-bottom: 1px solid #ddd;
  background: @lightGrey;
  padding: @remCalc16;
  .my-ticket-edit {
    padding: @remCalc16;
    background-color: #ffffff;
    border-radius: @remCalc12;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: @remCalc12;
    transition: box-shadow 0.2s ease;
    .edit-my-ticket {
      .editContent();
      &__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: @remCalc10;
        padding-right: @remCalc10;
        &__right {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          gap: @remCalc8;
        }
      }
      &-event-name {
        .sectionTitle();
        color: lighten(@accentColor, 15%);
        font-size: @remCalc18;
      }
      &-event-name,
      &-ticketing-time,
      &__info-row,
      &-name,
      &-purchaser {
        line-height: @remCalc30;
      }
      &__info-row {
        font-size: @remCalc14;
      }
      &__info-label {
        color: fade(@colorOnBackground, 70%);
      }
      &-name {
        margin-bottom: @remCalc5;
      }
      &__form__wrapper {
        margin-top: @remCalc15;
      }
    }
    .no-ticket {
      text-align: center;
      margin-top: @remCalc30;
    }
    .ticketsQuestionsList__items {
      margin-top: @remCalc10;
    }
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(@remCalc10);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.modern-confirm {
  .alertify-inner {
    padding: @remCalc32;
    .alertify-message {
      padding: unset;
      display: flex;
      flex-direction: column;
      gap: @remCalc4;
      &-title {
        color: @accentColor;
      }
    }
    .alertify-buttons {
      display: flex;
      flex-direction: row;
      border-top: @remCalc1 solid #eff0f1;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      margin-top: @remCalc24;
      padding: @remCalc24 0 0 0;
      gap: @remCalc8;
      .alertify-button {
        width: 100%;
        margin-left: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: normal;
        &-ok {
          width: 100%;
          padding: @remCalc24;
          color: @actionButtonFontColor;
          border-radius: @remCalc6;
          border: @remCalc2 solid @accentColor;
          background-color: @accentColor;
          height: @remCalc36;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease-in-out;
          font-size: @remCalc16;
          &:hover {
            border-color: @accentFadedColor;
            color: @actionButtonFontColor;
            background-color: @accentFadedColor;
            transition: all 0.3s ease-in-out;
          }
        }
        &-cancel {
          width: 100%;
          padding: @remCalc24;
          color: @accentColor;
          border-radius: @remCalc6;
          border: @remCalc2 solid @accentColor;
          background-color: @actionButtonFontColor;
          height: @remCalc36;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: all 0.3s ease-in-out;
          font-size: @remCalc16;
          &:hover {
            border-color: @accentFadedColor;
            color: @accentFadedColor;
            transition: all 0.3s ease-in-out;
          }
        }
      }
    }
  }
}
.add-ticket-manager-modal-wrapper {
  position: relative;
  min-width: 320px;
  max-width: 480px;
  overflow: visible;
}
.add-ticket-manager-modal {
  padding: 0;
  box-sizing: border-box;
  &__field--phone .intl-tel-input {
    width: 100%;
  }
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
  }
  &__close {
    width: @remCalc36;
    height: @remCalc36;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: @accentColor;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
    &:hover {
      opacity: 0.9;
    }
    svg {
      width: @remCalc18;
      height: @remCalc18;
      fill: #fff;
    }
  }
  &__title {
    .sectionTitle();
    font-weight: 800;
    color: @accentColor;
    font-size: @remCalc20;
    margin: 0;
  }
  &__description {
    margin: @remCalc4 0 @remCalc24;
    font-size: @remCalc16;
    line-height: 1.5;
    color: @darkGrey;
  }
  &__form {
    margin: 0;
  }
  &__row {
    margin-bottom: @remCalc24;
    &--half {
      display: flex;
      gap: @remCalc12;
    }
  }
  &__field {
    flex: 1;
    min-width: 0;
  }
  &__label {
    display: block;
    margin-bottom: @remCalc4;
    font-size: @remCalc14;
    color: @darkGrey;
  }
  &__input {
    width: 100%;
    padding: @remCalc8 @remCalc12;
    font-size: @remCalc14;
    border: 1px solid #e0e0e0;
    border-radius: @remCalc4;
    box-sizing: border-box;
    &::placeholder {
      color: #999;
    }
  }
  &__actions {
    display: flex;
    gap: @remCalc12;
    margin: 0;
    margin-top: @remCalc24;
    padding-top: @remCalc24;
    border-top: 1px solid #E7E8EA;
  }
  &__btn {
    flex: 1;
    margin: 0;
    padding: @remCalc10 @remCalc20;
    font-size: @remCalc14;
    border-radius: @remCalc6;
    cursor: pointer;
    transition: opacity 0.2s;
    &--cancel {
      background: #fff;
      border: @remCalc2 solid @accentColor;
      color: @accentColor;
      &:hover {
        opacity: 0.9;
      }
    }
    &--primary {
      background-color: @accentColor;
      border: @remCalc2 solid @accentColor;
      color: @actionButtonFontColor;
      &:hover {
        opacity: 0.9;
      }
    }
  }
}
.edit-ticket-manager-modal-wrapper {
  position: relative;
  min-width: 320px;
  max-width: 480px;
  overflow: visible;
}
.edit-ticket-manager-modal {
  padding: 0;
  box-sizing: border-box;
  &__field--phone .intl-tel-input {
    width: 100%;
  }
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
  }
  &__close {
    width: @remCalc36;
    height: @remCalc36;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: @accentColor;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
    &:hover {
      opacity: 0.9;
    }
    svg {
      width: @remCalc18;
      height: @remCalc18;
      fill: #fff;
    }
  }
  &__title {
    .sectionTitle();
    font-weight: 800;
    color: @accentColor;
    font-size: @remCalc20;
    margin: 0;
  }
  &__info {
    display: flex;
    align-items: flex-start;
    gap: @remCalc4;
    padding: @remCalc8;
    margin: 0 0 @remCalc24;
    background-color: #F5F6F6;
    border-radius: @remCalc4;
    font-size: @remCalc13;
    font-weight: normal;
    line-height: 1.4;
    color: #868E94;
    .edit-ticket-manager-modal__info-icon {
      width: @remCalc18;
      height: @remCalc18;
      flex-shrink: 0;
      fill: #868E94;
    }
  }
  &__form {
    margin: 0;
  }
  &__row {
    margin-bottom: @remCalc24;
    &--half {
      display: flex;
      gap: @remCalc12;
    }
  }
  &__field {
    flex: 1;
    min-width: 0;
  }
  &__label {
    display: block;
    margin-bottom: @remCalc4;
    font-size: @remCalc14;
    color: @darkGrey;
  }
  &__input {
    width: 100%;
    padding: @remCalc8 @remCalc12;
    font-size: @remCalc14;
    border: 1px solid #e0e0e0;
    border-radius: @remCalc4;
    box-sizing: border-box;
    &::placeholder {
      color: #999;
    }
  }
  &__actions {
    display: flex;
    gap: @remCalc12;
    margin: 0;
    margin-top: @remCalc24;
    padding-top: @remCalc24;
    border-top: 1px solid #E7E8EA;
  }
  &__btn {
    flex: 1;
    margin: 0;
    padding: @remCalc10 @remCalc20;
    font-size: @remCalc14;
    border-radius: @remCalc6;
    cursor: pointer;
    transition: opacity 0.2s;
    &--cancel {
      background: #fff;
      border: @remCalc2 solid @accentColor;
      color: @accentColor;
      &:hover {
        opacity: 0.9;
      }
    }
    &--primary {
      background-color: @accentColor;
      border: @remCalc2 solid @accentColor;
      color: @actionButtonFontColor;
      &:hover {
        opacity: 0.9;
      }
    }
  }
  &__invite-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: @remCalc20;
    padding-top: @remCalc16;
    border-top: 1px solid #eee;
  }
  &__link {
    display: inline-flex;
    align-items: center;
    gap: @remCalc6;
    padding: 0;
    border: none;
    background: none;
    font-size: @remCalc14;
    color: @accentColor;
    cursor: pointer;
    transition: opacity 0.2s;
    &:hover {
      opacity: 0.85;
    }
    svg {
      width: @remCalc16;
      height: @remCalc16;
      fill: @accentColor;
    }
  }
}
.add-ticket-manager-modal small.error,
.edit-ticket-manager-modal small.error {
  color: @errorColor;
}
.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 {
	.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;
		}
		svg {
			fill: #BC2B87;
		}
	}
	&__details {
		.set-flex(1);
		margin-left: @remCalc7;
		&__name {
			font-family: 'Montserrat';
			margin-bottom: @remCalc5;
			font-weight: bold;
			color: @darkGrey;
			-webkit-text-stroke: 0.5px @darkGrey;
			text-fill-color: @darkGrey;
		}
		&__comment {
			color: @mediumGrey;
			font-size: @remCalc14;
		}
	}
	&__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);
    }
  }
}
.layout--minimum
{
  .giftAidView
  {
    .bidding-minimum-view();
  }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  .layout--minimum
  {
    .giftAidView
    {
      .bidding-minimum-view-constant();
    }
  }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .layout--minimum
  {
    .giftAidView
    {
      .bidding-minimum-view-env();
    }
  }
}
.setupView
{
    .panel-view();
    .set-flex(1);
    &__header
    {
        font-family: 'Montserrat';
		-webkit-text-stroke: 0.5px @mediumGrey;
		text-fill-color: @mediumGrey;
		font-size: @remCalc15;
		font-weight: bold;
		padding: @remCalc16;
		padding-left: @remCalc24;
    }
    &__form
    {
        .panel-content();
		padding-top: 0px;
        .details-panels
        {
            .display-flex(column, nowrap, flex-start, flex-start);
            gap: @remCalc30;
            .details-panel
            {
                margin: 0;
                &__wrapper
                {
                    margin-top: 0;
                    margin-left: 0;
                    margin-right: 0;
                    background-color: @panelBgColour;
                    position: relative;
                    overflow: hidden;
                    .overflow-fix();
                    .amountList, .frequencyList {
                        margin-top: 20px;
                        .display-flex(column, nowrap, flex-start, flex-start);
                        gap: @remCalc10;
						.literadio label:after {
							top: -@remCalc2;
							left: -@remCalc2;
							content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%2334C759%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Z%22%2F%3E%3C%2Fsvg%3E");
							background: none;
						}
                    }
                    > label {
                        color: @darkGrey;
                        font-weight: bold;
                        display: block;
                    }
                }
                .date
                {
                    min-height: @remCalc150;
                    .dateInputRow
                    {
                        margin: @remCalc10 @remCalc0 @remCalc0 @remCalc0;
                    }
                    .tooltipEndDate
                    {
                        bottom: @remCalc0;
                        top: @remCalc20;
                        background-image: none;
						svg
						{
							fill: @accentColor;
						}
                    }
                    .endDateLabel
                    {
                        position: absolute;
                        font-size: @remCalc14;
						color: #6c757d;
                        left: @remCalc50;
                        top: @remCalc22;
                    }
                    .litecheckbox label:after
                    {
					   content: '';
					   border: @remCalc2 solid #34C759;
					   border-top: none;
					   border-right: none;
                    }
                    .input__icon--tick
                    {
						fill: #34C759;
                    }
                }
            }
        }
    }
}
.recurringDonationsPaymentView
{
	position: relative;
	.display-flex(row, wrap, flex-start, flex-start);
	margin: 0 auto;
	width: 100%;
	@media @large-up {
		.display-flex(row, nowrap, flex-start, flex-start);
		padding-left: @remCalc70;
		padding-right: @remCalc70;
		gap: @remCalc40;
		&__left {
			width: @remCalc855;
		}
		&__right {
			width: @remCalc390;
		}
	}
	@media @xlarge-up {
		padding: 0;
		width: @remCalc1352;
		&__left {
			width: @remCalc900;
		}
	}
	.panel {
		min-height: unset !important;
		max-width: unset !important;
		width: 100% !important;
	}
	&__header {
		padding: @remCalc22 @remCalc24 @remCalc22 @remCalc24;
		&__title {
			font-family: 'Montserrat';
			font-weight: bolder;
			font-size: @remCalc32;
			margin-bottom: @remCalc0;
			color: @accentColor;
			-webkit-text-stroke: 0.5px @accentColor;
			text-fill-color: @accentColor;
		}
	}
    &__left
    {
		.display-flex(column, wrap, flex-start, flex-start);
		width: 100%;
		.set-flex(1);
		.panel {
			border-radius: 0;
			&__title {
				.sectionTitle();
			}
		}
		&__details
		{
			margin-bottom: @remCalc30;
			margin-top: 0;
			margin-left: 0;
			margin-right: 0;
			background-color: @panelBgColour;
			position: relative;
			overflow: hidden;
			&::after
			{
				background-color: darken(@panelBgColour, 20%);
				.ripple();
			}
			.info
			{
				margin-bottom: @remCalc10;
				display: flex;
				justify-content: flex-end;
				padding-right: @remCalc20;
				.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;
					}
				}
			}
		}
		@media @large-up {
			gap: @remCalc24;
			.panel {
				.border-radius(@remCalc24);
			}
		}
    }
    &__form {
        [type=button] {
			padding-left: @remCalc15;
			padding-right: @remCalc15;
			margin-top: @remCalc25;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 0;
			width: 100%;
			background-color: @accentColor;
			&:focus {
			  background-color: lighten(@accentColor, 10%);
			}
			&.disabled:hover {
				background-color: lighten(@accentColor, 15%);
			}
        }
    }
}
.recurringDonationsPaymentSuccessView
{
    .checkout-view();
    &__header
    {
        .checkout-header();
        margin-bottom: @remCalc15;
    }
    &__subHeader
    {
        .panel-title();
        .padding();
    }
    &__details
    {
        margin-top: 0;
        margin-left: 0;
        margin-right: 0;
        background-color: @panelBgColour;
        position: relative;
        overflow: hidden;
        padding: @remCalc20;
        &::after
        {
            background-color: darken(@panelBgColour, 20%);
            .ripple();
        }
        .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;
                    }
                }
            }
        }
    }
}
@gliRaffleActionsHeight: @remCalc74;
.gliRaffleItemPreviewView
{
	.list-item__under-image__subtitle-row,
    .list-item__under-image__subtitle-row
    {
        display: none;
    }
    .itemPreviewView__bid-info__time-left
    {
        .padding();
        margin: 0;
    }
    .itemPreviewView__right {
        @media @large-up {
            width: @remCalc612;
        }
    }
    .bundles {
        padding: @remCalc16;
        .bundle-items()
    }
    .selected-bundles {
        .selected-bundles();
    }
	.winners-panel {
		display: none;
	}
}
.layout--minimum
{
    .gliRaffleView
    {
        //.bidding-minimum-view(@gliRaffleActionsHeight);
        &__actions
        {
            &--fixed
            {
                .bidding-minimum-actions();
            }
        }
    }
}
.suspendedReason {
    &__header {
        	color: @accentFadedColor;
    }
}
.free-ticket {
	margin: 1rem 0;
	border-radius: @remCalc10;
	border: 1px solid #989898;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	h3 {
		color: #5e3764;
	}
	p {
		color: #989898;
		font-size: 12px;
		padding-right: 1rem;
	}
	button {
		border-radius: @remCalc10;
		margin: 0;
	}
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .gliRaffleView
        {
            .bidding-minimum-view-constant(@gliRaffleActionsHeight);
            &__actions
            {
                &--fixed
                {
                    .bidding-minimum-actions-constant();
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .gliRaffleView
        {
            .bidding-minimum-view-env(@gliRaffleActionsHeight);
            &__bid-form
            {
                &--fixed
                {
                    .bidding-minimum-actions-env();
                }
            }
        }
    }
}
@confirmRaffleActionsHeight: @remCalc74;
.confirmGliRafflePurchaseView
{
  .bidding-view();
  &__header
  {
      .bidding-header();
  }
  &__body
  {
      .bidding-body();
      .padding();
      &__title
      {
        .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
      &__bid-info
      {
          .bidding-info();
      }
      &__bid-actions
      {
          .bidding-actions();
          margin-top: @remCalc40;
          &__button
          {
              width: auto;
          }
      }
  }
}
.layout--minimum
{
    .confirmRafflePurchaseView
    {
        //.bidding-minimum-view(@confirmRaffleActionsHeight);
        &__body
        {
            &__bid-actions
            {
                &--fixed
                {
                    .bidding-minimum-actions();
                }
            }
        }
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .confirmRafflePurchaseView
        {
            .bidding-minimum-view-constant(@confirmRaffleActionsHeight);
            &__body
            {
                &__bid-actions
                {
                    &--fixed
                    {
                        .bidding-minimum-actions-constant();
                    }
                }
            }
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--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}" );
                }
            }
        }
    }
}
.gliRafflePurchaseErrorView
{
  .bidding-view();
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
  }
}
.layout--minimum
{
    .rafflePurchaseErrorView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .rafflePurchaseErrorView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .rafflePurchaseErrorView
        {
            .bidding-minimum-view-env();
        }
    }
}
.gliRafflePurchaseSuccessView
{
  .bidding-view();
  &__header
  {
    .bidding-header();
  }
  &__body
  {
      .bidding-body();
      &__title
      {
          .bidding-title();
      }
      &__message
      {
          .bidding-message();
      }
      &__social
      {
          .bidding-social();
      }
      &__actions
      {
          .bidding-actions();
          &__button
          {
             width: auto;
          }
      }
  }
}
.layout--minimum
{
    .rafflePurchaseSuccessView
    {
        .bidding-minimum-view();
    }
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .rafflePurchaseSuccessView
        {
            .bidding-minimum-view-constant();
        }
    }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .layout--minimum
    {
        .rafflePurchaseSuccessView
        {
            .bidding-minimum-view-env();
        }
    }
}
.add-or-remove-items-list()
{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    column-gap: @remCalc8;
    row-gap: @remCalc16;
    margin: 0;
    @media @medium-up
    {
        grid-template-columns: repeat(2, ~"calc(50% - @{remCalc4})");
    }
}
.add-or-remove-item (@parent: "")
{
    @moreInfoIcon: ~'.@{parent}__more_info__icon';
    .border-radius(@remCalc12);
    border: @remCalc1 solid @lightGrey;
    list-style-type: none;
    &__header {
        padding: @remCalc16 @remCalc16 @remCalc10 @remCalc16;
        .display-flex(column, nowrap, flex-start, flex-start);
        border-bottom: @remCalc1 solid @lightGrey;
        gap: @remCalc10;
        &__title {
            .display-flex(row, nowrap, flex-start, flex-start);
            width: 100%;
        }
        &__subtitle {
            .display-flex(row, nowrap, space-between, center);
            width: 100%;
            gap: @remCalc10;
        }
    }
    &__title {
        color: @accentColor;
        font-size: @remCalc16;
        font-weight: bold;
        margin-bottom: @remCalc5;
    }
    &__subtitle {
        color: @mediumGrey ;
        font-size: @remCalc14;
        text-align: left;
    }
    &__number-available {
        .display-flex(column, nowrap, flex-start, flex-start);
        padding: @remCalc8 @remCalc16 @remCalc10 @remCalc16;
        &__value {
            font-size: @remCalc14;
            font-weight: bold;
            color: @accentFadedColor;
        }
    }
    &__details {
        .display-flex(column, nowrap, flex-start, flex-start);
        padding: @remCalc8 @remCalc16 @remCalc10 @remCalc16;
    }
    &__more-info {
        .display-flex(row, nowrap, flex-start, center);
        color: @accentFadedColor;
        font-size: @remCalc12;
        text-decoration: none;
        margin: 0;
        &__icon {
            margin-left: @remCalc5;
            width: @remCalc14;
            height: @remCalc14;
            &--extended {
                transform: rotate(180deg);
            }
            svg {
                fill: @accentFadedColor;
            }
        }
    }
    &__description {
        display: none;
        text-align: left;
        font-size: @remCalc14;
        word-break: break-word;
        margin-top: @remCalc10;
    }
    &__actions {
        .display-flex(row, nowrap, flex-start, center);
        gap: @remCalc8;
        &__button {
            margin: 0;
            padding: 0;
        }
    }
    &__quantity {
        min-width: @remCalc32;
        height: @remCalc40;
        width: @remCalc15;
        margin-bottom: 0;
        text-align: center;
    }
}
.addOrRemoveItem
{
    .add-or-remove-item()
}
.addOrRemoveItemsList {
    .add-or-remove-items-list()
}
.guestConfirmationView
{
    &__header
    {
        font-size: @remCalc24;
        padding: @remCalc15 0;
        color: @accentColor;
        font-weight: bold;
        text-align: center;
    }
    &__message
    {
    }
    &__actions
    {
        margin-top: @remCalc50;
        .display-flex(row, nowrap, center, center);
        gap: @remCalc40;
        &__button
        {
            .border-radius( @remCalc10);
            width: auto;
        }
    }
    a {
        .link();
    }
    .digits-wrapper {
        width: 70%;
        margin: 0 auto;
    }
}
.dialog
{
    &__content
    {
        .border-radius( @remCalc10);
    }
    .guestConfirmationView
    {
        max-width: @remCalc500;
        min-width: @remCalc288;
        width: 100%;
        padding-bottom: 0;
        padding-top: 0;
    }
}
.event-summary()
{
    margin-top: @remCalc20;
    .padding();
    .display-flex(row, wrap, flex-start, flex-start);
    gap: @remCalc30;
    &__item {
        .display-flex(row, nowrap, flex-start, flex-start);
        gap: @remCalc20;
    }
    &__label-section {
        .display-flex(column, nowrap, flex-start, flex-start);
        gap: @remCalc5;
    }
    &__icon {
        width: @remCalc27;
        height: @remCalc27;
        svg {
            fill: @accentColor;
        }
    }
    &__label {
        &__header {
            font-size: @remCalc16;
            font-weight: bold;
            color: @darkGrey;
        }
        &__value {
            font-size: @remCalc16;
            color: @mediumGrey;
        }
    }
}
.eventPageView
{
   position: relative;
   .display-flex(row, wrap, flex-start, flex-start);
   margin: 0 auto;
   width: 100%;
   .panel {
        min-height: unset !important;
        max-width: unset !important;
        width: 100% !important;
        .panel__header__sub {
            padding-bottom: @remCalc20;
        }
   }
   &__left {
       .display-flex(column, wrap, flex-start, flex-start);
       width: 100%;
       .set-flex(1);
       .panel {
        border-radius: 0;
       }
       .list-item__under-image {
            .padding();
            padding-top: @remCalc24;
        }
        @media @large-up
        {
            gap: @remCalc24;
            .panel {
                .border-radius(@remCalc24);
            }
        }
   }
   &__right {
      .display-flex(column, wrap, flex-start, flex-start);
      width: 100%;
      @media @large-up
      {
        gap: @remCalc24;
        margin-top: @remCalc64;
      }
   }
   @media @large-up
   {
        .display-flex(row, nowrap, flex-start, flex-start);
        .padding();
        gap: @remCalc40;
        &__left {
            width: @remCalc563;
        }
        &__right {
            width: @remCalc412;
        }
   }
   @media @xlarge-up
   {
        padding: 0;
        width: @remCalc1352;
        &__left {
            width: @remCalc900;
        }
   }
   &__header
   {
      width: 100%;
      .bidding-list-item();
   }
    &__summary
    {
        .event-summary();
    }
    &__itinerary
    {
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 0;
        display: table;
        &__item {
            display: table-row;
            position: relative;
            margin: 0;
            padding-bottom: 1em;
            padding-left: @remCalc40;
            list-style-type: none;
            > * {
                display: table-cell;
            }
            &:last-child {
                > :first-child {
                    &::before {
                        display: none;
                    }
                }
            }
        }
        &__bullet {
            width: @remCalc30;
            position: relative;
            &::before {
                content: '';
                background-color: @lightGrey;
                position: absolute;
                bottom: 0;
                top: 0;
                left: @remCalc6;
                width: @remCalc3;
            }
            &::after {
                content: '';
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='%23F0F1F2' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
                position: absolute;
                left: @remCalc-6;
                top: @remCalc-6;
                height: @remCalc26;
                width: @remCalc26;
            }
        }
        &__time-from,
        &__time-to,
        &__time-separator {
            width: 1%;
            white-space: nowrap;
            color: @darkGrey;
            font-weight: bold;
            position: relative;
            top: @remCalc-6;
        }
        &__time-separator {
            padding-left: @remCalc5;
            padding-right: @remCalc5;
        }
        &__name {
            width: auto;
            padding-left: @remCalc30;
            color: @darkGrey;
            font-weight: normal;
            position: relative;
            top: @remCalc-6;
        }
    }
    &__host {
        .display-flex(row, nowrap, flex-start, center);
        gap: @remCalc10;
        &__picture {
            border-radius: 50%;
            width: @remCalc40;
            height: @remCalc40;
        }
        &__name {
            color: @darkGrey;
            font-size: @remCalc18;
        }
        &__action {
        }
    }
    &__sponsor {
        list-style-type: none;
        margin: 0;
        &__picture {
            width: 100%;
        }
        &__type {
            margin-top: @remCalc10;
            font-weight: bold;
        }
        &__name {
            color: @darkGrey;
            font-size: @remCalc18;
        }
    }
    &__tickets,
    &__hosts,
    &__sponsors
    {
        margin: 0;
        padding: 0;
        .display-flex(column, wrap, flex-start, flex-start);
        gap: @remCalc15;
        margin-bottom: @remCalc20;
    }
    &__ticket {
        list-style-type: none;
        margin: 0;
        width: 100%;
        .display-flex(row, nowrap, flex-start, center);
        gap: @remCalc20;
        &__icon {
            width: @remCalc32;
            height: @remCalc32;
            .border-radius(50%);
            .display-flex(row, nowrap, center, center);
            svg {
                fill: @accentFadedColor;
            }
            background-color: fade(@accentFadedColor, 8%);
        }
        &__title {
            color: @darkGrey;
            font-size: @remCalc18;
        }
    }
    .google-maps-panel {
        .padding();
        .panel__content {
            padding-left: 0 !important;
            padding-right: 0 !important;
            position: relative;
            padding-bottom: 75%; // This is the aspect ratio
            height: 0;
            overflow: hidden;
            iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100% !important;
                height: 100% !important;
              }
        }
        @media @large-up
        {
            padding-left: 0;
            padding-right: 0;
            padding-bottom: 0;
        }
      }
}
.sponsorsPageView {
  &__sponsor-types {
    gap: @remCalc24;
    .display-flex(column, nowrap, flex-start, flex-start);
  }
  &__sponsor-type {
    padding: @remCalc24 @remCalc16;
    border: @remCalc1 solid @lightGrey;
    .border-radius(@remCalc16);
    width: 100%;
  }
  &__sponsor {
    .display-flex(row, nowrap, flex-start, center);
    width: 100%;
    padding: @remCalc16;
    border: @remCalc1 solid @lightGrey;
    .border-radius(@remCalc8);
    gap: @remCalc16;
    &__picture {
      width: @remCalc160;
      height: @remCalc160;
      align-self: start;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
    }
    &__name {
      color: @darkGrey;
      font-size: @remCalc18;
    }
    &__description {
      color: @mediumGrey;
      font-size: @remCalc18;
    }
    &__name-section {
      .display-flex(column, nowrap, flex-start, flex-start);
      .set-flex(1);
    }
    &__actions {
    }
  }
  &__tickets,
  &__hosts,
  &__sponsors {
    margin: 0;
    padding: 0;
    .display-flex(column, wrap, flex-start, flex-start);
    gap: @remCalc15;
    margin-bottom: @remCalc20;
  }
  @media @medium-down {
    &__sponsor {
      .display-flex(column, nowrap, flex-start, center);
      &__picture {
        width: 100%;
      }
    }
  }
}
.sponsors-top {
  padding-top: @remCalc20;
  width: 100%;
  &:empty {
    display: none;
  }
  &__carousel {
    position: relative;
    width: 100%;
    height: @remCalc120;
    padding: @remCalc16 @remCalc16 0;
    @media @medium-up {
      height: @remCalc120;
      padding: @remCalc24 @remCalc24 0;
    }
    &__slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .display-flex(row, nowrap, center, center);
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
      pointer-events: none;
      &--active {
        opacity: 1;
        pointer-events: auto;
      }
    }
  }
  &__item-wrapper {
    .display-flex(row, nowrap, center, center);
  }
  &__item {
    display: block;
    .border-radius(@remCalc8);
    overflow: hidden;
    transition: opacity 0.2s ease-in-out;
    &:hover {
      opacity: 0.8;
    }
    &__logo {
      display: block;
      width: auto;
      height: auto;
      min-width: @remCalc160;
      min-height: @remCalc120;
      max-width: @remCalc160;
      max-height: @remCalc120;
      object-fit: contain;
    }
  }
}
.priceRange
{
    min-width: 90vw;
    overflow: hidden;
    @media @medium-up
    {
        margin: 0 auto;
        min-width: @remCalc300;
    }
    &__header
    {
        font-size: @remCalc16;
        color: @accentColor;
        font-weight: bold;
        padding: @remCalc20;
        border-bottom: @remCalc1 solid @lightGrey;
    }
    &__content
    {
        width: 90vw;
        padding: @remCalc20;
        overflow: visible;
        @media @medium-up
        {
            width: @remCalc350;
        }
    }
    &__footer
    {
        padding: @remCalc20;
        border-top: @remCalc1 solid @lightGrey;
        text-align: right;
        &__button
        {
            .link();
            text-decoration: none;
        }
    }
    &__label
    {
        color: @darkGrey;
        font-size: @remCalc14;
        margin-bottom: @remCalc10;
    }
    &__input-container
    {
        padding: 0 @remCalc10;
        .bs-tooltip {
            .tooltip-inner {
                background: @accentFadedColor;
                .border-radius(@remCalc100);
                font-size: @remCalc12;
                color: @accentFontColor;
                padding: 0 @remCalc6;
                min-width: @remCalc25;
                text-align: center;
            }
        }
        .bs-tooltip-top {
            .arrow {
                border-top-color: @accentFadedColor !important;
            }
        }
        .bs-tooltip-bottom {
            .arrow {
                border-bottom-color: @accentFadedColor !important;
            }
        }
        .slider-handle {
            background: @accentFadedColor;
            border: @remCalc2 solid #fff;
        }
        .slider-selection {
            background: @accentFadedColor;
        }
    }
    &__legend
    {
        margin-top: @remCalc10;
        width: 100%;
        .display-flex(row, nowrap, space-between, center);
    }
}
@itemFormHeight: @remCalc85;
.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;
	}
}
.dropDown() {
	&-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border: @remCalc1 solid #e0e0e0;
		border-radius: @remCalc8;
		padding: @remCalc12 @remCalc16;
		cursor: pointer;
	}
	&-selected {
		.sectionTitle();
		font-size: @remCalc16;
		font-weight: bold;
	}
	&-icon {
		content: url("data:image/svg+xml; utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368' stroke='%235f6368' stroke-width='40'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
	}
	&-list {
		display: none;
		list-style: none;
		margin: 0;
		padding: 0;
		background-color: #fff;
		border: @remCalc1 solid #e0e0e0;
		border-radius: @remCalc8;
		margin-top: @remCalc4;
		overflow: hidden;
	}
	&-item {
		padding: @remCalc12 @remCalc16;
		cursor: pointer;
		font-size: @remCalc14;
		color: #4a4a4a;
		transition: background-color 0.3s ease;
	}
	&-item:hover {
		background-color: #f5f5f5;
	}
}
.sectionTitle() {
	font-family: 'Montserrat';
	text-fill-color: @darkGrey;
}
.leftSection() {
	.display-flex(column, wrap, flex-start, flex-start);
	width: 100%;
	.set-flex(1);
	.panel {
		border-radius: 0;
		&__header {
			&.no-border-bottom {
				border-bottom: 0px;
			}
			&.border-top {
				border-top: @remCalc1 solid @lightGrey;
			}
		}
		&__title {
			.sectionTitle();
		}
		&__content {
			&.no-padding-top {
				padding-top: 0px;
			}
		}
	}
	&__funds_list {
		.dropDown();
		&-info {
			display: flex;
			align-items: flex-start;
			margin-top: @remCalc12;
			font-size: @remCalc14;
			color: #6c757d;
			svg {
				fill: @accentColor;
			}
			.text {
				margin: 3px 0 0 3px;
			}
		}
	}
	&__amounts_section {
		padding-bottom: @remCalc20;
		border-bottom: @remCalc1 solid @lightGrey;
		width:100%;
		.donation-tabs {
			display: flex;
			background-color: #F2F2F2;
			border-radius: @remCalc14;
			padding: @remCalc4;
			justify-content: center;
			gap: @remCalc8;
			box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
		}
		.tab-button {
			.sectionTitle();
			flex: 1;
			padding: @remCalc10 @remCalc20;
			font-size: @remCalc20;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
			font-weight: bold;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
		}
		.tab-button.active {
			color: lighten(@accentColor, 15%);
			background-color: #ffffff;
			box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15);
			border-radius: @remCalc12;
		}
		.tab-content {
			margin-top: @remCalc20;
			border-top: @remCalc1 solid @lightGrey;
		}
		.tab-panel {
			display: block;
			animation: fadeIn 0.3s ease-in-out;
			padding-top: @remCalc20;
			.recurring-donation {
				&__frequency_list {
					.dropDown();
				}
				&__start-date,
				&__end-date {
					display: inline-block;
					width: 49%;
					vertical-align: top;
					transition: opacity 0.3s ease, visibility 0.3s ease;
					.date {
						margin-top: @remCalc16;
					}
				}
				&__end-date {
					visibility: hidden;
					margin-left: @remCalc10;
					opacity: 0;
					display: none;
				}
				&__end-date.visible {
					visibility: visible;
					opacity: 1;
					display: inline-block;
				}
				&__start-date.full-width {
					width: 100%;
				}
				&__start-date .date,
				&__end-date .date {
					min-height: @remCalc150;
					.header {
						font-family: 'Montserrat';
						-webkit-text-stroke: 0.5px @mediumGrey;
						text-fill-color: @mediumGrey;
						font-size: @remCalc15;
						font-weight: bold;
					}
					.dateInputRow {
						margin: @remCalc10 @remCalc0 @remCalc0 @remCalc0;
						.input
						{
							&__field
							{
							    font-family: 'Montserrat';
							    font-size: @remCalc14;
							}
						}
					}
					.tooltipEndDate {
						bottom: @remCalc0;
						top: @remCalc20;
						background-image: none;
						svg {
							fill: @accentColor;
						}
					}
					.endDateLabel {
						position: absolute;
						font-size: @remCalc14;
						color: #6c757d;
						left: @remCalc50;
						top: @remCalc22;
					}
					.litecheckbox label:after {
						content: '';
						border: @remCalc2 solid #34C759;
						border-top: none;
						border-right: none;
					}
					.input__icon--tick {
						fill: #34C759;
					}
				}
			}
		}
		@keyframes fadeIn {
			from {
				opacity: 0;
				transform: translateY(10px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}
	[type=button] {
		padding-left: @remCalc15;
		padding-right: @remCalc15;
		margin-top: @remCalc25;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 0;
		width: 100%;
		background-color: @accentColor;
		&:focus {
			background-color: lighten(@accentColor, 10%);
		}
		&.disabled:hover {
			background-color: lighten(@accentColor, 15%);
		}
	}
	@media @large-up {
		gap: @remCalc24;
		.panel {
			.border-radius(@remCalc24);
		}
	}
}
.campaignPledgeItemView {
	position: relative;
	.display-flex(row, wrap, flex-start, flex-start);
	margin: 0 auto;
	width: 100%;
	.panel {
		min-height: unset !important;
		max-width: unset !important;
		width: 100% !important;
	}
	&__header {
		padding: @remCalc22 @remCalc24 @remCalc22 @remCalc24;
		&__title {
			font-family: 'Montserrat';
			font-weight: bolder;
			font-size: @remCalc32;
			margin-bottom: @remCalc0;
			color: @accentColor;
			-webkit-text-stroke: 0.5px @accentColor;
			text-fill-color: @accentColor;
		}
	}
	&__left {
		.leftSection();
	}
	&__right {
		.display-flex(column, wrap, flex-start, flex-start);
		width: 100%;
		.panel {
			padding-bottom: 0px;
			&.padding-bottom {
				padding-bottom: @remCalc16;
			}
			&__title {
				.sectionTitle();
			}
			&__content {
				padding-top: @remCalc12;
				.raised-amount {
					font-size: @remCalc40;
					color: @accentColor;
					-webkit-text-stroke: 2.5px @accentColor;
					text-fill-color: @accentColor;
					font-weight: bold;
					letter-spacing: 2px;
				}
				.progress-bar {
					width: 100%;
					background-color: #e0e0e0;
					border-radius: @remCalc10;
					overflow: hidden;
					height: @remCalc8;
					margin: @remCalc10 0;
					position: relative;
				}
				.progress-fill {
					background: linear-gradient(90deg, lighten(@accentColor, 15%), lighten(@accentColor, 30%));
					height: 100%;
					width: 0%;
					border-radius: @remCalc10 0 0 @remCalc10;
					transition: width 1s ease-in-out;
					filter: brightness(1.3);
				}
				.target,
				.supporters {
					.sectionTitle();
					font-weight: bold;
					letter-spacing: 0.5px;
					span {
						font-weight: bold;
					}
				}
				.target {
					text-align: right;
				}
			}
		}
		@media @large-up {
			gap: @remCalc24;
		}
	}
	@media @large-up {
		.display-flex(row, nowrap, flex-start, flex-start);
		padding-left: @remCalc70;
		padding-right: @remCalc70;
		gap: @remCalc40;
		&__left {
			width: @remCalc855;
		}
		&__right {
			width: @remCalc390;
		}
	}
    @media @medium-only {
        .itemViewRightPanels {
            display: flex;
            flex: 1 0 100%;
        }
    }
	@media @xlarge-up {
		padding: 0;
		width: @remCalc1352  !important;
		&__left {
			width: @remCalc900;
		}
	}
	&__header {
		width: 100%;
		.bidding-list-item();
	}
	&__photo {
		position: relative;
		width: 100%;
		.padding();
		@media @xlarge-up {
			padding-top: @remCalc24;
		}
	}
	&__description,
	{
	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;
}
.slick-dots {
	position: relative;
	li {
		&.slick-active button:before {
			background-color: @accentColor;
		}
	}
}
}
.touch {
	.campaignPledgeItemView {
		.list-item {
			&--preview {
				.list-item {
					&__wrapper {
						&:hover {
							.drop-shadow(0px, 0px, 0px, 0px, 0);
						}
					}
				}
			}
		}
	}
}
.layout--minimum {
	.campaignPledgeItemView {
		//.bidding-minimum-view(@itemFormHeight);
		&__pledge-form {
			&--fixed {
				.bidding-minimum-actions();
			}
		}
	}
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
	.layout--minimum {
		.campaignPledgeItemView {
			.bidding-minimum-view-constant(@itemFormHeight);
			&__pledge-form {
				&--fixed {
					.bidding-minimum-actions-constant();
				}
			}
		}
	}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	.layout--minimum {
		.campaignPledgeItemView {
			.bidding-minimum-view-env(@itemFormHeight);
			&__pledge-form {
				&--fixed {
					.bidding-minimum-actions-env();
				}
			}
		}
	}
}
.amountsList {
	position: relative;
	.list {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: @remCalc24;
		@media @medium-up {
			grid-template-columns: repeat(2, 1fr);
		}
		@media @xlarge-up {
			grid-template-columns: repeat(2, 1fr) !important;
		}
	}
	.next-loader {
		height: @remCalc30;
		display: none;
		position: relative;
		.loader {
			display: block;
			&:before {
				top: 0;
			}
		}
	}
	.no-data {
		.display-flex(row, wrap, center, center);
		width: 100%;
	}
}
.touch {
	.list-item {
		&__wrapper {
			&:hover {
				.add-drop-shadow(false);
			}
		}
	}
}
@listItemBgColor: @panelBgColour;
@listItemFontColor: @fontColourForPanel;
@listItemPreviewFontColor: @colorOnBackground;
.amount-list-item {
	.display-flex(column, nowrap, center, center);
	margin: 0;
	&__wrapper {
		width: 100%;
		height: 100%;
		margin: 0;
		background-color: @listItemBgColor;
		cursor: pointer;
		border-radius: @remCalc24;
		position: relative;
		overflow: hidden;
		-webkit-user-select: text !important;
		user-select: text !important;
		-ms-user-select: text !important;
		.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();
			}
		}
		&.selected {
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
		}
	}
	&__details {
		.amount-list-item {
			display: block;
			padding: @remCalc16;
		}
		.amount-list-item__header {
			display: flex;
			align-items: center;
		}
		.amount-list-item__header .radio {
			width: @remCalc20;
			height: @remCalc20;
			border-radius: 50%;
			background-color: transparent;
			border: @remCalc2 solid @mediumGrey;
			margin-right: @remCalc10;
		}
		.amount-list-item__header .radio::before {
			content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224px%22%20fill%3D%22%2334C759%22%3E%3Cpath%20d%3D%22m424-296%20282-282-56-56-226%20226-114-114-56%2056%20170%20170Zm56%20216q-83%200-156-31.5T197-197q-54-54-85.5-127T80-480q0-83%2031.5-156T197-763q54-54%20127-85.5T480-880q83%200%20156%2031.5T763-763q54%2054%2085.5%20127T880-480q0%2083-31.5%20156T763-197q-54%2054-127%2085.5T480-80Z%22%2F%3E%3C%2Fsvg%3E");
			display: none;
		}
		.amount-list-item__header .title {
			font-family: 'Montserrat';
			-webkit-text-stroke: 0.5px @mediumGrey;
			text-fill-color: @mediumGrey;
			font-size: @remCalc15;
			font-weight: bold;
			strong {
				-webkit-text-stroke: 0.5px @darkGrey;
				text-fill-color: @darkGrey;
			}
		}
		.amount-list-item__content .description {
			font-size: @remCalc14;
			color: @mediumGrey;
			margin-bottom: 0px;
			p {
				margin-bottom: 0px;
			}
		}
		.radio-input {
			display: none;
		}
		.radio-input:checked+.amount-list-item .radio {
			border: 0px;
		}
		.radio-input:checked+.amount-list-item .radio::before {
			display: block;
			margin-top: -2px;
		}
	}
	&__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;
		}
	}
	&--no-image {
		.amount-list-item__image
		{
			height: 0px !important;
		}
	}
	&__custom-amount
	{
		padding-left: 1rem;
		.amount-wrapper
		{
			border: @remCalc1 solid @mediumGrey;
			.border-radius(@remCalc12);
		}
		.currency-wrapper
		{
			padding: @remCalc11 @remCalc3 @remCalc11 @remCalc11;
		}
		.input-wrapper
		{
			.display-flex(row, nowrap, center, center);
		}
		.currency
		{
			font-weight: bold;
			font-size: @remCalc20;
			line-height: 100%;
			margin-bottom: 0;
			display: block;
			.display-flex(column, nowrap, center, center);
		}
		input
		{
			background: transparent;
			font-weight: bold;
			border: 0px none;
			margin: 0;
			width: 100%;
			padding-right: @remCalc10;
			line-height: 100%;
			padding-top: 0rem;
			padding-bottom: 0rem;
			padding-left: 0rem;
			font-size: @remCalc20;
			.placeholder( @mediumGrey );
			&::-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: @remCalc24;
			}
		}
		small.error
		{
			position: absolute;
			margin: 0 !important;
			left: @remCalc-18 !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: #ff0000;
			}
			input
			{
				color: #ff0000;
			}
			&::-webkit-input-placeholder
			{
				color: #ff0000;
			}
			&:-moz-placeholder
			{
				color: #ff0000;
			}
			&::-moz-placeholder
			{
				color: #ff0000;
			}
			&:-ms-input-placeholder
			{
				color: #ff0000;
			}
		}
	}
}
.guestCommentInputView {
	&__header {
		.sectionTitle();
		font-size: @remCalc20;
		color: @accentColor;
		-webkit-text-stroke: 0.5px @accentColor;
		text-fill-color: @accentColor;
	}
	.text-area
    {
		&__field
        {
			font-family: 'Montserrat';
			font-size: @remCalc14;
		}
	}
}
.layout--minimum {
	.guestCommentInputView {
		.bidding-minimum-view();
	}
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
	.layout--minimum {
		.guestCommentInputView {
			.bidding-minimum-view-constant();
		}
	}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	.layout--minimum {
		.guestCommentInputView {
			.bidding-minimum-view-env();
		}
	}
}
.anonymousOptionView {
	display: flex;
	align-items: center;
	border-bottom: @remCalc1 solid @lightGrey;
	padding-bottom: @remCalc20;
	&__col1 {
		.switch {
            width: @remCalc50;
            input:checked + .slider:before
            {
                -webkit-transform: translateX(@remCalc25);
                -ms-transform: translateX(@remCalc25);
                transform: translateX(@remCalc25);
            }
		}
	}
	&__col2 {
		padding-left: @remCalc14;
	}
	&__header {
		.sectionTitle();
		font-size: @remCalc16;
		color: @accentColor;
		-webkit-text-stroke: @remCalc1 @accentColor;
		text-fill-color: @accentColor;
	}
	&__label {
		font-size: @remCalc14;
		margin-top: @remCalc5;
	}
}
.layout--minimum {
	.anonymousOptionView {
		.bidding-minimum-view();
	}
}
@supports (padding-bottom: constant(safe-area-inset-bottom)) {
	.layout--minimum {
		.anonymousOptionView {
			.bidding-minimum-view-constant();
		}
	}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	.layout--minimum {
		.anonymousOptionView {
			.bidding-minimum-view-env();
		}
	}
}
.fundsAndAmountsView {
	.leftSection();
	.campaignPledgeItemView__left__funds_section {
		width: 100%;
	}
    .campaignPledgeItemView__left__amounts_section .tab-content {
        margin-bottom: @remCalc6;
    }
	@media @large-up {
		gap: unset;
	}
    &.home_page {
        .amountsList {
            .list {
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                gap: @remCalc24;
                @media @medium-up
                {
                   grid-template-columns: repeat(2, 1fr);
                }
                @media @large-up
                {
                  grid-template-columns: repeat(3, 1fr);
                }
                @media @xlarge-up
                {
                  grid-template-columns: repeat(4, 1fr);
                }
            }
        }
    }
}
.layout__content {
	&:has(.tables-list-view) {
		padding-top: @remCalc0;
	}
}
.responsiveVerMargins() {
	margin: 0 @remCalc28 @remCalc16;
	@media @medium-down {
		margin: 0 @remCalc16 @remCalc16;
	}
}
.tables-list-view {
	display: flex;
	flex-direction: column;
	.tables-list-wrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.tables-list__title {
			font-size: @remCalc20;
			font-weight: bold;
			text-align: center;
			padding: @remCalc22 @remCalc0;
			-webkit-text-stroke: 0.5px @accentColor;
			color: @accentColor;
			cursor: default;
		}
		hr {
			.responsiveVerMargins();
		}
		.a-search {
			position: relative;
			.responsiveVerMargins();
			input {
				width: 100%;
				padding: @remCalc8 @remCalc40 @remCalc8 @remCalc16;
				border: @remCalc1 solid #ccc;
				font-size: @remCalc16;
				background: #fff;
			}
			svg {
				position: absolute;
				left: unset;
				right: @remCalc10;
				top: 50%;
				transform: translateY(-50%);
				width: @remCalc20;
				height: @remCalc20;
				fill: #666;
			}
		}
		.tables-list {
			overflow-y: auto;
			.responsiveVerMargins();
			margin-bottom: @remCalc0;
			.no-data {
                text-align: center;
                font-weight: bold;
            }
		}
		.tables-list-item {
			display: flex;
			align-items: center;
			padding: @remCalc24 @remCalc16;
			background: #fff;
			border-radius: @remCalc12;
			margin-bottom: @remCalc10;
			box-shadow: 0 @remCalc2 @remCalc4 rgba(0, 0, 0, 0.1);
			font-weight: bold;
			cursor: pointer;
			border: @remCalc1 solid #ccc;
			
			opacity: 0;
            transform: translateY(@remCalc10);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
		}
		.tables-list-item:hover {
			background: #f3f3f3;
			transform: scale(.995);
		}
		.tables-list-item__wrapper {
			display: flex;
			justify-content: space-between;
			width: 100%;
			-webkit-text-stroke: 0.3px @darkGrey;
			color: @darkGrey;
			.tables-list-item__name {}
			.tables-list-item__number {}
		}
	}
	.fixed-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: @remCalc20;
		text-align: center;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		&.smooth-slide {
            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
		.unassign-table-button {
            background-color: #fff;
			font-size: @remCalc16;
			font-weight: bold;
			-webkit-text-stroke: 0.3px @accentFadedColor;
            color: @accentFadedColor;
			padding: @remCalc12;
			margin: 0px;
			width: 100%;
			border: 1.6px solid @accentFadedColor;
			border-radius: @remCalc8;
			cursor: pointer;
		}
	}
}
.layout__content {
	&:has(.guests-list-view) {
		padding-top: @remCalc0;
	}
}
.responsiveVerMargins() {
	margin: 0 @remCalc28 @remCalc16;
	@media @medium-down {
		margin: 0 @remCalc16 @remCalc16;
	}
}
.guests-list-view {
	display: flex;
	flex-direction: column;
	.guests-list-wrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.guests-list__title, .guests-list__table-name {
			font-size: @remCalc20;
			font-weight: bold;
			text-align: center;
			padding: @remCalc22 @remCalc0 @remCalc6;
			-webkit-text-stroke: 0.5px @accentColor;
			color: @accentColor;
			cursor: default;
		}
        .guests-list__table-name {
            font-size: @remCalc14;
            padding: @remCalc0 @remCalc0 @remCalc16;
        }
		hr {
			.responsiveVerMargins();
		}
		.a-search {
			position: relative;
			.responsiveVerMargins();
			input {
				width: 100%;
				padding: @remCalc8 @remCalc40 @remCalc8 @remCalc16;
				border: @remCalc1 solid #ccc;
				font-size: @remCalc16;
				background: #fff;
			}
			svg {
				position: absolute;
				left: unset;
				right: @remCalc10;
				top: 50%;
				transform: translateY(-50%);
				width: @remCalc20;
				height: @remCalc20;
				fill: #666;
			}
		}
		.guests-list {
			overflow-y: auto;
			.responsiveVerMargins();
			margin-bottom: @remCalc0;
			.no-data {
                text-align: center;
                font-weight: bold;
            }
		}
		.guests-list-item {
			display: flex;
			align-items: center;
			padding: @remCalc24 @remCalc16;
			background: #fff;
			border-radius: @remCalc12;
			margin-bottom: @remCalc10;
			box-shadow: 0 @remCalc2 @remCalc4 rgba(0, 0, 0, 0.1);
			font-weight: bold;
			cursor: pointer;
			border: @remCalc1 solid #ccc;
			
			opacity: 0;
            transform: translateY(@remCalc10);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
		}
		.guests-list-item:hover {
			background: #f3f3f3;
			transform: scale(.995);
		}
		.guests-list-item__wrapper {
			display: flex;
			justify-content: space-between;
			width: 100%;
			-webkit-text-stroke: 0.3px @darkGrey;
			color: @darkGrey;
			.guests-list-item__name {}
			.guests-list-item__number {}
		}
	}
	.fixed-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: @remCalc20;
		text-align: center;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		&.smooth-slide {
            transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
        }
		.register-guest-button {
            background-color: #fff;
			font-size: @remCalc16;
			font-weight: bold;
			-webkit-text-stroke: 0.3px @accentFadedColor;
            color: @accentFadedColor;
			padding: @remCalc12;
			margin: 0px;
			width: 100%;
			border: 1.6px solid @accentFadedColor;
			border-radius: @remCalc8;
			cursor: pointer;
		}
	}
}
@media @medium-down {
    .layout__content {
    	&:has(.pin-container) {
    		padding-top: @remCalc138;
    	}
    }
}
.pin-view {
	text-align: center;
	.pin-title {
		font-size: @remCalc20;
		font-weight: bold;
		text-align: center;
		-webkit-text-stroke: 0.5px @accentColor;
		color: @accentColor;
		margin-bottom: @remCalc14;
	}
	.pin-error {
		-webkit-text-stroke: 0.5px @accentColor;
		color: @accentColor;
		font-size: @remCalc14;
		min-height: @remCalc20;
		margin-bottom: @remCalc16;
	}
	.pin-dots {
		display: flex;
		justify-content: center;
		margin-bottom: @remCalc40;
		.pin-dot {
			width: @remCalc12;
			height: @remCalc12;
			margin: 0 @remCalc5;
			background: #ccc;
			border-radius: 50%;
			transition: background 0.3s;
			&.filled {
				background: @accentFadedColor;
			}
		}
	}
	.pin-pad {
		display: grid;
		justify-content: center;
		grid-template-columns: repeat(3, 1fr);
		gap: @remCalc30;
		width: @remCalc200;
		margin: auto;
		button {
			all: unset;
			cursor: pointer;
			width: @remCalc60;
			height: @remCalc60;
			border-radius: 50%;
			border: @remCalc2 solid @accentColor;
			background: white;
			font-size: @remCalc24;
			font-weight: bold;
			-webkit-text-stroke: 0.5px @accentColor;
			color: @accentColor;
			transition: background 0.2s;
			&:hover,
			&.active {
				background: @accentColor;
				color: white;
			}
		}
	}
	.pin-clear {
		margin-top: @remCalc10;
		background: transparent;
		border: none;
		color: purple;
		font-size: @remCalc16;
		cursor: pointer;
	}
	.shake {
		animation: shake 0.5s;
	}
	@keyframes shake {
		0%,
		100% {
			transform: translateX(0);
		}
		25% {
			transform: translateX(-10px);
		}
		50% {
			transform: translateX(10px);
		}
		75% {
			transform: translateX(-10px);
		}
	}
}
.favEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 96px;
    gap: 24px;
    &__heading {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        p {
            font-weight: 900;
            font-size: 20px;
            margin: 0;
        }
    }
    &__subHeading {
        p {
            text-align: center;
            font-weight: 400;
            font-size: 14px;
            margin: 0;
            
            a {
                text-decoration: underline;
            }
        }
    }
}
@primary-color: #243776;
@text-gray: #868E94;
@border-color: #e5e7eb;
.daf-pay-details-container {
    font-family: 'Nunito Sans', sans-serif;
    padding: @remCalc40;
    .title {
        font-size: @remCalc32;
        font-weight: 700;
        color: @primary-color;
        margin-bottom: @remCalc20;
    }
    .hr-class {
        margin-bottom: @remCalc25;
    }
    .section {
        margin-bottom: @remCalc30;
        .section-title {
            font-size: @remCalc16;
            font-weight: bold;
            color: @primary-color;
            margin-bottom: @remCalc5;
        }
        .section-subtitle {
            font-size: @remCalc14;
            color: @text-gray;
            margin-bottom: @remCalc15;
        }
        .item {
            display: flex;
            justify-content: space-between;
            border: 1px solid @border-color;
            border-radius: @remCalc8;
            padding: @remCalc12 @remCalc15;
            margin-bottom: @remCalc10;
            font-size: @remCalc15;
            .price {
                color: #111;
                font-weight: 500;
            }
        }
        .total {
            font-weight: bold;
            font-size: @remCalc15;
            text-align: right;
            margin-top: @remCalc10;
            margin-right: @remCalc20 ;
            .amount {
                margin-left: @remCalc5;
            }
        }
    }
    .actions {
        display: flex;
        gap: @remCalc10;
        .back-btn {
            background: #fff;
            border: 1px solid @primary-color;
            color: @primary-color;
            padding: @remCalc12 @remCalc18;
            font-size: @remCalc16;
            border-radius: @remCalc18;
            cursor: pointer;
            flex: 0 0 50px;
        }
        .daf-pay-button {
            flex: 1;
        }
    }
}
.daf-pay-success-screen {
    .thankyou-container {
        margin-top: @remCalc20;
        padding: @remCalc30;
        background: #fff;
        border-radius: @remCalc8;
        text-align: center;
        font-family: Arial, sans-serif;
    }
    .thankyou-title {
        font-size: @remCalc30;
        font-weight: 700;
        color: #1E2A61;
        margin-bottom: @remCalc10;
    }
    .thankyou-text {
        font-size: @remCalc18;
        color: #333;
        margin-bottom: @remCalc30;
    }
    .button-container {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: @remCalc8;
    }
    .redirect-text {
        font-size: @remCalc12;
        color: #333;
        margin-bottom: @remCalc15;
        margin-top: @remCalc15;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: @remCalc4;
    }
    .thankyou-button {
        background: #1E2A61;
        color: #fff;
        border: none;
        padding: @remCalc14 @remCalc28;
        font-size: @remCalc20;
        font-weight: 600;
        border-radius: @remCalc6;
        cursor: pointer;
        transition: background 0.3s ease;
        &:hover {
            background: #15204a;
        }
    }
    .checkout-button {
        background: #1E2A61;
        color: #fff;
        border: none;
        padding: @remCalc14 @remCalc28;
        font-size: @remCalc20;
        font-weight: 600;
        border-radius: @remCalc6;
        cursor: pointer;
        transition: background 0.3s ease;
        &:hover {
            background: #15204a;
        }
    }
    .countdown-icon {
        width: @remCalc18;
        height: @remCalc18;
        fill: #1E2A61;
        vertical-align: middle;
        margin: 0 @remCalc4;
    }
}
.donateOnlyView {
  background-color: #fff;
  border-radius: @remCalc12;
  max-width: @remCalc800;
  box-shadow:
          0 2px 8px rgba(0, 0, 0, 0.05),
          0 1px 4px rgba(0, 0, 0, 0.1);
  .staticPage__wrapper {
    display: flex;
    flex-direction: column;
    max-height: @remCalc855;
    transition: max-height 0.3s cubic-bezier(0, 0, 0.1, 1);
    .collapsed-content::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4rem;
      background: linear-gradient(transparent, white);
      pointer-events: none;
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
    }
  }
  .show-more-toggle {
    display: flex;
    flex-shrink: 0;
    gap: @remCalc4;
    font-size: @remCalc13;
    width: @remCalc128;
  }
  .bottom {
    display: flex;
    flex-direction: column;
    gap: @remCalc24;
    padding: @remCalc40;
    overflow: hidden;
    @media @small-only {
      padding: @remCalc24;
      gap: @remCalc16;
    }
    &__heading p {
      color: @fontColourForPanel;
      font-size: @remCalc25;
      font-weight: bolder;
      margin: unset;
    }
    &__support {
      color: #868E94;
      font-size: @remCalc20;
      font-weight: 500;
    }
    &__copy {
      overflow: hidden;
    }
  }
  .venue {
    background-size: cover;
    border-top-left-radius: @remCalc12;
    border-top-right-radius: @remCalc12;
  }
  .raised {
    display: flex;
    padding: 0 @remCalc40;
    margin-top: -@remCalc50;
    gap: @remCalc24;
    max-height: @remCalc120;
    justify-content: center;
    @media @small-only {
      max-height: @remCalc80;
      margin-top: -@remCalc40;
      padding: 0 @remCalc24;
    }
    &__logo {
      aspect-ratio: 1/1;
      background: #fff;
      background-position: center center;
      background-size: contain;
      background-repeat: no-repeat;
      border: @remCalc4 solid @accentColor;
      border-radius: @remCalc12;
      box-shadow:
              0 2px 8px rgba(0, 0, 0, 0.05),
              0 1px 4px rgba(0, 0, 0, 0.1);
      width: @remCalc120;
      z-index: 1;
      @media @small-only {
          width: @remCalc80;
          min-width: @remCalc80;
      }
      svg {
        width: 100%;
        height: 100%;
        path {
          fill: @accentColor;
        }  
      }
    }
    .bottom__raised {
      flex: 1;
      max-width: @remCalc576;
      .value-container {
        height: @remCalc82;
        margin-top: @remCalc10;
        margin-bottom: @remCalc10;
        padding: 0 @remCalc40;
        @media @small-only {
          height: @remCalc80;
          margin-top: 0;
        }
      }
      .raised-totalizer-container {
        height: @remCalc120;
        padding: @remCalc40;
        z-index: 1;
        @media @small-only {
          height: @remCalc80;
          padding: @remCalc24;
        }
      }
      .value-container, .raised-totalizer-container{
        background-color: @accentFadedColor;
        display: flex;
        flex-direction: column;
        border-radius: @remCalc12;
        box-shadow:
                0 2px 8px rgba(0, 0, 0, 0.05),
                0 1px 4px rgba(0, 0, 0, 0.1);
        gap:@remCalc12;
        justify-content: center;
        .amounts{
          color: #000;
          font-size: @remCalc18;
          font-weight: bolder;
          width: unset;
          @media @small-only {
            font-size: @remCalc13;
          }
          span {
            font-size: @remCalc18;
            font-weight: bolder;
            @media @small-only {
              font-size: @remCalc13;
            }
          }
        }
        .amount{
          color: #000;
          font-size: @remCalc25;
          font-weight: bolder;
          width: unset;
          @media @small-only {
            font-size: @remCalc20;
          }
          span {
            font-size: @remCalc25;
            font-weight: bolder;
            @media @small-only {
              font-size: @remCalc20;
            }
          }
        }
        .progressBar {
          margin-top: unset;
          &__bar__current {
              background: @accentColor;
          }
        }
      }
    }
  }
}
.kif {
    &__dialog {
        .display-flex(column, wrap, flex-start, flex-start);
        background: #fff;
        border-radius: @remCalc12;
        gap: @remCalc24;
        max-width: @remCalc500;
        padding: @remCalc24;
        &__options {
            .display-flex(column, wrap, flex-start, flex-start);
            gap: @remCalc12;
            input {
                margin: unset;
            }
        }
        &__custom {
            .display-flex(column, wrap, flex-start, flex-start);
            gap: @remCalc12;
            &__msg {
                background: fade(@accentColor, 10);
                border-radius: @remCalc4;
                padding: @remCalc18;
                &__heading {
                    color: @accentColor;
                    padding-bottom: @remCalc12;
                }
                &__details {
                    .display-flex(column, wrap, flex-start, flex-start);
                    gap: @remCalc12;
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease;
                    &.visible {
                        max-height: 500px;
                        padding-bottom: @remCalc12;
                    }
                }
                &__button {
                    .display-flex(row, wrap, flex-start, flex-start);
                    color: @accentColor;
                    background: unset;
                    margin: unset;
                    &.rotated {
                        svg {
                            transform: rotate(180deg);
                        }
                    }
                }
                p {
                    margin: unset;
                }
            }
            input {
                border: 1px solid @borderColor;
                border-radius: @remCalc4;
                height: @remCalc56;
                padding: 0 @remCalc16;
                width: 100%;
            }
            small.error {
                .display-flex(row, nowrap, flex-start, flex-start);
                color: #BC2B87;
                font-size: @remCalc14;
                gap: @remCalc4;
                padding: @remCalc4 0 0 0;
                svg {
                    fill: #BC2B87;
                    min-width: @remCalc18;
                }
                span {
                    align-self: center;
                }
            }
        }
        &__action {
            background: @accentColor;
            color: #fff;
            border-radius: @remCalc56;
            height: @remCalc56;
            margin: unset;
            width: 100%;
        }
    }
}
.public-links {
  .display-flex(column, nowrap, flex-start, flex-start);
  width: 100%;
  margin-bottom: @remCalc48;
  &__title {
    margin: 0;
    padding: 0;
  }
  &__description {
    margin-bottom: @remCalc25;
  }
  &__list {
    .display-flex(column, nowrap, flex-start, flex-start);
    gap: @remCalc8;
    width: 100%;
  }
}
.public-link {
  .display-flex(column, nowrap, flex-start, flex-start);
  padding: @remCalc24;
  width: 100%;
  background-color: @backgroundColor;
  &__header {
    font-size: @remCalc15;
    font-weight: bold;
    text-transform: capitalize;
    margin-bottom: @remCalc12;
  }
  &__label {
    font-size: @remCalc13;
    font-weight: 400;
    margin-bottom: @remCalc6;
  }
  &__row {
    .display-flex(row, wrap, flex-start, center);
    width: 100%;
    gap: @remCalc24;
  }
  &__url {
    .display-flex(row, nowrap, space-between, center);
    padding-left: @remCalc12;
    height: @remCalc40;
    width: 40%;
    max-width: @remCalc412;
    overflow: hidden;
    .border-radius(@remCalc4);
    border: @remCalc1 solid @accentFadedColor;
    background-color: @panelBgColour;
  }
  &__url-value {
    display: inline-block;
    width: calc(95% - @remCalc50);
    overflow: hidden;
    font-size: @remCalc14;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__copy-icon {
    .display-flex(row, nowrap, center, center);
    width: @remCalc48;
    background-color: @panelBgColour;
    cursor: pointer;
  }
  &__sharing-buttons {
    .display-flex(row, nowrap, flex-start, center);
    gap: @remCalc24;
    max-width: 55%;
  }
  &__social-button {
    justify-content: flex-start;
    width: fit-content !important;
    text-decoration: underline;
    padding: 0 @remCalc12;
    gap: @remCalc8;
    font-size: @remCalc14;
    color: @accentFadedColor;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__assigned-guests {
    margin-top: @remCalc28;
    font-size: @remCalc14;
  }
}
.publicLinkView {
  .bidding-view();
  &__body {
    .bidding-body();
    &__title {
      .bidding-title();
    }
    &__message {
      .bidding-message();
    }
    &__info {
      .display-flex(column, nowrap, flex-start, flex-start);
      gap: @remCalc8;
      width: 100%;
      padding-bottom: @remCalc48;
      border-bottom: 1px solid @lightGrey;
      p {
        margin: 0;
        padding: 0;
      }
      &__row {
        color: darken(@darkGrey, 0.5);
        font-size: @remCalc15;
        span {
          color: @mediumGrey;
          font-size: @remCalc14;
          margin-right: @remCalc6;
        }
      }
      .tooltip {
        padding: 0;
        margin: 0;
        margin-right: @remCalc4;
        margin-bottom: -@remCalc4;
        svg {
          width: @remCalc18;
          height: @remCalc18;
          fill: @accentFadedColor;
        }
      }
      &__copy {
        border: 1px solid #d7d9db;
        border-radius: @remCalc4;
        margin-top: @remCalc16;
        padding: @remCalc12;
        width: 100%;
        p {
          margin: unset;
        }
      }
    }
    &__tickets {
      width: 100%;
      padding-top: @remCalc48;
      &__title {
        margin-bottom: @remCalc14;
      }
      &__amount {
        color: darken(@darkGrey, 0.5);
        font-size: @remCalc15;
        font-weight: bold;
      }
      &__list {
        .display-flex(column, nowrap, flex-start, flex-start);
        gap: @remCalc16;
        width: 100%;
      }
    }
  }
  .ticketsBooking__assign-tickets__list,
  .ticketsBooking__assign-tickets__form {
    width: 100%
  }
}
.publicLinkErrorView {
  .bidding-view();
  &__body {
    .bidding-body();
    &__title {
      .bidding-title();
    }
    &__message {
      .bidding-message();
    }
    &__info {
      margin: @remCalc8 0;
      color: darken(@darkGrey, 0.5);
      span {
        color: @mediumGrey;
      }
    }
  }
}
.publicLinkManageView {
  .display-flex(column, wrap, flex-start, flex-start);
  width: 100%;
  gap: @remCalc24;
  padding: @remCalc12 0 @remCalc24;
  &__label {
    font-size: @remCalc13;
    font-weight: 400;
    margin-bottom: @remCalc4;
  }
  &__toggle-label {
    font-size: @remCalc15;
  }
  &__col {
    .display-flex(column, wrap, flex-start, flex-start);
    width: 100%;
  }
  &__row {
    .display-flex(row, wrap, flex-start, center);
    width: 100%;
    gap: @remCalc16;
  }
  &__url {
    .display-flex(row, nowrap, space-between, center);
    padding-left: @remCalc12;
    height: @remCalc44;
    width: 100%;
    max-width: @remCalc412;
    .border-radius(@remCalc4);
    border: @remCalc1 solid @accentFadedColor;
    background-color: @panelBgColour;
  }
  &__url-value {
    display: inline-block;
    overflow: hidden;
    font-size: @remCalc14;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__copy-icon {
    .display-flex(row, nowrap, center, center);
    width: @remCalc48;
    background-color: @panelBgColour;
    cursor: pointer;
  }
  &__refresh-link {
    font-size: @remCalc15;
    font-weight: 400;
    color: @accentColor;
    text-decoration: underline;
  }
  .litecheckbox {
    width: @remCalc40;
    height: @remCalc24;
    input[type='checkbox'] {
      &:focus {
        ~ label {
          border: none;
          outline: @accentColor @remCalc2 solid;
        }
      }
    }
    input[type='checkbox'] + label {
      width: @remCalc40 !important;
      height: @remCalc24;
      border-radius: @remCalc12;
      background-color: @mediumGrey;
      transition: background-color 0.2s linear;
      &::after {
        content: '';
        width: @remCalc20;
        height: @remCalc20;
        border: none;
        border-radius: @remCalc10;
        top: @remCalc1;
        left: @remCalc1;
        background: @panelBgColour;
        opacity: 1 !important;
        transition: left 0.2s linear;
      }
    }
    input[type='checkbox']:checked + label {
      width: @remCalc40;
      height: @remCalc24;
      background-color: @accentFadedColor;
      &::after {
        content: '';
        width: @remCalc20;
        height: @remCalc20;
        border: none;
        border-radius: @remCalc10;
        top: @remCalc1;
        left: @remCalc17;
        background: @panelBgColour;
      }
    }
  }
  &__ticket-limit {
    width: 50%;
    @media @medium-down {
      width: 100%;
    }
  }
}