.previewContainer, .standardOverlayCanvas {
    width: 100%;
    max-height: 100%;
    position: relative;
    z-index: 0;
    padding: 0;
    margin: 0;
    display: block;
    container-type: size;
}

.standardOverlayCanvas>.canvasBackground {
    z-index: 0;
}

.canvasBackground {
    display: block;
    height: 100%;
}

.noBackground {
    background-color: var(--scheme-color-overall-background-color);
}

.standardOverlayCanvas>.overlay {
    z-index : 1;
    position: absolute;
}

.desktopAd, .desktopCanvas {
    display: block;
    overflow: hidden;
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    container-type: size;
}
.mobileAd, .mobileCanvas {
    display: none;
    overflow: hidden;
    max-height: 100%;
    max-width: 100%;
    height: 100%;
    container-type: size;
}

.adGreenButton {
  border-radius: 4px;
  background-color: #32db01;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#12fb00), to(#1adb00));
  background-image: linear-gradient(180deg, #12fb00, #1adb00);
  box-shadow: 1px 1px 3px 0 #000;
  padding: 2%;
  padding-bottom: 1.5%;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.discountBadge {
  background-color: #ff0000;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#aa0000));
  background-image: linear-gradient(180deg, #ff0000, #aa0000);
  border: 1px solid #aa0000;
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  transform: rotate(-25deg);
  border-radius: 50%;  
  padding: 3.5%;
  padding-bottom: 3%;
  position: absolute;
  display: flex;
  flex-direction:column;
  font-size: 1em;
  line-height: 1em;
}

.discountBadge .discountAmt {
  font-size: 2em;
}

.discountBadge .discountBadgeText {
  font-size: 0.8em;
  line-height: 0.2em;
}


@media screen and (max-width: 767px) {

    .desktopAd, .desktopCanvas {
        display: none;
    }

    .mobileAd, .mobileCanvas {
        display: block;
    }

}