@ptcwebops/ptcw-design 5.4.5 → 5.4.7

package/dist/collection/components/ptc-button/ptc-button.css

@@ -346,8 +346,7 @@ a.center {
 .ptc-tertiary:focus-visible,
 .icon-toggle:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 .ptc-primary span,
 .ptc-quaternary span,
@@ -402,6 +401,15 @@ a.center {
 .icon-toggle.large span {
   font-size: var(--ptc-font-size-large);
 }
+.ptc-primary.acc-alt-style:focus-visible,
+.ptc-quaternary.acc-alt-style:focus-visible,
+.ptc-secondary.acc-alt-style:focus-visible,
+.ptc-tertiary.acc-alt-style:focus-visible,
+.icon-toggle.acc-alt-style:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  border: 2px solid white;
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 .ptc-primary {
   background: var(--color-gray-12);

package/dist/collection/components/ptc-button/ptc-button.js

@@ -15,6 +15,7 @@ export class PtcButton {
     this.tabNav = 0;
     this.styles = undefined;
     this.textAlign = undefined;
+    this.enableAccessibilityAltStyle = false;
     this.size = undefined;
     this.buttonTitle = undefined;
     this.ariaLabel = '';
@@ -61,7 +62,8 @@ export class PtcButton {
       ['disabled']: this.disabled ? true : false,
       ['active']: this.active ? true : false,
       [this.textAlign]: true,
-      [this.size]: true
+      [this.size]: true,
+      ['acc-alt-style']: this.enableAccessibilityAltStyle
     };
   }
   static get is() { return "ptc-button"; }
@@ -310,6 +312,24 @@ export class PtcButton {
         "attribute": "text-align",
         "reflect": false
       },
+      "enableAccessibilityAltStyle": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable Accessibility Alternate Styling"
+        },
+        "attribute": "enable-accessibility-alt-style",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "size": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/ptc-card/ptc-card.css

@@ -200,7 +200,7 @@ ptc-link, ptc-square-card,
   border-radius: var(--ptc-border-radius-standard);
 }
 :host(.clip-edge-card) .card-body {
-  transform: translateY(calc((-1) * var(--ptc-element-spacing-04)));
+  transform: translateY(calc(-1 * var(--ptc-element-spacing-04)));
   overflow: hidden;
   width: calc(95% - var(--ptc-element-spacing-04) - var(--ptc-element-spacing-04));
   font-size: var(--ptc-font-size-xx-small);
@@ -392,7 +392,7 @@ ptc-link, ptc-square-card,
 :host(.horizontal-card) .link-wrapper:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 :host(.horizontal-card) .card-media {
   display: flex;
@@ -1022,7 +1022,7 @@ ptc-link, ptc-square-card,
 :host(.case-studies-card) .link-wrapper:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 :host(.case-studies-card) .card-media {
   width: 100%;
@@ -1349,7 +1349,7 @@ ptc-link, ptc-square-card,
 :host(.featured-horizontal-card) .link-wrapper:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 :host(.featured-horizontal-card) .card-media {
   width: 100%;

package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css

@@ -1133,29 +1133,29 @@ ptc-link, ptc-square-card,
 
 .mdc-checkbox {
   transform: translateX(-8px);
-  padding: calc((34px - 18px) / 2);
+  padding: 8px;
   /* @alternate */
   padding: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  margin: calc((34px - 34px) / 2);
+  margin: 0px;
   /* @alternate */
   margin: calc((var(--mdc-checkbox-touch-target-size, 34px) - 34px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__background {
-  top: calc((34px - 18px) / 2);
+  top: 8px;
   /* @alternate */
   top: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
-  left: calc((34px - 18px) / 2);
+  left: 8px;
   /* @alternate */
   left: calc((var(--mdc-checkbox-ripple-size, 34px) - 18px) / 2);
 }
 .mdc-checkbox .mdc-checkbox__native-control {
-  top: calc((34px - 34px) / 2);
+  top: 0px;
   /* @alternate */
   top: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  right: calc((34px - 34px) / 2);
+  right: 0px;
   /* @alternate */
   right: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
-  left: calc((34px - 34px) / 2);
+  left: 0px;
   /* @alternate */
   left: calc((34px - var(--mdc-checkbox-touch-target-size, 34px)) / 2);
   width: 34px;

package/dist/collection/components/ptc-homepage-video-background/ptc-homepage-video-background.css

@@ -294,7 +294,7 @@ ptc-link, ptc-square-card,
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 9;
+  z-index: 11;
   width: 100%;
   height: 100%;
 }
@@ -330,6 +330,10 @@ ptc-link, ptc-square-card,
 .card-links .card-section .card-link:active .bgp, .card-links .card-section .card-link.active .bgp {
   opacity: 1;
 }
+.card-links .card-section .card-link:focus-visible, .card-links .card-section .card-link:focus, .card-links .card-section .card-link:focus-within {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 .card-links .card-section:before {
   position: absolute;
   width: 32px;
@@ -408,6 +412,11 @@ ptc-link, ptc-square-card,
 .card-section.in-view {
   animation-name: fadeUpInContainer;
 }
+@media only screen and (min-width: 1200px) {
+  .card-section.in-view {
+    overflow: visible !important;
+  }
+}
 .card-section.in-view .card-link {
   animation-name: fadeUpIn;
 }

package/dist/collection/components/ptc-info-tile/ptc-info-tile.css

@@ -180,8 +180,7 @@ ptc-link, ptc-square-card,
 }
 .tile:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
-  border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 
 ::slotted(img[slot=tile-image]) {

package/dist/collection/components/ptc-info-tile/ptc-info-tile.js

@@ -5,6 +5,7 @@ export class PtcInfoTile {
     this.variant = undefined;
     this.styles = undefined;
     this.trackerId = undefined;
+    this.accessibilityIndex = 0;
   }
   handleClick() {
     this.tileClick.emit();
@@ -30,7 +31,7 @@ export class PtcInfoTile {
   }
   render() {
     const content = (h("div", { class: "tile-content" }, h("span", { class: "tile-title-span" }, h("slot", { name: "tile-title" })), h("div", { class: "tile-title-desc" }, h("slot", { name: "tile-description" }))));
-    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: `tile ${this.variant}`, onClick: () => this.handleClick(), tabindex: "0" }, this.variant === 'image' && (h("div", { class: "tile-image" }, h("slot", { name: "tile-image" }))), content, this.link && h("a", { href: this.link, class: "link-overlay link-press", tabindex: "-1" }))));
+    return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { id: this.trackerId, class: `tile ${this.variant}`, onClick: () => this.handleClick(), tabindex: this.accessibilityIndex }, this.variant === 'image' && (h("div", { class: "tile-image" }, h("slot", { name: "tile-image" }))), content, this.link && h("a", { href: this.link, class: "link-overlay link-press", tabindex: "-1" }))));
   }
   static get is() { return "ptc-info-tile"; }
   static get encapsulation() { return "shadow"; }
@@ -113,6 +114,24 @@ export class PtcInfoTile {
         },
         "attribute": "tracker-id",
         "reflect": false
+      },
+      "accessibilityIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "accessibility-index",
+        "reflect": false,
+        "defaultValue": "0"
       }
     };
   }

