.details {
  &-pager {
    border-bottom: 1px solid $ox-footer-border;
    @include unitize(padding-bottom, 10px);
    @include unitize(margin-top, 20px);
    @include unitize(margin-bottom, 20px);

    &-link {
      color: $primary;
    }
  }

  &-picture {
    text-align: center;
    @include unitize(margin-bottom, 10px);

    &-more {
      &-list {
        padding-left: 0;
        list-style: none;
        @include unitize(margin-left, -5px);

        &-item {
          display: inline-block;
          padding-bottom: 3px !important;
          @include unitize(height, 80px);
        }
      }

      &-link {
        border: 1px solid $ox-footer-border;
        @include unitize(padding, 3px);
        @include unitize(margin, 3px);
        @include unitize(border-radius, 3px);
        display: block;
        height: 100%;

        &.selected {
          border-color: $secondary;
        }
      }

      &-img {
        width: 100% !important;
        height: 100% !important;;
        object-fit: cover;
      }
    }
  }

  &-title {
    margin: 0;
    font-weight: 600;
    @include unitize(line-height, 40px);
    font-size: $ox-page-details-product-title-font-size;
  }

  &-shortdesc {
    @include unitize(margin-bottom, 20px);
  }

  .tobasket {
    &-function {
      @include unitize(margin-bottom, 5px);
    }

    &-input-group {
      width: 100%;

      @include media-breakpoint-up(md) {
        @include unitize(width, 250px);
      }
    }
  }

  &-col-right {
    border-left: 1px solid $ox-footer-border;
  }

  &-usp-list {
    margin-top: 20px;
    li {
      position: relative;
      @include unitize(font-size, 20px);
      font-weight: 300;
      @include unitize(line-height, 30px);
      @include unitize(margin-left, 20px);
      @include unitize(margin-bottom, 10px);

      &:before {
        font-family: "Font Awesome 5 Pro";
        @include unitize(font-size, 16px);
        content: "\f00c";
        color: $green;
        position: absolute;
        @include unitize(left, -20px);
      }
    }
  }

  &-info {
    .stockFlag {
      @include unitize(font-size, 16px);
      display: block;
    }

    .artNumber {
      @include unitize(font-size, 16px);
    }
  }

  &-action-links-wrapper {
    @include unitize(margin-top, 20px);
  }

  &-action-links {
    li {
      display: inline;
      a {
        color: $secondary;
        i {
          @include unitize(margin-right, 8px);
        }
      }
    }
  }

	#features {
		h3 {
			padding: 20px 0 5px 0; 
		}
		.row h3 {
			font-size: 1.4rem;
		}
		img {
			height: 242px;
    	outline: $gray-line 1px solid;
		}
	}

	#relProducts {
		.page-header {
			text-align: left;
		}
		.h2 {
			color: $brand-secondary;
			@include unitize(font-size, 30px);
			font-weight: bold;
			@include unitize(line-height, 40px);

			@media (min-width: 576px) {
				width: 50%;
			}
		}
	}

  #spareparts {
    .header-wrapper {
      display: flex;

      .headline {
        color: $brand-secondary;
        @include unitize(font-size, 30px);
        font-weight: bold;
        @include unitize(line-height, 40px);

        @media (min-width: 576px) {
          width: 50%;
        }
      }

      .constructionyear-wrapper {
        @media (min-width: 576px) {
          width: 50%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        &::after {
          content: "";
          display: table;
          clear: both;
        }

        label {
          @include unitize(margin, 0 10px 0 0);
        }

        select.form-control {
          width: auto;
        }
      }
    }

    .spareparts-container {
			@include unitize(padding-top, 20px);
			@include unitize(margin-top, 20px);

			#list-of-sparaparts{
				border-top: 1px solid $gray-line;
				@include unitize(padding-top, 20px);
			} 

			.spareparts-inner-container {
				
				@include unitize(padding-bottom, 20px);
				border-bottom: 1px solid $gray-line;
				@include unitize(margin-bottom, 20px);
				
				.data-container {
	        flex-wrap: wrap;
	        display: flex;

	        @media (min-width: 576px) {
	          flex-wrap: nowrap;
	        }

	        .title-artn {
	          width: 100%;

	          @media (min-width: 576px) {
	            width: 30%;
	          }

	          .title {
	            color: $brand-secondary;
	            @include unitize(font-size, 20px);
	            font-weight: bold;
	            @include unitize(line-height, 27px);
	          }

	        }

	        .quantity-availability {
	          width: 100%;

	          @media (min-width: 576px) {
	            width: 30%;
	          }

	          .quantity {
	            display: block;
	          }

	          .availablity {
	            display: block;
	          }
	        }

	        .price-tocart {
	          width: 100%;
	          display: flex;
	          align-items: center;
	          justify-content: flex-end;

	          @media (min-width: 576px) {
	            width: 40%;
	          }

	          .price {
	            @include unitize(margin-right, 10px);

	            strong {
	              white-space: nowrap;
	              @include unitize(margin-left, 10px);
	            }
	          }

	          input {
	            @include unitize(width, 60px);
	            display: block;
	            @include unitize(margin-right, 2px);
	          }

	          button {
	            display: block;
	          }
	        }
				}
			}

      #imagemap-container {
        img {
          width: 100%;
          height: auto;
        }
      }
    }
  }

  #explodedViewsContainer{
    overflow: auto;
  }
  
  &-tabs {
    .nav-pills {
      justify-content: center;

      .nav-item {
        border: solid 1px $brand-secondary;
        border-radius: 0;
        width: 100%;
        @include unitize(border-top, 0px);

        @media (min-width: 576px) {
          text-align: left;
          width: auto;
          @include unitize(border-left, 0px);
          border-top: solid 1px $brand-secondary;
        }

        &:first-of-type {
          @include unitize(border-top-left-radius, 3px);
          @include unitize(border-top-right-radius, 3px);
          border-top: solid 1px $brand-secondary;

          @media (min-width: 768px) {
            @include unitize(border-top-left-radius, 3px);
            @include unitize(border-bottom-left-radius, 3px);
            @include unitize(border-top-right-radius, 0px);
            border-top: solid 1px $brand-secondary;
            border-left: solid 1px $brand-secondary;
          }
        }

        &:last-of-type {
          @include unitize(border-bottom-left-radius, 3px);
          @include unitize(border-bottom-right-radius, 3px);

          @media (min-width: 768px) {
            @include unitize(border-top-right-radius, 3px);
            @include unitize(border-bottom-right-radius, 3px);
            @include unitize(border-bottom-left-radius, 0px);
          }
        }
      }

      .nav-link {
        border-radius: 0;
        border: 0;
        @include unitize(font-size, 18px);
        font-weight: 600;

        &:hover {
          background-color: $brand-secondary;
          color: $white;
        }
        &.active {
          background-color: $brand-secondary;
        }
      }
    }
  }

  .tab-content {
    padding: 50px 0px 20px 0px;
    h3 {
      @include unitize(font-size, 38px);
      font-weight: 600;
    }
  }
}


