:root {
	  --default-padding: 16px;
	  --header-height: 80px;
	  --sticky-pos: 10px;
	}
	
	@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap');
	

	.confluence-information-macro-icon::before {
	    font-family: "Material Symbols Outlined" !important;
	    font-feature-settings: "liga";
	    font-size: 20px;
	    line-height: 1;
	}


	* { line-height:1.5em;}

	div:not(strong) {
		text-shadow: 0 0 #00000088 !important;
	}

	strong {
		text-shadow: none !important;
	}
    
	body { 
		font-family: 'Roboto', 'Raleway','Open Sans', sans-serif;  /* Poppins,  */
		-webkit-font-smoothing: subpixel-antialiased; 
		text-rendering: optimizeLegibility !important;
		-webkit-font-smoothing: antialiased !important;
		-webkit-overflow-scrolling: touch;
		/*font-weight:500;*/
		background-color:#FFF !important; 
		padding:50px;
		
	}

    p { white-space:pre-wrap}	
	
	.ForceLink {
		color:#3572b0 !important;
		border-bottom:solid 1px #CCC;
	}
	.ForceLink:hover {
		text-decoration:none !important;
		border-bottom:solid 1px #3572b0;
	}

	
	
	H1, div {
		clear: both;
	}

	hr {
	    margin-top: 35px;
	}

	li:not(:last-child) {
		margin-bottom: .4em;
	}

	[title="Gearco Wiki Logo"] {
		position:relative;
		margin-left:-15px !important;
		margin-bottom:25px !important;
		max-width:none !important;
	}
	
	.two-right-sidebar .wiki-content .columnLayout {
		table-layout:auto !important
	}
	
	.two-right-sidebar .innerCell {
		margin-right:-15px !important;
	}
	
	.two-right-sidebar .cell:first-of-type {
		background-color:#FAFAFA;
		min-width:350px !important;
	}
	
	#GearcoCPMS {
		position:fixed;
		width: 65vw;
		height: 96vh; 
		border: 1px solid #CCC;
		ox-shadow: 0px 0px 12px 3px #F0F0F0;
		top:1vh;
		background-color:#FFF;
	}
	
	#GearcoCPMS.ScrollActive {
		box-shadow: 0px 0px 12px 3px RGBA(0,136,204, .3) !important;
	}
	
	
	.fixedWindow { 
		height:99vh;
		overflow-y:scroll !important;
		overflow-x:hidden !important;
		border-bottom:1px #0f65c3 solid;
		position:relative;
		padding-left:10px;
		padding-right:10px;
		border-radius: 5px;
	}

		
	
	H2 { 
		-webkit-margin-after:35px;
        position: relative;
	    margin: 50px 0 22px;
	    padding: 11px 16px;

	    font-size: 21px;
	    font-weight: 700;
	    color: #222;

	    background: linear-gradient(
		    90deg,
		    #EEEEEE88  0%,
			#EEEEEE08 45%,
	        transparent 100%
	    );

	    border-left: 4px solid #0f65c3;
	    border-radius: 5px;
	}
	
    
    H21:after {
        content:"";
        position:absolute;
        bottom:-10px;
        left:-5px;
        border-bottom:1px solid #DDD;
        width:calc(65% + 5px);
    }

 
    H4 { -webkit-margin-before:40px;
		 -webkit-margin-after:30px;
         margin-top:40px !important;
         margin-bottom:30px !important;
         position:relative;
         color:#111 !important;
         font-size:16px !important;
         font-weight:600 !important;
	}
    
    H4:after {
        content:"";
        position:absolute;
        bottom:-10px;
        left:0px;
        border-bottom:1px solid #EEE;
        width:100%;
    }

	@media screen {
		body {
		    position: relative;
		    margin-left: 20px;
		}

		body::before {
		    content: "";
		    position: absolute;
		    top: calc(42px + 50px);
		    bottom: 20px;
		    left: 15px;
		    width: 2px;
		     background: linear-gradient(
		        180deg,
		        #FFCC00 0%,
		        #FFCC00 35%,
		        #FFCC0066 70%,
		        #FFCC0000 100%
		    );
		}

		body::after {
		    content: "";
		    position: absolute;
		    top: calc(35px + 50px);
		    left: 11px;

		    width: 10px;
		    height: 10px;

		    background: #0F65C3;
		    border-radius: 50%;
		    box-shadow: 0 0 0px 6px #0F65C326;
		}
	}


    /* move logo back */
	ct > span:first-of-type  img {
		transform: translateX(-30px) !important;
	
	}

	ct > span + h1 {
		padding-top: 30px !important;
	}

	ct > span + h2 {
		--padding-top: 30px !important;
	}

	ct > h2 {
		margin-left: 10px !important;
	}

	ct > H3, ct > H4 {
    	margin-left: 15px !important;
	}    	


	ct > div, ct > span, ct > iframe{
		margin-left: 20px !important;
	}

	div[style*="margin-left: 30"] {
		margin-left: 40px !important;
	}

	div + div {
		margin-top: 1em !important;
	}

	ol + div, ul + span {
		margin-top: 1em !important;
	}
	
	.confluence-information-macro + h2 {
		margin-top: 35px !important;
	}

	.innerCell  {
		padding-left:10px;
		padding-right:10px;
		
	}
	
	.confluence-embedded-image {
		display: block;
		margin-left: 2px; 
		margin-right: 2px;
		max-width: calc(100% - 4px);
		cursor:default !important;
		border-radius: 10px;
	} 
	.confluence-embedded-file-wrapper {
		position: relative;
		display: inline-block;
		max-width: 100%;
	}
	.confluence-embedded-image:hover {
		cursor:zoom-in !important;
	}
	.Clicked .confluence-embedded-image:hover {
		cursor:zoom-out !important;
	}
	.confluence-embedded-file-wrapper.Clicked  {
		overflow-x:auto;
	    border: 1px #DDD solid;
		box-shadow: rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px, rgba(0, 0, 0, 0.2) 0px 11px 15px -7px;
		max-height:80vh;
		z-index:1000 !important;
		position:fixed;
		top:15vh;
	}
	
		
	.confluence-embedded-file-wrapper.Clicked .img-hover  {
		max-width:5000px; 
		
	}
	
	table.confluenceTable td.confluenceTd img, table.confluenceTable td.confluenceTd .confluence-embedded-file-wrapper img, table.confluenceTable th.confluenceTh .confluence-embedded-file-wrapper img {
		max-width: none;
	}

	.confluenceTable:first-child, .table-wrap:first-child {
		margin-top: 0;
	}
	
	.confluenceTable, .table-wrap{
		margin: 10px 0 0 0;
		overflow-x: auto;
	}
	
	.confluenceTable {
		border-collapse: collapse;
	}
	.confluenceTable {
		border-collapse: collapse;
	}
	.confluenceTable .confluenceTh, .confluenceTable .confluenceTd {
		min-width: 8px;
	}
	
	.confluenceTh{
		border: 1px solid #ddd;
		padding: 7px 10px;
		vertical-align: top;
		text-align: left;
		background: #f0f0f0 center right no-repeat;
		padding-right: 15px;
        width:fit-content !important;
        white-space:nowrap;
        vertical-align:bottom;
	}

	.confluenceTd {
		border: 1px solid #ddd;
		padding: 7px 10px;
		vertical-align: top;
		text-align: left;
	}
    
	
	img.emoticon {
		vertical-align:baseline;
	}
	
	/* Atlassian */
	.output-block:not(.Player) { 
		margin-top:40px;
		-webkit-transition:0.5s;
		box-sizing:border-box;
		position:relative;
	}
	

	
	.output-block:before:not(.code){ 
		-webkit-transition:0.5s;
		content:"";
		border:5px rgba(255,204,0,1) solid;
		background-color:rgba(255,204,0,.1);
		position:absolute;
		height:calc(100% + 3px);
		width:calc(100% + 3px);
		top:-1px;
		left:-1px;
		z-index:1; 
		opacity:0;
		border-radius:5px;
		box-sizing:border-box;  
	}
	.output-block:hover:before:not(.code) { 
		opacity:1;
	}
	
	
	.NoScroll { overflow:hidden !important; }
	.NoScrollWin { overflow:hidden !important; }
		
		
	H2 iframe.output-block {
		margin-top:0px !important;
		-webkit-margin-before:0px;
		-webkit-margin-after:25px;
	}
	
	.code b {
		font-size:1.2em;
	}
	.code {
		margin-top:0px !important;
		font-weight:bold !important;	
	}
	
	.pdl {
		overflow:auto !important; 
	}
	
	
	.PlayerParent {
		border: 1px solid #CCC;
		box-shadow: 0px 0px 12px 3px #CCC;
		margin-top:25px;
		margin-bottom:50px;
		-webkit-transition:0.1s;
		position:relative;
		width:75%;
		overflow:hidden;
		margin-left: auto;
	    margin-right: auto;
	}
	
	.two-right-sidebar .PlayerParent  {
		width:98%; 
	}
	
	@media (max-width:768px) {
		.PlayerParent {
			width:100%;
		}
        .wiki-content .cell {
            display:block !important;
            margin-top:40px;
        }
	}
	
	.PlayerParent  {
	    border: 1px #DDD solid;
		box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 28px 14px;
	}
	
	
	
	
	
	.Player {
		width:100.2%;
		position:relative;
		margin-left:-.1%;
	}
	
	
	.GearcoScreen {
		width:95vw;
		height:80vh;
		min-height:600px;
		border: 1px solid #AAA;
		box-shadow: 0px 0px 12px 3px #CCC;
		margin-top:25px;
		margin-bottom:25px;
	}
	.GoogleSheet {
		width:95vw;
		height:75vh;
		min-height:400px;
		border: 1px solid #AAA;
		box-shadow: 0px 0px 12px 3px #CCC;
		margin-top:25px;
		margin-bottom:25px;
	}
	
	.GearcoScreen .ScrollActive, .GoogleSheet .ScrollActive {
		box-shadow: 0px 0px 12px 3px #0088CC !important;
	}
	
	@media (max-width:768px) {
		.GoogleSheet, .GearcoScreen {
			width:78vw;
		} 
	}
	
	
	.HoverBarBlue, .HoverBarTrigger:hover .HoverBarBlue:first-child, .BarBlueActive {
	  position:relative;	
	  cursor:default;
	  z-index:1;
	}
	.HoverBarBlue:before, .HoverBarTrigger:hover .HoverBarBlue:first-child:before, .BarBlueActive:before {
		content:"";
		border-left:5px rgba(0,136,204,0) solid;
		background-color:rgba(0,136,204,0);
		position:absolute;
		height:0%;
		width:0px;
		top:-1em;
		left:-1em;
		-webkit-transition:0.5s;
		z-index:-1; 
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	.HoverBarBlue:hover:before, .HoverBarTrigger:hover .HoverBarBlue:first-child, .BarBlueActive:before {
		-webkit-transition:0.5s;
		border-left:5px rgba(0,136,204,.5) solid;
		background-color:rgba(0,0,0,.05);
		height:calc(100% + 2em);
		width:calc(100% + 1.5em);
	}
	
	.HoverBarYellow, .BarYellowActive {
	  	position:relative;	
	  	cursor:default;
	   	z-index:1;
	}
	.HoverBarYellow:before, .BarYellowActive:before {
		content:"";
		border-left:5px rgba(255,204,0, .6) solid;
		position:absolute;
		height:calc(100% + 2em);
		width:0px;
		top:-1em;
		left:-1em;
		-webkit-transition:0.5s;
		z-index:-1;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
		opacity:0;
	}
	.HoverBarYellow:hover:before, .BarYellowActive:before {
		-webkit-transition:0.5s;
		border-left:5px rgba(255,204,0, .6) solid;
		background-color:rgba(0,0,0,.05);
		height:calc(100% + 2em);
		width:calc(100% + 1.5em);
		opacity:1;
	}
	.HoverBarYellow:before ol, , .BarYellowActive:before ol { left:-2em !important }
	
	.HoverBarGreen  {
	  position:relative;	
	  cursor:default;
	  z-index:1;
	}
	.HoverBarGreen:before {
		content:"";
		border-left:5px rgba(102,176,0, 0) solid;
		position:absolute;
		height:0%;
		width:0px;
		top:-1em;
		left:-1em;
		-webkit-transition:0.5s;
		z-index:-1;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	
	.HoverBarGreen:hover:before {
		-webkit-transition:0.5s;
		border-left:5px rgba(102,176,0, .5) solid;
		background-color:rgba(0,0,0,.05);
		height:calc(100% + 2em);
		width:calc(100% + 1.5em);
	}
	
	.HoverBarWhite {
	 	position:relative;	
	  	cursor:default;
		z-index:1;
	}
	.HoverBarWhite:before{
		content:"";
		border-left:5px rgba(255,255,255, .0) solid;
		position:absolute;
		height:0%;
		width:0px;
		top:-1em;
		left:-1em;
		-webkit-transition:0.5s;
		z-index:-1;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}
	

	.HoverBarBlue.Dark:hover:before,  .HoverBarTrigger:hover .HoverBarDefault.HoverBarBlue.Darker:before, 
	.HoverBarGreen.Dark:hover:before, .HoverBarTrigger:hover .HoverBarDefault.HoverBarGreen.Darker:before,
	.HoverBarYellow.Dark:hover:before,
	.HoverBarWhite.Dark:hover:before 
	{
		background-color:rgba(0,0,0,.1);
	}
	.HoverBarBlue.Darker:hover:before,  .HoverBarTrigger:hover .HoverBarDefault.HoverBarBlue.Darker:before, 
	.HoverBarGreen.Darker:hover:before, .HoverBarTrigger:hover .HoverBarDefault.HoverBarGreen.Darker:before,
	.HoverBarYellow.Darker:hover:before,
	.HoverBarWhite.Darker:hover:before 
	{
		background-color:rgba(0,0,0,.5);
	}
	.HoverBarBlue.Lighter:hover:before,	 .HoverBarTrigger:hover .HoverBarDefault.HoverBarBlue.Lighter:before,
	.HoverBarGreen.Lighter:hover:before, .HoverBarTrigger:hover .HoverBarDefault.HoverBarGreen.Lighter:before,
	.HoverBarYellow.Lighter:hover:before,
	.HoverBarWhite.Lighter:hover:before 
	{
		background-color:rgba(255,255,255,.1);
	}
	
	.HoverBarBlue.Brighter:hover:before,  .HoverBarTrigger:hover .HoverBarDefault.HoverBarBlue.Lighter:before,
	.HoverBarGreen.Brighter:hover:before, .HoverBarTrigger:hover .HoverBarDefault.HoverBarGreen.Brighter:before,
	.HoverBarYellow.Brighter:hover:before,
	.HoverBarWhite.Brighter:hover:before 
	{
		background-color:rgba(255,255,255,.3);
	}
    
    .GearcoImgBorder { 
        background-color:#FFF;
        border-radius: 10px;
        border: 1px solid #00000022;
    }

    .confluence-embedded-file-wrapper:not(ct > span:first-of-type) {
    	display: table;
    	padding:0 !important;
        box-shadow: 0 0 5px 0px #00000044;
        border-radius: 10px;
		margin-top: 20px !important;
		margin-bottom: 20px !important;
	    max-width: 80dvw !important;
    }

	.confluence-embedded-file-wrapper:not(ct > span:first-of-type) img {
		max-width: 80dvw !important;
	}

	.syntaxhighlighter-pre {
		font-family: 'JetBrains Mono', monospace;
		white-space: pre;
		background: #f9f9f9;
	}	

	.codeContent.panelContent.pdl {
		padding: 0px !important;
	}


	.code-lines, .syntaxhighlighter-pre{
    	counter-reset:line;
	}

	.code-lines div, .syntaxhighlighter-pre div{
	    counter-increment:line;
	    position:relative;
	    padding-left:60px;
	    padding-right: 10px;
	}

	.code-lines div:before, .syntaxhighlighter-pre div:before{
	    content:counter(line);
	    position:absolute;
	    left:0;
	    width:40px;
	    text-align:right;
	    color:#6b7280;
	    background: #f2f2f2;
	    padding-right: 5px;
	}

	.youtube-player {
		width: 50dvw !important;
    	height: 50dvh !important;
    }

    ./* Warning */
	.aui-iconfont-warning.confluence-information-macro-icon::before {
	    content: "warning";
	}

	/* Information */
	.aui-iconfont-info.confluence-information-macro-icon::before {
	    content: "info";
	}

	/* Success */
	.aui-iconfont-success.confluence-information-macro-icon::before {
	    content: "check_circle";
	}



	/* =========================================================
   Gearco Wiki - Enterprise Documentation
   Existing Confluence HTML only
   ========================================================= */

@media screen {

    /* ---------- Page Title ---------- */

    ct > h1 {
       margin: 0 0 25px;
	    padding-bottom: 16px;
	    font-size: 32px;
	    padding-left: 18px;
	    font-weight: 700;
	    line-height: 1.2;
	    color: #111827;
	    border-bottom: 1px solid #96bef5c4;
    }


}