/*
// ------------------------------------
// App-specific settings
// ------------------------------------
*/

/*
// e.g.: color: var(--main-color);
*/
:root
{
	--main-color:rgb(253,43,44);
	--off-white-color:rgb(240,236,228);
	--intel-blue:rgb(0,74,134);
}

/* This style is used by the AcgApp.isEnanced() method to determine if we are using the enhanced stylesheet */
body:after
{
	content:'default';
	display:none;
}

body
{
    max-width: 100%;
    overflow-x: hidden;	/* Causes Chrome to add a vertical scrollbar */
}

#cssCheck
{
	font-weight:800;
}

.outerArea
{
	jbackground-color:rgb(242,242,242);
	padding:0em 0;
	width:100%;
	/* Had to remove overflow-x because it prevents "sticky" position from working */
	joverflow-x:hidden;	/* This is required to fix "position:fixed" issues on iOS */
	joverflow:hidden;	/* Including overflow hidden will break the ability to use "sticky" content within */

	/* height:100%; */
	jmin-height:100%;	/* Moved to .acg class in global. We want to ensure an app covers browser height, but not necessarily an individual "outerArea" */
	jtext-align:center;
	jcolor:#374850;
	jz-index:1;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

.innerArea
{
	jbackground-color:rgb(255,255,255);

	jdisplay:inline-block;	/* caused a scrollbar to appear even though content fit */
	position:relative;
	jmax-width:1240px;
	max-width:1440px;
	width:100%;
	jmin-height:100%;	/* Moved to .acg class in global. We want to ensure an app covers browser height, but not necessarily an individual "innerArea" */
	
	margin:auto;
	padding:0 1rem;
	joverflow:hidden;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

.noScript
{
	padding-top:1em;
	width:960px;
	margin:auto;
	color:#000000;	
}

#preloadContent
{
	padding:2em;
	text-align:center;
}

#scriptContent
{
	jbackground-color:#ffffff;
	jcolor:#444444;
}

.acg-main-area
{
	jmargin-top:2rem;
	jmargin-bottom:2rem;
}

.acgBenchmarkSettings
{
	display:flex;
	gap:2rem;
	flex-wrap:wrap;
	background-color:rgb(47,47,47);
	jborder:2px solid rgb(233,233,233);
	color:white;
	padding:1rem;
	font-size:0.8rem;
	white-space:nowrap;
}

.acgBenchmarkSetting
{
	display:flex;
	flex-direction:column;
	jgap:0.5rem;
}

.acgBenchmarkSettingTitle
{
	jfont-size:0.8rem;
	margin-bottom:0.5rem;
	font-weight:bold;
}

.acgBenchmarkSettings > :nth-child(2) { order: 2; }
.acgBenchmarkSettings > :nth-child(3) { order: 3; }
.acgBenchmarkSettings.acgIE > :nth-child(2) { order: 3; }
.acgBenchmarkSettings.acgIE > :nth-child(3) { order: 2; }

.acgUiDisabled
{
	color:gray;
}

.acg-intel-ui
{
	line-height:0;
}
.acg-intel-ui-header-menu
{
	display:flex;
	justify-content:space-between;
	border-bottom:2px solid rgb(235,235,235);
}
.acg-intel-ui-header-breadcrumb
{
	border-bottom:2px solid rgb(235,235,235);
}

#acg-intel-ui-footer-area
{
	background-color:rgb(231,231,231);
}

.acg-intel-ui-footer
{
	display:table;
}
.acg-intel-ui-footer>div
{
	display:table-cell;
	vertical-align:middle;
}
.acg-intel-ui-footer-logo
{
	padding-left:25px;
	padding-right:60px;
}

#acg-select-model-page .headerOuterArea
{
	background-image:url(../images/grid-gray-header-bg.png);
	background-repeat:no-repeat;
	background-position-x:center;
	background-position-y:center;
	jbackground-color:rgb(93,93,93);
}

#acg-select-model-page .headerOuterArea
{
	padding-top:20px;	/* Note: Intel <h1> tags including 22px of margin */
	padding-bottom:20px;
}

#acg-model-details-page
{
	padding-top:20px;
	padding-bottom:42px;
}

/*
.acg-app-title, h1
{
	font-family:'intel-one';
	font-weight:200;
	font-size:2.5rem;
	color:white;
	margin-bottom:12px;
}
*/

.acg-app-description
{
	color:white;
}

.ui-multiselect-grouplabel
{
    border-bottom-width:0px !important;
	margin:0px !important;
	padding:0px !important;
}
li.ui-multiselect-optgroup
{
	margin:-4px;
	background-color:lightgray !important;
}
.ui-multiselect-checkboxes label
{
	font-weight:normal;
}
.acg label
{
	font-weight:normal;
	margin-bottom:0; /* required because the Intel framework sets a margin: */
}
#acg-filter-area
{
	border-bottom:1px solid rgb(225,225,225);
}
#acg-filter-container
{
	padding:1rem;
	display:flex;
	justify-content:space-between;
	gap:50px;
}
.acgRwdNarrow #acg-filter-container
{
	flex-direction:column;
	gap:10px;
}
#acg-filter-container-right
{
	display:flex;
	flex-wrap:wrap;
	gap:10px 50px;
	align-items:center;
	justify-content:right;
}
.acgRwdNarrow #acg-filter-container-right
{
	flex-direction:column;
	gap:10px;
	align-items:start;
}
#acg-additional-filters-container
{
	display:flex;
	gap:50px;
}
.acg-label
{
	font-weight:bold;
}
.acg-label-and-select
{
	display:inline-block;
}
.acgRwdWide .acg-label-and-select
{
	white-space:nowrap;
}
.acgRwdNarrow .acg-label-and-select
{
	flex-basis:min-content;
}
.acg-label-and-checkbox
{
	white-space:nowrap;
}

#acg-model-area
{
	background-image:url(../images/ai-pc-background_1920-1080.webp);
	background-repeat:no-repeat;
	background-position-x:center;

	padding-top:2rem;
	padding-bottom:2rem;
}
#acg-model-filter-area
{
	display:inline-flex;
	gap:10px;
}
#acg-model-container
{
	display:flex;
	gap:16px;
	flex-wrap:wrap;
	justify-content:center;
}
.acg-model-card
{
	border:1px solid rgb(200,200,200);
	width:320px;
	jfont-family:intel-one;
	background-color:rgb(255,255,255);
	position:relative;
	

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.acg-model-card:hover
{
	background-color:rgb(230,230,230);
	cursor:pointer;
}
.acg-model-card a
{
	color:#0068b5 !important;					/* This is important to prevent the standard Intel link behavior (darker hover) */
	text-decoration:none !important;			/* This is important to prevent the standard Intel link behavior (underline) */
	jtext-decoration-style:solid !important;	/* Include this if we need to mimic link hover */
}
.acg-model-card-image-container
{
	overflow:hidden;
}
/*
.acg-model-card:hover .acg-model-card-image-container
*/
.acg-model-card:hover img
{
	transform:scale(1.1);
	janimation-name:example;
	janimation-duration:0.2s;
	janimation-timing-function:ease-in;
	janimation-delay:0s;
	janimation-iteration-count:1;
	janimation-fill-mode:forwards;
	janimation-iteration-count:infinite;
	janimation-direction:alternate;
}

@keyframes example {
  0%   {transform:scale(1)}
  100% {transform:scale(1.2)}
}

.acg-model-card img
{
	jtransform:scale(0.9);
	transition:transform 0.3s ease-out;
	
	janimation-name:example-out;
	janimation-duration:0.2s;
	janimation-timing-function:ease-in;
	janimation-delay:0s;
	janimation-iteration-count:1;
	janimation-fill-mode:forwards;
	janimation-iteration-count:infinite;
	janimation-direction:alternate;
}

@keyframes example-out {
  to {transform:scale(1);}
}

.acg-model-card-category-and-data-marker-container
{
    display:flex;
    flex-direction:row;
    align-items:start;
    justify-content:space-between;
}
.acg-model-card-data-marker-container
{
	margin:1rem;
	margin-top:0;
}
.acg-model-card-category-container
{
	margin-bottom:0.5rem;
}
.acg-model-card-category
{
	display:inline-block;
	jborder:1px solid rgb(200,200,200);
	jpadding:0.5rem;	
	jfont-size:0.8rem;
	position:relative;
	
	background-color:#f7f7f7;
	font-size: 12px;
    color:#262626;
    font-weight:bold;
    margin:0 13px 3px 0;
    padding:2px 8px 2px 8px;
    word-break:break-all;
}
.acg-model-card-category:not(:last-child)
{
	margin-right:5px;
}
/*
.acg-model-card-category::before
{
content:'<div>1</div><div>2</div>';
display:block;
border:0;
width:10px;
height:10px;
background-color:rgb(255,0,0);
position:absolute;
right:-1px;
top:-1px;
}
*/
.acg-model-card-image-container
{
}
.acg-model-card-image-container img
{
	width:100%;
}
.acg-model-card-text-container
{
	padding:1rem;
	flex-grow:1;
}
.acg-model-card-category-container
{
}
.acg-model-card-title
{
	jfont-size:1.3rem;
	jtext-decoration:underline;
	jtext-decoration-style:dotted;
	jtext-underline-offset:6px;
	jmargin-bottom:1rem;
	margin-bottom:10px;
}
.acg-model-card-description
{
}
.acg-model-card-data-marker
{
	display:inline-block;
	font-size:0.8rem;
	font-weight:bold;
	jposition:absolute;
	jright:0;
	jtop:0;
	padding:2px 9px 1px 9px;
	background-color:rgb(93,93,93);
	color:white;
	margin-top:1rem;
}

#acg-model-details-page
{
	background-image:url(../images/ai-pc-background_1920-1080.webp);
	background-repeat:no-repeat;
	background-position-x:center;
}

.acg-model-details-area
{
	margin-bottom:20px;
	display:flex;
}

.acg-model-details-and-charts
{
	background-color:rgb(93,93,93);
	jbackground-image:url(../images/grid-fade.png);
	background-repeat:no-repeat;
	background-position-x:center;
	jbackground-position-y:center;
	
	padding:30px;
	margin-bottom:2rem;
}
.acg-model-details-image-area
{
	position:relative;
	width:30%;
	aspect-ratio:1.7;	/* Allocates space for the image. For some reason 1.7 causes less "shifting" than 16/9. */
	min-width:265px;
}
.acg-model-details-image-area img, .acg-model-details-image-area video
{
	width:100%;
}
.acg-model-details-info-area
{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	color:white;
	width:100%;
}
.acgRwdWide .acg-model-details-info-area
{
	padding-left:2rem;
}

#acg-model-details-title, h2
{
	font-family:'intel-one';
	font-weight:200;
	font-size:2rem;
	jpadding-bottom:10px;
}
#acg-model-details-text
{
	padding:10px 0;
}
.acg-model-details-buttons
{
	display:flex;
	flex-wrap:wrap;
	justify-content:right;
	gap:15px;
	padding-top:10px;
	padding-bottom:10px;	
}
.acgRwdPhone .acg-model-details-buttons
{
	justify-content:left;
}

.acg-model-details-charts-area
{
	jdisplay:flex;
	position:relative;
	jmin-height:200px;
	background-color:rgb(233,233,233);
	jaspect-ratio:4;
}
/*
The following is a hack/fix for ChartJS not resizing correctly with certain options set.
See: https://github.com/chartjs/Chart.js/issues/11005
However, I found that setting the "height" caused flickering. Setting "width" only seems to work.
*/
.acg-model-details-charts-area canvas
{
  jwidth: 100% !important;
  jheight: 100% !important;
  jposition:absolute;
}

.acgRwdNarrow #uiPlatforms
{
	width:100%;
}

.acgRwdNarrow #uiPlatforms select
{
	width:100%;
}
/*
#platforms
{
	height:200px;
}
#mylabels, #platforms table
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	jdisplay:table;
	flex-direction:column;
	text-align:left;
}
*/
.acgFullHeightTable
{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	jdisplay:table;
	text-align:left;	
}
/*
#platforms td
{
	vertical-align:middle;
	padding-left:1rem;
}
*/
.acgRwdWide .acg-model-details-charts-area .acgRwdTableCell:not(:first-child)
{
	border-left:2px solid rgb(0,0,0);
}
.acgAlternateRowTable tr:nth-child(odd)
{
	jbackground-color:rgba(0,0,0,0.1);
	background-color:rgb(219,219,219);
}
#chart1, #chart2
{
	position:relative;
}
.acgRwdWide .acgRwdTableCell
{
	padding:1rem;
}
.acgRwdWide .acgChartTableHead .acgRwdTableCell
{
	vertical-align:top;
}
.acgChartTableHead
{
	background-color:white;
}
.acgRwdNarrow .acgChartTableHead
{
	padding:1rem;
}
.chartTableColumnTitle
{
	font-weight:bold;
}
.acgRwdNarrow .chartTableColumnTitle
{
	font-size:28px;
	font-weight:300;
}
.acgChartTableRow
{
	height:calc(100px + 2rem);
}
.acgChartTableRow:nth-child(even)
{
	background-color:rgb(219,219,219);
}
.chartTableColumnSubtitle
{
	font-size:0.75rem;
}
.acgLegendBlock
{
	display:inline-block;
	jborder:1px solid black;
	width:10px;
	height:10px;
	margin-right:5px;
	vertical-align:middle;
	position:relative;
	top:-1px;
}
.acgLegendBlock:not(:first-child)
{
	margin-left:10px;
}
.acgChartLegend
{
	padding-top:0.5rem;
}
.acgLegendLabel
{
	font-size:0.7rem;
	vertical-align:middle;
}
/*
*/
.acgRwdWide .acgChartContainer
{
	padding:inherit;	/* This makes sure that whatever padding we have on the parent applies to this absolutely positioned div */
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

.acgRwdNarrow .acgChartContainer
{
	height:100px;
}
/*
*/
.acgNoChartData
{
	text-align:center;
	padding:1rem;
}
.acgPlatformLabels
{
}
.acgPlatformLabelWrapper
{
	display:flex;
	flex-direction:column;
	justify-content:center;
}
.acgPlatformLabel
{
	jpadding:0 1rem;
	font-size:0.9rem;
}
.acgRwdNarrow .acgPlatformLabel
{
	font-weight:bold;
	jpadding-bottom:0.5rem;
}
.acgPlatformLabels .acgPlatformLabelWrapper:nth-child(odd)
{
	jbackground-color:rgba(0,0,0,0.1);
	background-color:rgb(219,219,219);
}
#acg-model-details-charts-disclaimer
{
	color:white;
	font-size:0.8rem;
	margin:1rem 0;
}
.acgPlatformColumn
{
	width:20%;
	position:relative;
}
.acgRwdNarrow .acgPlatformColumn
{
	width:100%;
}
.acgMetricsColumn
{
	position:relative;
}

/*
This is messing up the title on the cards, making them white!
.rwd .theme-dark-default a
{
    color: #fff !important;
}
*/

.acgChartRow
{
	jbackground-color:rgb(219,219,219);
	jpadding:1rem 0;
}
.acgChartRow:nth-child(odd)
{
	background-color:rgb(219,219,219);	
}
.acgChartCell
{
	padding:1rem;
}
.acg-model-details-instructions-area
{
	jmargin-bottom:1rem;
	border-bottom:2px solid black;
	jbackground-color:lightyellow;
	background-color:rgb(219,219,219);
	color:black;
	padding:1rem;
	font-size:0.8rem;
}
.benchmark-banner {
  position: sticky;
  bottom: 0;
  width: 100%;
  z-index: 1001;
  text-align: center;
  padding: 7px;
    padding-right: 7px;
    padding-left: 7px;
  border-width: 0px;
  background: #525252;
}
.benchmark-banner p {
  margin: 0;
  color: #E9E9E9;
}
.benchmark-banner p a {
  color: #B4F0FF !jimportant;
}
#modelDetailsLinks ul:not(:last-child)
{
	margin-bottom:0.5rem;
}
#modelDetailsRelatedLinks, #modelDetailsDataLinks
{
	padding:0;
	margin:0;
}
#modelDetailsRelatedLinks li, #modelDetailsDataLinks li
{
	padding:0;
	margin:0;
	list-style-type:none;
}
#modelDetailsRelatedLinks li:not(:last-child), #modelDetailsDataLinks li:not(:last-child)
{
	margin-bottom:0.5rem;
}
#primaryFactorHelp
{
	cursor:pointer;
}
#acg-data-loading
{
	padding:1rem;
	text-align:center;
}
.acg-pagination-bar
{
	display:flex;
	justify-content:space-between;
	padding:10px 0;
	align-items:center;
}
.acg-pagination-text
{
	padding:10px 0;
}
.acg-pagination-ui
{
	display:inline-flex;
	gap:20px;
}
.acg-pagination-page
{
	display:inline-flex;
	align-items:center;
	gap:5px
}
.acg-pagination-xofy
{
	display:inline-block;
}
.acgRwdNarrow .acg-pagination-xofy
{
	text-align:center;
}
.acg-pagination-view
{
	display:inline-block;
	padding:10px 0;
}

.acg-external-link::after
{
	content: "";
    width: 14px;
    height: 14px;
    margin-left: 5px;
    background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='rgb(255,255,255)' height='16' viewBox='0 0 512 512'><path d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}
.acg-header-menu
{
	display:flex;
	jflex-wrap:wrap;
	justify-content:space-between;
    gap: 20px 50px;
	font-weight:200;
	jfont-size:0.9rem;
	align-items:center;
}
.acg-header-menu > div
{
	display:flex;
	gap:20px;
	jwhite-space:nowrap;
}

#acg-menu-area
{
	display:flex;
	justify-content:center;

	jpadding:20px 1rem 20px 1rem;
	jbackground-color:rgb(218,218,218);
}
#acg-menu-area a
{
	color:black;
}
#acg-menu-area > div
{
    width:100%;
	max-width:1908px;
	background-color:rgb(218,218,218);
    padding:20px 0 20px 0;
}
.acg-counter-digit
{
	display:inline-block;
	text-align:center;
	jborder:1px solid black;
	background: linear-gradient(to bottom,  rgba(52,52,52,1) 0%,rgba(93,93,93,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	jbackground-color:rgb(64,64,64);
	color:white;
	border-radius:4px;
	width:26px;
	margin:2px;
	box-shadow: 1px 4px 5px rgba(0,0,0,0.5);
	padding:2px;
	font-size:20px;
	margin-bottom:8px;
}
.acg-header-menu-item
{
	display:inline-block;
}
.acg-model-card-overlay
{
	display:inline-block;
	font-size:0.8rem;
	font-weight:bold;
	position:absolute;
	right:0;
	top:0;
	text-align:right;
	padding:3px 6px 3px 6px;
	background-color:rgba(0,0,0,0.7);
	color:white;
	jmargin-top:1rem;
}
#acg-preselected-hardware-settings
{
	font-weight:bold;
}
#acg-verified-model-count
{
	white-space:nowrap;
}
.acg-header-menu-right
{
	justify-content:end;
	flex-wrap:wrap;
}
.acgRwdWide .acg-header-menu-right
{
	min-width:400px;
}