@import "colors";

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

@lightGrey: #F0F1F2;
@mediumGrey: #9FA8AB;
@darkGrey: #5E6871;
@black: #000000;

@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;

@numberFontFamily   : "Montserrat";
@numberFontWeight   : "bold";

@titleFontFamily    : Montserrat;
@titleFontWeight    : normal;
@titleFontColor     : @panelFontColor;
@titleBackground    : none;

@bidFontFamily      : Montserrat;
@bidFontWeight      : bold;
@bidFontColor       : @black;
@bidFontShadow      : none;
@bidBackground      : transparent;

@bidTitleFontFamily : "Montserrat";
@bidTitleFontWeight : "bold";

@bidderFontFamily   : Montserrat;
@bidderFontWeight   : normal;
@bidderFontColor    : @mediumGrey;
@bidderFontShadow   : none;
@bidderBackground   : transparent;

@donorFontFamily    : Montserrat;
@donorFontWeight    : normal;
@donorFontColor     : #999999;
@donorFontShadow    : none;
@donorBackground    : transparent;

@timerFontFamily    : Montserrat;
@timerFontWeight    : bold;
//@timerFontColor     : @timerFontColor;
@timerFontShadow    : none;
@timerBackground    : @accentColour;

@timerLabelFontFamily  : Montserrat;
@timerLabelFontWeight  : normal;
@timerLabelFontColor   : @accentColour;
@timerLabelFontShadow  : none;

@alertTimerFontFamily  : Montserrat;
@alertTimerFontWeight  : normal;
@alertTimerFontColor   : @timerFontColor;
@alertTimerFontShadow  : none;
@alertTimerBackground  : @accentColour;

@alertTimerLabelFontFamily  : Montserrat;
@alertTimerLabelFontWeight  : normal;
@alertTimerLabelFontColor   : @black;
@alertTimerLabelFontShadow  : none;

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

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

@totalizerBarBackground  : @mediumGrey;
@totalizerBarShadow      : none;
@totalizerCircleShadow  : 0px 0px 24px rgba(0, 0, 0, 0.4);

@totalizerBar            : @accentColour;

@totalizerTargetFontColor      : @mediumGrey;
@totalizerTargetFontFamily     : Montserrat;
@totalizerTargetFontWeight     : bold;
@totalizerTargetFontShadow     : none;

@totalizerRaisedFontColor      : @accentColour;
@totalizerRaisedBgColor        : fade(@accentColour, 50%);
@totalizerRaisedFontFamily     : Montserrat;
@totalizerRaisedFontWeight     : bold;
@totalizerRaisedFontShadow     : none;

@totalizerTitleFontColor      : @fontColourOnBg;
@totalizerTitleFontFamily     : Montserrat;
@totalizerTitleFontWeight     : bold;
@totalizerTitleFontShadow     : none;

@totalizerBidderFontColor      : @fontColourOnBg;
@totalizerBidderFontFamily     : Montserrat;
@totalizerBidderFontWeight     : bold;
@totalizerBidderFontShadow     : none;

@totalizerStepsFontColor      : @fontColourOnBg;
@totalizerStepsFontFamily     : Montserrat;
@totalizerStepsFontWeight     : normal;
@totalizerStepsFontShadow     : none;

@totalizerActionFontColor      : @fontColourOnBg;
@totalizerActionFontFamily     : Montserrat;
@totalizerActionFontWeight     : normal;
@totalizerActionFontShadow     : none;

@totalizerCircleRingBg: @mediumGrey;
@totalizerCircleRingColor: @accentColour;
@totalizerCircleTargetColor: @accentColour;
@totalizerCircleTitleColor: @mediumGrey;

@boxTitleFontFamily     : Montserrat;
@boxTitleFontWeight     : bold;

@winnerNameFontFamily     : Montserrat;
@winnerNameFontWeight     : bold;
@winnersNameFontFamily     : Montserrat; 
@winnersNameFontWeight     : normal;

