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

/* 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;
}

.myButton
{
	cursor:hand;
	cursor:pointer;
}

.myLink
{
	text-decoration:underline;
}

.myRoundButton
{
	display:inline-block;
	font-size:1em;
	
	cursor:hand;
	cursor:pointer;
	
	border: 2px solid #004281;
	background-color:#004281;
	color:#ffffff;
	
	padding:0em 1em 0.1em 1em;

/*
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	border-radius: 0.4em;
*/
	
	text-decoration:none;
	
}
.myRoundButton.selected
{
	background-color:#ffffff;
	color:#0171c5;
	text-decoration:none;
	pointer-events: none;
	cursor: default;
}

.myHeaderButton
{
	jdisplay:table-cell;
	display:inline-block;
	font-size:1.2em;
	pointer-events:auto;
	
	vertical-align:middle;
	
	height:2.5em;
	min-height:40px;
	
	border: 1px solid #0099e0;
	jborder: 1px solid #00ff00;
	jborder-top:1px solid #ffffff;
	jborder-left:1px solid #ffffff;
	jborder-right:1px solid #034287;
	border-right:1px solid #009ce3;
	border-bottom:1px solid #009ce3;
		
	background-color:#0088d5;
	color:#ffffff;
	text-align:center;
	
	font-smooth:always;
	-webkit-font-smoothing: antialiased;
	
/*
	padding-left:0.5em;
	padding-right:0.5em;
	padding-top:1em;
	padding-bottom:1em;
	margin-bottom:0px;
*/
	
	jmin-width:33.3%;
	jwidth:1%;			/* not sure why this works */
	
	cursor:hand;
	cursor:pointer;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

.myHeaderButton:hover
{
	background-color:#005f98;
}

.mySelectedHeaderButton, .mySelectedHeaderButton:hover
{
	background-color: rgb(0,174,239);
}

.borderBox
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}

.outerArea
{
	jbackground-color:rgb(242,242,242);
	jpadding: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;

	jtext-align:center;
	
	-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;
	width:100%;	
	margin:auto;

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

	padding:0em 1em;
}

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

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

#scriptContent
{
	background-color:#ffffff;
	color:#444444;
}

.headerBand
{
	border-bottom:1px solid rgb(0,174,234);
	jfont-size:2.5em;
}

.titleArea
{
	padding:1em;
	padding-top:1.25em;
}

.title
{
	font-size:1.25em;
	jfont-weight:300;
	color:rgb(200,0,0);
}

.detailsTitle
{
	font-weight:bold;
	text-align:left;
	margin-top:0.5em;
	font-size:1.25em;
}

.detailsText
{
	text-align:left;
	font-size:1em;
	jline-height:1.5;
	padding-right:0.5em;
}

.detailsProductHighlightsTitle, .popupSectionTitle
{
	font-size:1em;
	jfont-weight:bold;
	background-color:rgb(229,229,229);
	color:rgb(80,80,80);
	padding:0.5em;
	padding-bottom:0.4em;
	margin-top:1em;
	border-radius:10px;
}

.detailsFeaturedProduct
{
	font-size:1.2em;
	font-weight:bold;
}
.detailsFeaturedProductLabel
{
	font-size:1.2em;
}
.detailsItems
{
	border-radius:5px;
	background-color:white;
	border:3px solid rgb(150,150,150);
	color:rgb(0,0,0);
	padding:1em;
}

/* disable focus */
canvas:focus
{
	outline:none;
}

#osdui
{
	position:absolute;
	jright:1em;
	jleft:calc(230px + 1em );
	left:1em;
	bottom:1em;
	z-index:1;
	width:36px;
	border:1px solid rgb(13,39,77);
	border-radius:6px;
	background-color:rgb(255,255,255);
	padding:6px 0;
}
#osdui2
{
	position:absolute;
	right:0;
	top:0;
	z-index:1;
	width:22px;
	height:50px;
}
.subheaderButton
{
	border:3px solid rgb(125,125,125);
	background-color:rgb(149,149,149);
	color:white;
	jpadding:0.2em 1em;
	border-radius:5px;
	font-size:1em;
	jtext-transform:uppercase;
	margin-left:2em;
	min-width:10em;
	display:inline-block;
}
#openseadragon1
{
	jwidth:calc(100% - 400px);
	width:100%;
	jmargin-left:400px;
	height: 600px;
	background-color:rgb(245,245,245);
	display:inline-block;
	position:relative;
}

