@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,500&family=Ubuntu:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');

:root {
	--white: #FFFFFF;
	--dirty-white: #F8F9FB;
	--light-slate: #CED4E0;
	--slate: #ADB6CA;
	--dark-slate: #7D8AA3;
	--ink: #2a3958;

	--app-nav: #3d434e;
	--red: #D95A56;
	--orange: #E96A44;
	--yellow: #F7C04A;
	--green: #37C051;
	--light_blue: #3CC2E0;
	--dark_blue: #0890E0;
	--purple: #9780E0;
	--pink: #DA7EB2;

	--theme-color: #0984D7;
	--theme-two-color: #0BBDA8;
	--theme-gradient: linear-gradient(45deg, var(--theme-color), var(--theme-two-color));

	--sans: "Ubuntu", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--monospace: "IBM Plex Mono", "Lucida Console", Monaco, monospace;
}

body {
	font-family: var(--sans);
	font-size: 100%;
	font-weight: 400;
	line-height: 1.5;
	background: var(--white);
	color: var(--ink);

	hyphens: none;
	word-wrap: normal;
	font-feature-settings: "liga", "dlig";
	text-rendering: optimizeLegibility;
	font-feature-settings:"smcp" 1;
	font-feature-settings:"swsh" 1;
}

a {
	color: var(--theme-color);
	text-decoration: none;

	&:focus{
		outline: dotted 1px var(--theme-color);
	}

	&:hover{
		text-decoration: underline;
	}

	&:visited{
		color: var(--dark-slate);
	}

	&:active{
		text-decoration: none;
	}

	&[href^="mailto:"]:not(.button){
		display: inline-block;
		max-width: 20em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		vertical-align: text-bottom;
	}
}

p a{
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6{
	clear: both;
	margin: 1em 0;
	line-height: 1.125;

	.label{
		font-size: 0.5em;
		margin: 0;
		vertical-align: baseline;
	}

	.anchor{
		display: block;
	}

	i{
		position: relative;
		float: right;
		font-size: 0.5em;
		color: var(--slate);
		top: 0.5em;
	}
}

h4, h5, h6{
	margin: 1em 0 0.35em;
}

h1                            { font-size: 1.75em; }
h2                            { font-size: 1.5em; }
h3                            { font-size: 1.25em; }
h4                            { font-size: 1.125em; }
h5                            { font-size: 1.125em; }
h6                            { font-size: 1.125em; }

h1, h2{
	margin: 0 0 0.5em;
}

h1 + h2,
h2 + h3,
h3+ h4,
h4 + h5,
h5 + h6,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child { margin-top: 0; }

abbr, small,
dl, caption                   { font-size: .75em; }
ul, ol                        { margin: 1em 0; padding-left: 2em; }
li ul, li ol                  { margin: 0; padding-left: 1em;}

p                             { word-spacing: 0; margin-bottom: 1em; }
p+p                           { text-indent: 0; }
p:first-of-type               { font-size: 1.125em; }

pre                           { max-width: 100%; overflow: auto; margin: 0; }
ul, ol, dl                    { margin-top: 0; }

hr                            { margin: 0 0 2em; border: 0; border-bottom: solid 2px var(--light-slate); }

time{
	letter-spacing: -0.5px;
	text-transform: uppercase;
}

figure{
	margin: 0 0 3em;
	border: solid 1px var(--light-slate);

	img{
		margin: 0 auto;
	}

	figcaption{
		padding: 0.5em;
		font-size: .875em;
		font-style: italic;
		line-height: 1.25;
		color: var(--slate);
		text-align: center;
	}
}

img                           { display: block; max-width: 100%; height: auto; }

table{
	min-width: 100%;
	border-collapse: collapse;
	font-size: 0.9375em;
}

th, td                        { border-top: solid 2px var(--dirty-white); padding: .5em; vertical-align: middle; }
tr:nth-child(even) td,
tr:nth-child(even) th         { background: var(--dirty-white); }
td                            { text-align: left; }
th                            { text-align: left; }
td.center, th.center          { text-align: center; }
td.right, th.right            { text-align: right; }
thead th, thead td            { border: 0; border-bottom: solid 2px var(--light-slate); line-height: 1 }
tfoot th, tfoot td            { border-color: var(--light-slate); }
iframe                        { border: 0; }

fieldset{
	max-width: 100%;
	margin: 3em 0;
	padding: 1.25em 1em 1em;
	border: solid 2px var(--light-slate);
	border-radius: 5px;

	&:first-child{
		margin-top: 0;
	}

	&:last-child{
		margin-bottom: 0;
	}

	& > *:last-child{
		&.button-group{
			button:last-child, .button:last-child{
				margin-bottom: 0;
			}
		}
	}

	legend{
		padding: 0 0.25em;
		font-size: 0.8125em;
		color: var(--slate);
		text-transform: uppercase;
		letter-spacing: 0.075em;
		line-height: 0;
		height: 2px;
		position: relative;
		z-index: 1;
	}

	legend + span{
		display: block;
		margin: 0 0 2em;
		color: var(--dark-slate);
		font-style: italic;
		font-size: 0.9375em;
	}

	hr{
		position: relative;
		margin: 2em -1em;
		border-color: lighten(var(--light-slate), 10%);
	}
}

label, .label{
	display: block;
	margin: 0 0 0.25em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--slate);
	font-size: 0.8125em;

	&:visited{
		color: var(--slate);
	}
}

