/*------------------------------------------------------------
Layout styling
------------------------------------------------------------*/
body
{
    margin: 0;
    padding: 0;
  	background-color: var(--page-background);
}

#page-main-layout-parent
{
  	display: flex;
  	flex-wrap: nowrap;
    flex-direction: row;
  	align-items: stretch;
  	align-content: flex-start;
  	width: 100%;
  	min-height: 100%;
}

#page-content-parent
{
  	width: calc(100% - 600px);
  	position: relative;
}

@media (max-width: 1240px) 
{ 
    #page-content-parent
    {
      	width: calc(100% - 300px);
    }
}

@media (max-width: 960px)
{
    #page-content-parent
    {
      	width: 100%;
    }
  
  	.menu-mode #page-content-parent
    {
      	width: 0%;
      	overflow: hidden;
    }
}

/*------------------------------------------------------------
General content styling
------------------------------------------------------------*/
#page-content
{
  	padding: 16px;
  	color: var(--page-text);
	background-color: var(--page-background);
  	min-height: calc(100% - 184px);
  
  	color: var(--page-text);
  	line-height: 1.4em;
}

#page-content b, #page-content strong
{
  	color: var(--page-text-bold);
}

#page-content blockquote
{
  	background-color: var(--page-quote);
  	margin-left: 0;
  	margin-right: 0;
  	padding: 4px;
  	padding-left: 30px;
  	padding-right: 8px;
  	border-left: 4px solid var(--page-quote-border);
}

#page-content h1,
#page-content h2, 
#page-content h3,
#page-content h4,
#page-content h5,
#page-content h6
{
  	color: var(--page-title);
  
  	/* Offset to compensahe header bar with 'Table of content' scroll when clicking link */
  	padding-top: 60px; 
  	margin-top: -45px;
  	margin-bottom: 0;
  	font-weight: 300;
  	line-height: 1em;
}

#page-content h1 
{
  	font-size: 44px;
}

#page-content h1.page-title
{
  	margin-bottom: 16px;
}

#page-content .restricted::before
{
  	content: "[Restricted]";
  	color: black;
  	background-color: #FF0000;
  	margin-right: 8px;
}

#page-content h2
{
  	font-size: 34px;
}

#page-content h3
{
  	font-size: 26px;
}

#page-content h4
{
  	font-size: 20px;
}

#page-content h5, 
#page-content h6
{
  	font-size: inherit;
  	margin: 0;
  	padding: 0;
  	color: inherit;
  	font-weight: inherit;
  	padding-top: 60px; 
  	margin-top: -60px;
}

#page-content a, 
#page-content a:hover, 
#page-content a:link, 
#page-content a:visited, 
#page-content a:focus
{
	color: var(--page-link);
	text-decoration: none;
  	outline: none;
  	border-bottom: 1px solid var(--page-link-border);
	transition: color 0.13s ease-in-out, border 0.13s ease-in-out;
}

#page-content a:hover
{
	color: var(--page-link-hover);
  	border-bottom: 1px solid var(--page-link-hover);
}

#page-content ul
{
  	list-style: disc;
}

#page-content ul, #page-content ol
{
  	padding-left: 30px;
}

#page-content hr
{
  	border: 0;
  	height: 2px;
  	background-color: var(--sidebar-border-light);
}

#page-content .confluence-information-macro-information,
#page-content .confluence-information-macro-tip,
#page-content .confluence-information-macro-note,
#page-content .confluence-information-macro-warning
{
  	border-radius: 5px;
  	padding: 8px;
  	padding-left: 40px;
  	margin-top: 8px;
  	margin-bottom: 8px;
  	background-color: var(--page-info-background);
  	position: relative;
}

