.openCloseCabinet {
  padding: 8px 10px;
  border-radius: 3px;
  border: 1px solid #ddd;
  /* width: 20%; */
  text-align: center;
  margin: 20px 0px;
  cursor: pointer;
  user-select: none;
}
.openCloseCabinet:hover {
  background-color: #f3f1ee;
}
.simple-variant-group-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 -2%;
}
.simple-variant-item-container.showAll {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
.simple-variant-item-container {
  width: 46%;
  margin: 2% 2%;
  /* height: 100%; */
  border: 1px solid #ddd;
  position: relative;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}
input[type="HIDDEN"][value="Skabsfarve"]+.simple-variant-group-container > div:not(:nth-child(1)):not(.showAll) {
  display:none;
}
/*.simple-variant-item-container:nth-of-type(n+2){
  display:none;
}*/

.simple-variant-item-container.showAll{
  display:flex;
}
.variantButtonElement {
  -webkit-user-select: none;
  max-width: 46%;
  flex: 1 0 46%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.variantButtonElement.full {
  max-width: 100%;
}
.variantButtonElement.half {
  max-width: 48%;
}

.simple-variant-image {
  width: 100%;
}
.simple-variant-image-text {
  font-weight: bold;
  width: 100%;
  text-align: center;
}
.simple-variant-item-container.simple-variant-image-active {
  border: 2px solid #00c700;
}
.simple-variant-item-container > label img{
  width: initial;
  height: 44px;
  display: block;
  margin: 0 auto;
}

.simple-variant-item-container.showAll .AllPossibilities {
    display: flex;
    align-items: center;
}

.simple-variant-item-container.showAll .AllPossibilities .SmallImg {
    max-width: 25%;
}

.simple-variant-item-container.showAll .AllPossibilities .SmallImg img {
    display: block;
    width: 100%;
    height: 100%;
}

.simple-variant-item-container .Variations {
    border: 1px solid #ddd;
    border-radius: 50%;
    padding: 20px;
    line-height: 14px;
    margin: 0 auto;
    font-size: 14px;
    max-width: 60px;
}

.simple-variant-item-container .Variations span {
    white-space: nowrap;
    transform: translate(-50%);
    display: block;
}

.colorPrice {
  text-align: center;
  font-weight: bold;
}
.bullet {
  display: flex;
  margin: 10px 0;
}

.label {
  font-weight: bold;
  margin-right: 10px;
  width: 25%;
}
#specs > li.active {
  display: flex;
}
.stregtegning > img {
  max-width: 100%;
}
.frontBeskrivelseHeader {
  font-weight: bold;
  margin-top: 20px;
}
.colorDescription {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  justify-content: space-between;
}
.colorImgContainer {
  max-width: 100%;
}
.colorDescription .colorInfoTextContainer {
  width: 100%;
}

.colorDescription .colorImg {
  width: 100%;
  padding: 0 30px;
}
.colorDescription .colorImg > img {
  max-width: 100%;
}
.colorInfoText.expandable > p:nth-of-type(3) {
  display: none;
}
.colorInfoText.expandable.open > p:nth-of-type(3) {
  display: block;
}
.colorInfoText.expandable.open > .bullet {
  display: flex;
}
.colorInfoText.expandable > .bullet {
  display: none;
}
.colorInfoText.expandable:not(.open) + .toggleDescriptionButton .close,
.colorInfoText.expandable.open + .toggleDescriptionButton .open {
  display: none;
}
.toggleDescriptionButton {
  cursor: pointer;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  display: inline-block;
}
.toggleDescriptionButton .open,
.toggleDescriptionButton .close {
  /* text-decoration: underline; */
  text-decoration: none;
}

.toggleDescriptionButton:hover {
  border: 1px solid #000;
}

.btnExcerpt {
  cursor: pointer;
  margin: 15px 0 0;
  display: inline-block;
  text-decoration: underline;
}
.imgTextOverlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size: 13px;
  color:#ad0000;
}
.slick-slide.slick-current {
    position: relative;
}

.VariantGroupLabel {
  font-size: 14px !important;
  padding: 8px !important;
  /*border-bottom: 1px solid #ddd;
  background-color: #0085b7;*/
  color: #000 !important;
  border-top: 1px solid #ddd;
  border-radius: 3px;
}