.label{
	line-height: 1.5;
	margin: 0.75em 0 0;
}

input, select, textarea {
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
	width: 100%;
	padding: 0.375em 0.75em;
	border: solid 2px var(--light-slate);
	background: var(--white);
	border-radius: 3px;
	font-family: var(--sans);
	line-height: 1.5;
	color: var(--ink);
	transition: border-color .5s ease-out;

	&:focus{
		outline: 0;
		border-color: var(--theme-color);
	}

	&[disabled], &[readonly]{
		background-color: var(--dirty-white);;

		&:focus{
			border-color: var(--light-slate);
		}
	}

	&[disabled]{
		cursor: not-allowed;
		// color: var(--dark-slate);
	}
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{
	color: var(--slate);
	font-style: italic;
}

input::-moz-placeholder, textarea::-moz-placeholder{
	color: var(--slate);
	font-style: italic;
}

select {
	-webkit-appearance: none;
	-moz-appearance:    none;
	appearance:         none;
	padding: 0.375em 2.25em 0.375em 0.75em;
	display: inline-block;
	background: var(--white) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNDZweCIgaGVpZ2h0PSIyOXB4IiB2aWV3Qm94PSIwIDAgNDYgMjkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgIHN0cm9rZT0ibm9uZSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNNDQuOTU4NzYxMyw3LjY4NzQ3NTc5IEM0NS42NTYzMDY4LDYuOTg5OTMwMzEgNDUuNjU2MzA2OCw1Ljg0NTk1NTczIDQ0Ljk1ODc2MTMsNS4xNDg0MTAyNiBMNDAuMzI3MDU5NCwwLjU0NDYxMDEyOCBDMzkuNjI5NTEzOSwtMC4xNTI5MzUzNDcgMzguNTEzNDQxMiwtMC4xNTI5MzUzNDcgMzcuODE1ODk1NywwLjU0NDYxMDEyOCBMMjMuMDAwMDI5OCwxNS4zNjA0NzYgTDguMTg0MTYzOTMsMC41NDQ2MTAxMjggQzcuNDg2NjE4NDUsLTAuMTUyOTM1MzQ3IDYuMzcwNTQ1NjksLTAuMTUyOTM1MzQ3IDUuNjczMDAwMjIsMC41NDQ2MTAxMjggTDEuMDQxMjk4MjcsNS4xNDg0MTAyNiBDMC4zNDM3NTI3OTQsNS44NDU5NTU3MyAwLjM0Mzc1Mjc5NCw2Ljk4OTkzMDMxIDEuMDQxMjk4MjcsNy42ODc0NzU3OSBMMjEuNzQ0NDQ3OSwyOC4zNjI3MjM2IEMyMi40NDE5OTM0LDI5LjA2MDI2OTEgMjMuNTU4MDY2MiwyOS4wNjAyNjkxIDI0LjI1NTYxMTcsMjguMzYyNzIzNiBMNDQuOTU4NzYxMyw3LjY4NzQ3NTc5IFoiIGZpbGw9IiM3RDhBQTMiPjwvcGF0aD48L2c+PC9zdmc+) right 0.75em center no-repeat;
	background-size: 0.8125em;

	&[disabled]{
		color: var(--slate);
		background-color: var(--dirty-white);;
	}
}

input[type="date"], input[type="datetime"], input[type="time"]{ line-height: 1.4; }
input[type="date"], input[type="datetime-local"], input[type="time"] { padding-right: 0.25em; }
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-clear-button{ display: none; }

