MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

@font-face {
	font-family: 'Inter';
	src: url(https://eng-client-portal-npd.nonprod.digitalengsdk.com/w/skins/foreground/assets/fonts/Inter-VariableFont_slnt,wght.ttf) format("opentype"),
		url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap);
	font-feature-settings: "zero"; 
	font-variant-numeric: slashed-zero;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Code';
	src:  url(https://eng-client-portal-npd.nonprod.digitalengsdk.com/w/skins/foreground/assets/fonts/FiraCode-VariableFont_wght.ttf) format("opentype"),
		url(https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&display=swap);
    font-variant-numeric: slashed-zero;
	font-feature-settings: "zero";
	font-display: swap;
}

html {
  background: #FFFFFF;
  font-family: 'Inter', sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  line-height: 1.5;
  tab-size: 4;
}

body {
  height: auto !important;
  font-family: 'Inter', sans-serif !important;
  color: #111218;
  line-height: 1.5;
}

/* Fix so <tt>, <code>, and <pre> display in a suitable size in firefox, chrome, etc */
tt, code, pre  { 
	font-size: 0.85rem;
} 

code {
  	/*display: block;*/
	margin: 2px 4px;
	white-space: normal;
	overflow-wrap: anywhere;
	/*padding: 8px 12px;*/
}

blockquote {
	margin: 1rem;
}

em, i {
	font-family: 'Inter', sans-serif;
	font-style: oblique 14deg;
}

p+p {
  margin-top: 10px;
}

div.center {
  text-align: center !important;
}

div.row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.row { 
	width: 100%; 
}

@media only screen and (max-width: 40.0625em) /* small screens (up to 641px) */ { 
	div.row .row {	
		flex-wrap: wrap;
	}

	div.large-6.columns {
		flex-wrap: wrap;
		width: auto;	
	}
	
	#breadcrumb { 
		font-size: 1rem !important;
	}
		
	#bannertext {
		font-size: 1.2rem !important;
		margin: 1rem !important;
		line-height: 1.2065em;
	}
}

@media only screen and (min-width: 40.0625em) and (max-width: 64.0625em) /* large mobile devices & tablets (640px) to laptops (1025px) */ { 
	.row {
		max-width: 80%; }
	
	div.large-6.columns {	
		max-width: 23%;
		margin: 5px !important;
	}
    
	.large-6.columns .iconText, .large-6.columns .iconText a {
		font-size: 0.85em !important;
		height: 30px !important;
		line-height: 0.875rem;	} 

	.iconImage { 
		padding: 1em !important; }
	
	#breadcrumb {    
		font-size: 1rem !important;	}
		
	#bannertext {
		font-size: 1.3rem !important;
		margin: 1rem 2rem 1rem 2rem !important;	}
}

@media only screen and (min-width: 64.0625em) and (max-width: 90.0625em) /* laptop (1024px) to large monitor (1441px) */ { 
	.row {
		max-width: 70%; }

	div.large-6.columns { 
		font-size: smaller;	}
		
	#bannertext {
    	font-size: 1.3rem !important;
    	margin: 1rem 3rem 1rem 3rem !important;	}
		
	#breadcrumb {    
		font-size: 1rem !important;    }
}

@media only screen and (min-width: 64.0625em) /* screens wider than 1440px */ { 
	div.large-6.columns {
    	width: 23%; }
}

@media only screen and (min-width: 90.0625em) and (max-width: 160.0625em) /* large monitor (1441px) to 4K screen (2561px) */ { 
	.row {
		max-width: 65%; }
}

@media only screen and (min-width: 160.0625em) /* screens wider than 2560px */ { 
	.row {
		max-width: 50%; }
}



/* Main landing page */

div.small-4.large-4.columns {
    text-align: center;
    background: #F1F2F3;
	border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    margin: 10px;
    width: auto;
    height: auto;
}

.small-4.large-4.columns .iconText, .small-4.large-4.columns .iconText a {
	width: 150px;
}

/* separate LOB landing pages */

div.large-6.columns {
	text-align: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    align-content: center;
    background: #F1F2F3;
    border-radius: 12px;
    padding: 10px 20px 30px 20px;
    margin: 10px;
}

.iconImage {
  margin: auto;
  padding: 2em;
}

.iconText, .iconText a {
	font-size: 1rem;
	font-family: 'Inter', sans-serif !important;
	font-weight: 600;
	text-transform: capitalize;
	background: #6A46FE;
	border: 2px solid #6A46FE;
	border-radius: 32px;
	color: #ffffff;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0.3em;
	gap: 4px;
	width: auto;
	height: 48px;
}


