/* Custom stylesheet developed by FundaMedia Ltd. */
/* contact: info@fundamedia.com 				  */
/* FundaMedia (www.fundamedia.com) 				  */ 
/* Facebook: facebook.com/paligoconsulting  	  */
/* Coders: Mike Levey and Reynan Guieb 			  */
/* Last edited by Mike Levey on 2022-12-15 		  */

/**************************************************/
/* Table of Contents                 **************/
/* 1) Define imported CSS properties **************/
/* 2) Variable Definitions           **************/
/* 3) Typography settings            **************/
/* 4) Main landing page settings     **************/
/* 5) Footer settings                **************/
/* 6) Body (content page) settings   **************/
/**************************************************/


/* 1) Define imported CSS properties **************/
/* Import Google fonts required                   */
@import url('https://fonts.googleapis.com/css?family=Raleway|Titillium+Web&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');  /* import the Google Material Icons */

/* 2) Variable Definitions           **************/
/* Global 										  */
:root {
	--corp-hilight-color: 			#db4105;
	--bodyfont: 					Lato;
	--headerfont:					'Titillium Web';
	--toc-bkg-color:				#173556;
	--image-shadow: 				5px 7px 5px lightgray;   /* set this to none if not required */
	--code-bkg-color: 				#F3FCED;  	  /*  +-+-+-+-+-+ MODIFIED BY STEVE  +-+-+-+-+-+  specify the background color for code and programlisting styles */
	--code-txt-color;				mediumblue;      /* +-+-+-+-+-+ ADDED BY STEVE +-+-+-+-+-+ */
	--banner-height: 				300px;
	--tile-width: 					20%;  /* can be percentage of fixed pixel size */
	--icon-size-factor: 			0.8;
	--show-language-selector: 		0;  /* set to 1 if you want to show it */

	/* category panel icons (reference FontAwesome icons) */
	/* The first 10 panel icons have been styled as an example: to continue (when icons are available),
	   add as many cat-icon variables as needed. These are currently set to the default topic symbol.  
	   Scroll further down to see examples of how these are implemented in the subsection named
	   'set category panel icons'                              
	   If using an image instead of a FontAwesome icon, define the variable something like this:display:
	        --cat-icon-7:     url('../en/image/System_setup.png')                                      */

	--cat-icon-default: 			"\e82a";  /* default topic icon    +-+-+-+-+-+ Icons MODIFIED BY STEVE  +-+-+-+-+-+  */
	--cat-icon-1: 					"\f1b3";  /* cubes - for kbridge overview */
	--cat-icon-2:					"\f247";  /* object-group - for Graphics Window */
	--cat-icon-3: 					"\f1cb";  /* cube - for Vault */
	--cat-icon-4: 					"\f0b1";  /* briefcase - for Glossary */
	--cat-icon-5: 					"\f1b2";  /* single cube - for parts */
	--cat-icon-6: 					"\f1b3";  /* cubes - for assembly */
	--cat-icon-7: 					"\f1cb";  /* 'codepen' for positioning */
	--cat-icon-8:					"\f02d";  /* book - for glossary */

}	

/* Define counters  							  */
:root {
	counter-reset: 	 				h2-counter h3-counter h4-counter;  
}
/* Landing page 								  */

.portal-single-publication a { 
	padding: 40px 20px;
}

.portal-header {
	height: var(--banner-height);
  }

.portal-header .portal-search button {
	background-color: var(--corp-hilight-color);
}

.publication-icon {
	background-color: var(--corp-hilight-color);
}

/* Body page 									  */

/* set indent spacing in TOC for list levels (3 levels) */
ul.toc li a {
	margin-left: 0.5rem;   /* +-+-+-+-+-+ Steve modified +-+-+-+-+-+ */
	text-indent: -0.5rem;
}

ul.toc li li a {
	margin-left: 1.0rem;    /* +-+-+-+-+-+ Steve modified +-+-+-+-+-+ */
	text-indent: -0.5rem;
}

ul.toc li li li a {
	margin-left: 1.5rem;    /* +-+-+-+-+-+ Steve modified +-+-+-+-+-+ */
	text-indent: -0.5rem;
}

ul.toc li a::before {
	display: inline-block;
	content: counter(h2-counter) '.';
	counter-increment: h2-counter;
	padding-right: 1rem;
}

ul.toc ul li a::before {
	display: inline-block;
	content: counter(h2-counter) "." counter(h3-counter);
	counter-increment: h3-counter;
	/* padding-right: 1rem; */
}

