/* You can add global styles to this file, and also import other style files */
.broadband-label {
  --profile-pic-size: 30px;
  --tooltip-vertical-spacing: 2px;
  --tooltip-triangle-size: 15px;
  --y-overflow: 2px;
  --x-overflow: 2px;
  padding: 0px;
  justify-content: space-between;
  height: 100%;
  font-size: 12px;
  margin: 0px;
  /* .tooltip:hover {
  	opacity: 1;
    } */
}
.broadband-label .hide {
  display: none;
}
.broadband-label .ad-text-right {
  text-align: right;
}
.broadband-label .bbl-Label {
  border: 1px solid black;
  border-radius: 4px;
}
.broadband-label .p-eight {
  padding: 8px;
}
.broadband-label .p-left-eight {
  padding-left: 8px;
}
.broadband-label .p-right-five {
  padding-right: 5px;
}
.broadband-label .actHeader,
.broadband-label .dbHeader,
.broadband-label .acpHeader,
.broadband-label .diHeader,
.broadband-label .swpHeader,
.broadband-label .csHeader {
  font-size: 14px;
  font-weight: bold;
  padding-bottom: 16px;
  padding-top: 16px;
  padding-left: 35px;
  text-align: left;
}
.broadband-label [class^=actMonthly],
.broadband-label [class^=actOneTimeFees],
.broadband-label [class^=swpLatency],
.broadband-label [class^=swpUpload],
.broadband-label [class^=swpDownload],
.broadband-label [class^=earlyTermination],
.broadband-label [class^=govtTaxes],
.broadband-label .lmDescription,
.broadband-label .nmHeader,
.broadband-label .nmPrivacy,
.broadband-label .csDescription,
.broadband-label .csContactNumber,
.broadband-label .diDetails {
  padding-bottom: 8px;
}
.broadband-label [class^=actMonthlyFeesItemAmount],
.broadband-label [class^=actOneTimeFeesItemAmount],
.broadband-label .earlyTerminationAmount,
.broadband-label .govtTaxesAmount,
.broadband-label .swpDownloadSpeedValue,
.broadband-label .swpUploadSpeedValue,
.broadband-label .swpLatencyValue,
.broadband-label .diHeaderValue,
.broadband-label .diDetailsValue,
.broadband-label .acpParticipationInd,
.broadband-label .csValue,
.broadband-label .csContactNumber,
.broadband-label .nmHeaderValue,
.broadband-label .nmPrivacyValue,
.broadband-label .lmLink,
.broadband-label .constructionChargesLink {
  text-align: right !important;
  font-weight: 700;
}
.broadband-label .constructionChargesLink {
  float: right;
}
.broadband-label .acpParticipation {
  padding-top: 8px;
}
.broadband-label .mat-mdc-text-field-wrapper {
  width: 100%;
  position: relative;
  top: 10px;
}
.broadband-label .mpHeader,
.broadband-label .mpPrice,
.broadband-label .diHeader,
.broadband-label .upiHeader {
  font-weight: 700;
}
.broadband-label .monthlyPrice {
  padding-bottom: 8px;
}
.broadband-label .additionalChargesTerms,
.broadband-label .discountsAndBundles,
.broadband-label .acp,
.broadband-label .speedsWithPlan,
.broadband-label .dataIncluded,
.broadband-label .networkManagement,
.broadband-label .customerSupport,
.broadband-label .learnMore {
  border-top: 2px solid black;
  padding-bottom: 5px;
}
.broadband-label .learnMore .lmDescription {
  padding-top: 16px;
}
.broadband-label .acpParticipationInd {
  padding-right: 10px;
  padding-top: 10px;
}
.broadband-label .bfHeader {
  font-size: 20px;
  font-weight: 900;
  padding-bottom: 8px;
}
.broadband-label .csContactNumber {
  padding-top: 8px;
}
.broadband-label .bfProviderName {
  font-size: 16px;
  font-weight: 400;
}
.broadband-label .bfOfferName {
  font-size: 14px;
  font-weight: 400;
  padding-bottom: 10px;
  padding-top: 5px;
}
.broadband-label .bfDisclosure {
  font-weight: 400;
  padding-bottom: 8px;
}
.broadband-label .monthlyPriceRow {
  background-color: #1b45b4;
  color: white;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.broadband-label.broadband-label-blue .monthlyPriceRow {
  background-color: #513594;
}
.broadband-label [class^=mpDescription] {
  padding-left: 0px;
}
.broadband-label .mpPrice {
  text-align: right !important;
}
.broadband-label .diHeader {
  font-size: 14px;
}
.broadband-label .csValue {
  text-align: right !important;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}
.broadband-label .upiValue {
  padding-left: 0px;
  padding-top: 20px;
}
.broadband-label .accordion-header button {
  background-color: inherit;
  border: inherit;
  padding-left: inherit;
}
.broadband-label .card .container {
  width: 100% !important;
}
.broadband-label *,
.broadband-label *::after,
.broadband-label *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.broadband-label div.bbl-accordions {
  position: relative;
  padding: 5px 0 5px 10px;
  border: solid 1px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
}
.broadband-label input.accordions-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 55px;
  width: 100%;
  opacity: 0;
  visibility: 0;
}
.broadband-label .bbl-accordions-head::before {
  content: "";
  transform: rotate(180deg);
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMi4wNzQ5NSAxMS42NzExMiI+PHBvbHlsaW5lIHBvaW50cz0iMC45NzIgMTAuNTI4IDExLjAzNyAxLjk2OSAyMS4xMDMgMTAuNTI4IiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDA0N2JiO3N0cm9rZS1taXRlcmxpbWl0OjEwO3N0cm9rZS13aWR0aDozcHgiLz48L3N2Zz4=) no-repeat center;
  transform-origin: center;
  transition: transform 0.218s ease-out 0s;
  color: #1b45b4;
  width: 15px;
  height: 15px;
}
.broadband-label .bbl-accordions-head {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
.broadband-label .bbl-accordions-head > label {
  margin-left: -25px;
  width: 100%;
}
.broadband-label div.bbl-accordions-body {
  max-height: 100%;
  overflow: hidden;
  transition: max-height 0.218s ease-out 0s;
  padding-right: 5px;
}
.broadband-label input.accordions-input:checked ~ .bbl-accordions-head::before {
  transform: rotate(0deg);
  transition: transform 0.218s ease-out 0s;
}
.broadband-label input.accordions-input:checked ~ .bbl-accordions-head ~ div.bbl-accordions-body {
  max-height: 0px;
  transition: max-height 0.218s ease-out 0s;
}
.broadband-label .hover-me {
  /*   The height and width of the element are set to be 100% of the size of the parent element. */
  font-weight: 700;
  /* animate the image's border color change on hover 
  transition: border 0.2s ease;*/
}
.broadband-label .hover-me:hover {
  /* animate the image's border color change on hover */
  font-weight: 500;
}
.broadband-label .hover-me:hover + .tooltip {
  display: block;
  opacity: 1;
}
.broadband-label .tooltip {
  position: absolute;
  /*   The distance between the tooltip and the element to hover over */
  bottom: calc(var(--tooltip-vertical-spacing) + var(--profile-pic-size));
  transform-origin: top center;
  /*   Set a minimum height for your tooltip, which affects text wrapping */
  min-width: 120px;
  /*   Adding some nice padding */
  padding: 7px;
  border-radius: 6px;
  background: #1b45b4;
  color: #ffffff;
  display: none;
  opacity: 0;
  /*   Adding some nice padding */
  transition: display 0.2s ease;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2509803922);
  border: 1px solid #1b45b4;
}
.broadband-label.broadband-label-blue .tooltip {
  background: #513594;
  border: 1px solid #513594;
}
.broadband-label .tooltip::after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  /*  'top: 99%' Moves the tooltip triangle vertically to the bottom of the tooltip, but ensures they overlap to prevent whitespace in between. 
    Whitespace is visible if you use 'top: 100%', for example.  */
  top: 99%;
  /*  'left: 50%' Moves the tooltip triangle to the horizontal center of the tooltip, but requires translateX: -50% to move the tooltip  triangle back by 50% of its own width. */
  right: 5%;
  border-style: solid;
  border-width: var(--tooltip-triangle-size) var(--tooltip-triangle-size) 0 var(--tooltip-triangle-size);
  border-color: #1b45b4 transparent transparent transparent;
  --translateX: -50%;
  /* 'transform: translateX' Works with left: 50% to move the tooltip triangle to the horizontal center of the tooltip box */
  transform: translateX(var(--translateX));
  /*   Additional browser compatibility for 'transform': */
  -moz-transform: translateX(var(--translateX));
  -webkit-transform: translateX(var(--translateX));
}
.broadband-label.broadband-label-blue .tooltip::after {
  border-color: #513594 transparent transparent transparent;
}
.broadband-label .tooltip::before {
  /* hitbox for hover */
  content: "";
  position: absolute;
  top: calc(var(--y-overflow) / -2);
  left: calc(var(--x-overflow) / -2);
  height: calc(100% + var(--y-overflow));
  width: calc(100% + var(--x-overflow));
  background: rgba(0, 0, 0, 0);
  /* border: 1px solid green; */
}
.broadband-label .tooltip .tooltip::before:hover + * {
  opacity: 1;
}

@media (max-width: 767px) {
  .broadband-label .container-wraper .row {
    display: block;
  }
  .broadband-label .actHeader,
  .broadband-label .dbHeader,
  .broadband-label .acpHeader,
  .broadband-label .diHeader,
  .broadband-label .swpHeader,
  .broadband-label .csHeader {
    text-align: left;
  }
}
.margin-top-30p {
  margin-top: 30px;
}

/*# sourceMappingURL=global-broadband-label-styles.css.map */