@import "colors";

@accentColour: @newCol1;
@fontColourForAccent: @newCol2;
@fontColourOnBg: @newCol5;


@panelBgColor: @newCol3;
@panelFontColor: @newCol4;
@panelBorderColor:  darken(@panelBgColor, 5%);

@page_width: 100%;
@page_height: 100%;
@page_padding: 0px;
@internal_width: @page_width - @page_padding;
@dropShadow: 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);

@backgroundUrl      : "";
@backgroundColor    : transparent;

@barBackground      : transparent;
@barShadow          : none;
@barOpacity         : 100;

@titleFontFamily    : open-sans;
@titleFontWeight    : normal;
@titleFontColor     : @panelFontColor;
@titleBackground    : none;

@bidFontFamily      : open-sans;
@bidFontWeight      : normal;
@bidFontColor       : @fontColourForAccent;
@bidFontShadow      : none;
@bidBackground      : @accentColour;

@bidderFontFamily   : open-sans;
@bidderFontWeight   : normal;
@bidderFontColor    : @panelFontColor;
@bidderFontShadow   : none;
@bidderBackground   : transparent;

@donorFontFamily    : open-sans;
@donorFontWeight    : normal;
@donorFontColor     : #999999;
@donorFontShadow    : none;
@donorBackground    : transparent;

@timerFontFamily    : open-sans;
@timerFontWeight    : normal;
@timerFontColor     : @fontColourOnBg;
@timerFontShadow    : none;

@timerLabelFontFamily  : open-sans;
@timerLabelFontWeight  : normal;
@timerLabelFontColor   : @accentColour;
@timerLabelFontShadow  : none;

@alertTimerFontFamily  : open-sans;
@alertTimerFontWeight  : normal;
@alertTimerFontColor   : @accentColour;
@alertTimerFontShadow  : none;

@alertTimerLabelFontFamily  : open-sans;
@alertTimerLabelFontWeight  : normal;
@alertTimerLabelFontColor   : #000000;
@alertTimerLabelFontShadow  : none;

@rowBorder          : 1px solid @panelBorderColor;
@rowShadow          : @dropShadow;
@rowBorderRadius    : 10px;
@rowOpacity         : 100;
@rowBgColor         : @panelBgColor;

@alertBackground    : @panelBgColor;
@alertBorderRadius  : 50px;
@alertBorder        : 1px solid @panelBorderColor;
@alertShadow        : @dropShadow;
@alertFontFamily    : open-sans;
@alertFontWeight    : bold;
@alertFontColor     : @panelFontColor;
@alertFontShadow    : none;
@alertOpacity       : 100;

@totalizerBarBackground  : @fontColourForAccent;
@totalizerBarShadow      : 0 3px 57px 4px rgba(0,0,0,0.4);
@totalizerCircleShadow  : 0px 0px 24px rgba(0, 0, 0, 0.4);

@totalizerBar            : @accentColour;

@totalizerTargetFontColor      : @fontColourOnBg;
@totalizerTargetFontFamily     : open-sans;
@totalizerTargetFontWeight     : bold;
@totalizerTargetFontShadow     : none;

@totalizerRaisedFontColor      : @fontColourOnBg;
@totalizerRaisedBgColor        : fade(@accentColour, 50%);
@totalizerRaisedFontFamily     : open-sans;
@totalizerRaisedFontWeight     : normal;
@totalizerRaisedFontShadow     : none;

@totalizerTitleFontColor      : @fontColourOnBg;
@totalizerTitleFontFamily     : open-sans;
@totalizerTitleFontWeight     : bold;
@totalizerTitleFontShadow     : none;

@totalizerBidderFontColor      : @fontColourOnBg;
@totalizerBidderFontFamily     : open-sans;
@totalizerBidderFontWeight     : bold;
@totalizerBidderFontShadow     : none;

@totalizerStepsFontColor      : @fontColourOnBg;
@totalizerStepsFontFamily     : open-sans;
@totalizerStepsFontWeight     : normal;
@totalizerStepsFontShadow     : none;

@totalizerActionFontColor      : @fontColourOnBg;
@totalizerActionFontFamily     : open-sans;
@totalizerActionFontWeight     : normal;
@totalizerActionFontShadow     : none;

@totalizerCircleRingBg: contrast(@accentColour, darken(@accentColour, 40%), lighten(@accentColour, 40%));
@totalizerCircleRingColor: @accentColour;
@totalizerCircleTargetColor: @accentColour;

.background-image-url(@url) when (@url = '') {
	background-image: none;
}

.background-image-url(@url) when not (@url = '') {
	background-image: url(@backgroundUrl);
}

* {
  -webkit-font-smoothing: antialiased;
}

