@keyframes spinner-line-fade-more {
  0%, 100% {
    opacity: 0; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-quick {
  0%, 39%, 100% {
    opacity: 0.25; /* minimum opacity */
  }
  40% {
    opacity: 1;
  }
}

@keyframes spinner-line-fade-default {
  0%, 100% {
    opacity: 0.22; /* minimum opacity */
  }
  1% {
    opacity: 1;
  }
}

@keyframes spinner-line-shrink {
  0%, 25%, 100% {
    /* minimum scale and opacity */
    transform: scale(0.5);
    opacity: 0.25;
  }
  26% {
    transform: scale(1);
    opacity: 1;
  }
}

.loader-container {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 2800;
  background-color: rgba(0, 0, 0, 0.4);
}
.loader-placeholder {
  position: relative;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/*

# Show rules based on screensize:

.someClass{
	width: 100px;
	.screen-xs({ // Make it 50px on mobile.
		width: 50px;
	})
}

// ------------------------------------------- */
/* -------------------------------------------

# Generate margins based on screensize.

.someClass{
	.xs-margin() = margin: 6px on Mobile;
	.sm-margin(1) = margin: 12px on Tablets;
}

// ------------------------------------------- */
/* -------------------------------------------

# Generate paddings based on screensize.

.someClass{
	.xs-padding() = padding: 6px on Mobile;
	.sm-padding(1) = padding: 12px on Tablets;
}

// ------------------------------------------- */
/* -------------------------------------------

# Complicated mixin / loop for generating all css for margins / paddings.

// ------------------------------------------- */
/* This should be removed, force to use -xs, -md etc instead. */
/**/
/* From Bootstrap 3.3.2 */
.paper {
  display: block;
  position: relative;
  color: inherit;
  background-color: #ffffff;
}
.paper.paper-link {
  text-decoration: none;
}
.paper.paper-link:hover {
  color: inherit;
  text-decoration: none;
}
.paper.paper-tur,
.paper.paper-neutral {
  -webkit-border-radius: 12px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 12px;
  -moz-background-clip: padding;
  border-radius: 12px;
  background-clip: padding-box;
}
.paper.paper-sport {
  -webkit-border-radius: 0;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 0;
  -moz-background-clip: padding;
  border-radius: 0;
  background-clip: padding-box;
}
.paper.paper-flat {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.paper.paper-outlined {
  border: 1px solid #e1e1e5;
}
.paper-link-hover-support:hover {
  filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.24)) drop-shadow(0 14px 22px rgba(0, 0, 0, 0.24)) !important;
}
.paper-link[aria-disabled=true] {
  opacity: 0.5;
}

.badge {
  display: inline-block;
  min-width: 26px;
  padding: 7px 2px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
  text-align: center;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  border-radius: 13px;
  border-top-left-radius: 13px;
  border-bottom-left-radius: 13px;
  border-top-right-radius: 13px;
  border-bottom-right-radius: 13px;
}
.badge:empty {
  display: none;
}
.badge-default {
  color: #fff;
  background-color: #252526;
}
.badge-red {
  color: #fff;
  background-color: #ed0000;
}
.badge-orange {
  color: #fff;
  background-color: #D34600;
}
.badge-small {
  min-width: 20px;
  padding: 4px 3px;
  font-weight: normal;
}
.badge-large {
  min-width: 32px;
  min-height: 32px;
  padding: 7px 4px;
  font-size: 15px;
  font-weight: normal;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.betslip-badge {
  min-width: 20px;
  min-height: 20px;
  padding: 3px 3px;
  font-weight: normal;
  background-color: transparent;
  vertical-align: text-bottom;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}
.betslip-badge-red {
  padding: 3px 3px;
  font-weight: normal;
  background-color: #ed0000;
}
.betslip-badge-red .icon-default {
  font-size: 12px;
}
.betslip-badge-green {
  padding: 3px 3px;
  font-weight: normal;
  background-color: #008912;
}
.betslip-badge-green .icon-default {
  font-size: 12px;
}
.product-start-page-top .new-badge-button {
  position: absolute;
  right: 0;
}