.map-interactive .canvasAnimationAppSection{position: relative; overflow-x: clip;}
.min-height{min-height: 100%}
.map-interactive .min-height img.mapImage{position: absolute;max-width: 100%;top: 0;transform: none;z-index: -100;filter: opacity(0.2);z-index: -1;pointer-events: none}
.map-interactive .statsDetails > span:first-child{margin-right: 13px}
.map-interactive canvas{flex: 1;width: 100% !important;height: 100% !important;display: block;border: none;animation: rotate 35s ease-in-out infinite; z-index: -1; position: relative;}
.map-interactive .canvasWrapper{max-width: 100%;/*min-height: 500px;*/position: absolute;pointer-events: none;}
.map-interactive .canvasWrapper[data-name="latin-america-&-caribbean"]{bottom: 40%;left: 34%; z-index: 1;}
.map-interactive .canvasWrapper[data-name="latin-america-&-caribbean"] canvas{animation-delay: 1s}
.map-interactive .canvasWrapper[data-name="europe"] canvas{animation-delay: 2s}
.map-interactive .canvasWrapper[data-name="africa"] canvas{animation-delay: 3s}
.map-interactive .canvasWrapper[data-name="asia-pacific"] canvas{animation-delay: 4s}
.map-interactive .canvasWrapper[data-name="north-america"] canvas{animation-delay: 5s}
.map-interactive .canvasWrapper[data-name="europe"]{left: 55%;top: 20%}
.map-interactive .canvasWrapper[data-name="africa"]{top: 50%;right: 44%}
.map-interactive .canvasWrapper[data-name="asia-pacific"] {top: 43%;right: 20%;}
.map-interactive .canvasWrapper[data-name="north-america"]{top: 25%; left: 20%;}
.map-interactive .canvasWrapper:before{content: none;width: 75%;height: 40%;background-color: transparent;position: absolute;top: 30%;left: 15%;transform: translate(-50%, -50%);background: radial-gradient(circle,rgb(124 68 181 / 70%) 11%,rgb(87 31 135 / 64%) 36%,rgba(0, 0, 0, 0) 50%);filter: blur(2px) brightness(1.2);animation: glowEffect 5s infinite alternate, moveEffect 8s infinite linear;z-index: -1;}
.map-interactive .boxWrapper .expandIcon{display: none;position: absolute;top: 5px;right: 5px}
.map-interactive .boxWrapper{background: rgba(255, 255, 255, 0.6);backdrop-filter: blur(6px);padding: 16px;position: absolute;/*top: 50%;left: auto;right: -70px;transform: translateX(150px);*/pointer-events: all; z-index: 10;/*right: auto;top: calc(50% + 60px);left: calc(50% + 130px);transform: translate(-50%, -50%);bottom: auto;*/}
.map-interactive .countryName{color: var(--text-color)}
.map-interactive .statsDetails{color: var(--text-color)}
.map-interactive .imgWrapper{max-width: 70px}
.map-interactive .innerBoxWrapper{gap: 16px}
.map-interactive .modal_poup{background: rgba(255, 255, 255, 0.70);padding: 16px;position: absolute;width: 100%;top: 60%;transform: translateY(-50%);max-width: 700px;display: none}
.map-interactive .closePopup{position: absolute;width: 26px !important;height: 26px;right: 20px;padding: 0 !important;top: 20px}
.map-interactive div[id^="popup_"]{display: none}
.map-interactive .canvasAnimationAppSection.loading:before {content: "";background-image: url('/~/media/Images/D/Diageo-V2/Diageo-Corp/map-interactive/loader-svg.svg');background-repeat: no-repeat;background-position: center;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
.map-interactive .canvasAnimationAppSection.loading:after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: transparent;}
.map-interactive .statsDetails.text-white { color: var(--white); }
.map-interactive .countryName.text-white { color: var(--white); }
.map-interactive .bottomDataContainer { padding-top: 2.4rem; border-top: 2px solid var(--white); }
.map-interactive .boxWrapper::before {position: absolute;content: '';display: inline-block;height: 21px;width: 21px;top: 0;left: -21px;background: var(--text-color);clip-path: polygon(0 0, 100% 100%, 100% 0);}
.map-interactive .bottomData-statsDetailsWrapper{gap: 8px;}
.map-interactive .bottomData .countryName{margin-bottom: 4px;}
.map-interactive .statsDetails *{top: 0; bottom: 0;}
.map-interactive .mapImgWrapper{margin-top: -4rem; z-index: 0; pointer-events: none;}
.map-interactive .canvasWrapperOuter{position: relative;}
.map-interactive .bottomData-boxWrapper{column-gap: var(--sm-4); row-gap: var(--sm-2)}
.map-interactive .boxBlocksMobi .boxWrapper{position: relative; top: 0; left: 0; right: 0; transform: none;}
.map-interactive .boxBlocksMobi .boxWrapper::before{content: none;}
.map-interactive .boxBlocksMobiWrapper{display: flex; flex-direction: column; gap: var(--sm-2); margin-bottom: 32px; margin-top: 11px;}

@media all and (max-width: 1199.98px){
/*.map-interactive .canvasWrapper{min-height: 400px;}*/
}
@media all and (max-width: 991.98px){
/*.map-interactive .canvasWrapper{min-height: 350px}*/
 .map-interactive .canvasWrapper[data-name="latin-america-&-caribbean"]{bottom: 25%;left: 35%}
 .map-interactive .canvasWrapper[data-name="africa"]{top: 70%;right: 45%}
 /*.map-interactive .canvasWrapper:nth-child(4) {margin-left: 0;}*/
 .map-interactive video{scale: 0.7 !important;}
}
@media all and (max-width: 767.98px){
.map-interactive .canvasWrapper{min-height: 100%; min-width: 100%;}
.map-interactive .mapImgWrapper{margin-top: 0}
.map-interactive .canvasWrapper[data-name="latin-america-&-caribbean"]{bottom: -55%;left: 36%}
.map-interactive .canvasWrapper[data-name="europe"]{left: 60%;top: 10%}
.map-interactive .canvasWrapper[data-name="asia-pacific"]{left: 85%;}
.map-interactive .canvasWrapper[data-name="africa"]{top: 45%; left: 59%;}
.map-interactive .canvasWrapper[data-name="north-america"]{top: 20%; left: 25%;}
.map-interactive video{scale: 0.5 !important;}
}

@keyframes rotate{from{rotate: 0deg}to{rotate: 360deg}}
@keyframes glowEffect{0%{filter: blur(2px) brightness(1.2)}50%{filter: blur(4px) brightness(1.6)}100%{filter: blur(2px) brightness(1.2)}}
@keyframes moveEffect{0%{transform: translate(0, 0)}25%{transform: translate(20px, -20px)}50%{transform: translate(0, 20px)}75%{transform: translate(-20px, -20px)}100%{transform: translate(0, 0)}}


.distilled__tab.active{pointer-events: none;cursor: default;}
.map-interactive .innerBoxWrapper .imgWrapper{height: 7rem; aspect-ratio: 1;}
.map-interactive .innerBoxWrapper .imgWrapper img{min-height: 100%; min-width: 100%; object-fit: cover;}

.map-interactive video{position: absolute;transition: rotate 5s linear, opacity 2s linear;}

@media (min-width: 992px){
.map-interactive .min-height img.mapImage{min-height: 40rem;object-fit: cover;}
.map-interactive .canvasWrapperOuter{min-height: 40rem;}
}