/* TABLE OF CONTENTS */

#toc.toc {
	position: fixed;
	height: auto;
	width: auto;
	max-width: 280px;
	max-height: 100dvh;
	padding: 0;
	margin: 0;
	left: 0;
	top: 55px;
	z-index: 1000;
	background-color: rgba(249, 249, 249, 0.95);
	border: none;
	display: flex;
	flex-direction: column;
}

#toc > ul {
    height: 90dvh;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.toc .toctitle {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	height: 35px;
	width: auto;
	flex-wrap: nowrap;
}

.toctogglespan .toctogglelabel {
	margin: 6px;
	float: left;
	display: block;
	height: auto;
	width: auto;
	content: url(https://mywikis-wiki-media.s3.us-central-1.wasabisys.com/nielsen/hamburgersmall.png);
}

.toc .toctitle h2 {
	visibility: hidden;
	width: 0;
	height: 0;
}

#toc ul, .toc ul {
	font-size: 0.75rem;
	line-height: 1rem;
	margin-right: 0;
	margin-left: 2px;
	padding-block: 6px;
	padding-inline-start: 10px;
	padding-inline-end: 2px;
	}

#toc li, .toc li > a {
	font-size: 0.75rem;
	line-height: 0.9rem;
	padding-block:3px;
	color: #111218;
}

.toc li:hover > a:hover { 
	color: #6A46FE;
}
	
.tocnumber {	
	display: none; }


#toctogglecheckbox {
	display: none !important;
}

.toctogglecheckbox, 
:not(:checked) > .toctogglecheckbox {
	display: none !important;
	margin: 0 !important;
}

/* 
:default(.toctogglecheckbox:checked) ~ ul {
	visibility: hidden;
}

:where(.toctogglecheckbox:checked) ~ ul {
	visibility: hidden;
}
*/

.toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel:after {
    content: none !important;
}

.toctogglecheckbox:checked + .toctitle .toctogglelabel:after {
	content: none !important;
}

:not(:checked) > .toctogglespan:before { 
	content: none !important; }
	
:not(:checked) > .toctogglespan:after { 
	content: none !important; }



/* TABLE FORMATTING */

.smallIcon {
  margin-right: 0.5em;
}

table tr th {
  padding: 0.5625em 0.5625em;
  font-size: 0.875em !important;
  font-weight: 700;
}

table tr td {
  padding: 0.5625em 0.5625em;
  font-size: 0.875em !important;
}

/* Use the name altertable as the class when you want to alternate row colors - La Mar */
table.altertable tr:nth-child(even) {
  background-color: #d0f6f8;
}

/* LIST FORMATTING */

.mw-content-ltr ul {
	margin: 0.25em 0.5em 0.25em 2em;
	font-size: inherit; /* so that lists within a table are the correct font size */
}


/* TOP BAR FORMATTING */

#navwrapper {
  top: 0;
  background: rgb(0,33,66,0.9) !important;
  /* background-color: #002142; */
  margin-top: 0;
  margin-bottom: -6px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  position: sticky;
  z-index: 900;
}

nav.top-bar, .top-bar {
  background: transparent;
  height: 55px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
}


div.title-name {
	font-family: 'Inter', sans-serif !important;
	font-weight: 500;
	text-transform: capitalize !important;
	color: #ffffff !important;
	font-size: 1.0875rem !important;
	display: inline-block;
	position: relative;
	z-index: 901;
	margin: 0 0.5rem;
}

@media only screen and (min-width: 40em) /* top bar adjustments for screens 640px and up */ {
	.top-bar:before, .top-bar:after {
		content: none; 
    	display: table; 
    	margin-inline-start: auto;
    	margin-inline-end: auto;
	}
	
	.top-bar .title-area {
		width: 18rem !important;
	}
	
	.top-bar-section .dropdown {
		top: 45px;
	}
	
	.top-bar-section .has-dropdown.moved > .dropdown a, .top-bar-section .has-dropdown.moved > .dropdown {
		top: 45px;
	}
}