#page-content .confluence-information-macro-information::before,
#page-content .confluence-information-macro-tip::before,
#page-content .confluence-information-macro-note::before,
#page-content .confluence-information-macro-warning::before
{
  	background-color: transparent;
  	width: 20px;
  	height: 25px;
  	position: absolute;
  	top: 10px;
  	left: 10px;
  	content: "";
  	background-image: url("../icons/icon-info-check.svg");
  	background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#page-content .confluence-information-macro-information
{
  	border: 1px solid var(--page-info-normal);
}

#page-content .confluence-information-macro-tip
{
  	border: 1px solid var(--page-info-tip);
}

#page-content .confluence-information-macro-note
{
  	border: 1px solid var(--page-info-warning);
}

#page-content .confluence-information-macro-warning
{
  	border: 1px solid var(--page-info-error);
}

/* Color filters generated with : https://codepen.io/sosuke/pen/Pjoqqp */
#page-content .confluence-information-macro-information::before
{
  	background-image: url("../icons/icon-info-note.svg");
	filter: brightness(0) invert(57%) sepia(13%) saturate(981%) hue-rotate(169deg) brightness(95%) contrast(88%);
}

#page-content .confluence-information-macro-tip::before
{
  	background-image: url("../icons/icon-info-check.svg");
	filter: brightness(0) invert(63%) sepia(6%) saturate(1558%) hue-rotate(58deg) brightness(96%) contrast(86%);
}

#page-content .confluence-information-macro-note::before
{
  	width: 24px;
  	left: 8px;
  	background-image: url("../icons/icon-info-warning.svg");
	filter: brightness(0) invert(87%) sepia(39%) saturate(3540%) hue-rotate(7deg) brightness(96%) contrast(93%);
}

#page-content .confluence-information-macro-warning::before
{
  	background-image: url("../icons/icon-info-error.svg");
	filter: brightness(0) invert(44%) sepia(30%) saturate(1946%) hue-rotate(324deg) brightness(80%) contrast(86%);
}


#page-content .confluence-information-macro-information p,
#page-content .confluence-information-macro-tip p,
#page-content .confluence-information-macro-note p,
#page-content .confluence-information-macro-warning p
{
  	margin: 0;
}

#page-content iframe
{
    margin-top: 4px;
    margin-bottom: 4px;
}

#page-content .codeContent
{
  	overflow: auto;
  	border-radius: 3px;
  	background-color: var(--table-header);
}

#page-content .codeContent pre
{
  	padding: 4px;
}

/*------------------------------------------------------------
Images
------------------------------------------------------------*/
img
{
	border: 1px solid transparent;  
  	margin: 4px;
  	margin-left: 0;
  	max-width: 100%;
  	transition: border 0.13s ease-in-out;
}

img:hover
{
	border: 1px solid var(--page-link);
  	cursor: pointer;
}

/*------------------------------------------------------------
Tables
------------------------------------------------------------*/
table
{
  	width: 100% !important;
  	margin-top: 10px;
  	margin-bottom: 10px;
  	background-color: var(--table-background);
}

table, 
table th, 
table td
{
  	border: 1px solid var(--table-border);
  	border-collapse: collapse;
  	text-align: left;
  	vertical-align: top;
  	padding: 8px;
  	/*table-layout: fixed;*/
  	word-wrap: break-word;
}

/* https://stackoverflow.com/questions/60232468/preventing-a-pre-from-wrapping-inside-of-a-table 
Using this trick to avoid pre to expand the table, avoid the need to use table-layout:fixed */
table pre
{
  	width:0;
  	min-width:100%;
}

/*table tr:first-child,*/
table .confluenceTh
{
  	background-color: var(--table-header);
  	font-weight: bold;
  	font-style: italic;
}

table .highlight-red
{
  	background-color: var(--table-background-red);
}

table .highlight-green
{
  	background-color: var(--table-background-green);
}

table .highlight-blue
{
  	background-color: var(--table-background-blue);
}

table .highlight-yellow
{
  	background-color: var(--table-background-yellow);
}

table p
{
  	margin-top: 0;
}

table img
{
  	max-width: 100%;
}


/*------------------------------------------------------------
Breadcrumb
------------------------------------------------------------*/
#page-breadcrumb a, 
#page-breadcrumb a:hover, 
#page-breadcrumb a:link, 
#page-breadcrumb a:visited, 
#page-breadcrumb a:focus
{
	color: var(--navigation-link);
	text-decoration: none;
  	transition: color 0.13s ease-in-out;
  	outline: none;
  	border: none;
}

#page-breadcrumb a:hover
{
	color: var(--navigation-link-hover);
  	transition: color 0.13s ease-in-out;
}

#page-breadcrumb ul
{
  	margin-left: 0;
  	padding: 0;
  	position: relative;
  	padding-left: 16px;
  	margin-top: -8px;
  	margin-bottom: 13px;
}

#page-breadcrumb li
{
  	list-style: none;
  	display: inline;
  	font-size: 16px;
}

#page-breadcrumb li:after 
{
	content: "\203A";
    margin-left: 10px;
  	margin-right: 5px;
  	font-size: 22px;
}

#page-breadcrumb li:last-child:after 
{
	content: "";
}


#page-breadcrumb .breadcrumb-home-icon
{
	width: 16px;
  	height: 16px;
  	position: absolute;
  	top: 6px;
  	left: 0px;
  	opacity: 0.5;
  	filter: brightness(0) invert(1);
  	transition: opacity 0.13s ease-in-out;
}

#page-breadcrumb .breadcrumb-home-icon:hover
{
  	opacity: 1.0;
}

#page-breadcrumb img
{
	border: 0;  
  	margin: 0px;
  	margin-left: 0;
}

#page-breadcrumb img:hover
{
	border: 0;
}

/*------------------------------------------------------------
Layout
------------------------------------------------------------*/
#page-content-parent.no-sidebar-layout
{
    width: 100%;
    position: absolute;
    bottom: 0;
    top: calc(54px + 50px);
    left: 0;
    right: 0;
  	text-align: center;
}

#page-content-parent.no-sidebar-layout h1
{
    text-transform: uppercase;
}

#page-content-body
{
  	max-width: 1000px;
  	margin-left: auto;
  	margin-right: auto;
}

#page-content-subbody
{
  	margin-bottom: 40px;
}

.sectionMacroRow, 
.sp-grid-section
{
	display: table;
  	table-layout: fixed;
  	width: 100%;
}

.columnMacro,
.sp-grid-cell,
.sp-grid-20,
.sp-grid-33,
.sp-grid-40,
.sp-grid-50,
.sp-grid-60
{
	display: table-cell;
  	padding: 0;
  	vertical-align: top;
}

.columnMacro:not(:first-child),
.sp-grid-20:not(:first-child),
.sp-grid-33:not(:first-child),
.sp-grid-40:not(:first-child),
.sp-grid-50:not(:first-child),
.sp-grid-60:not(:first-child)
{
	padding-left: 10px;
}

.sp-grid-20
{
	width: 20%;
}

.sp-grid-33
{
	width: 33%;
}

.sp-grid-40
{
	width: 40%;
}

.sp-grid-50
{
	width: 50%;
}

.sp-grid-60
{
	width: 60%;
}

.sp-grid-section,
.sp-grid-cell
{
	height: 100%;
}

.expandable-panel
{
	height: 100%;
  	margin: 0;
  	padding: 0;
}

.expandable-panel-title
{
  	background-color: var(--table-header);
  	padding: 8px;
  	border-radius: 6px 6px 0px 0px;
}

.expandable-panel-content
{
  	background-color: var(--table-background);
  	padding: 4px;
  	border-radius: 0px 0px 6px 6px;
  	height: calc(100% - 56px);
}

@media (max-width: 960px)
{
    .expandable-panel
    {
        height: inherit;
    }
  
    .sp-grid-section,
    .sp-grid-cell
    {
        height: inherit;
    }
  
    .columnMacro,
    .sp-grid-cell,
    .sp-grid-20,
    .sp-grid-33,
    .sp-grid-40,
    .sp-grid-50,
    .sp-grid-60
    {
        display: block;
      	width: 100%;
    }
  
    .columnMacro:not(:first-child),
    .sp-grid-20:not(:first-child),
    .sp-grid-33:not(:first-child),
    .sp-grid-40:not(:first-child),
    .sp-grid-50:not(:first-child),
    .sp-grid-60:not(:first-child)
    {
        padding-left: 0;
    }
}

#page-content .expandable-panel-content ul
{
  	margin: 0;
  	list-style: none;
  	padding-left: 8px;
}

#page-content .expandable-panel-content li ul
{
  	padding-left: 20px;
  	list-style: inherit;
}

#page-content .expandable-panel-content li
{
  	margin-bottom: 0px;
  	line-height: 20px;
  	font-size: 0px;
}

#page-content .expandable-panel-content li a,
#page-content .expandable-panel-content li span
{
  	font-size: 16px;
}

#page-content .expandable-panel-content li span
{
  	display: block;
  	line-height: 18px;
  	opacity: 0.8;
  	padding-left: 8px;
  	padding-bottom: 8px;
  	font-style: italic;
  	margin-top: -4px;
  	font-size: 14px;
}

#page-content .expand-control
{
  	display: none;
}

/*------------------------------------------------------------
Navigation
------------------------------------------------------------*/
#page-content-nav a, 
#page-content-nav a:hover, 
#page-content-nav a:link, 
#page-content-nav a:visited, 
#page-content-nav a:focus
{
	color: var(--navigation-link);
	text-decoration: none;
  	transition: color 0.13s ease-in-out;
  	outline: none;
  	border: none;
}

#page-content-nav a:hover
{
	color: var(--navigation-link-hover);
  	transition: color 0.13s ease-in-out;
}

#page-content-nav
{
  	margin-top: 16px;
  	min-height: 32px;
}

#page-content-nav-prev img
{
  	transform: rotate(0.25turn);
  	filter: brightness(0%) invert(100%);
  	width: 10px;
  	height: 10px;
  	opacity: 0.5;
}

#page-content-nav-next
{
  	float: right;
}

#page-content-nav-next img
{
  	transform: rotate(-0.25turn);
  	filter: brightness(0%) invert(100%);
  	width: 10px;
  	height: 10px;
  	opacity: 0.5;
}

#page-content-nav img
{
	border: 0;  
  	margin: 0px;
  	margin-left: 0;
}

#page-content-nav img:hover
{
	border: 0;
}

/*------------------------------------------------------------
Release notes
------------------------------------------------------------*/
.version-title
{
  	margin-top: 40px;
  	font-size: 24px;
}

/*------------------------------------------------------------
Code
------------------------------------------------------------*/
p code, li code, td code
{
  	color: var(--code-inline-text);
  	background-color: var(--code-inline-background);
  	border: 1px solid var(--code-inline-border);
  	padding: 2px 4px 2px 4px;
  	border-radius: 4px;
}

/*------------------------------------------------------------
Release notes expand/collapse
------------------------------------------------------------*/
li.feature-hide-dot
{
	list-style: none !important;
  	list-style-type: none !important;
}

.feature-title
{
  	display: initial;
	cursor: pointer;
  	position: relative;
  	color: var(--page-link);
	border-bottom: 1px solid var(--page-link-border);
}

.feature-title:hover
{
    color: var(--page-link-hover);
    border-bottom: 1px solid var(--page-link-hover);
}

.feature-show
{
	display: block;
}

.feature-hide
{
	display: none;
}

.feature-collapsed
{
  	position: relative;
  	padding: 8px;
  	margin: 4px;
  	margin-left: 16px;
  	margin-bottom: 8px;
  
  	/*border: 2px solid rgba( 255, 255, 255, 0.1 );
  	border-radius: 6px;*/
}

.feature-title-arrow
{
  width: 0; 
  height: 0; 
  border-top: 7px solid transparent; 
  border-bottom: 7px solid transparent;
  border-left: 7px solid var(--page-link);
  position:absolute;
  left:-14px;
  top: 5px;
}

.feature-title-arrow.open
{
  	/*transform-origin: center left;*/
	transform: rotate(90deg);
}

/*------------------------------------------------------------
Python API
------------------------------------------------------------*/
dl
{
  	padding-bottom: 4px;
  	padding-right: 4px;
  	margin-bottom: 4px;
  	background-color: var(--page-api-background);
  	border-radius: 4px;
  	border: 2px solid var(--page-api-border);
}

dt
{
  	background-color: var(--page-api-block);
  	font-weight: bold;
  	padding: 4px;
  	width: calc(100% - 4px);
  	border-bottom: none;
  	position: relative;
}

dd dl dd dl
{
  	background-color: transparent;
}


a code
{
  	color: var(--page-link);
	text-decoration: none;
  	outline: none;
}

a:hover code
{
  	color: var(--page-link-hover);
}

.macro-anchor
{
  	padding-top: 60px; 
  	margin-top: -45px;
}

.sig-param { color: var(--page-api-function-arg); }
.sig-paren { color: var(--page-api-function-parenthese); }
.sig-name { color: var(--page-api-function-name); }
.sig-prename { color: var(--page-api-function-prename); }
.sig-pre { color: var(--page-api-function-type); }

dl .note
{
  	border: 2px solid var(--page-api-border);
  	border-radius: 4px;
  	margin-bottom: 4px;
  	padding: 4px;
  	padding-top: 0;
}

dl .note p:first-child
{
  	margin-top: 0;
}

#page-content dd ul
{
  	padding-left: 14px;
}

#page-content .toc-api-function
{
  	font-family: var(--font);
  	font-size: inherit;
  	margin: 0;
  	padding: 0;
  	padding-top: 55px; 
  	margin-top: -40px;
  	display: inline-block;
  	opacity: 0;
  	position: absolute;
  	left: 0;
  	top: -16px;
}