#content * { font-family:Montserrat, Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"}
#content p { font-weight:300;}

/*LAK - 7/28/2025*/
sup.reports-servicemark {font-family: Tahoma, "Segoe UI Symbol", Verdana, "sans-serif"!important; vertical-align: top;}


/* IDC CODE - 17/6/2025 */
#content ul li a, #content ol li a, #content p a{color: #004677;}
section.bg-dkblue p, #content section.bg-dkblue h4 {color: #fff;}
#content .section.bg-dkblue{background-color: #002449;}
#content .section.bg-ltblue{background-color: #004677;}
#content .section.angledivider p:first-child {color:#ffffff; font-size:1.175rem; font-weight:600;letter-spacing: 2px; margin-bottom:16px;}
#content .section.angledivider p:last-child{margin-bottom: 0;}
/* #content .section.bg-dkblue h4{color:#009DDB;font-weight:600;text-transform:uppercase;font-size: 1.375rem; margin-bottom:8px;} */
/* #content .mb-16 {margin-bottom: 16px !important;} */
/* #content .section.bg-ltblue p, #content .section.bg-ltblue h4.small {color:#ffffff;} */
 #content .section.bg-ltblue p, #content .section.bg-ltblue h4.small {color:#ffffff;}
/* #content .section.bg-ltblue h4.small {font-weight:600;} */


/* section with blue stripe */ 
#content .section.bg-dkblue p.arrow, #content .section.bg-dkblue p.arrow a, #content .section.bg-ltblue p.arrow a{color:#ffffff;}
#content .section.bg-dkblue p:first-child {color:#ffffff;}
/* #content .section.bg-dkblue p.arrow a {font-weight: 600 !important;}	 */

/* to be remvoed */
#content .section.bg-dkblue hr.ltblue {margin: 16px auto; background-color: #009DDB; height: 1px;}
#content h4.ltblue {color: #009DDB !important;}
#content h4.ucase{text-transform:uppercase;}
#content h4.small.ltblue{font-weight:500;}
/* to be remvoed */

#content .section.bg-dkblue hr.brtblue {margin: 16px auto; background-color: #009DDB; height: 1px;}

#content .section.bg-ltblue h2 {color:#ffffff}

/* 2024-marketing-outlook-report  */
#content .section.bg-dkblue ul {list-style: none;}
#content .section.bg-dkblue ul li{cursor:pointer;padding-left: 20px;}
#content .section.bg-dkblue ul li a { color: #ffffff; text-decoration:none;}

/* Template style overide */
#content .section.bg-dkblue ul li:before{display:none;}
#content .section.bg-dkblue ul li a:before {display: block; content: '\25b8'; color: #009DDB; position: absolute; margin-left: -24px;transition: all .25s ease-in-out;top: 0px;}
#content .section.bg-dkblue ul li a:hover:before {transform: scale(1.5);}

#content .section.bg-dkblue p a{color:#ffffff; /* font-weight:unset; */}


#content p.larger{font-size: 1.375rem;}
#content .text-white{color: #ffffff;}


/* image on blue stripe 6/18/2025 */
.img-left {display: flex; align-items: center; gap: 40px;}
#content .img-left img {width:186px; object-fit:cover;}
.img-left .t-left {flex:1;max-width: 67%;}


/* report pages order list */
#content ol {list-style: none; margin: 0px 0px 16px 0px; padding: 0px;}
#content ol.number{counter-reset: mycounter;}
#content ol li {list-style: none;padding: 0px;position: relative; }
#content ol.number li {display: flex;align-items: center;padding-left: 48px;margin-bottom: 16px;}
#content ol.number li a{text-decoration:underline;font-weight: unset;color:#004677;}
#content ol.number li a:hover{text-decoration:none;}
#content ol.number li:last-child{margin-bottom:0px;}
#content ol.number li:before{content: counter(mycounter); counter-increment: mycounter;font-size: 2rem;font-weight: 700; font-family: Montserrat;width: 32px; text-align: right; display: inline-block;vertical-align: middle;position: absolute;left: 0;}  
/* to be remvoed */
#content ol.number.ltblue li:before{color: #009DDB;}
/* to be remvoed */

#content ol.number.brtblue li:before{color: #009DDB;}

