/* Compiled CSS placeholder from SCSS */
.banner-container {
  display: block;
  width: fit-content;
  height: fit-content;
  margin: auto;

  > div {
    background-color: #1c1c28;
    background-image: url("/images/optimized/filmelier-logo_153x20.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24%;
  }

  .banner-top {
    display: block !important;
    width: 320px;
    min-height: 50px;
    background-position: center top 30px;

    @media (min-width: 768px) {
      width: 728px;
      height: 90px;
      background-position: center;
    }
  }

  .banner-top-premium {
    display: block !important;
    width: 320px;
    min-height: 100px;

    @media (min-width: 768px) and (max-width: 991px) {
      width: 728px;
      height: 90px;
    }

    @media (min-width: 992px) {
      width: 970px;
      height: 250px;
    }
  }

  .banner-play-container {
    display: none;
    width: 300px;
    height: 600px;

    @media (min-width: 1366px) {
      display: flex !important;
    }
  }

  .banner-play {
    display: block !important;
    width: 300px;
    height: 600px;
  }

  .banner-300x250-fixo {
    width: 300px;
    height: 250px;
    background-size: 50%;
  }

  .banner-300x250-fixo-harry-potter {
    width: 300px;
    height: 250px;
    background-size: 50%;
  }

  .banner-300x600-lateral {
    width: 300px;
    height: 600px;
    background-size: 50%;
  }

  .banner-middle-horizontal {
    width: 300px;
    height: 250px;

    @media (min-width: 768px) {
      width: fit-content;
      min-width: 728px;
      height: fit-content;
      min-height: 90px;
    }
  }

  .banner-plataformas-patrocinadas {
    width: 300px;
    height: 100px;

    @media (min-width: 768px) and (max-width: 991px) {
      width: 728px;
      height: 90px;
    }

    @media (min-width: 992px) {
      width: 468px;
      height: 60px;
    }
  }

  .banner-label {
    font-family: Roboto;
    font-size: 12px;
    text-align: right;
    letter-spacing: -0.02em;
    color: #f2f2f2;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
  }
}

.banner-arroba-premium-container{
  width: fit-content !important;
  max-width: 300px !important;
  height: 250px !important;
  position: fixed;
  bottom: 35px;
  right: 15px;
  z-index: 1000;
}

.banner-arroba-premium{
    background-color: transparent !important;
    background-image: none !important;
}

.close-banner {
  width: 100% !important;
  text-align: end;

  background-color: transparent !important;
  background-image: none !important;
  
  button {
    text-align: end;
    background-color: transparent;
    border: none;
    height: 20px;
    color: #FFFFFF;

    svg {
      cursor: pointer;
      border: 1px solid #FFFFFF;
      border-radius: 50px;
    }
  }
}

.banner-320x70-fixo-container {
  margin: 12px auto;

  .banner-320x70-fixo {
    width: 320px;
    height: 70px;
  }
}

.banner-top-container {
}

.banner-top-premium-container {
}

.banner-bottom-container {
  position: fixed;
  bottom: 17px;
  left: 0px;
  right: 0px;
  display: flex;
  margin: auto;
  z-index: 10;
  background-color: transparent !important;

  width: 328px;
  height: 56px;

  /* tablet e desktop */
  @media (min-width: 768px) {
    background-color: transparent !important;
    width: 758px;
    height: 110px;
    bottom: 20px;
  }
}

.banner-middle-horizontal-container {
  margin: 24px auto;
}

.banner-plataformas-patrocinadas-container {
  margin: 40px auto;

  @media (min-width: 992px) {
    margin: 24px auto;
  }
}

.banner-bottom-label {
  position: absolute;
  right: 0px;
  bottom: -19px;
  font-family: Roboto;
  font-size: 11px;
  line-height: 1.3;
  padding-left: 3px;
  text-align: right;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
  background-color: transparent !important;
  display: flex;
  justify-content: flex-end;
  @media (min-width: 1365px) {
    bottom: -18px !important;
  }
}

.banner-bottom {
  width: 328px !important;
  height: 60px !important;
  margin: 3px auto;
  background-color: transparent !important;

  /* tablet e desktop */
  @media (min-width: 768px) {
    background-color: transparent !important;
    width: 758px;
    height: 110px;
    margin: 5px 20px;
  }
}

.fab {
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: 25px;
  width: 48px;
  height: 48px;
  background: #f39256;
  border-radius: 50%;
  line-height: 65px;
  font-size: 23px;
  z-index: 10;
  cursor: pointer;

  /* mobile */
  display: flex;
  margin-bottom: 74px;

  /* tablet */
  @media (min-width: 768px) {
    margin-bottom: 115px;
  }

  /* desktop */
  @media (min-width: 1366px) {
    display: none;
  }
}

.no-margin-top {
  margin-top: 0px !important;
}

.ads-container {
  margin-top: 5px;
  margin-bottom: 20px;
}