@media only screen and (max-width: 40em) /* top bar, top bar expanded, search form, and personal tools dropdown adjustments for screens up to 640px */ {
	.top-bar .title-area {
		width: inherit;	}
	
	.top-bar-section {
		right: 0 !important;
		width: inherit;
		position: static;
		transition: none;
	}
	
	.top-bar.expanded {
		overflow: visible;	}
		
	.top-bar.expanded .top-bar-section .has-dropdown:not(.moved) > ul {
		height: 0;
		width: 0;
		padding: 0;
		margin: 0;
		position: absolute !important;
	}
		
	.top-bar-section .dropdown li a.parent-link,
	.top-bar-section .has-dropdown li a.parent-link {
		height: 0px;
		margin: 0;
		padding: 0;
		width: 0;
	}
	
	.top-bar.expanded .top-bar-section .dropdown,
	.top-bar.expanded .top-bar-section .has-dropdown.moved > .dropdown,  
	.top-bar.expanded .top-bar-section .has-dropdown.moved > .dropdown a {
		color: #ffffff;
		width: 18em;
		font-family: 'Inter',sans-serif;
		line-height: 1.5rem;
		background: inherit;
		margin: auto;
		float: right;
		clear: both;
		position: static !important;
	}
	
	.top-bar-section ul li.active > a a:not(.button), .top-bar-section ul li ul.dropdown li > a {
		background: rgb(0, 33, 66, 0.9) !important;	}
	
	
	#personal-tools-dropdown li.title.back.js-generated {
		background: url(https://eng-client-portal-npd.nonprod.digitalengsdk.com/w/images/4/43/action-icondark_mode_.png) no-repeat !important;
		background-size: contain !important;
		background-position: center;
		width: fit-content;
		float: right;
		z-index: 1000;
		position: relative;
		top: -20px;
	}
	
	
	.top-bar-section .dropdown li.title h5 a {
		display: inline-block;
		font-size: 0.75rem;
		color: transparent;
		background: transparent;
		width: fit-content !important;
		float: right;
		padding: 0;
		z-index: 999;
	}
	
	.top-bar.expanded .top-bar-section .dropdown li.title h5, 
	.top-bar.expanded .top-bar-section .dropdown li.title h5 a {
		background: transparent !important;
		color: transparent !important;
	}
	
	
	ul#actions.f-dropdown.open {
		max-width: fit-content !important;
		right: 50px !important;
		left: auto !important;
	}
	
	#toc {
		visibility: hidden;
	}
}

.top-bar .title-area {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
	position: relative;
	height: auto;
}

nav.top-bar.expanded {
	height: auto !important;
}

.top-bar.expanded .title-area {
  background: inherit;
  width: inherit;
}

.top-bar .name, .top-bar .name a {
  color: #ffffff !important;
  width: inherit;
  height: auto;
  font-size: inherit;
}

img.top-bar-logo {
	height: auto;
	max-height: 20px;
	max-width: 100%;
	display: inline-block;
	padding: 0 0 0 0.5rem;
}

.top-bar .toggle-topbar.menu-icon {
	margin: 0 0.5rem;
	top: auto;
	right: auto;
	position: relative;
}

.top-bar .toggle-topbar.menu-icon a {
  color: transparent;
  padding: 0 0.5rem;
  line-height: normal;
  position: relative;
  height: 55px;
}

div.small-12.columns /* top bar search form section */ { 
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: nowrap;
}

#top-bar-right.right, #top-bar-right.right .has-form li {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    max-width: none;
    width: 100%;
    max-height: 40px;
}

li#personal-tools-dropdown {
  visibility: visible !important;
  width: inherit;
  max-width: 50px;
}

li#personal-tools-dropdown .drop-icon {
	margin-right: 15px;
	font-size: 14px;
}

#p-cactions #actions {
	z-index: 600;
}

a#actions-button {
	z-index: 599;
}

.top-bar-section .has-dropdown {
  visibility: hidden;
  width: 0;
}

.top-bar-section .dropdown {
	z-index: 601;
}

.top-bar-section ul {
  background: inherit;
  width: inherit;
  margin: auto;
}

.top-bar-section ul li {
  background: inherit;
}