#menucontainer
{
	display:inline-block;
	position:absolute;		/* are we doing this to make sure the layer stays on top? */
	box-sizing:border-box;
	z-index:999998;
	overflow:hidden;
	joverflow-y:scroll;
	jbackground-color:rgb(255,255,255);
	background-color:rgb(229,229,229);
	border-radius:10px;
	font-size:1rem;
	left:1rem;
	top:1rem;
	jheight:calc(100% - 32px);
	jpadding-bottom:10px;
}

#menu
{
	display:inline-block;
	jwidth:400px;
	jheight:600px;
	jfloat:left;
	position:absolute;
	jbackground-color:rgb(20,86,121);
	jbackground-color:rgb(9,40,57);
	jbackground-color:rgb(35,155,216);
	jbackground-color:rgb(230,230,230);
	jbackground-image:url('../images/menuBackground.png');
	color:rgb(142,34,50);
	jpadding-left:1em;
	jpadding-right:1em;
	box-sizing:border-box;
	joverflow:auto;
	j-webkit-overflow-scrolling:touch;
	joverflow-x:hidden;
	z-index:999997;
	overflow:hidden;	/* needed to remove space at bottom of menu between menu and menucontainer */
	overflow-y:auto;
	
	/* Changes the scrollbar to be "thin" on FF */
	scrollbar-width:thin;
	scrollbar-color:rgba(255,255,255,0.5) rgba(0,0,0,0);
}
#startTabContent
{
	background-color:rgb(35,155,216);
}
#bucTabContent
{
	jbackground-color:rgb(13,39,77);
}
#applicationsTabContent
{
	background-color:rgb(110,190,74);
}
#securityTabContent
{
	background-color:rgb(47,47,47);
}
#productsTabContent
{
	background-color:rgb(132,132,132);
}

.acgImageButton
{
	cursor:hand;
	cursor:pointer;
}
.contentAreaHeight
{
	box-sizing:border-box;
}

.myTabs
{
	float:left;
	width:42px;
	background-color:rgb(230,230,230);
	padding-left:9px;	
	box-sizing:border-box;
}
.menuSectionTitle
{
	padding-left:1em;
	padding-right:1em;
	jfont-size:1.1em;
	font-weight:bold;
}
.menuSectionText
{
	padding-left:1em;
	padding-right:1em;
}
.menuCheckbox
{
	position:relative;
	top:2px;
}
.menuSectionSeparator
{
	padding-left:1em;
	padding-right:1em;
	margin-bottom:1em;
}
.acgTabContent
{
	jmargin-top:1em;
	jpadding-top:1em;
	jmargin-left:42px;
	jwidth:calc(100% - 42px);
	width:100%;
	box-sizing:border-box;
/* We don't use padding here because we want some items (like the item-hover) to show edge-to-edge */
/*
	padding-left:1em;
	padding-right:1em;
*/
}
#closePopup
{
	cursor:hand;
	cursor:pointer;
}

.pretty
{
	position:relative;
    white-space:normal;
    width: 14rem;
}
.pretty input
{
	position:absolute;
	left:0;
	top:0;
	margin-top:1px;
}
.pretty label
{
	display:inline-block;
    text-indent: 0;
    padding-left:1.5em;
}
.pretty label:before, .pretty label:after
{
	top:0;
}
#contentAndMenuArea
{
	background-color:rgb(247,247,247);
}
#contentArea
{
	position:relative;
	padding:1em;
}
.readMoreLink, .readLessLink
{
	font-size:0.9em;
	jtext-transform:uppercase;
	
	cursor:hand;
	cursor:pointer;
}
.readMoreLinkContainer, .readLessLinkContainer
{
	margin-top:1em;
}
.overviewText
{
	margin-top:0.25em;
}

.viewportOverlay
{
	display:none;
	position:absolute;
	background-color:rgba(0,0,0,0.8);
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
}