input[type="radio"],
input[type="checkbox"]{
	position: absolute;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;

	& + label{
		text-transform: none;
		letter-spacing: normal;
		font-size: 0.9375em;
		margin: 0 0 0.5em;
		cursor: pointer;
		color: var(--dark-slate);

		&:before{
			content: '';
			display: inline-block;
			width: 1.5em;
			height: 1.5em;
			margin: 0 0.5em 0 0;
			border-radius: 3px;
			border: solid 2px var(--light-slate);
			background: var(--white);
			vertical-align: top;
			transition: border-color .5s ease-out;
		}
	}

	&:checked + label:before{
		color: var(--dark-slate);
		content: '\f00c';
		text-align: center;
		font: normal 900 normal 1em/1.5 'Font Awesome 6 Pro';
	}

	&:focus + label:before{
		border-color: var(--theme-color);
		color: var(--theme-color);
	}

	&[disabled] + label{
		cursor: not-allowed;

		&:before{
			background: var(--dirty-white);;
			border-color: darken(var(--dirty-white);, 7%);
		}
	}
}

input[type="radio"]{
	& + label:before{
		border-radius: 100%;
	}

	&:checked + label:before{
		content: '';
		box-shadow: inset 0 0 0 5px var(--white), inset 0 0 0 10px var(--dark-slate);
	}

	&:focus:checked + label:before{
		box-shadow: inset 0 0 0 5px var(--white), inset 0 0 0 10px var(--theme-color);
	}
}


textarea{ overflow: auto; resize:vertical; }