.top-bar-section .has-form, .top-bar-section li a:not(.button) {
	 background: inherit;
	 font-family: 'Inter', sans-serif;
	 max-height: inherit;
	 height: auto;
	 width: inherit;
	padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

.top-bar-section ul li:hover:not(.has-form) > a, .top-bar-section li.active:not(.has-form) a:not(.button){
    background: inherit;
    color: transparent;
}

.top-bar-section ul li.active > a a:not(.button), .top-bar-section ul li ul.dropdown li > a {
  background: rgb(0, 33, 66, 0.9) !important;
  border-bottom: 0px solid;
}

.top-bar-section ul li.hover>a, .top-bar-section ul li ul.dropdown li.hover>a {
  background: inherit;
  color: transparent;
  border-bottom: 0px;
}

.top-bar-section>ul>.divider, .top-bar-section>ul>[role="separator"] {
  border-color: -moz-use-text-color #fff;
  border-right: solid 0px #fff;
  border-left: solid 0px #fff;
  max-width: 5%;
}

.top-bar-section .divider, .top-bar-section [role="separator"] {
  border-bottom: solid 0px;
  border-top: solid 0px;
}


/* SEARCH - TOP BAR */

.top-bar .button.search {
  margin: 4px;
  background: url(https://mywikis-wiki-media.s3.us-central-1.wasabisys.com/nielsen/searchwhite.png) no-repeat; 
  color: transparent;
  width: 21px;
  border: none;
  background-size: contain;
  background-position: center;
}

input#searchInput {
	background: #F1F2F3;
	border-radius: 8px !important;
	border-width: 2px !important;
	border-color: #DDDEE4 !important;
	font-size: 0.75rem;
	width: 100%;
	height: 25px;
}

input#searchInput::placeholder {
	visibility: hidden;
}

.oo-ui-iconElement-icon { opacity: 50%; }

#searchInput::-webkit-input-placeholder { color: #FFFFFF; }

#searchInput:-moz-placeholder { color: #FFFFFF; }

#searchInput::-moz-placeholder { color: #FFFFFF; }

#searchInput:-ms-input-placeholder { color: #FFFFFF; }

/* Create page in Search */
.mw-search-createlink { display: none; }


/* SEARCH - PAGE */

div.oo-ui-fieldLayout-field {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin: 18px;
}

.oo-ui-actionFieldLayout-input, .oo-ui-actionFieldLayout-button {
	display: inline-block;
	margin: 10px;
	max-height: 38px;
}

.oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input .oo-ui-widget.oo-ui-textInputWidget > .oo-ui-inputWidget-input {
	background: #F1F2F3;
	border: 2px solid #DDDEE4;
	border-radius: 8px;
	margin-right: 10px;
	position: relative;
}

.oo-ui-actionFieldLayout-input {
	width: 100%;
}

.oo-ui-actionFieldLayout-button {
 	width: 20%;
 }
 
.oo-ui-textInputWidget {
	max-width: 100%;
}

.mw-widget-searchInputWidget {
	display: inherit;
}

#mw-search-top-table div.oo-ui-actionFieldLayout {
	width: 100%;
	max-width: 100%;
}


/* BUTTONS */

button,
.button,
.multipleTemplateAdder {
  background-color: #6A46FE;
  border: 2px solid #6A46FE;
  border-radius: 32px;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
  background-color: #4B31AF;
  border: 2px solid #4B31AF;
  border-radius: 32px;
}

button:disabled,
.button:disabled {
	background-color: #6A46FE;
	border: 2px solid #6A46FE;
	border-radius: 32px;
	opacity: 0.32;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active { 
	border: 2px solid #6A46FE;
	border-radius: 32px;
	background-color: #6A46FE;
	color: #ffffff;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { 
	 background-color: #4B31AF;
	border: 2px solid #4B31AF;
	border-radius: 32px;
	color: #ffffff;
}

.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { 
	background-color: #4B31AF;
	border: 2px solid #4B31AF;
	border-radius: 32px;
	box-shadow: 0px 0px 0px 6px rgba(149, 140, 248, 0.16);
	color: #ffffff;
}

input#wpPreview {
	border: 2px solid #6A46FE;
	border-radius: 32px;
	background-color: #6A46FE;
	color: #ffffff;
}

input#wpDiff {
	border: 2px solid #DDDEE4;
	border-radius: 32px;
	background-color: #F1F2F3;
	color: #111218;
}

button.secondary,
button.secondary:hover,
button.secondary:focus,
.button.secondary,
.button.secondary:hover,
.button.secondary:focus {
	background: #363945;
	border: 2px solid #363945;
	border-radius: 32px;
	color: #ffffff;
}

/* Back to Top button - use TopButton template */

span#Topbutton, #Topbutton a {
	display: inline-block;
	background-color: #6a46fec4;
	width: auto;
	height: auto;
	max-width: 50px;
	max-height: 50px;
	text-align: center;
	/* padding: 10px; */
	border-radius: 8px;
	position: fixed;
	bottom: 40px;
	right: 30px;
	/* transition: background-color .3s,opacity .5s,visibility .5s; */
	opacity: 1;
	visibility: visible;
	z-index: 1000;
}

#Topbutton a {
	content: url(https://eng-client-portal-npd.nonprod.digitalengsdk.com/w/images/6/67/caretwhite.png);
	padding: 10px;
}