/* Nested list with normal numbering*/
#content ul li ol.number { margin-top: 16px;margin-left: 16px;}
#content ul li ol.number li { margin-bottom: 2px;padding-left: 26px;}
#content ul li ol.number li:before {content: counter(mycounter) '.';background: unset;border: unset;height: unset;top: unset;    font-size: inherit; font-family: inherit; width: auto;font-weight: normal;}



/* 2024-cpg-and-grocery-consumer-report */
#content .shopper-strategies ul{margin-bottom:25px;}
#content .shopper-strategies img{border: 3px dotted #a4a4a4;}


/* report page report vitals */
.vitals{border:1px Solid #009DDB;padding:32px;}
.vitals h2{border-bottom:1px Solid #009DDB;font-size:1.75rem;padding-bottom:8px;}
.vitals p strong{font-size:1.25rem;font-family:Montserrat;margin-right:8px;}

/* #content .vitals ul li{margin-left: 35px;} */


/* Dounut chart */  
.cchart .circle-bg {fill: none;stroke:#ECECEC; stroke-width: 2.8px;}
.cchart .circle{fill: none;stroke-width: 2.8; stroke-linecap: round;}
/* to be removed */
.cchart .circle.ltblue{stroke: #009DDB;}
/* to be removed */
.cchart .circle.brtblue{stroke: #009DDB ;}
.cchart .percentage {font-size: .5rem;text-anchor: middle;font-weight: 400;fill: #002449;}
.cchart.animated .circle{animation: progress 1s linear forwards;}
@keyframes progress {0% {stroke-dasharray: 0 100; }}
.cchart {margin: 0 auto;width: 200px;}


/* angle with blue stripe */
section.angledivider {position: relative;}
section.angledivider .angle {position:absolute;right:-70px;top:50%;transform: translateY(-50%);height:200%;max-width: 25%;}
section.angledivider .angle svg{height:250px; fill: none;stroke: #009DDB;stroke-linecap: square;stroke-miterlimit: 10;stroke-width:0.2px;height:100%;}

#content .section.angledivider h4 {color:#ffffff; font-size: 2.5rem; font-weight:300; text-transform:none; margin-bottom:16px;}
/* #content .section.angledivider p.arrow a:after {width: 14px;top:0;} */
/* #content .section.angledivider p.arrow a, #content .section.angledivider p.arrow a:after {/* font-weight:unset !important; */} */
/* #content .section.angledivider p.arrow a:after {font-weight:unset !important;} */


/* numbers with rectangle box animation */
#content h3.small{font-size:1.25rem;margin-bottom:8px;}
hr{margin:48px auto;}
#content hr.hr-inline {display: inline-block;}
.col_full + .col_full{margin-top:32px;}


/* horizontal chart label placed on top */
.hchart{display:table;position:relative;width:100%;margin-bottom:16px;}
.hchart label{font-size:1rem;font-weight:500;color:#002449;}
.hchart .hchart_item{display:table-row;}
.hchart_label{display:table-cell;vertical-align:middle; width:240px;padding:8px 0;text-align:right;}
.hchart_label label{display:block;margin-right:8px;}
.hchart_value{display:table-cell;vertical-align:middle;padding:4px 0;}
.hchart_value span{background-color:#002449;height:36px;display:block;float:left;color:#fff;line-height:36px;/*font-weight:bold;*/text-align:right;font-size:1.1875rem; width:0%;
 padding:0;word-break: break-all;transition:all 1s ease-in-out;}
.hchart_value span.brtblue {background-color:#009DDB}
.hchart_value span label{display:inline;color:#fff;font-size:1.1875rem;font-weight:700;padding-right:8px;}



.diagnostic-drivers .hchart_value span label {font-size: 3.063rem; font-weight: bold; float: left; margin-left: 5px;}

/* macro-marketing */
.hchart_value.hgroup {padding: 10px 0;}
.hchart_value.hgroup span {font-size: 14px; height:20px; float: none; line-height: 20px;}
.hchart_value.hgroup span label {font-size: 14px;}
	 

/* horizontal chart lable placed on left */
.hchart.stack .hchart_item{display:block;}
.hchart.stack .hchart_label{display:block;width:100%;text-align:left;line-height:1.25;padding-bottom:0px;}
.hchart.stack .hchart_value{display:block;height:32px;margin-bottom:16px;background-color:#f2f2f2;background-color:transparent;}

/* diagnostic-drivers value on chart 
.hchart_value_on {padding:10px 0;}
.hchart_value_on span label {font-size: 3.063rem;font-weight: bold;float: left;margin-left: 5px;}
.hchart_value_on span strong {float: left;color: #002449;font-size: 1rem;}
.hchart_value_on span strong {display:none;}
.hchart_value_on span.graphAnimate.animated strong{display:block;color:#fff;} */  

.hchart.stack .hchart_value span strong{float: left;font-size: 1rem; font-weight:500;margin-left: 10px;}
.hchart.stack .hchart_value span.graphAnimate.animated strong{display: block;}
.cgp-grocery-report .hchart.stack .hchart_value + .hchart_label {margin-bottom:16px;}	
#content .hchart.stack .hchart_item p {font-size:1rem;}
.hchart.stack.top-factor-hchart .hchart_value, .hchart.stack.video-screens .hchart_value{height: 36px; padding: 0; margin-bottom:0;}


/*  color needs to be renamed ltblue*/
.hchart_value span.ltblue{background-color:#004677;}
.hchart_value span.dkblue{background-color:#002449;}
.hchart_value span.brtblue{background-color:#009DDB;}
.hchart_value span.ltgrey{background-color:#f2f2f2;}
.hchart_value span.ltgrey label{color: #002449 !important;}

.legend span{color:#002449 !important;display:inline-block;font-size:1rem;line-height:32px;margin-right:16px;}
.legend span:last-child{margin-right:0px;}
.legend span:before{content:'';display:inline-block;height:16px;width:16px;background-color:#ccc;margin-right:8px;position:relative;top:2px}

.legend span.ltblue:before{background-color:#004677;}
.legend span.dkblue:before{background-color:#002449;}
.legend span.brtblue:before{background-color:#009DDB;}
.legend span.ltgrey:before{background-color:#f2f2f2;}
.legend span.none:before{display:none;}



/* Vertical chart start */
.vchart:after{content:'';clear:both;float:none;display:block;}
.vchart_item {display: inline-block; width: calc(20% - 12.8px); text-align: center; float: left; margin-right: 16px;}
.vchart_item:last-child{margin-right:0px;}
.vchart_value span {transition: all 1s ease-in-out;}
.vchart_value span {display: block; background-color: #002449; height: 300px; position: relative; margin: 0px auto; max-width: 48px; top: 100%;}

/*  to be removed */
.vchart_value span.ltblue {background-color: #004677;}
/*  to be removed */
.vchart_value span.brtblue {background-color:#009DDB;}
/*  to be removed */

.vchart_value span.dkblue {background-color:#002449;}

.vchart_value span.animated label {color:#000000;}

/*
.vchart_label label.icon span{display:none;}
.vchart_label label.icon.teal svg{fill:#002449;display:block;height:48px;width:48px;margin:0px auto;margin-top:12px;}
*/



.cgp-grocery-report .vchart_item {width: calc(33.33% - 12.8px);}
.cgp-grocery-report .vchart {margin-bottom: 8px; position: relative; top: -36px;}
.cgp-grocery-report .vchart_value, .diagnostic-drivers .vchart_value{height: 300px; position: relative; overflow: hidden;}
.cgp-grocery-report .vchart_label {font-weight:500;line-height: 1.25; margin-top: 6px;}



.cgp-grocery-report .vchart_value span label, .diagnostic-drivers .vchart_value span label{font-family: Montserrat; font-size: 1.25rem; font-weight: bold; color: #002449; line-height: 32px; position: absolute; transition: all 1s ease-in-out; opacity: 0; display: block; text-align: center; top: 0;width: 100%;}

.cgp-grocery-report .vchart_value span.animated label, .diagnostic-drivers .vchart_value span.animated label {top: -32px;opacity: 1;}

.diagnostic-drivers .vchart_value span.animated strong{color: #fff;font-size: 3.313rem;font-weight: bold;}
.diagnostic-drivers .vchart_item:nth-child(1) span.animated strong {position: absolute;bottom:86px;left: 6px;}
.diagnostic-drivers .vchart_item:nth-child(2) span.animated strong {position: absolute;bottom:100px;left: 8px;}
.diagnostic-drivers .vchart_item:nth-child(3) span.animated strong {position: absolute;bottom:106px;left: 8px;}
.diagnostic-drivers .vchart_item:nth-child(4) span.animated strong {position: absolute;bottom:105px;left: 8px;}



/* 2024-cpg-and-grocery-consumer-report page*/
#content .cgp-grocery-report .vchart + p {text-align:center;font-size:1.188rem;position:relative;padding-top:16px;margin-bottom:.5rem;line-height:1.25;}
#content .cgp-grocery-report .vchart + p + p {font-size:0.875rem; font-weight:400; text-align:center;}
#content .cgp-grocery-report .vchart + p:before {content: "\2193"; font-size: 2rem;line-height: 1.2;display: block; position: absolute; top:-35px;width: 20px;text-align:center;left:50%;margin-left:-10px;color:#000;}


/* transperant layer on image */
.imgbox {padding: 0;background: url(/img/2024-marketing-outlook-report/managing-security.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;}
.imgbox .transparent {background-color: #009DDB; color:#ffffff; opacity: 0.9;padding: 48px; text-align:center}
.imgbox p strong {font-size: 1.4rem;}
#content .imgbox p {color:#ffffff; margin:0;font-size:1.25rem;font-weight:700;}
#content .imgbox p.large {font-size:1.5rem;}
.transparent .nb_large + p {margin: 0 0 16px 0;}
.nb_large{font-size:4.5rem;line-height:72px;font-weight:400;font-family:Montserrat;}
.nb_large + p{max-width:400px;/*margin:0px auto;margin-top:16px;*/}
/* to be removed */
#content .nb_large.ltblue {color:#009DDB;}
/* to be removed */
#content .nb_large.brtblue {color:#009DDB;}
#content .nb_large.dkblue {color:#002449;}


/* 2024-marketing-outlook-report */
#content p strong.ltblue {color: #009DDB;}


.nb_large .icon-box {width:38px;height:38px;display: inline-flex;}
.nb_large .icon-box1 {width: 70px;height: 70px;display: inline-block;}


/* report page expert take section */
#content .callout {background-color: #f2f2f2;padding: 1rem;}
#content .callout div {display: flex;align-items: center;}
#content .callout div img {display: block; height: 96px; width: 96px; border-radius: 50%; border: 4px Solid #002449; float: left; margin-right: 16px;}
/* to be removed */
#content .callout div img.ltblue {border-color: #009DDB;}
/* to be removed */

#content .callout div img.brtblue {border-color: #009DDB;}

/* Reality report */
#content .callout div img.dkblue {border-color: #002449;}
#content .callout p:last-child {margin-bottom:0;}
#content .callout blockquote{margin-bottom:0;}


/* blockquote */
main#content .callout blockquote{appearance:none;font-size:1.175rem;color:#002449;font-family:Montserrat;font-weight:400;line-height:2rem;position:relative;padding-left:76px;}

main#content .callout blockquote:before{display:block;width:52px;height:49px;left:0;top:0;position:absolute;}
main#content .callout blockquote:before{content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 118.1'%3E%3Cpath style='fill:%23009DDB;' d='M71.8,118.1V61.8c-0.2-8.1,0.9-15.7,3.5-22.8c2.6-7.1,6.2-13.4,10.9-18.8c4.7-5.4,10.2-9.9,16.7-13.4 C109.3,3.3,116.4,1,124,0v24.3c-9.3,3.2-15.7,7.9-19.1,14.2c-3.4,6.3-5.2,13.9-5.2,23H124v56.7L71.8,118.1L71.8,118.1z M0,118.1 V61.8C-0.2,53.7,1,46.1,3.5,39c2.6-7.1,6.2-13.4,10.9-18.8c4.7-5.4,10.2-9.9,16.7-13.4C37.6,3.3,44.7,1,52.3,0v24.3 c-9.3,3.2-15.7,7.9-19.1,14.2c-3.4,6.3-5.2,13.9-5.2,23h24.3v56.7L0,118.1L0,118.1z'/%3E%3C/svg%3E"); }
 
main#content .callout blockquote:not(:has(:last-child:is(p)))::after {content:'"';}
main#content .callout blockquote p:last-child::after {content:'"';}


/* foot note */
#content .footnote {font-size: 14px;color: #555555;}

/* graybackround */
.ltgraybox {background-color: #f2f2f2; padding: 16px; margin-bottom: 16px;}
.graphbg {background: #f2f2f2;padding: 30px!important;} 

/* macro-marketing numbers in rectangle animation*/
.numblock{text-align:center;margin-bottom:32px;padding:16px;}
.numblock:after{content:'';display:block;clear:both;}
.numblock.outline{border:1px Solid #009DDB;}
.numblock.ltgray{background-color:#f2f2f2;}
.numblock strong{font-size:1.1875rem;font-weight:normal;margin-bottom:8px;display:block;}
.nb_left{width:50%;float:left;font-size:2.625rem;line-height:42px;font-weight:bold;font-family:Montserrat;border-right:1px solid #ccc;padding-right:16px;text-align:right;}
.nb_right{width:50%;float:right;font-size:2.625rem;line-height:42px;font-weight:bold;font-family:Montserrat;padding-left:16px;text-align:left;}

/* to be removed */
.numblock .brtblue{color:#009DDB;}

.numblock .brtblue{color:#009DDB;}
.numblock .dkblue{color:#002449;}

/*Numbers with percentage start*/	  
/* .nb_large + p {margin: 0 0 16px 0;} */
.nb_medium {font-size: 2rem; line-height: 48px; font-weight: bold; font-family: Montserrat;}
#content .nb-right {display: flex; position: relative; align-items: center;margin-bottom: 10px;}
#content .nb-right .nb_medium {padding-right: 30px; width:100px; text-align:left;}
#content .nb-right .nb_tright {flex:1;} 
#content .nb-right .nb_tright p {margin:0;}
#content .nb-right .nb_medium span.brtblue {color: #009DDB;}


.nb_people{position:relative;margin-bottom:16px;}
.nb_people .nb{font-size:2rem;line-height:32px;font-weight:bold;font-family:Montserrat;display:inline-block;}
.nb_people .nb{position:absolute;top:140px;width:100%;text-align:center;padding-left:6px;}
.nb_people .bg {height: auto;margin-bottom: 16px;width: auto;max-width: 300px}
.nb_people .nb{font-size: 1.5rem;top: 97px;}

.nb_people.ltblue .bg svg{fill:#009DDB;width:100%;}
.nb_people.ltblue .nb {color:#009DDB;width:100%;}
.nb_people.dkblue .bg svg{fill:#002449;width:100%;}
.nb_people.dkblue .nb {color:#002449;width:100%;}


/* peopel svg mordern marketers */
.multiple-people {max-width: 500px;margin-bottom: 16px;}
.three-person-icon {width: 65px;margin-top:16px;}
.multiple-people svg, .three-person-icon svg{ fill: #009DDB;}
.animated .person_bg_fill{opacity:1;}
.animated #person10 .person_bg_fill, 
.animated #person13 .person_bg_fill{opacity: 0;}
.animated #person1 .person_bg_fill{ transition:all 0.2s ease-in-out;}
.animated #person2 .person_bg_fill{ transition:all 0.4s ease-in-out;}
.animated #person3 .person_bg_fill{ transition:all 0.6s ease-in-out;}
.animated #person4 .person_bg_fill{ transition:all 0.8s ease-in-out;}
.animated #person5 .person_bg_fill{ transition:all 1s ease-in-out;}
.animated #person6 .person_bg_fill{ transition:all 1.2s ease-in-out;}
.animated #person7 .person_bg_fill{ transition:all 1.4s ease-in-out;}
.animated #person8 .person_bg_fill{ transition:all 1.6s ease-in-out;}
.animated #person9 .person_bg_fill{ transition:all 1.8s ease-in-out;}
.animated #person11 .person_bg_fill{ transition:all 0.2s ease-in-out;}
.animated #person12 .person_bg_fill{ transition:all 1s ease-in-out;}




/*Numbers in circle with percentage*/
.numblock-circle {width: 185px; height: 185px; padding: 22px 16px; border-radius: 50%; margin: 10% auto; background-color:#009DDB;}
.numblock-circle .nb_large {color: #ffffff; margin: 22% 0;}

/* diagnostic-drivers */
.numblocks {max-width: 700px;padding: 0;}
.numblock-box {text-align: center;margin-bottom: 32px;padding: 22px 16px;width: 140px;height: 140px;margin-right: 140px;}
.numblock-box.outline{background-color: #002449; border: none;}
.numblock-box .ltblue{color: #ffffff}
.numblock-box .nb_right span{font-size:3.125rem;}
.numblock-box strong {font-size: 1.125rem;font-weight: bold;line-height: 1.2;margin-top: 7px;color: #ffffff;}
.numblock-box .nb_right{text-align:center;float:none;width:100%;padding-left: 0px;color:#fff;}


/*Box with traingel */
.cgp-grocery-report .box {padding: 13%; text-align:center; color: #FFFFFf;}
.cgp-grocery-report .box.ltblue {background-color:#009DDB;}

.cgp-grocery-report .box.brtblue {background-color:#009DDB;}

#content .cgp-grocery-report .box h3 {color:#ffffff;margin-bottom:0; font-size: 2.7rem; font-weight: 600;}
#content .cgp-grocery-report .box h3 + p {font-size: 1.2rem; font-weight:600; line-height: 0.5;}	
.cgp-grocery-report .box .triangle { width: 0; height: 0; position:relative;top: -8px; left: 40%; border-left: 20px solid transparent; border-right: 20px solid transparent;border-bottom: 40px solid #A50050;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 30px;border-top-right-radius: 10px;border-radius:0px;}  
.cgp-grocery-report .box .triangle span{position: absolute; top: 9px; left: -4px; font-weight: bold; font-size: 1.3rem;}


/* 2024-marketing-outlook-report table */
table {border-collapse: collapse;width: 100%;border: 1px solid #b7b4b4;}
td {text-align: left; padding: 8px; font-size:1.1rem; font-weight:600;}
tr {background-color:#ffffff; height:50px;}
tr:nth-child(even) {background-color: #004677;color:#ffffff;}



/* chart/circle image with text right start */
.trightarea {display: flex;position: relative;align-items: center;}
.trightarea .cchart {flex: 1.4;padding: 10px;}
.trightarea .cchart svg {vertical-align: middle;}
#content .trightarea .cchart svg + p {font-size:1.4rem; font-weight:700; text-align:center;margin-bottom: 0;}
.trightarea .iright {flex: 1.6;padding: 10px;}
.d-chart .trightarea .cchart {flex: 1;}
.d-chart .trightarea .iright {flex: 2;}
.circle-img .trightarea .iright {margin: 20px 30px;}
#content .circle-img img{border-radius: 50%; width: 280px; border: 4px solid #009DDB;}
/* chart/image with text right end */




/* optichannel-opportunity */			
.foot-note { border: 1px Solid #009DDB; padding: 15px 15px;}
#content .foot-note p {margin-bottom: 0px; font-size: 1rem;}
	
	
/* report page text with arrow hover animation*/
#content p.arrow a{font-family:Montserrat;text-decoration:none;font-weight:600;font-size:1.175rem;letter-spacing:1px;text-transform:uppercase;position:relative;line-height:1;color:#004677;}
#content p.arrow a:after{white-space: nowrap;content: '\279E'; font-size: 1.5rem; line-height: 1.5rem; display: inline; margin-left:6px;position: relative; top: 2px;transition: all .25s ease-in-out;font-weight:500; width:26px;}
#content p.arrow a:before{content: ''; display: block; width: 0%; left:50%; background-color: #009DDB;transition: all .25s ease-in-out; position: absolute; bottom: -0.25rem; height: 2px;}
#content p.arrow a:hover:before{width:calc(100% - 27px);left:0px;}
#content p.arrow a:after{height:16px;width:16px; display: inline-block;margin-left:10px;}
#content p.arrow a:after{content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path style="fill:%23004677;" d="M7.3,14.9c-0.1,0-0.3-0.1-0.4-0.2l-0.8-0.8C6,13.8,6,13.7,6,13.5s0.1-0.3,0.2-0.4L10,9.3H2.5C2.2,9.3,2,9,2,8.7V7.6c0-0.3,0.2-0.5,0.5-0.5H10L6.1,3.2C6,3.1,6,2.9,6,2.8S6,2.5,6.1,2.4l0.8-0.8C7,1.5,7.2,1.5,7.3,1.5s0.3,0.1,0.4,0.2l6.2,6.2C13.9,7.9,14,8,14,8.2s-0.1,0.3-0.2,0.4l-6.2,6.2C7.6,14.8,7.4,14.9,7.3,14.9z"/></svg>');}

/* report page text with arrow hover animation on blue overlap */
#content .section.bg-dkblue p.arrow a:after, #content .section.bg-ltblue p.arrow a:after{ content:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path style="fill:%23FFFFFF;" d="M7.3,14.9c-0.1,0-0.3-0.1-0.4-0.2l-0.8-0.8C6,13.8,6,13.7,6,13.5s0.1-0.3,0.2-0.4L10,9.3H2.5C2.2,9.3,2,9,2,8.7V7.6c0-0.3,0.2-0.5,0.5-0.5H10L6.1,3.2C6,3.1,6,2.9,6,2.8S6,2.5,6.1,2.4l0.8-0.8C7,1.5,7.2,1.5,7.3,1.5s0.3,0.1,0.4,0.2l6.2,6.2C13.9,7.9,14,8,14,8.2s-0.1,0.3-0.2,0.4l-6.2,6.2C7.6,14.8,7.4,14.9,7.3,14.9z"/></svg>');}


/* Template override */
.col_half.dividerright.border-none {border: none;}


/* common class */
#content .d-mb-48 {margin-bottom: 48px;}
#content .pl-32 { padding-left: 32px;}
#content .pr-32 { padding-right: 32px;}
#content .mb-8 {margin-bottom: 8px;}	
#content .mt-16{margin-top:16px;}
#content .mt-32{margin-top:32px;}
#content .mb-32 {margin-bottom: 32px !important;}
#content .m-0{margin:0;}
#content .mt-60{margin-top: -60px;} 	

/*Number list 2024-cpg-and-grocery-consumer-report*/
.anchormap.mshow {display:none;}


/* future-ready-supply-chain-report-2024 */ 
#content .bright-bluebox {padding: 16px; margin: 30px 16px; border: 1px solid #002449; border-radius:10px;}
#content .bright-bluebox p {color: #002449; margin-bottom:0px;font-size: 1.3rem;}
  
@media (min-width: 1600px) {
	.img-left .t-left{max-width: 100%;}
}

@media (max-width: 1120px) {
	.col_half.dividerright {border-right: none;padding-right: 0%;}
	.col_half.dividerright + .col_half.col_last {padding-left: 0%;border: none;}
	#content .trightarea .cchart svg+p {font-size: 1.4rem;}
	
	/* diagnostic-drivers */
	.numblock-box {margin-right: 108px;}
	.nb_large .icon-box1 {width:150px;}
	
	.nb_people .nb {top: 80px;}
	.three-person-icon {width: 57px;}
	.multiple-people {width: 200px;}
}

@media (max-width:1024px){
	.d-chart .trightarea .iright {flex: 1;}
}

@media (max-width: 900px) {
	.col_half.dividerright {float:none;width:100%;margin-right:0px;padding:0;margin-bottom:16px !important;}
	.col_half.dividerright + .col_half.col_last {float:none;width:100%;margin-right:0px;padding:0;}
    #content .col_half.dividerright{margin-bottom: 32px!important; border-right: unset;}
	#content .cgp-grocery-report .box h3 + p{line-height: 1.2;}
	
	#content .cgp-grocery-report .vchart_item {width: calc(33.33% - 12.8px);}
	
	/* common class */
	.m-tleft {text-align:left !important;}
	.trightarea { display: block; text-align: center;}
	#content .circle-img img {margin: 0 auto;}
}

@media (max-width: 940px) {
    .nb_large + p {max-width: unset; width:100%;}	
	.imgbox .transparent .nb_large {font-size:3.5rem;}
	#content ol.number.anchormap li {display:block;}
	 .anchormap.mshow {display:block;}
}

@media (max-width: 880px) {
	.hchart_label{width:100px;}
	
	/* macro-marketing numbers animation*/
	.numblock .nb_left,	.numblock .nb_right{font-size:2.25rem;}
	
	.numblock-box {margin-right: 98px;}
}

@media (max-width: 800px) {
	section .angle{display:none;}
	.img-left .t-left{max-width: 100%;}
	
	/* macro-marketing numbers animation*/
	.numblock .nb_left,	.numblock .nb_right{font-size:2.125rem;}
	
	/* diagnostic-drivers */
	.nb_people .nb {top: 70px;}
}

@media (max-width: 760px) {
	.nb_medium, .nb_large{display:block;text-align:center;}
	.hchart.stack .hchart_label{width:100%;}
	.nb_large + p {text-align:center;}
    
	/* .nb_large + p { max-width: 400px; margin: 0px auto; margin-top: 16px;} */
    .cgp-grocery-report .box .triangle{left: 46%;} 
    
	/* helper class */
	.tcenter {text-align:center;}
    .m-tcenter {text-align:center;}
    .mobile-tcenter {text-align:center;} 	
	.m-mb-32 {margin-bottom:32px !important}
    .d-mb-48 {margin-bottom:0;}
	.pl-32 {padding-left: 0;}
    .pr-32 {padding-right: 0;}
	.mmt-50{margin-top:50px;}
	#content .mobile-mb-32 {margin-bottom:32px !important}
    	
	#content .pl-32 {padding-left: 0;}
	#content .pr-32 {padding-right: 0;}
  
	/* image on blue stripe */
	#content .img-left img {display:none;}
				
	/* macro-marketing hstacked chart*/
	.hchart.multiple span label {transform: rotate(-90deg);display: inline-block;font-size: 12px;padding: 0;margin: 0;margin-left: -2.5px;}
	
	/* diagnostic-drivers */
	.numblocks {margin-bottom: 32px;}
	
	.nb_people .nb {top: 125px;}
	.nb_people .bg {margin: 0px auto;}
	.nb_large.ltblue{margin-top: 50px;}
	.vchart_label label{word-break: break-all;}
	.multiple-people {width: 270px;margin: 0 auto;}
	.three-person-icon {width: 78px;margin: 0 auto;}
	.col_two_third .vchart .vchart_item { width: calc(20% - 1.8px);}
		
    /* #content .section.diagnostic-drivers .container .col_one_third {max-width: 300px !important; margin: 0 auto 16px auto !important;} */
	#content .section .container .col_one_third.numblock.outline {border: 1px Solid #009DDB !important;}
	#content .section .container .col_one_third.numblock {max-width:300px !important; margin: 0 auto 16px auto !important;}
}

@media (max-width: 600px) {
	/* idc commented 6/17/2025
	#content ol.number li {display:block;} */
	
	.hchart .hchart_item{display:block;}
	.hchart .hchart_label{display:block;width:100%;text-align:left;line-height:1.25;padding-bottom:0px;}
	.hchart .hchart_value{display:block;height:32px;margin-bottom:16px;background-color:transparent;}
	
	.vchart_label {display:block;position:relative;height:100px;}
	.vchart_label label:not(.icon){display:block;width:100px;transform:rotate(90deg);text-align:left;position: absolute;transform-origin: center;top: 42px;height: 40px;left: 50%;margin-left: -48px;}
	
	/* 2024-cpg-and-grocery-consumer-report */
	.top-factor-hchart.hchart .hchart_item {position:relative;padding-top:36px;}
	.top-factor-hchart.hchart.stack .hchart_value span.graphAnimate strong {color:#000;position:absolute;top:0px;margin-left:0px;font-size:1rem;}
}

@media (max-width: 475px) {
	.legend span {
		display: block;
		text-align: left;
	}
}

@media (max-width: 400px){
	.nb_people .nb {top: 110px;}
}
		
@media (max-width: 450px){
	.cgp-grocery-report .box .triangle{left: 44%;}		
}

@media (max-width: 330px){
	.nb_people .nb {top: 93px;}
}











				








			




















































































































































































































































