#moreVideosContainer {
	a {
	  position: relative;

	  .fa-stack{
	    position: absolute;
	    left: 30%;
	    top: 26%;
	  }

	  .fa-circle{
	    vertical-align: middle;
	    left: 0;
	    right: 0;
	    top: 2%;
	    bottom: 0;
	    color: white;
	    z-index: 1;
	  }

	  .fa-youtube-play {
			&:hover {
				color: $brand-font-color;
			}
	    z-index: 2;
	    color: red;
	  }
	}
}
.variant {
  &-label {
    margin-bottom: 0;
  }
}

.btn-staffel {
  @include unitize(margin-bottom, 5px);
  width: 100%;

  @include media-breakpoint-up(md) {
    @include unitize(width, 250px);
  }
}

.staffel {
  &-dt {
    float: left;
    @include unitize(padding-right, 15px);
  }
}

.price-wrapper {
  clear: both;
  overflow: hidden;
  .price-reduced-percent {
    color: $brand-primary;
    @include unitize(font-size, 22px);
    @include unitize(margin-right, 3px);
  }
  .price-old {
    @include unitize(font-size, 22px);
  }
}

.tobasket {
  #paypalExpressCheckoutDetailsBox {
    &.paypalExpressCheckoutBox {
      @include unitize(width, 210px);
      clear: both;
      float: right;
      margin: 0 !important;
      padding: 0 !important;

      .paypalHelpIcon {
        @include unitize(left, -30px);
      }
    }
  }
}