ul.toc ul ul li a::before {
	display: inline-block;
	content: counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter);
	counter-increment: h4-counter;
	padding-right: 1rem;
}

ul.toc li.opened {
	counter-reset: h3-counter !important;
	counter-reset: h4-counter !important;
}

/* End of variable definitions 					  */

/* 3) Typography settings            **************/
body {
	font-family: var(--bodyfont), sans-serif;
}
pre, code {
    font-size: 0.9em;      /* +-+-+-+-+-+ ADDED BY STEVE +-+-+-+-+-+ */
}

code.code {
	color: #2A30E0;        /* +-+-+-+-+-+ ADDED BY STEVE +-+-+-+-+-+ */
	background-color: var(--code-bkg-color);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
	font-family: var(--headerfont), sans-serif;
}

.inlinemediaobject img:not([height]):not([width]) {
    height: 150%;
    width: auto;
    padding-bottom: 10px;
}

h4, .bridgehead{
	color: var(--corp-hilight-color);	
}

h5, .h5{
    text-transform: none;  /* overwrite content-theme CSS setting to make it all uppercase */
}

ol.orderedlist ol.orderedlist .orderedlist {
	list-style: lower-roman;
}

ol.orderedlist .orderedlist {
	list-style: upper-alpha;
}

.procedure > li::before {
	background-color: var(--corp-hilight-color) !important;  /* set procedure circle numbering background to red */
}

pre.programlisting {
	color: #2A30E0;             /* +-+-+-+-+-+ ADDED BY STEVE +-+-+-+-+-+ */
	background-color: var(--code-bkg-color);  
}

/* End of typography settings 					  */

/* 4) Main landing page settings     **************/

.featured-content-label,
.featured-content 		 {
	display: none !important;
}

.note h3.title {
	color: var(--corp-hilight-color);
	background-color: #CECECE;
	font-weight: 600;
}

.note {
	background-color: #EAEAEA;
}

.portal-single-publication {  /* testing Flex options */
	flex-direction: row;
	max-height: 200px;
	flex-basis: 20%;
	flex: 1;
}

/*  category panel adjustments for varying screen sizes  */

@media (min-width: 992px) {  /* adjust icon size */
	.portal-single-publication .publication-icon {
	  font-size: 	36px;
	  line-height: 	80px;
	  margin-top: 	-28px;
	  width: 		calc(80px * var(--icon-size-factor));
	  height: 		calc(80px * var(--icon-size-factor));
	}
	.portal-single-publication a {
		padding: 35px 20px 40px 20px;
	}
	.fa.cat-panel {
		display: absolute;
		font-size: calc(40px * var(--icon-size-factor));
		transform: translateY(-11px);
	}
}

@media (min-width: 768px) and (max-width: 991px) {  /* adjust icon size */
	.portal-single-publication .publication-icon {
	  font-size: 	36px;
	  line-height: 	80px;
	  margin-top: 	-28px;
	  width: 		calc(60px * var(--icon-size-factor));
	  height: 		calc(60px * var(--icon-size-factor));
	}
	.portal-single-publication a {
		padding: 35px 20px 40px 20px;
		max-width: 120px;
	}
	.portal-single-publication h3 {
		font-size: 90%;
	}
	.fa.cat-panel {
		display: absolute;
		font-size: calc(30px * var(--icon-size-factor));
		transform: translateY(-20px);
	}
}

@media (min-width: 600px) and (max-width: 767px) {
	.portal-single-publication .publication-icon {
		font-size: 		36px;
		line-height: 	80px;
		margin-top: 	-20px;
	  }
	.portal-single-publication a {
		width: 120px;
	}
	.portal-single-publication h3 {
		margin-left: -0.5rem;
		font-size: 85%;
	}
	.fa.cat-panel {
		display: absolute;
		font-size: calc(30px * var(--icon-size-factor));
		transform: translateY(-20px);
	}	
}

@media (min-width: 479px) and (max-width: 599px) {
	.portal-single-publication .publication-icon {
		font-size: 		36px;
		line-height: 	80px;
		margin-top: 	-20px;
	  }
	.portal-single-publication a {
		width: 120px;
	}
	.portal-single-publication h3 {
		margin-left: -0.5rem;
		font-size: 85%;
	}
	.fa.cat-panel {
		display: absolute;
		font-size: calc(30px * var(--icon-size-factor));
		transform: translateY(-20px);
	}	
}