package/dist/collection/components/ptc-inline-cta/ptc-inline-cta.css

@@ -99,7 +99,7 @@ ptc-link, ptc-square-card,
   padding: 2px;
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 @media only screen and (min-width: 768px) {
   :host .small-inline-cta-container {
@@ -179,7 +179,7 @@ ptc-link, ptc-square-card,
   padding: 2px;
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 @media only screen and (min-width: 480px) {
   :host .big-inline-cta-container .cta-content .cta-body {
@@ -284,7 +284,7 @@ ptc-link, ptc-square-card,
   padding: 2px;
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 @media only screen and (min-width: 768px) {
   :host .bottom-inline-cta-container {

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css

@@ -1101,7 +1101,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1118,7 +1118,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 
@@ -1543,7 +1543,7 @@ a.disabled {
 :host(.blog-jumbotron) .blog-author-name:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }
 :host(.blog-jumbotron) .image-container {
   background: white;

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.js

@@ -15,7 +15,7 @@ export class PtcJumbotron {
     this.playButtonTitle = undefined;
     this.pauseButtonTitle = undefined;
     this.buttonLocation = undefined;
-    this.buttonTabIndex = false;
+    this.buttonTabIndex = 0;
     this.contentBackground = undefined;
     this.contentColor = undefined;
     this.textAlign = 'left';
@@ -57,7 +57,7 @@ export class PtcJumbotron {
         break;
       case 'dark-video':
       case 'light-video':
-        mediaElement = (h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": "true" }, ' ', this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, ' ', h("slot", { name: "video" }))) : null));
+        mediaElement = (h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex }, ' ', this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, ' ', h("slot", { name: "video" }))) : null));
         break;
       case 'dark':
       case 'light':
@@ -393,22 +393,22 @@ export class PtcJumbotron {
         "reflect": false
       },
       "buttonTabIndex": {
-        "type": "boolean",
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "number",
+          "resolved": "number",
           "references": {}
         },
         "required": false,
-        "optional": true,
+        "optional": false,
         "docs": {
           "tags": [],
           "text": ""
         },
         "attribute": "button-tab-index",
         "reflect": false,
-        "defaultValue": "false"
+        "defaultValue": "0"
       },
       "isTransitioning": {
         "type": "boolean",

package/dist/collection/components/ptc-media-card/ptc-media-card.css

@@ -220,6 +220,10 @@ ptc-link, ptc-square-card,
   -webkit-transition: none !important;
   -o-transition: none !important;
 }
+:host(.case-study-icon) .case-study-img-anchor:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
 
 @media (min-width: 768px) {
   :host(.case-study-icon) {

package/dist/collection/components/ptc-media-card/ptc-media-card.js

@@ -52,7 +52,7 @@ export class PtcMediaCard {
       //   : null)}
       style: this.cardType != "case-study-icon" ?
         ((this.isHovered && this.hoverBackgroundImage) ? { backgroundImage: `url(${this.hoverBackgroundImage})` } : { backgroundImage: `url(${this.activeBackgroundImage})` }) : {} }, h("slot", { name: "seo-content" }), this.cardType != "case-study-icon" ?
-      (h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())) : null, this.cardType === "case-study-icon" ? (h("div", { id: this.trackerId, class: "tracker-div" }, h("a", { class: "case-study-img-anchor", target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, h("img", { class: "case-study-bg-img", src: this.activeBackgroundImage, alt: this.activeBackgroundImageAlt }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage, alt: this.iconImageAlt }))))
+      (h(Tag, { class: 'anchor-wrap', target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, isVideoUrl && (h("video", { muted: true, loop: true, playsinline: true, poster: this.activeBackgroundImage, ref: el => (this.videoEle = el), style: this.isHovered ? { display: 'block' } : { display: 'none' } }, h("source", { src: this.hoverBackgroundImage, type: "video/mp4" }, "Your browser does not support the video tag."))), this.cardType === "media-card" && h("ptc-overlay", { "filter-color": "black-2" }), this.cardType === "media-card" && this.getCardText())) : null, this.cardType === "case-study-icon" ? (h("div", { id: this.trackerId, class: "tracker-div" }, h("a", { class: "case-study-img-anchor mf-listen", target: this.target, href: this.cardHref, rel: this.rel, "aria-label": this.cardHref ? 'Read more about ' + this.ariaLabel : undefined }, h("img", { class: "case-study-bg-img", src: this.activeBackgroundImage, alt: this.activeBackgroundImageAlt }), h("div", { class: "after" }), h("img", { class: "case-study-icon-img", src: this.iconImage, alt: this.iconImageAlt }))))
       : null));
   }
   getCssClassMap() {

package/dist/collection/components/ptc-pagenation/ptc-pagenation.css

@@ -128,7 +128,7 @@ ptc-link, ptc-square-card,
   width: 1.125rem;
   height: 1.125rem;
   border: 1px solid var(--color-gray-10);
-  border-radius: calc(var(--ptc-border-radius-standard)/2);
+  border-radius: calc(var(--ptc-border-radius-standard) / 2);
   transition: background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium);
 }
 .standard-filter .next-button:hover, .standard-filter .previous-button:hover {

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -1046,7 +1046,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid .u-3-col {
-    width: calc(33.333333333333% - 10.66666666px);
+    width: calc(33.3333333333% - 10.66666666px);
   }
 }
 .u-3-col-grid.u-col-space-lg {
@@ -1063,7 +1063,7 @@ ptc-link, ptc-square-card,
 }
 @media only screen and (min-width: 992px) {
   .u-3-col-grid.u-col-space-lg .u-3-col {
-    width: calc(33.333333333333% - 21.3333333px);
+    width: calc(33.3333333333% - 21.3333333px);
   }
 }
 

package/dist/collection/components/ptc-social-icons/ptc-social-icons.css

@@ -74,5 +74,5 @@ ptc-link, ptc-square-card,
 :host div a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
-  outline: 5px solid #003dd6;
+  outline: 5px solid var(--keyboard-nav-outline);
 }

package/dist/collection/components/ptc-textfield/ptc-textfield.css

@@ -2215,9 +2215,9 @@
 .iti__v-hide {
   visibility: hidden;
 }
-.iti input,
-.iti input[type=text],
-.iti input[type=tel] {
+.iti input.iti__tel-input,
+.iti input.iti__tel-input[type=text],
+.iti input.iti__tel-input[type=tel] {
   position: relative;
   z-index: 0;
   margin-top: 0 !important;
@@ -2256,26 +2256,35 @@
   border-top: none;
   border-bottom: 4px solid #555;
 }
-.iti__country-list {
+.iti__dropdown-content {
   position: absolute;
   z-index: 2;
-  list-style: none;
-  padding: 0;
-  margin: 0 0 0 -1px;
+  margin-left: -1px;
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
   background-color: white;
   border: 1px solid #ccc;
-  white-space: nowrap;
   max-height: 200px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 }
-.iti__country-list--dropup {
+.iti__dropdown-content--dropup {
   bottom: 100%;
   margin-bottom: -1px;
 }
+.iti__search-input {
+  width: 100%;
+  border-width: 0;
+}
+.iti__country-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.iti--flexible-dropdown-width .iti__country-list {
+  white-space: nowrap;
+}
 @media (max-width: 500px) {
-  .iti__country-list {
+  .iti--flexible-dropdown-width .iti__country-list {
     white-space: normal;
   }
 }
@@ -2307,20 +2316,20 @@
   margin-right: 0;
   margin-left: 6px;
 }
-.iti--allow-dropdown input,
-.iti--allow-dropdown input[type=text],
-.iti--allow-dropdown input[type=tel], .iti--separate-dial-code input,
-.iti--separate-dial-code input[type=text],
-.iti--separate-dial-code input[type=tel] {
+.iti--allow-dropdown input.iti__tel-input,
+.iti--allow-dropdown input.iti__tel-input[type=text],
+.iti--allow-dropdown input.iti__tel-input[type=tel], .iti--separate-dial-code input.iti__tel-input,
+.iti--separate-dial-code input.iti__tel-input[type=text],
+.iti--separate-dial-code input.iti__tel-input[type=tel] {
   padding-right: 6px;
   padding-left: 52px;
   margin-left: 0;
 }
-[dir=rtl] .iti--allow-dropdown input,
-[dir=rtl] .iti--allow-dropdown input[type=text],
-[dir=rtl] .iti--allow-dropdown input[type=tel], [dir=rtl] .iti--separate-dial-code input,
-[dir=rtl] .iti--separate-dial-code input[type=text],
-[dir=rtl] .iti--separate-dial-code input[type=tel] {
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
+[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel], [dir=rtl] .iti--separate-dial-code input.iti__tel-input,
+[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=text],
+[dir=rtl] .iti--separate-dial-code input.iti__tel-input[type=tel] {
   padding-right: 52px;
   padding-left: 6px;
   margin-right: 0;
@@ -2339,12 +2348,12 @@
 .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
   cursor: default;
 }
-.iti--allow-dropdown input[disabled] + .iti__flag-container:hover .iti__selected-flag,
-.iti--allow-dropdown input[readonly] + .iti__flag-container:hover .iti__selected-flag {
+.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
+.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
   background-color: transparent;
 }
 .iti--separate-dial-code .iti__selected-flag {
@@ -2368,18 +2377,26 @@
   cursor: pointer;
 }
 
-.iti-mobile .iti--container {
-  top: 30px;
-  bottom: 30px;
-  left: 30px;
-  right: 30px;
+.iti--fullscreen-popup.iti--container {
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   position: fixed;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.iti--fullscreen-popup.iti--container.iti--country-search {
+  justify-content: flex-start;
 }
-.iti-mobile .iti__country-list {
+.iti--fullscreen-popup .iti__dropdown-content {
   max-height: 100%;
-  width: 100%;
+  position: relative;
 }
-.iti-mobile .iti__country {
+.iti--fullscreen-popup .iti__country {
   padding: 10px 10px;
   line-height: 1.5em;
 }
@@ -2405,7 +2422,7 @@
 .iti__flag.iti__va {
   width: 15px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-size: 5762px 15px;
   }
@@ -3471,7 +3488,7 @@
   background-color: #dbdbdb;
   background-position: 20px 0;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 2x) {
   .iti__flag {
     background-image: url("../img/flags@2x.png?1");
   }