.cardSeoContainer {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.cardSeo {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
  border-radius: $border-radius-large;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: $brand-grey-dark;
  position: relative;
  transition: all $transition-time;
  &:hover, &:focus {
    color: $brand-grey-dark;
    text-decoration: none;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.12);
  }
  .owl-item & {
    display: inline-block;
  }
  &__text {
    font-size: $font-size-base;
    margin: 0 0 5px;
    color: $brand-grey-dark;
    &:empty {
      margin: 0;
    }
  }
  &__img, .generic-pic.pic-md {
    height: 200px;
    width: 100%;
    object-fit: cover;
    background-size: cover !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  &__price {
    color: $brand-grey-dark;
    text-align: right;
    margin-top: auto;
  }
  &__fromPrice {
    font-size: 12px;
    display: block;
  }
  &__priceNum {
    @include medium-weight;
    font-size: 24px;
    line-height: 1.07;
    margin: 0;
    .price {
      overflow: hidden;
      display: inline-block;
      vertical-align: top;
      .symbol {
        font-size: 0.85em;
      }
    }
  }
  &__beforePrice {
    font-size: 16px;
    font-weight: $roboto-light;
    margin-right: 5px;
    text-decoration: line-through;
    .symbol {
      display: none;
    }
  }
  &--big {
    @media (min-width: $grid-float-breakpoint) {
      display: flex;
      height: 220px;
      .cardSeoHeader {
        min-height: 220px;
      }
      .cardSeo__img, .generic-pic.pic-md {
        width: 270px;
        height: 220px;
        border-top-right-radius: 0;
      }
      .cardSeoContent {
        flex: 1;
        border-bottom-left-radius: 0;
        border-top-right-radius: 6px;
        border-top: 1px solid $input-border;
        border-left: 0;
        height: 220px;
      }
    }
  }
  .bioscore_icon {
    position: absolute;
    bottom: 15px;
    left: 15px;
    width: 34px;
    height: 34px;
    @media (max-width: $grid-float-breakpoint-max) {
      width: 30px;
      height: 30px;
    }
  }
}

.cardSeoHeader .cardSeo__title {
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg,transparent,rgba(0,0,0,.8));
  min-height: 70px;
}

.cardSeoHeader {
  position: relative;
  min-height: 200px;
  .cardSeo__title {
    position: absolute;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1.4em;
    @include medium-weight;
    padding: 10px 15px;
    margin: 0;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
  }
  .icon {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    margin: 0;
    fill: $brand-copy-light;
  }
  .package-offers {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 3;
    vertical-align: middle;
    @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
      top: 10px;
    }
    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
      top: 10px;
    }
    @media (max-width: $grid-float-breakpoint-max)  {
      top: 10px;
    }
  }
  .package-discount {
    position: relative;
    vertical-align: middle;
    display: inline-block;
    background: $brand-red;
    color: #fff;
    z-index: 4;
    border-radius: 0 20px 20px 0;
    padding: 0 15px;
    height: 26px;
    margin-left: 0;
    &.bg-green {
      background: $brand-green;
    }
    .icon {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      &, & * {
        fill: #fff;
      }
    }
    span {
      font-weight: $roboto-light;
      text-align: center;
      display: inline-block;
      vertical-align: middle;
      &.discount-main {
        font-size: $font-size-base;
        @include medium-weight;
        line-height: 26px;
        margin-left: 4px;
      }
    }
  }
  .bg_popular {
    background: $interactive-color;
    top:10px;
    position:absolute;
    left:10px;
    z-index:1;
    color: $brand-white;
    border-radius: 10px;
    font-size:$font-size-base;
    padding:2px 10px 2px 30px;
    max-width: 93%;
    & + .bg_popular {
      top: 40px;
    }
    .icon {
      vertical-align:middle;
      width:16px;
      height: 16px;
      position: absolute;
      top: 50%;
      left: 10px;
      transform: translateY(-50%);
      &, & * {
        fill: $brand-white;
      }
    }
    span {
      display: block;
      @media (min-width: $grid-float-breakpoint) {
        @include medium-weight;
      }
    }
  }
}