@media (min-width: 320px) and (max-width: 478px) {
	.portal-single-publication .publication-icon {
		font-size: 		36px;
		line-height: 	80px;
		margin-top: 	-20px;
	  }
	.portal-single-publication a {
		width: 120px;
	}
	.portal-single-publication h3 {
		margin-left: -0.5rem;
		font-size: 85%;
	}
	.fa.cat-panel {
		display: absolute;
		font-size: calc(30px * var(--icon-size-factor));
		transform: translateY(-20px);
	}	
}


.portal-single-publication { /* set tile widths using flex */
	display: flex;
	flex-direction: row;
	max-height: 175px;
	flex-basis: var(--tile-width) !important;
	flex: 0;  /* do not let the panel width grow to fit the content */
}

/* set category panel icons */ 
.cat-panel-1::before {
	content: var(--cat-icon-1);
}

.cat-panel-2::before {
	content: var(--cat-icon-2);
}

/*  Example of styling icon using Google Material Icons 
.cat-panel-3::before {
	content: var(--cat-icon-3);
	font-family: "Material Icons";
}
.fa.cat-panel-3 {
	transform: translateY(-6px);
}
  -- End of example using Google Material Icons */

.cat-panel-3::before {
	content: var(--cat-icon-3);
}

.cat-panel-4::before {
	content: var(--cat-icon-4);
} 

.cat-panel-5::before {
	content: var(--cat-icon-5);
} 

.cat-panel-6::before {
	content: var(--cat-icon-6);
} 

.cat-panel-7::before {
	content: var(--cat-icon-7);
}

.cat-panel-8::before {
	content: var(--cat-icon-8);
}

.cat-panel-9::before {
	content: var(--cat-icon-9);
}

.cat-panel-10::before {
	content: var(--cat-icon-10);
}

.cat-panel-11::before {
	content: var(--cat-icon-11);
}

.cat-panel-12::before {
	content: var(--cat-icon-12);
}

.cat-panel-13::before {
	content: var(--cat-icon-13);
}

.cat-panel-14::before {
	content: var(--cat-icon-14);
}

.cat-panel-15::before {
	content: var(--cat-icon-15);
}

.cat-panel-16::before {
	content: var(--cat-icon-16);
}

.cat-panel-17::before {
	content: var(--cat-icon-17);
}

.cat-panel-18::before {
	content: var(--cat-icon-18);
}

.cat-panel-19:before {
	content: var(--cat-icon-19);
}

.cat-panel-20::before {
	content: var(--cat-icon-20);
}

.cat-panel-21::before {
	content: var(--cat-icon-21);
}

.cat-panel-22::before {
	content: var(--cat-icon-22);
}

/* hide tile with 'topicendmarker' link, and all tiles after this one */
.portal-single-publication:has( > a[href="en/topicendmarker.html"]) { 
	display: none;
}
.portal-single-publication:has( > a[href="en/topicendmarker.html"]) ~ .portal-single-publication {
	display: none;
}

/* show or hide the language selector */
.dropup.languages {
	opacity: var(--show-language-selector);
}

/* End of landing page settings *******************/

/* 5) Footer settings                **************/

/* End of Footer settings *************************/

/* 6) Body (content page) settings   **************/

.note::before {
	color: var(--corp-hilight-color);
}

.note {
	border-left-color: var(--corp-hilight-color);
}

.site-sidebar {
	background-color: var(--toc-bkg-color);
}

.form-control .search-field {
	background-color: #173556;    /*  +-+-+-+-+-+  ADDED BY STEVE +-+-+-+-+-+ */
}

.frame-box {					/* +-+-+-+-+-+ ADDED BY STEVE +-+-+-+-+-+ */
    border: 2px solid silver;
}

.portal-single-publication .publication-icon {
	background-color: var(--corp-hilight-color);
}

.screenshot {
	display: inline-block;
	border: 2px solid rgb(200 200 200);
	box-shadow: var(--image-shadow);
}

.materialboxed {     /*  +-+-+-+-+-+  ADDED BY STEVE  +-+-+-+-+-+  */
	display: inline-block;
	border: 2px solid rgb(200 200 200);
	box-shadow: var(--image-shadow);
}

a.topic-link.donotdisplay { /* hide topics tagged with 'donotdisplay' in TOC */
	display: none;
}

a.topic-link.appendix {  /* hide Appendix in TOC */
	display: none;
}


/* End of Body (content page) settings ************/

/* TESTING AREA */

table {				/* +-+-+-+-+-+ ADDED BY STEVE +-+-+-+-+-+ */
	background-color: whitesmoke;
}