/* fonts */
[lang]:lang(ar),
body:lang(ar),
.typography-intro:lang(ar),
.button:lang(ar),
.section-price .template-item-link:lang(ar),
.colornav-link.current .colornav-label:lang(ar),
.colornav-value:checked ~ .colornav-link .colornav-label:lang(ar),
#ac-globalfooter .ac-gf-sosumi p:lang(ar),
#ac-globalfooter .ac-gf-sosumi li:lang(ar) {
  font-family: "SF Pro AR Text", "SF Pro Gulf", "SF Pro Text", "SF Pro Icons",
    "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.typography-headline-elevated:lang(ar),
.section-compare-table .compare .compare-rowheader-style:lang(ar),
.template-badge .badge-value:lang(ar) {
  font-family: "SF Pro AR Display", "SF Pro Gulf", "SF Pro Display",
    "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/* fonts ends */

.template-dropdown .selector-element::before {
  right: unset;
  left: 0;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0) 0%,
    #fff 50%,
    #fff 100%
  );
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.icon-chevronright::before,
.icon-chevronright::after {
  content: "";
}

.compare-modal .device-content ul {
  text-align: right;
  padding-left: unset;
  margin-left: unset;
}

.compare-modal .device-content li::before {
  padding-right: unset;
  padding-left: 0.5em;
}

.compare-modal li:has(.modal-inline-disclosure):before {
  padding-left: 0 !important;
}

@media only screen and (max-width: 340px) {
  .template-badge .badge-value {
    font-size: 34px;
  }
}

#backport {
  overflow: scroll;
}

.backport-row {
  padding-right: unset;
  padding-left: 500px;
}

.compare-modal .device-content {
  margin-left: auto;
  margin-right: auto;
  width: 250px;
}

.xs-show {
  display: none;
}

@media only screen and (max-width: 375px) {
  .xs-show {
    display: block;
  }
}