html, document, body {
  width: @page_width;
  height: @page_height;
  padding: 0px;
  margin: 0px;
  display: block;
  overflow: hidden;
}

body
{

  background-color: transparent;
  .background-image-url(@backgroundUrl);
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;

  view, tableview, tablecell, separator, img, item, carousel, timerview, stage
  {
    display: block;
    position: absolute;
  }

  *[ui-navigation-status="upcoming"]
  {
    /*opacity: 0;*/
    transition: opacity 1s ease-in-out;
    z-index: -1;
  }

  *[ui-navigation-status="upcoming_no_transition"]
  {
    /*opacity: 0;*/
    transition: none;
    z-index: -1;
  }

  *[ui-navigation-status="current"]
  {
    /*opacity: 1;*/
    transition: opacity 1s ease-in-out;
  }

  *[ui-navigation-status="current_no_transition"]
  {
    /* opacity: 1; */
    transition: none;
  }

  *[ui-navigation-status="traversed"]
  {
    /* opacity: 0;*/
    transition: opacity 1s ease-in-out;
  }

  *[ui-navigation-status="traversed_no_transition"]
  {
    /*opacity: 0;           */
    transition: none;
  }

  .screenSelection
  {

      *
      {
          position: absolute;
      }

  }

  .screenLogin
  {

      position: absolute;

  }

  timerview
  {
      *
      {
        position: absolute;
      }
  }

  .sequenceBar
  {

    .sequenceBarBackground
    {
      background: @barBackground;
      box-shadow: @barShadow;
      opacity: (@barOpacity / 100 );
    }

    overflow: visible;
    z-index: 500;

    div {
      position: absolute;
    }

    timerview
    {

      .timeLabel
      {
        font-family: @timerFontFamily;
        font-weight: @timerFontWeight;
        color: @timerFontColor;
        text-shadow: @timerFontShadow;
        text-align: center;
      }

      .remainingLabel
      {
        font-family: @timerLabelFontFamily;
        font-weight: @timerLabelFontWeight;
        color: @timerLabelFontColor;
        text-shadow: @timerLabelFontShadow;
      }

    }

  }

  .sequenceContentView
  {

    overflow: hidden;
    z-index: 1;

    view
    {
        *
        {
          position: absolute;
        }
    }

    .auctionLeaderboadView
    {
        overflow: visible;
    }

  }

  .menuTrigger
  {
      cursor: pointer;
      background: transparent;
      z-index: 2000;
  }

  .menu
  {
    z-index: 2000;

    .menuTabRow
    {
      margin-top: 10px;
      margin-bottom: 10px;

      label
      {
        width: 30%;
      }

      input[type=text]
      {
        text-align: right;
      }

      button
      {
        padding: 5px 10px;
      }

    }

  }

  .auctionLeaderboadView,
  .carouselView,
  .alertView
  {

    .lotImage
    {

    }

    .lotTitleRow
    {

    }

    .lotBidCell, .bidderCell
    {
       background: @bidBackground;
       border-radius: 10px;

       &--empty
       {
          background: none;
       }
    }

    .lotBidderCell, .bidCell
    {
      background: @bidderBackground;
    }

    .lotIDLabel, .bidsLabel
    {
      font-family: @titleFontFamily;
      font-weight: @titleFontWeight;
      color: @accentColour;
    }

    hr{

        border-bottom: solid 1px @donorFontColor;
        opacity: 0.2;
        width: 100%;
    }

    .lotNameLabel
    {
      font-family: @titleFontFamily;
      font-weight: @titleFontWeight;
      color: @titleFontColor;

      *
      {
        position: relative;
      }

      em {
        width:100%;
      }
    }

    .bidderLabel, .bidAmount
    {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .bidLabel
    {
      font-family: @bidFontFamily;
      font-weight: @bidFontWeight;
      color: @bidFontColor;
      text-shadow: @bidFontShadow;
    }

    .bidderName
    {
      font-family: @bidFontFamily;
      font-weight: @bidFontWeight;
        &--bidList
        {
          color: @bidderFontColor;
          text-shadow: @bidderFontShadow;
        }
    }

    .bidderLabel, .bidAmount
    {
      font-family: @bidderFontFamily;
      font-weight: @bidderFontWeight;
      color: @bidderFontColor;
      text-shadow: @bidderFontShadow;
    }

    .auctionLeaderboardTableCell
    {
      border: @rowBorder;
      box-shadow: @rowShadow;
      border-radius: @rowBorderRadius;
      box-sizing: content-box;
      overflow: hidden;
      opacity: (@rowOpacity / 100);
      background-color: @rowBgColor;
    }

    .lotDonorRow
    {
      background: @donorBackground;
    }

    .lotDonor
    {
      font-family: @donorFontFamily;
      font-weight: @donorFontWeight;
      color: @donorFontColor;
      text-shadow: @donorFontShadow;
    }

    .bidsSeparator
    {
        line-height: 1.6;
        position: relative;
    }

  }

  .auctionLeaderboadView
  {

    .lotNameLabel
    {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

    }

  }

  .carouselView,
  .alertView
  {

    .auctionLeaderboardTableCell
    {
        border-radius: @alertBorderRadius;
    }

    .lotNameLabel
    {
      text-overflow: ellipsis;
      /* overflow: hidden;*/
      overflow: visible;
    }

    .bidderLabel, .bidAmount
    {
      text-align: center;
    }

  }

  .carouselView
  {

    transform-style: preserve-3d;
    perspective: none;

    view
    {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;

        *
        {
           position: static;
        }
    }

  }

  .alertView
  {

    z-index: 600;
    transform: scale3d(0.0, 0.0, 0.0);
    background: @alertBackground;
    border: @alertBorder;
    box-shadow: @alertShadow;
    border-radius: @alertBorderRadius;
    opacity: (@alertOpacity / 100 );

    .auctionLeaderboardTableCell
    {
        box-shadow: none;
        border: 0 none;
    }

    item
    {
      * {
        position: absolute;
      }
    }

    .labelView
    {
      font-family: @alertFontFamily;
      font-weight: @alertFontWeight;
      color: @alertFontColor;
      text-shadow: @alertFontShadow;

      word-break: break-word;
      white-space: nowrap;
      overflow: visible;
    }

    timerview
    {

      .timeLabel
      {
        font-family: @alertTimerFontFamily;
        font-weight: @alertTimerFontWeight;
        color: @alertTimerFontColor;
        text-shadow: @alertTimerFontShadow;
        text-align: center;
      }

      .remainingLabel {
        font-family: @alertTimerLabelFontFamily;
        font-weight: @alertTimerLabelFontWeight;
        color: @alertTimerLabelFontColor;
        text-shadow: @alertTimerLabelFontShadow;
      }
    }

  }

  .alertView[ui-navigation-status="current"]
  {

    transition: all 0.5s ease-in-out;
    transform: scale3d(1.0, 1.0, 1.0);

  }

  .alertView[ui-navigation-status="traversed"]
  {

    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    transform: scale3d(1.0, 1.0, 1.0);

  }

  .totalizerView
  {

    stage
    {

      *
      {
        position: absolute;
      }

      .targetLabel
      {
        font-family: @totalizerTargetFontFamily;
        font-weight: @totalizerTargetFontWeight;
        color: @totalizerTargetFontColor;
        text-shadow: @totalizerTargetFontShadow;
      }

      .raisedLabelWrapper
      {
          background-color: @totalizerRaisedBgColor;
          border-radius: 200px;

          .raisedLabel
          {
            font-family: @totalizerRaisedFontFamily;
            font-weight: @totalizerRaisedFontWeight;
            color: @totalizerRaisedFontColor;
            text-shadow: @totalizerRaisedFontShadow;
            white-space: nowrap;
            overflow: visible;
          }
      }

      .titleLabel
      {
        font-family: @totalizerTitleFontFamily;
        font-weight: @totalizerTitleFontWeight;
        color: @totalizerTitleFontColor;
        text-shadow: @totalizerTitleFontShadow;
      }

      .biddersList
      {

        .labelView
        {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;

            font-family: @totalizerBidderFontFamily;
            font-weight: @totalizerBidderFontWeight;
            color: @totalizerBidderFontColor;
            text-shadow: @totalizerBidderFontShadow;
        }

      }

      .raisedSteps
      {

        .labelView
        {
          font-family: @totalizerStepsFontFamily;
          font-weight: @totalizerStepsFontWeight;
          color: @totalizerStepsFontColor;
          text-shadow: @totalizerStepsFontShadow;
        }

      }

      .actionLabel
      {
        font-family: @totalizerActionFontFamily;
        font-weight: @totalizerActionFontWeight;
        color: @totalizerActionFontColor;
        text-shadow: @totalizerActionFontShadow;
        white-space: nowrap;
        overflow: visible;
      }

  }


  .givergyStage
  {

    background: transparent;

    .barWrapper
    {
      background: @totalizerBarBackground;
      box-shadow: @totalizerBarShadow;
      z-index: 10;
      overflow: hidden;
      border-radius: 0px;
      border: 8px solid @totalizerBarBackground;
      transform: rotate(-180deg);
    }

    .bar
    {
      background: @totalizerBar;
      z-index: 11;
      border-radius: 0px;
    }

  }


  .iBidStageHorizontal
  {

    background: transparent;

    .barWrapper
    {
      background: @totalizerBarBackground;
      box-shadow: @totalizerBarShadow;
      z-index: 10;
      overflow: hidden;
      border-radius: 100px;
      border: 13px solid @totalizerBarBackground;
    }

    .bar
    {
      background: @totalizerBar;
      z-index: 11;
      border-radius: 100px;
    }

  }


  .iBidStageCircular
  {

    background: transparent;

    .circleWrapper
    {

        .donut
        {
            filter: drop-shadow(@totalizerCircleShadow);
        }

        .donut-ring
        {
            stroke: @totalizerCircleRingBg;
            //svg-shadow: 0 0 4px rgba(0,0,0, 0.4);
        }

        .donut-segment
        {
            stroke: @totalizerCircleRingColor;
        }

    }

    .targetLabel
    {
        color: @totalizerCircleTargetColor;
    }

  }

  }

}

@keyframes blink
{

  0%
  {
    opacity: 0
  }

  50%
  {
    opacity: 1
  }

}

//Styles for login page
*,
*:after,
*:before
{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.form-1
{
  /* Size & position */
  width: 300px;
  margin: -100px auto 30px;
  padding: 10px;
  position: relative; /* For the submit button positioning */

  /* Styles */
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3),
  0 3px 7px rgba(0, 0, 0, 0.3),
  inset 0 1px rgba(255, 255, 255, 1),
  inset 0 -3px 2px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  background: white; /* Fallback */
  background: -moz-linear-gradient(#eeefef, #ffffff 10%);
  background: -ms-linear-gradient(#eeefef, #ffffff 10%);
  background: -o-linear-gradient(#eeefef, #ffffff 10%);
  background: gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));
  background: linear-gradient(#eeefef, #ffffff 10%);
  background: linear-gradient(#eeefef, #ffffff 10%);
}

.form-1 .field
{
  position: relative;
}

.formheader
{
  text-align: center;
  padding-bottom: 8px;
}

.form-1 input[type=text],
.form-1 input[type=password]
{
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  /* Size and position */
  width: 100%;
  padding: 10px 18px 10px 45px;

  /* Styles */
  border: none; /* Remove the default border */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1),
  inset 0 3px 2px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  background: #f9f9f9;
  color: #777;
  transition: color 0.3s ease-out;
  -moz-transition: color 0.3s ease-out;
  -ms-transition: color 0.3s ease-out;
  -o-transition: color 0.3s ease-out;
  transition: color 0.3s ease-out;
}

.form-1 input[type=text]
{
  margin-bottom: 10px;
}

.form-1 input[type=text]:hover ~ i,
.form-1 input[type=password]:hover ~ i
{
  color: #52cfeb;
}

.form-1 input[type=text]:focus ~ i,
.form-1 input[type=password]:focus ~ i
{
  color: #42A2BC;
}

.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,
.form-1 button[type=submit]:focus
{
  outline: none;
}

.form-1 .submit
{
  /* Size and position */
  width: 65px;
  height: 65px;
  position: absolute;
  top: 41px;
  right: -25px;
  padding: 10px;
  z-index: 2;

  /* Styles */
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1),
  0 3px 2px rgba(0, 0, 0, 0.1),
  inset 0 -3px 2px rgba(0, 0, 0, 0.2);
}

.form-1 .submit:after
{
  /* Size and position */
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: -2px;
  left: 30px;

  /* Styles */
  background: #ffffff;

  /* Other masks trick */
  box-shadow: 0 62px white, -32px 31px white;
}

.form-1 button
{
  /* Size and position */
  width: 100%;
  height: 100%;
  margin-top: -1px;

  /* Icon styles */
  font-size: 1.4em;
  line-height: 1.75;
  color: white;

  /* Styles */
  border: none; /* Remove the default border */
  border-radius: inherit;
  background: #52cfeb; /* Fallback */
  background: -moz-linear-gradient(#52cfeb, #42A2BC);
  background: -ms-linear-gradient(#52cfeb, #42A2BC);
  background: -o-linear-gradient(#52cfeb, #42A2BC);
  background: gradient(linear, 0 0, 0 100%, from(#52cfeb), to(#42A2BC));
  background: linear-gradient(#52cfeb, #42A2BC);
  background: linear-gradient(#52cfeb, #42A2BC);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
  0 1px 2px rgba(0, 0, 0, 0.35),
  inset 0 3px 2px rgba(255, 255, 255, 0.2),
  inset 0 -3px 2px rgba(0, 0, 0, 0.1);

  cursor: pointer;
}

.form-1 button:hover,
.form-1 button[type=submit]:focus
{
  background: #52cfeb;
  transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.form-1 button:active
{
  background: #42A2BC;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3),
  inset 0 3px 4px rgba(0, 0, 0, 0.3);
}

.onlineStatus
{
  border-radius: 50%;
  background-color: #ff5320;
}