/* to center the google ads div */
.cable-ad-container {
  display: flex;
  justify-content: center;
}

/* add the grey background color to the ads div */
.cable-ad-slot-style {
  flex-wrap: wrap;
  line-height: 0;
  background-color: #E9ECEF;
  border-radius: 4px;
}

.cable-general-ad-background {
  margin-bottom: 32px;
}

/* add the grey background color for special div and cases (banner general) */
.cable-ad-background {
  background-color: #E9ECEF;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* add the grey background color for billboard ads */
#cable-billboard-container {
  background-color: #E9ECEF;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* homepage left inline-rectangle ads  */
#cable-homepage-jumbo-container {
  background-color: #E9ECEF;
  border-radius: 4px;
}

#cable-homepage-jumbo-ads {
  display: flex;
  gap: 4px;
}

/* to add the wording before the google ads */
.cable-ads-label {
  display: block;
  color: #495057;
  padding-top: 2px;
  width: 100%;
  text-align: center;
}

.cable-ads-after-label {
  padding-top: 4px;
  padding-bottom: 8px;
}

.cable-ads-after-label > i {
  margin-left: 8px;
  margin-right: 8px;
}

.cable-ads-after-label > i::before {
  vertical-align: middle;
}

/* Breakpoint: Medium */
@media screen and (max-width: 1056px) {
  /* remove the background color */
  .cable-ad-background {
    background-color:unset;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

@media screen and (max-width: 991px) {
  .cable-general-ad-background {
    margin-bottom: 0;
    margin-top: 32px;
  }
}