@winnerTicketNumberFontFamily     : Montserrat;
@winnerTicketNumberFontWeight     : bold;

@raisedValueFontFamily     : Montserrat;
@raisedValueFontWeight     : bold;
@raisedLabelFontFamily     : Montserrat;
@raisedLabelFontWeight     : normal;
@prizePotLabelFontFamily     : Montserrat;
@prizePotLabelFontWeight     : normal;
@prizePotValueFontFamily     : Montserrat;
@prizePotValueFontWeight     : bold;

.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
    {
      background: @timerBackground;

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

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

    }

  }

  .sequenceContentView
  {

    overflow: hidden;
    z-index: 1;

    view
    {
        *
        {
          position: absolute;
        }
    }

    .auctionLeaderboadView,
    .tableLeaderboadView
    {
        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;
      }

    }

  }

  .panel
  {
      background: @panelBgColor;    
      border-radius: 24px;
  }

  .auctionLeaderboadView,
  .tableLeaderboadView,
  .carouselView,  
  .alertView
  {

    .lotImage
    {

    }    

    .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%;
      }
    }

    .bidTitle {
      font-family: @titleFontFamily;
      font-weight: @titleFontWeight;
      color: @accentColour;  
    }

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

    .bidLabel
    {
      font-family: @bidFontFamily;
      font-weight: @bidFontWeight;
      color: @panelFontColor;
      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: @panelFontColor;
      text-shadow: @bidderFontShadow;
    }

    .auctionLeaderboardTableCell,
    .auctionLeaderboardSideTableCell,
    .tableLeaderboadTableCell
    {
      border: @rowBorder;
      box-shadow: @rowShadow;
      border-radius: @rowBorderRadius;
      box-sizing: content-box;
      overflow: visible;
      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,
  .carouselView,
  .alertView
  {
    .lotIDLabel 
    {
      background-color: @accentColour;
      color: @fontColourForAccent;
      border-radius: 20px;
      box-shadow: @dropShadow;
      display: flex;
      align-items: center;
      justify-content: center;      
      z-index: 2;     
    }

    .lotNameLabel
    {     
    }

    .lotBidInfoRow 
    {      
      border-right: 1px solid @mediumGrey;     
    }

  }

  .carouselView
  {
    .lotBidInfoRow 
    {      
      border-right: none;
      border-top: 1px solid @mediumGrey;     
    }


    
    .auctionLeaderboardSideTableCell
    {
      z-index: -1;
      .lotBidInfoRow 
      {      
        border-right: none;
        border-top: none;             
      }
    }
  }

  .tableLeaderboadView
  {

    .lotIDLabel 
    {
      background-color: @accentColour;
      color: @fontColourForAccent;
      border-radius: 20px;
      box-shadow: @dropShadow;
      display: flex;
      align-items: center;
      justify-content: center;      
      z-index: 2;     
    }

    .bidTitle 
    {
      color: @accentColour;
    }

    .lotTitleRow
    {     
      border-right: 1px solid @mediumGrey;
    }    

  }

  .carouselView
  {

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

    .auctionLeaderboardTableCell
    {
        border-radius: @rowBorderRadius;
    }   

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

        *
        {
           position: absolute;
        }
    }

  }

  .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: @black;
      text-shadow: @alertFontShadow;

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

      &--first {
         color: @accentColour;
      }
    }

    timerview
    {
      background: @timerBackground;

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

      .remainingLabel {
        font-family: @alertTimerLabelFontFamily;
        font-weight: @alertTimerLabelFontWeight;
        color: @alertTimerFontColor;
        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);

  }

  .gliJackpotPrize
  {
      *
      {
        position: absolute;
      }

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

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

      .raisedLabel 
      {
        color: @mediumGrey;
        font-family: @raisedLabelFontFamily;
        font-weight: @raisedLabelFontWeight; 
      }

      .raisedValue
      {
        color: @mediumGrey;
        font-family: @raisedValueFontFamily;
        font-weight: @raisedValueFontWeight; 
      }


      .prizePotLabel 
      {
        color: @mediumGrey;
        font-family: @prizePotLabelFontFamily;
        font-weight: @prizePotLabelFontWeight; 
      }

      .prizePotValue
      {
        color: @accentColour;
        font-family: @prizePotValueFontFamily;
        font-weight: @prizePotValueFontWeight; 
      }

      .winnerTitle,
      .raisedTitle {
        font-family: @boxTitleFontFamily;
        font-weight: @boxTitleFontWeight; 
        background-color: @accentColour;
        color: @fontColourForAccent;
        border-radius: 20px;
        box-shadow: @dropShadow;
        display: flex;
        align-items: center;
        justify-content: center;      
        z-index: 2;             
      }

      .winnerName {
        font-family: @winnerNameFontFamily;
        font-weight: @winnerNameFontWeight;
        color: @fontColourForAccent;        
      }

      .winnerTicketNumber {
        font-family: @winnerTicketNumberFontFamily;
        font-weight: @winnerTicketNumberFontWeight;
        color: @fontColourForAccent;
      }

      .raisedBox
      {
        border-radius: 24px;
        background-color: #fff;
        box-sizing: content-box;    
      }

      
    
      .winnerBox      
      {
        border: solid 12px #fff;
        border-radius: 24px;
        background-color: @accentColour;
        box-sizing: content-box;    
      }
  }

  .drawGliRaffleWinners
  {
      *
      {
        position: absolute;
      }

      .winnerTitle,
      .winnersTitle {
        font-family: @boxTitleFontFamily;
        font-weight: @boxTitleFontWeight; 
        background-color: @accentColour;
        color: @fontColourForAccent;
        border-radius: 20px;
        box-shadow: @dropShadow;
        display: flex;
        align-items: center;
        justify-content: center;      
        z-index: 2;             
      }

      .winnerName {
        font-family: @winnerNameFontFamily;
        font-weight: @winnerNameFontWeight;
        color: @fontColourForAccent;        
      }

      .winnerTicketNumber {
        font-family: @winnerTicketNumberFontFamily;
        font-weight: @winnerTicketNumberFontWeight;
        color: @fontColourForAccent;
      }

      .winnerBox,
      .winnersList
      {

        border: solid 12px #fff;
        border-radius: 24px;
        background-color: @accentColour;
        box-sizing: content-box;

        .winnerRow
        {
          border-bottom: 1px solid @fontColourForAccent;

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

              font-family: @winnersNameFontFamily;
              font-weight: @winnersNameFontWeight;
              color: @fontColourForAccent;           
          }

          &:last-child
          {
            border-bottom: none;
          }
        }

        

      }
  }

  .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;
          }
      }

      .titleBox
      {
          border-radius: 24px;
          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.25);
          background-color: @accentColour;
          display: flex;
          align-items: center;
          justify-content: center;
      }

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

      .biddersList
      {

        border: solid 12px #fff;
        border-radius: 24px;
        background-color: @accentColour;
        box-sizing: content-box;

        .bidderRow
        {
          border-bottom: 1px solid @totalizerBidderFontColor;

          &:last-child
          {
            border-bottom: none;
          }
        }

        .labelView
        {            
            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;   
  }


  .iBidStageHorizontal
  {

    background: transparent;

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

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

  }


  .iBidStageCircular
  {

    background: transparent;

    .circleWrapper
    {

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

        .donut-outer-ring {
          fill: #fff;
        }

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

        .donut-segment
        {
            stroke: @totalizerCircleRingColor;
        }
       
    }

    .targetLabel
    {
        color: @totalizerCircleTargetColor;
    }

    .titleLabel 
    {
      color: @totalizerCircleTitleColor;
    }

  }

  }

}

@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;
}