#Topbutton a:hover {
	cursor: pointer;
	background-color: #4B31AF
}

#Topbutton:active {
	background-color: #6A46FEc4
}


/* LINK FORMATTING */

a {
  color: #6A46FE;
}

a:hover,
a:focus {
  color: #4B31AF;
}

/* a.new { color: #ba0000; } */


.label {
  background-color: transparent;
  font-size: 0.75rem;
}

/* "Special" label */
h4.namespace.label {
  display: none !important;
}

#bannertext a {
	color: #FFFFFF !important;
}


/* TEXT FORMATTING */

.mw-headline {
  font-family: 'Inter', sans-serif !important;
  color: #111218; /* removed !important ... need to check how it behaves */
}

h1 {
	font-family: 'Inter', sans-serif;
	font-weight: 800;
	font-size: 2rem;
	letter-spacing: -0.25px;
	margin-top: 1em;
	margin-bottom: 0.5em;
}

h2 {
  font-family: 'Inter', sans-serif !important;
  color: #111218;
  font-weight: 800;
  font-size: 1.8rem;
  letter-spacing: -0.25px;
  margin-top: 1.5em;
  margin-bottom: 0.83em;
}

h3 {
	font-family: 'Inter', sans-serif;
	font-size: 1.65rem;
	font-weight: 800;
	color: #002142 !important;
	letter-spacing: -0.33px;
	line-height: 1.6em;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

h4 {
	font-family: 'Inter', sans-serif;
	font-size: 1.33rem;
	font-weight: 600;
	letter-spacing: -0.25px;
	margin-top: 1.75em;
	margin-bottom: 0.4em;
}

h5 {
	font-family: 'Inter', sans-serif;
	font-size: 1.33rem;
	font-weight: 500;
	line-height: 1.6em;
	margin-top: 1.75em;
	margin-bottom: 0.3em;
}

h6 {
	font-family: 'Inter', sans-serif;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.6em;
	margin-top: 1.5em;
	margin-bottom: 0.3em;
}

h1#firstHeading {
	visibility: hidden;
	height: 0px;
	margin: 0 !important;
}

/* what is this for? */
h2#firstHeading.title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.25px;
  text-transform: capitalize;
  margin-bottom: 1em;
}

h2#filehistory {
  visibility: hidden;
  height: 0px;
}

h2#metadata {
  visibility: hidden;
  height: 0px;
}

h3#tagline {
  visibility: hidden;
  height: 0px;
  margin: 0 !important;
}

h5#siteSub {
	visibility: hidden;
	height: 0;
}


/* Category links */

div #catlinks.catlinks {
  margin-top: 2.5em !important;
}

#catlinks {
  visibility: hidden;
}


ul#filetoc {
  visibility: hidden;
  height: 0px;
}

div#mw-imagepage-section-filehistory {
  visibility: hidden;
  height: 0px;
}

span.mw-redirectedfrom {
  visibility: hidden;
  height: 0px;
}

div.mw-imagepage-section-metadata {
  visibility: hidden;
  height: 0;
}

.mw-ui-vform {
  margin-left: auto;
  margin-right: auto;
}

#footer-left, ul#footer-left {
  display: inline-block;
  font-size: 80%;
}

li#footer-about {
  display: none;
}

#footer-lastmod {
  display: none;
}

footer.row {
  margin-top: 2.5em;
  margin-bottom: 1.5em;
}

/*
div#mw-customtoggle-myDivision.mw-customtoggle-myDivision {
	display: flex !important;
}

.mw-collapsible-toggle.mw-collapsible-toggle-default.mw-collapsible-toggle-expanded {
	background: url(https://eng-client-portal-npd.nonprod.digitalengsdk.com/w/images/9/9c/collapse.png) no-repeat;
	background-size: contain;
	width: 35px;
	height: 35px;
	float: none !important;
	display: inline-flex;
	float: none !important;
	
}

  .mw-collapsible-toggle.mw-collapsible-toggle-collapsed {
	display: inline-flex;
	margin: 4px;
	background: url(https://eng-client-portal-npd.nonprod.digitalengsdk.com/w/images/3/32/expand.png) no-repeat;
	background-size: contain;
	width: 35px;
	height: 35px;
	float: none !important;
	flex-wrap: nowrap;
}

a.mw-collapsible-text {
	color: transparent;
	width: inherit;
}

span.mw-collapsible-toggle-default:before {
	content: none !important;
}

span.mw-collapsible-toggle-default:after {
	content: none !important;
}
*/