section.content, nav.app-nav{
	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		display: inline-block;
		padding: 0.375em 0.75em;
		margin: 0 1em 1em 0;
		background-color: var(--theme-color);
		background-image: linear-gradient(to bottom, var(--theme-color), var(--theme-color), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
		background-size: 100% 300%;
		border: solid 2px var(--theme-color);
		border-radius: 3px;
		cursor: pointer;
		transition: box-shadow .1s ease-out;
		font-family: var(--sans);
		text-transform: uppercase;
		letter-spacing: .05em;
		line-height: 1.5;
		color: var(--white);

		&.lesser{
			background: transparent;
			color: var(--dark-slate);
			border-color: var(--slate);

			&:visited{ color: var(--dark-slate); }

			&:hover{
				background: transparent;
				border-color: var(--theme-color);
				box-shadow: none;
				color: var(--theme-color);
			}

			&:active{
				box-shadow: inset 0 1px 7px 0 rgba(0, 0, 100, 0.25);
			}
		}

		&.slate{
			background-color: var(--dark-slate);
			background-image: linear-gradient(to bottom, var(--dark-slate), var(--dark-slate), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
			border-color: var(--dark-slate);

			&:hover{
				//hover slides to semi-transparent white, so color underneath has to be set again
				background-color: var(--theme-color);
				background-image: linear-gradient(to bottom, var(--theme-color), var(--theme-color), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
				border-color: var(--theme-color);
			}

			&:active{
				box-shadow: inset 0 1px 7px 0 rgba(0, 0, 100, 0.5);
			}
		}

		&.bad{
			background-color: var(--red);
			background-image: linear-gradient(to bottom, var(--red), var(--red), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
			border-color: var(--red);
		}

		&.warning{
			background-color: var(--yellow);
			background-image: linear-gradient(to bottom, var(--yellow), var(--yellow), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
			border-color: var(--yellow);
		}

		&.good{
			background-color: var(--green);
			background-image: linear-gradient(to bottom, var(--green), var(--green), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
			border-color: var(--green);
		}

		&[disabled]{
			background: var(--dirty-white);;
			border-color: var(--dirty-white);;
			color: var(--light-slate);
			cursor: not-allowed;

			&:hover{
				box-shadow: none;
				background: var(--dirty-white);
				border-color: transparent;
				color: var(--light-slate);
			}
		}

		&:visited{
			color: var(--white);
		}

		&:focus{
			outline: 0;
			text-decoration: underline;
		}

		&:hover{
			text-decoration: none;
			background-position: 0 100%;
			box-shadow: 0 2px 7px 0 rgba(0, 0, 100, 0.2);
		}

		&:active{
			box-shadow: inset 0 1px 7px 0 rgba(0, 0, 100, 0.5);
		}
	}
}

aside.sidebar{
	.app-name{
		width: 70%;
		margin: 0 auto 1em;
	}

	li{
		margin: 0;
	}
}

.sidebar-nav{
	& > ul{
		& > li{
			margin: 0.5em 0 0;
			font-weight: 700;

			&:first-child{
				position: relative;
				padding: 1em 0;
				margin: 0 0 2em;
				color: var(--white);
				font-weight: 700;

				&:before{
					content: '';
					display: block;
					width: 200%;
					height: 100%;
					top: 0;
					left: -50%;
					background: var(--theme-color);
					margin: 0 0 1em;
					position: absolute;
					z-index: -1;
				}

				ul{
					margin: 0;
				}

				a{
					color: var(--white);
				}
			}

			& > ul{
				font-weight: 400;
			}
		}
	}
}

nav.app-nav{
	margin: 1em 0 0;
	padding: 0 0 0 0.5em; 

	&.no-badge{
		margin: 1em 0 0;

	}

	.button{
		display: block;
		min-width: 12em;
		position: absolute;
		top: -2px;
		right: 110%;
		margin: 0;
		text-align: center;
		line-height: 1.125;
		background: var(--theme-gradient);
	}

	ul{
		padding: 0;
	}

	li{
		margin: 0;
		padding: 0;
	}

	li:first-child a{
		border-radius: 20px 0 0 20px;
	}

	a{
		padding: 0.5em 1em;
		font-size: 0.8125em;
		line-height: 1.5;
		background: var(--dirty-white);

		&.active{
			border: 0;
			background: var(--theme-color);
			color: var(--white);
		}

		&.disabled{
			pointer-events: none;
			color: var(--slate);
			cursor: default;
		}
	}
}

.markdown-section{
	strong, .anchor span, h1, h2, h3, h4, h5, h6{
		color: var(--ink);
	}

	a{
		color: var(--theme-color);

		&:visited{
			color: var(--dark-slate);
		}
	}

	p, ul{
		line-height: 1.5;
		word-spacing: 0;
	}

	p.tip{
		border-color: var(--red);

		&:before{
			background-color: var(--red);
		}
	}

	p.warn{
		border-left: solid 4px var(--green);
		border-radius: 2px;
		padding: 0.75em 1.5em 0.75em 2em;
		position: relative;
	}

	/*.last-updated{*/
	/*	color: var(--dark-slate);*/
	/*	font-weight: 700;*/
	/*	text-align: right;*/
	/*	font-size: 0.8125em;*/
	/*	margin: 5em 0 0;*/
	/**/
	/*	&:before{*/
	/*		content: '';*/
	/*		display: inline-block;*/
	/*		position: relative;*/
	/*		top: 3px;*/
	/*		margin: 0 0.25em 0 0;*/
	/*		width: 1.25em;*/
	/*		height: 1.25em;*/
	/*		background: url(/docs/_media/last-edit.svg) center center no-repeat;*/
	/*		background-size: contain;*/
	/*		opacity: 0.5;*/
	/*	}*/
	/*}*/
}

.resource-ref{
	display: inline-block;
	position: relative;
	vertical-align: text-top;
	max-width: 100%;
	padding: 0.125em 0.25em;
	font-family: var(--monospace);
	font-weight: 500 !important;
	color: var(--ink);
	border: solid 2px var(--light-slate);
	border-radius: 3px;
	line-height: 1;
	background: var(--white);
	overflow: hidden;

	&:visited{
		color: var(--ink);
	}

	&.no-sku{
		border-color: var(--red);
		color: var(--red);
		box-shadow: none;

		.fa{
			font-size: 0.75em;
			position: relative;
			top: -1px;
			left: 2px;
		}

		&:hover, &:focus{
			color: var(--white);
			background: var(--red);
			text-decoration: none;
		}
	}

	&.external-ref{
		color: var(--dark-slate);
	}
}

.release-notes-version-system{
	padding: 1em;
	background: var(--dirty-white);
	border-radius: 5px;
	font-size: 0.9375em;
	color: var(--dark-slate);

	h2{
		font-size: 1em;
		color: var(--dark-slate);
	}

	ul{
		padding: 0;
		list-style: none;
	}

	strong{
		font-weight: 500;
		background: var(--dark-slate);
		color: var(--white);
		border-radius: 3px;
		padding: 0 0.125em;
	}

	p{
		margin-bottom: 0;

		&:first-of-type{
			font-size: 1em;
		}
	}
}