.cardSeoContent {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
  border: 1px solid $input-border;
  border-top: 0;
  padding: 10px 15px 15px;
  min-height: 158px;
  height: 158px;
  .cardSeo__title {
    font-size: 18px;
    line-height: 1;
    @include medium-weight;
    color: $brand-grey-dark;
    margin: 0 0 5px;
  }
  &--link {
	  height: 110px;
  }
}

.cardSeo__rating {
  margin: 0 0 5px;
  .rating {
    &, .owl-carousel .owl-item & {
      display: inline-block;
      vertical-align: middle;
    }
  }
  .rating__text {
    color: $brand-grey-dark;
    font-weight: $roboto-light;
    font-size: $font-size-base;
    vertical-align: middle;
  }
}
.radialProgress {
  height: 38px;
  width: 38px;
  position: absolute;
  bottom: -18px;
  right: 10px;
  background-color: $interactive-color;
  border-radius: 50%;
  &__circle {
	@include medium-weight;
	color: $interactive-color;
	background-color: #FFFFFF;
	position: absolute;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin-left: 4px;
	margin-top: 4px;
	text-align: center;
	line-height: 32px;
	@include medium-weight;
  }
}

$step: 1;
$loops: round(100 / $step);
$increment: 360 / $loops;
$half: round($loops / 2);
@for $i from 0 through $loops {
  .radialProgress--#{$i*$step} {
	@if $i < $half {
	  $nextdeg: 90deg + ($increment * $i);
	  background-image: linear-gradient(90deg, $input-border 50%, transparent 50%, transparent), linear-gradient($nextdeg, $brand-secondary 50%, $input-border 50%, $input-border);
	} @else {
	  $nextdeg: -90deg + ( $increment * ($i - $half) );
	  background-image: linear-gradient($nextdeg, $brand-secondary 50%, transparent 50%, transparent), linear-gradient(270deg, $brand-secondary 50%, $input-border 50%, $input-border);

	}
  }
}

// Cashback
.cardSeoBadge {
  border-radius: 15px 0 0 15px;
  position: absolute;
  bottom: 70px;
  right: 1px;
  padding: 0 10px;
  height: 25px;
  font-size: 14px;
  &__tooltipcontainer {
    display: inline-block;
    line-height: 1;
    vertical-align: top;
  }
  &__message {
    border-bottom: 1px dashed;
    font-weight: $roboto-light;
    vertical-align: middle;
    line-height: 25px;
    &--cashback {
      border-bottom-color: $brand-primary-hover;
      color: $brand-primary-hover;
    }
    &--vip {
      border-bottom-color: $brand-yellow;
      color: $brand-yellow;
    }
  }
  &__discount {
    @include medium-weight;
  }
  &--cashback {
    background: $brand-primary-light;
    svg, svg * {
      fill: $brand-primary-hover;
    }
  }
  &--vip {
    background: $brand-navy;
    svg, svg * {
      fill: $brand-yellow;
    }
  }
  &--list {
    border-radius: 15px;
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translate(0, 0);
    white-space: normal;
    margin: 0 5px;
    align-self: center;
    height: auto;
  }
  &--sh {
    position: initial;
    border-radius: 15px;
    display: inline-block;
    margin-bottom: 15px;
    @media (max-width: $screen-md-max) and (min-width: $grid-float-breakpoint) {
      .hotel-seo-content & {
        margin-top: 0;
        margin-bottom: 10px;
      }
    }
  }
  & + & {
    margin-top: 10px;
  }
  svg, svg * {
    width: 16px;
    height: 16px;
    vertical-align: middle;
  }
}

@media (max-width: $grid-float-breakpoint-max) {
  .cardSeoBadgeContainer {
    width: 250px;
  }
  .cardSeoBadge--list {
    position: absolute;
    top: 5px;
    left: 5px;
    transform: translate(0);
    border-radius: 50%;
    padding: 4px;
    z-index: 9;
    width: 24px;
    height: 24px;
    .cardSeoBadge__message {
      display: none;
    }
  }
}