.swiper-container
{
    width:100%;
    jheight:147px;
}
.swiper-slide
{
	text-align: center;
	font-size: 18px;
	background: #fff;

	jdisplay: -webkit-box;
	jdisplay: -ms-flexbox;
	jdisplay: -webkit-flex;
	jdisplay: flex;
	j-webkit-box-pack: center;
	j-ms-flex-pack: center;
	j-webkit-justify-content: center;
	jjustify-content: center;
	j-webkit-box-align: center;
	j-ms-flex-align: center;
	j-webkit-align-items: center;
	jalign-items: center;
	
	width:64px;
	height:64px;
	border:1px solid black;
}
.acgSliderContainer
{
	width:100%;
	overflow-x:auto;
	white-space:nowrap;
	padding:10px 0;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	
	/* Changes the scrollbar to be "thin" on FF */
	scrollbar-width:thin;
	scrollbar-color:rgba(0,0,0,0.5) rgba(0,0,0,0);
}
.acgSliderItem
{
	display:inline-block;
	width:80px;
	height:80px;
	background-color:rgb(255,255,255);
	jborder:2px solid rgb(0,0,0);
	border-radius:10px;
	vertical-align:top;
	
	cursor:hand;
	cursor:pointer;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}
.acgSliderItem:not(:last-child)
{
	margin-right:12px;
}
.acgSliderImageContainer
{
	text-align:center;
	jheight:62px;
	padding:10px 10px;
	padding-bottom:5px;
	line-height:0;
}
.acgSliderImage
{
	width:100%;
}
.acgSliderLabel
{
	height:22px;
	text-align:center;
	color:rgb(0,0,0);
	font-size:0.6em;
	padding:2px;
	padding-top:0;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
}
.acgRelatedInfoContainer
{
	padding-top:0.2em;
	padding-left:0.5em;
}
.acgRelatedInfoItem
{
	color:rgb(255,255,255);
	margin-top:0.5em;
}
.detailsPopup
{
	max-height:100%;
}
.datasheetIcon, .videoIcon
{
	vertical-align:middle;
	margin-right:0.5em;
}
.datasheetSection, .videoSection
{
	text-align:left;
	white-space:nowrap;
	padding-left:1em;
	margin-bottom:0.5em;
	padding-right:0.5em;
}
.acgNavPanel
{
	position:fixed;
	bottom:0;
	max-width:1600px;
	width:100%;
	box-sizing:border-box;
	z-index:99;
	jbackground-color:rgb(242,242,242);
	background-color:transparent;
	box-shadow:0 -2px 5px 0 rgba(0,0,0,0.12);
	font-size:1rem;
}
.acg-click-handler
{
	cursor:hand;
	cursor:pointer;
}
.acgOsdHotAreaOverlay
{
	z-index:99;
	jborder:1px solid #00ff00;	/* use this when debugging to see hotareas */
}
.acgOsdHotAreaOverlay:not(.acgOsdHotAreaOverlayDisabled)
{
	cursor:hand;
	cursor:pointer;
}
.acgBusinessPropImage
{
	width:100%;
	width:80px;
	jborder:3px solid rgb(100,0,0);
	border-radius:15px;
	background-color:white;
}
@media (max-width:767px)
{
	width:160px;
}
.acgBusinessPropImageLabel
{
	color:rgb(255,255,255);
	font-size:0.8em;
	text-align:center;
}

@media (max-width:767px)
{
	.acgWelcomeIcon
	{
		padding-bottom:1em;
		text-align:center;
	}
}
@media (min-width:768px)
{
	.acgWelcomeIcon
	{
		padding-right:1em;
	}
}

/*
::-webkit-scrollbar {
    -webkit-appearance:none;
    width:7px;
    height:7px;
	jbackground-color:rgb(255,255,255);
}
::-webkit-scrollbar-thumb {
	jbackground-clip:padding-box;
	jborder:2px solid rgba(0, 0, 0, 0);
    border-radius:99px;
    background-color:rgba(0,0,0,.5);
    jbackground-color:rgba(255,255,255);
    -webkit-box-shadow:0 0 1px rgba(255,255,255,.5);
}
*/

/*
*
{
	scrollbar-color:rgba(0,0,0,0.1) !important;
	scrollbar-width:thin !important;
}
*/

/* Make webkit browsers use a thinner scrollbar. This does NOT apply to FF. */
::-webkit-scrollbar
{
	width:11px;
	height:11px;
}

::-webkit-scrollbar-thumb
{
	border:2px solid rgba(0, 0, 0, 0);
	background-clip:padding-box;
	border-radius:9999px;
	background-color:rgba(0,0,0,0.5);
}

.acgRelatedInfoItem a, .datasheetSection a
{
	text-decoration:underline;
}

/*
// https://dev.to/jasperreddin/disabling-viewport-zoom-on-ios-14-web-browsers-l13
body
{
	touch-action:pan-y;
}
.openseadragon-container
{
	touch-action:initial;
}
*/