.price-label {
  .price {
    @include unitize(font-size, 34px);
    font-weight: bold;
    @include unitize(line-height, 40px);
    text-align: right;
  }
}

.tobasket {
	@include media-breakpoint-up(md) {
		@include unitize(padding-left, 15px);
	}
  .stockFlag, .deliverytime {
    @include unitize(font-size, 12px);
    color: $border-button-grey;
  }
}

#attributes {
  table {
    @include unitize(margin-top, 16px);
  }
  th {
    width: 66%;
		border: 0;
		@include media-breakpoint-up(md) {
			width: 33%;
		}
  }
  td {
    border: 0;
		width: 33%;
		border-left: 2px solid $white;
		@include media-breakpoint-up(md) {
			width: 66%;
		}
  }
}

.table-rows:nth-of-type(odd){
	background-color: rgba(0,0,0,.05);
}

#detailsRelated {
  @include unitize(margin-top, 30px);
  @include unitize(padding-top, 30px);
  border-top: 1px solid $gray-line;
}

.details-usp-list {
	li strong {
		font-weight: 600;
	}
}

#boughtTogether {
  @include unitize(margin-top, 30px);
  @include unitize(padding-top, 30px);
  @include unitize(padding-bottom, 30px);
  border-top: 1px solid $gray-line;
  border-bottom: 1px solid $gray-line;
	.card {
    border: none;
  }
	.picture img {
    height: 65px;
	}
	.border-bottom-box {
		border-bottom: solid 1px $gray-line;
	}
	.checkbox {
		padding-left: 10px;
		padding-top: 10px;
	}
	
	
	.checkbox input[type="checkbox"] {
		display: none;
	}
	.checkbox label {
		padding-left: 0;
		width: 100%;
		text-align: center;
	}
	.cursor {
		cursor: pointer;
	}
	.checkbox label:before {
		content: "";
		width: 25px;
		height: 25px;
		display: inline-block;
		vertical-align: bottom;
		margin: 0 auto;
		line-height: 20px;
		text-align: center;
		border: 1px solid $gray-line;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		font-family: "Font Awesome 5 Pro";
	}
	
	.checkbox input[type="checkbox"]:checked+label::before {
		content: "\f00c";
	}
	.checkbox input[type="checkbox"]:disabled+label::before {
		content: "\f00c";
		background-color: $gray-line;
	}
}

.pswp__zoom-wrap {
  .pswp__img {
    background: white;
  }
}

#detailsTab {
	@include unitize(margin-top, 30px);
}

.discounts {
	@include unitize(font-size, 14px);
	font-style: italic;
}
.tobasket > span {
	@include unitize(font-size, 14px);
	font-style: italic;
}

.highlightHotspot {
	cursor: pointer;
}
.hotspot {
	cursor: pointer; 
	position:absolute; 
	z-index:20;

	&.active {
		background: rgba(255, 0, 0, 0.2);
		outline: $brand-primary solid 1px;
	}
}

#order-sparepart-container {
	.quantity-label {
		float:left;
	}

	.quantity {
		float:left;
		margin-left: 10px;
	}

	.availablity {
		float:left;
		clear: both;
	}

	.artnum-label {
		font-size: 1rem;
		float: left;
	}
	.artnum {
		float: left;
		margin-left: 10px;
	}
}
.dealer-pp {
  font-size: 1.125rem;
}

.details-picture-more-list-item {
	height: 54px;
	@media (min-width: 375px) {
		height: 64px;
	}
	@include media-breakpoint-up(sm){
		height: 74px;
	}
	@include media-breakpoint-up(md){
		height: 70px;
	}
	@include media-breakpoint-up(lg){
		height: 84px;
	}
}


#faq { 
	.card {
	  border: 0;	
		.collapse {
			border: 0;
		}
		.card-header {
			border: 0;
			padding: 0;
			
			.btn-header-link {
				font-size: $h3-font-size;
				display: block;
				text-align: left;

				&:after {
					content: "\f107";
					font-family: "Font Awesome 5 Pro";
					font-weight: 700;
					float: right;
				}

				&.collapsed:after {
					content: "\f106";
				}
			}

		}
	}
}