.variantButtonContainer,.simple-variant-group-container {
  padding: 5px;
  margin: 0;
  align-items: stretch;
}
.variantButtonElement {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  max-width: 21%;
  flex: 1 0 21%;
  display: flex !important;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.variantButtonElement.Active {
  font-weight: 600;
  border: 2px solid #00c700;
  display:flex;
}

.variantButtonElement.Hidden{
  display:none !important;
}

.VariantGroupPosition-2 .variantButtonElement:nth-of-type(n+2){
  display:none;
}

.VariantGroupPosition-4 .variantButtonElement{
  max-width: initial;
}



.Variants {
    margin: 0px 0px 10px 0;
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-gap: 2% 1%;
    grid-template-areas:
    "FirstHalf SecondHalf"
    "Full Full";
}

.Variants.FullWidth{
  grid-template-areas:
  "FirstHalf FirstHalf"
  "Full Full";
}

table.VariantGroup {
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-top: 0px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

table.VariantGroupPosition-2{
  grid-area: FirstHalf
}

table.VariantGroupPosition-3{
  grid-area: SecondHalf;
}

table.VariantGroupPosition-4{
  grid-area:Full;
}

table.VariantGroup tr,
table.VariantGroup td{
  display:block;
}

td.VariantGroupLabel,
.Variants-box .VariantGroup .VariantGroupLabel{
  font-weight: bold;

}
td.VariantGroupLabel,
.Variants-box .VariantGroup .VariantGroupLabel,
.Variants-box .VariantGroup .variantButtonContainer{
  cursor: default;
}

#Popup table.VariantGroup {
    width: 100%;
    height: 100%;
    border:0;
}

#Popup .simple-variant-item-container > label img {
  height: 200px;
}

.Variants>table.VariantGroup:not(:last-child) {
    margin-bottom:0px;
}

.simple-variant-item-container.showAll .AllPossibilities{
  display:flex;
  align-items: center;
}

.simple-variant-item-container.showAll .AllPossibilities .SmallImg{
  max-width: 25%;
  margin:0 2px;
}

.simple-variant-item-container.showAll .AllPossibilities .SmallImg img{
  display: block;
  width: 100%;
  height: 100%;
}

.simple-variant-item-container .Variations{
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 20px;
  line-height: 14px;
  margin: 0 auto;
  font-size: 14px;
  max-width: 60px;
}

.simple-variant-item-container .Variations span{
  white-space: nowrap;
  transform: translate(-30%);
  display: block;
}

@media(max-width:1920px) and (min-width:1280px){
  .variantButtonElement.showAll .AllPossibilities .SmallImg:nth-of-type(n+3),
  .simple-variant-item-container.showAll .AllPossibilities .SmallImg:nth-of-type(n+3){
    display:none;
  }
}

@media(max-width:1600px) and (min-width:1280px){
  .variantButtonElement.showAll .AllPossibilities .SmallImg:nth-of-type(n+2),
  .simple-variant-item-container.showAll .AllPossibilities .SmallImg:nth-of-type(n+2){
    display:none;
  }
}

@media(max-width:1440px) and (min-width:1280px){

  .variantButtonElement.half,
  .simple-variant-item-container.half{
    max-width: 96%;
    flex: 1 0 96%;
  }

  .variantButtonElement.showAll .AllPossibilities .SmallImg,
  .simple-variant-item-container.showAll .AllPossibilities .SmallImg{
    display:none;
  }

}

@media(max-width:1280px){
  .Variants{
    grid-template-areas:
    "FirstHalf FirstHalf"
    "SecondHalf SecondHalf"
    "Full Full";
  }
}

@media(max-width:880px){
  .frontDescription{
      flex-direction:column-reverse;
  }
  .frontDescription > div {
      width: 100%;
  }

  .variantButtonElement .Variations,
  .simple-variant-item-container .Variantions{
    border:none;
    font-weight: 700;
  }

}

@media(max-width:600px){
  .variantButtonElement{
    max-width: 46%;
    flex: 1 0 46%;
  }

  .simple-variant-item-container{
    max-width: 96%;
    flex: 1 0 96%;
  }

  .variantButtonElement.half,
  .simple-variant-item-container.half{
    max-width: 96%;
    flex: 1 0 96%;
  }

  #n-right #ProductName span{
    line-height: 1.5rem;
    font-size:1.2rem;
  }
}


@media (max-width: 880px) {
  .simple-variant-item-container {
    width: 46%;
  }
  .colorDescription .colorInfoTextContainer {
    width: 100%;
  }

  .colorDescription .colorImg {
    width: 100%;
  }
  .colorDescription {
    flex-direction: column-reverse;
  }
}


/*
* Ny skabskode starter her!
*/

.VariantGroup .variantButtonElement.Hide{
  display:none;
}