/*<meta />*/

/* Global Okta help css -- contains classes and elements used on any and all topics.  */

@import url('variables.css');

@import url('qualtrics.css');

@import url('../fonts/fonts.css');

@import url('../foundation-icons/foundation-icons.css');

@import url('../foundation.min.css');

@import url('../../scripts/coveo-resources/vendor/salesforce-ux/assets/styles/salesforce-lightning-design-system.css');

@import url('../../scripts/coveo-resources/css/coveo.okta.standalonesearchbox_nav_poc.min.css');

@namespace MadCap url("http://www.madcapsoftware.com/Schemas/MadCap.xsd");

body
{
	font-family: "Aeonik Regular", Helvetica, Arial, sans-serif;
	color: var(--color-carbon);
	background-color: var(--color-white);
	font-size: 17px;
	line-height: 1.6;
}

/*** Headings and paragraphs ***/
/*** .h1 through .h5 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element. ***/

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6
{
	color: var(--color-carbon);
}

h1,
.h1
{
	font-size: 32px;
	line-height: 1.2;
	margin: 0 0 23px;
}

h2,
.h2
{
	font-size: 26px;
	line-height: 1.25;
	margin-top: 24px;
	margin-bottom: 23px;
}

h2
{
	margin-bottom: 20px;
	margin-top: 23px;
}

h3
{
	line-height: 1.25;
	font-size: 20.5px;
	margin: 30px 0 23px;
}

h4,
.h4
{
	font-size: 20px;
	line-height: 1.35;
	margin-bottom: 32px;
}

h4
{
	font-size: 18px;
	margin: 26px 0 20px;
}

h5,
.h5
{
	font-size: 18px;
	line-height: 1.3;
	margin-bottom: 16px;
}

h5
{
	font-size: 16.8px;
	margin: 20px 0 0;
	margin-bottom: 22px;
}

h6
{
	font-size: 16.5px;
	font-weight: 500;
	margin: 18px 0 16px;
}

p
{
	margin-bottom: 8px;
	margin-top: 8px;
}

table
{
	overflow-x: scroll;
	max-width: 100%;
}

/*** Override: New styles for current classes (.copyright)  ***/

p.copyright
{
	font-size: 14px;
	line-height: 1.2;
	color: var(--color-gravel);
	position: relative;
}

/*** Link styles ***/

a,
.xref
{
	color: var(--color-sky);
	text-decoration: underline;
}

a:hover,
.xref:hover
{
	color: var(--color-sky);
	text-decoration: underline;
}

a:focus,
.xref:focus
{
	outline: none;
}

/*** Update external-link icon ***/

a.external-link::after
{
	content: url('../../images/okta-assets/external-link-icon.svg');
	padding-left: 7px;
}

/* Font weight 
Quickly change the weight (boldness) of text 
*/

.font-weight-book
{
	color: var(--color-carbon) !important;
}

.font-weight-normal
{
	font-weight: 400 !important;
}

.font-weight-medium
{
	font-weight: 500 !important;
}

.font-weight-bold
{
	font-weight: 700 !important;
}

/*** Color utility classes ***/

.text-main
{
	color: var(--color-carbon) !important;
}

.text-gray
{
	color: var(--color-slate) !important;
}

.text-orange
{
	color: var(--color-seafoam) !important;
}

.text-blue
{
	color: var(--color-sky) !important;
}

.text-brand
{
	color: var(--color-cobalt) !important;
}

/* Feature banners */

.featureBanner
{
	width: 100%;
	padding: 10px;
	border-left-color: var(--color-sky);
	border-width: 0 0 0 5px;
	border-style: solid;
}

/* For labels in master pages */

.lga_banner
{
	display: block;
	position: absolute;
	top: 35px;
	right: 50px;
}

.lga_banner_oie
{
	display: block;
	position: absolute;
	top: 28px;
	right: 28px;
}

.rev-only_banner
{
	display: block;
	position: absolute;
	top: 23px;
	right: 30px;
}

/* Identity Engine label positioning */

.oie-label
{
	position: absolute;
	top: 6px;
	right: 2em;
	width: 120px;
}

img.oie-label
{
	width: 120px;
	height: 50px;
}

/*** Code styles ***/

span.code,
span.codeph,
span.codeblock,
code
{
	background-color: var(--color-smog);
	font-family: monospace;
}

/* These selectors are bad.
	The `p.code` needs to be replaced with either codeph or codeblock,
	depending on location context.
	The `#code` needs to be replaced with codeph.
	Leaving styling as-is for now.
*/

p.code,
#code
{
	border-radius: 2px;
	padding: 2px 5px;
	background-color: var(--color-cream);
	color: var(--color-carbon);
	font-size: 95%;
	font-family: Inconsolata, Consolas, Menlo, Monaco, "Courier New", monospace;
	word-break: break-all;
	margin-bottom: 0;
	margin-top: 0;
	margin-left: 12px;
	max-width: 90%;
}

/* These selectors are redundant. Will normalize all to codeph at later time */

span.code,
span.codeph
{
	font-size: 95%;
	margin: 6px 0;
	padding: 4px;
	border-radius: 6px;
}

span.codeblock,
pre > code
{
	display: block;
	white-space: pre;
	border-radius: 8px;
	line-height: 1.5em;
	font-size: .9em;
	padding: 1em;
	margin: 1em 0;
	overflow: auto;
}

/* Overrides for Flare's codeSnippet structures (in Topics.css) */

.codeSnippetBody pre
{
	border-radius: 8px;
	background-color: var(--color-snow);
}

.codeSnippetBody span.codeSnippetLineNumbers
{
	margin-top: 2em;
	padding-left: 1em;
	line-height: 1.5em;
	font-size: 1.1em;
}

.codeSnippetBody > pre > code
{
	font-size: 1.1em;
}

/*** Image styles ***/

img
{
	max-width: 100%;
}

/*** List styles ***/

ul
{
	margin: 16px 0;
}

ol
{
	margin-top: 6px;
	margin-bottom: 6px;
}

ul li
{
	margin-top: 6px;
	margin-bottom: 6px;
}

ol li
{
	margin-top: 6px;
	margin-bottom: 6px;
}

ul li:first-child
{
	margin-top: -6px;
}

ul li::marker
{
	color: var(--color-gravel);
}

/*** List with blue markers ***/

ul.marker-blue li::marker
{
	color: var(--color-sky);
}

/*** Unstyled - Remove the default list-style and left margin on list items ***/

ul.list-unstyled
{
	list-style: none;
	padding: 0;
	margin: 0;
}

/*** Override: Sidenav styles  ***/

.sidenav-wrapper
{
	width: 335px;
	background-color: var(--color-fog);
	margin-top: 0;
}

.sidenav-container
{
	padding-left: 2%;
	padding-right: 0%;
}

ul.sidenav li a
{
	color: var(--color-carbon);
	position: relative;
	font-size: 14px;
	line-height: 1.3;
	padding: 0;
	padding: 10px 15px;
	font-family: "Aeonik Regular", Helvetica, Arial, sans-serif;
}

ul.sidenav ul > li > a
{
	padding: 10px 15px;
	margin-left: 14px;
}

ul.sidenav ul ul > li > a
{
	margin-left: 28px;
}

ul.sidenav ul ul ul > li > a
{
	margin-left: 42px;
}

ul.sidenav ul ul ul ul > li > a
{
	margin-left: 56px;
}

ul.sidenav li a:hover
{
	background-color: var(--color-smog) !important;
}

ul.sidenav li a.selected
{
	background-color: var(--color-smog) !important;
}

ul.menu li > a.selected
{
	color: var(--color-carbon);
	background-color: var(--color-smog) !important;
}

.is-accordion-submenu-parent > a span.submenu-toggle-container
{
	width: auto;
}

ul.sidenav li a .submenu-toggle-container:focus
{
	outline: none;
}

ul.sidenav li a .submenu-toggle-container span
{
	display: none;
}

ul.sidenav li a span.submenu-toggle-container::before
{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 3em;
	height: 2.75em;
}

ul.sidenav li a span.submenu-toggle-container::after
{
	content: '';
	position: absolute;
	top: 45%;
	right: 21px;
	transform: translate(0, -50%) rotate(45deg);
	width: 9px;
	height: 9px;
	border: 1px var(--color-carbon);
	border-style: none solid solid none;
	transition: transform .2s;
}

ul.sidenav li a span.submenu-toggle-container[aria-expanded="true"]::after
{
	transform: translate(0, -50%) rotate(-135deg);
}

/*** Override: Search-box styles ***/

.coveo-headline-wrapper
{
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	background: var(--color-carbon);
	height: 70px;
	margin-top: 70px;
	z-index: 99;
	display: none;
}

.coveo-headline-wrapper::before
{
	display: none;
}

.coveo-custom-select
{
	width: 198px;
	height: 40px;
	color: var(--color-carbon);
	background-color: var(--color-snow);
	border: 1px solid var(--color-cloud);
}

.coveo-custom-select-options li:hover
{
	color: var(--color-carbon);
}

.coveo-custom-select-styled
{
	border-radius: 0;
	border: none !important;
	padding: 9px 32px 7px 16px;
}

.coveo-custom-select-styled:hover
{
	border: none !important;
}

.coveo-headline-wrapper .slds-p-vertical_small,
.coveo-headline-wrapper .slds-p-vertical--small
{
	padding-top: 15px;
	padding-bottom: 0;
}

.coveo-headline-wrapper .slds-grid_align-center,
.coveo-headline-wrapper .slds-grid--align-center
{
	justify-content: center;
	padding: 0 16px;
}

.coveo-headline-wrapper #standaloneSearchbox
{
	min-width: 530px;
}

.coveo-custom-select-styled::after,
.coveo-custom-select-styled.active::after,
.coveo-custom-select-styled:active::after
{
	content: "";
	position: absolute;
	top: 45%;
	right: 15px;
	transform: translate(0, -50%) rotate(45deg);
	width: 9px;
	height: 9px;
	border: 1px var(--color-carbon);
	border-style: none solid solid none;
}

.coveo-headline-wrapper #standaloneSearchbox .CoveoSearchButton
{
	background-color: var(--color-snow);
	height: 40px;
	padding: 8px 16px;
	width: auto;
	border: 1px solid var(--color-cream);
	border-radius: 0;
	cursor: pointer;
}

.coveo-headline-wrapper #standaloneSearchbox .magic-box
{
	border-style: solid none;
}

.coveo-headline-wrapper .CoveoSearchButton::before
{
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-carbon);
}

.coveo-headline-wrapper .magic-box .magic-box-input
{
	height: 38px;
	background-color: var(--color-snow);
}

.coveo-custom-select-options
{
	margin-top: 1px;
	left: -1px;
	border-radius: 0;
}

.coveo-headline-wrapper .magic-box .magic-box-input .magic-box-underlay,
.coveo-headline-wrapper .magic-box .magic-box-input > input
{
	height: 38px;
	text-indent: 16px;
	padding: 9px 16px 9px 0;
}

.coveo-headline-wrapper #standaloneSearchbox .magic-box .magic-box-input > input
{
	color: var(--color-carbon);
}

.coveo-headline-wrapper #standaloneSearchbox .magic-box .magic-box-input > input::placeholder
{
	color: var(--color-cream);
}

.coveo-headline-wrapper #standaloneSearchbox .magic-box.magic-box-notEmpty ~ .CoveoSearchButton
{
	background-color: var(--color-cloud);
}

.coveo-custom-select-options li
{
	font-size: 16px;
	line-height: 1.4;
	text-indent: 0;
	padding: 8px 16px;
	border: none;
}

.coveo-custom-select-options li:hover,
.coveo-custom-select-options li.active
{
	background-color: var(--color-cloud);
}

/*** Header components styles ***/

div.title-bar-container,
#title-bar-container
{
	display: none;
}

div.replace_top_nav
{
	position: fixed;
	background-color: var(--color-white);
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--color-gravel);
}

.logo_container
{
	width: 318px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	order: 2;
}

.logo_container .logo
{
	max-width: 190px;
	width: 190px;
	height: 26px;
}

/*** Navbar components styles ***/

.navbar,
#navbar
{
	display: flex;
	align-items: center;
	padding-right: 22px;
	padding-left: 22px;
	order: 3;
	flex-grow: 1;
	max-width: calc(100% - 318px);
}

.dropdown .dropbtn,
.dropdown a
{
	font-size: 16px;
	border: none;
	outline: none;
	padding: 24px 12px;
	margin: 0;
	height: 70px;
	display: inline-flex;
	align-items: center;
	color: var(--color-carbon);
	text-decoration: none;
}

.dropbtn i
{
	margin: 0 2px 8px 10px;
	width: 9px;
	height: 9px;
	border: 1px var(--color-carbon);
	border-style: none solid solid none;
	transform: rotate(45deg);
}

.navbar a:hover,
.dropdown:hover .dropbtn
{
	color: var(--color-carbon);
	background-color: transparent;
}

.dropdown:hover .dropdown-content
{
	display: block;
}

.dropdown-content
{
	display: none;
	position: absolute;
	background-color: var(--color-white);
	width: auto;
	border: 1px solid var(--color-gravel);
	z-index: 1;
	padding: 16px 0;
}

.dropdown-content a
{
	width: 100%;
	padding: 8px 24px;
	height: auto;
}

.dropdown-content a:hover
{
	background-color: var(--color-white);
}

/*** Override: Main section/container styles ***/

div.body-container
{
	padding: 0 !important;
	margin-top: 0;
}

div.height-container-no-footer,
div.height-container
{
	display: flex;
	flex-direction: column;
	padding-bottom: 1em;
}

div.okta-topics
{
	padding-right: 20%;
	flex: 1 0 auto;
}

div.body-main
{
	padding-left: 1.5em;
	padding-right: 1em;
	position: relative;
}

.main-section
{
	padding-top: 70px;
}

.main-section.show-search
{
	padding-top: 140px;
}

.main-section.show-search .coveo-headline-wrapper
{
	display: block;
}

.main-section > .outer-row
{
	padding: 0;
}

/* 'index.htm' drops breadcrumbs and labels; push heading down */

h1.landing_title
{
	margin-top: 32px;
}

/*** Footer styles ***/

.footer,
.footer2
{
	margin-top: 32px;
	padding-left: 1.5em;
	flex-shrink: 0;
}

.footer2.show-search
{
	padding-bottom: 70px;
}

/*** MCF scrollbar (EU only) ***/

.search-bar._Skins_okta_search_bar.mc-component
{
	margin-right: 0;
}

/*** Override: Breadcrumbs styles ***/

div.breadcrumbs
{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 16px 192px 20px 1.5em;
	font-size: 14px;
	line-height: 24px;
	color: var(--color-gravel);
	float: none;
	min-height: 64px;
}

div.breadcrumbs .MCBreadcrumbsLink
{
	font-size: 14px;
	line-height: 1.2;
	font-weight: 300;
	color: var(--color-carbon);
	border-bottom: 1px solid var(--color-sand);
	white-space: nowrap;
}

div.breadcrumbs .MCBreadcrumbsDivider
{
	position: relative;
	color: transparent;
	width: 12px;
	height: 16px;
	min-width: 12px;
	white-space: nowrap;
}

div.breadcrumbs a,
div.breadcrumbs span
{
	margin-right: 8px;
}

div.breadcrumbs .MCBreadcrumbsDivider::after
{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0, -50%) rotate(-45deg);
	width: 9px;
	height: 9px;
	border: 1px #41414B;
	border-style: none solid solid none;
}

div.breadcrumbs .MCBreadcrumbsSelf:last-child:not(:first-child)
{
	display: none;
}

div.breadcrumbs .MCBreadcrumbsDivider:nth-last-child(2)
{
	display: none;
}

/*** Override: Toolbar styles and icons ***/

div.toolbar-main
{
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	order: 4;
	padding-right: 3em;
}

div.toolbar-main .button-group-container-left
{
	float: none;
	margin: 0;
}

div.toolbar-main ._Skins_okta_toolbar_nav_poc.mc-component .button,
._Skins_okta_toolbar_no_expand.mc-component .button,
._Skins_okta_toolbar_no_expand.mc-component .button .button-icon-wrapper
{
	margin: -2px 0 0;
	height: 32px;
	width: 32px;
	z-index: 99;
}

/*** TODO: check ***/

.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage
{
	background: none;
}

.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage img,
.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage img
{
	display: none;
}

.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage
{
	background: none;
}

.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage::before,
.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage::before
{
	content: '';
	display: inline-block;
	border: 5px solid transparent;
	border-left: 9px solid #6E6E78;
	margin-right: 5px;
	transform-origin: 5px 6px;
	transition: transform .1s;
}

.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage::before
{
	border-left: 9px solid #1662DD;
	transform: rotate(90deg);
}

.external-link-icon
{
	margin: 0 8px 6px;
}

/*** Override: Tabs styles ***/

.tabs
{
	border: 1px solid #C1C1C8;
	border-style: none none solid;
	padding: 0;
	margin: 12px 0 32px;
	display: flex;
	flex-wrap: nowrap;
	overflow: auto;
}

/*** Hide tabs scrollbar ***/

.tabs::-webkit-scrollbar
{
	display: none;
}

ul.tabs li
{
	margin: 0;
}

.tabs-title a
{
	font-size: 16px;
	line-height: 1.4;
	color: var(--color-carbon);
	padding: 15px 24px;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
	text-decoration: none;
}

.tabs-title > a:hover
{
	background: var(--color-snow);
	color: var(--color-carbon);
}

.tabs-title > a[aria-selected="true"]
{
	background: var(--color-snow);
	color: var(--color-carbon);
	border-color: var(--color-sky);
}

.tabs-title > a:focus
{
	background: var(--color-snow);
	color: var(--color-carbon);
}

.tabs-content
{
	border: none;
}

/* override foundation setting--too much padding */

.tabs-panel
{
	padding: 0;
}

.tabs-panel.is-active
{
	display: block;
	outline: none;
}

/* new standard per SRB 9/2019 */

img.new,
#img_new
{
	max-width: 100%;
	border: 1px solid var(--color-snow);
	-moz-box-shadow: 3px 3px 7px var(--color-snow);
	-webkit-box-shadow: 3px 3px 7px var(--color-snow);
	box-shadow: 3px 3px 7px var(--color-snow);
}

p.earlyaccess
{
	margin: 10px 0;
	padding: 10px 10px 10px 20px;
	text-align: left;
	background-color: var(--color-snow);
	background-clip: border-box;
	border: solid 2px var(--color-snow);
	border-left: solid 8px var(--color-sand);
}

p.beta
{
	margin: 10px 0;
	padding: 10px 10px 10px 20px;
	text-align: left;
	background-color: var(--color-cream);
	background-clip: border-box;
	border: solid 2px var(--color-cream);
	border-left: solid 8px var(--color-cloud);
}

p.update
{
	margin: 10px 0;
	padding: 10px 10px 10px 20px;
	text-align: left;
	background-color: var(--color-snow);
	background-clip: border-box;
	border: solid 2px var(--color-snow);
	border-left: solid 8px var(--color-sand);
}

div.TopicContent
{
	padding: 25px 15px;
}

div.sideContent
{
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	width: 33.33%;
}

html.templateTopic div.sideContent
{
	display: none;
}

/* override language drop-down styling--may need more to override element style for drop-down div */

.toolbar-button-drop-down
{
	top: 72px !important;
	left: 85% !important;
	z-index: 1;
}

.toolbar-button-drop-down > ul
{
	list-style: none;
	margin-bottom: -8px !important;
	padding: 4px;
	width: 200px;
}

.toolbar-button-drop-down > ul > li
{
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* end overrides */

div.toolbar-main ._Skins_okta_toolbar_nav_poc.mc-component .button,
._Skins_okta_toolbar_no_expand.mc-component .button
{
	margin: 0;
}

._Skins_okta_toolbar_no_expand.mc-component .button.select-language-button .button-icon
{
	background-position: center !important;
	z-index: 10;
}

div.toolbar-main ._Skins_okta_toolbar_nav_poc.mc-component .button.expand-all-button
{
	background: url('../../images/okta-assets/nav-expand.svg') no-repeat center center;
	margin-right: 15px;
}

div.toolbar-main ._Skins_okta_toolbar_nav_poc.mc-component .button.collapse-all-button
{
	background: url('../../images/okta-assets/nav-collapse.svg') no-repeat center center;
	margin-right: 15px;
}

div.toolbar-main ._Skins_okta_toolbar_nav_poc.mc-component .button.previous-topic-button,
._Skins_okta_toolbar_no_expand.mc-component .button.previous-topic-button
{
	border: none;
	background: url('../../images/okta-assets/nav-prev.svg') no-repeat center center;
	margin-right: 16px;
}

div.toolbar-main ._Skins_okta_toolbar_nav_poc.mc-component .button.next-topic-button,
._Skins_okta_toolbar_no_expand.mc-component .button.next-topic-button
{
	border: none;
	background: url('../../images/okta-assets/nav-next.svg') no-repeat center center;
	margin: 0;
}

div.toolbar-bottom
{
	display: flex;
	justify-content: flex-end;
	padding: 0 48px;
}

div.toolbar-row
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.toolbar-row::before
{
	content: ' ';
	display: table;
}

div.toolbar-row::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.toolbar-row > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: transparent;
	padding: 1%;
}

div.toolbar-row > div:nth-child(1)
{
	margin-left: 0%;
	width: 20%;
	background-color: var(--color-sky);
}

div.toolbar-row > div:nth-child(2)
{
	margin-left: 0%;
	width: 62%;
}

div.toolbar-row > div:nth-child(3)
{
	margin-left: 0%;
	width: 18%;
}

/* deprecated: notes need to be replaced in topics manually with new note styles below */

div.noteWhite
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: var(--color-cream);
	background-position: 9px 0;
	background-repeat: no-repeat;
	border: solid 1px var(--color-cream);
	border-radius: 6px;
	line-height: 1.5em;
	overflow: hidden;
	padding: 15px 20px;
}

div.note
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: var(--color-cream);
	background-position: 9px 0;
	background-repeat: no-repeat;
	border: solid 1px var(--color-cream);
	border-radius: 6px;
	line-height: 1.5em;
	overflow: hidden;
	padding: 15px 20px;
}

div.note_new
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: var(--color-cream);
	background-position: 9px 0;
	background-repeat: no-repeat;
	border: solid 1px var(--color-cream);
	border-radius: 6px;
	line-height: 1.5em;
	overflow: hidden;
	padding: 15px 20px;
}

div.noteBlueflag
{
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	background-color: var(--color-cream);
	background-position: 9px 0;
	background-repeat: no-repeat;
	border: solid 1px var(--color-cream);
	border-radius: 6px;
	line-height: 1.5em;
	overflow: hidden;
	padding: 15px 20px;
}

/* New note/etc. styles per UX consult - SRB work 9/2919 */

div.noteOkta
{
	padding-bottom: 9px;
	margin-top: 10px;
	margin-bottom: 20px;
	background-color: var(--color-cream);
	padding-top: 2px;
	background-repeat: no-repeat;
	background-position: 15px 12px;
	background-image: url('../../images/assets/icons/notes/help.svg');
	border-radius: 16px;
}

div.note_cautionOkta
{
	padding-bottom: 9px;
	margin-top: 10px;
	margin-bottom: 20px;
	background-color: var(--color-cream);
	padding-top: 2px;
	background-image: url('../../images/assets/icons/notes/alert.svg');
	background-repeat: no-repeat;
	background-position: 15px 12px;
	border-radius: 16px;
}

div.note_tipOkta
{
	padding-bottom: 9px;
	margin-top: 10px;
	margin-bottom: 20px;
	background-color: var(--color-cream);
	padding-top: 2px;
	background-image: url('../../images/assets/icons/notes/icon-lightbulb.png');
	background-repeat: no-repeat;
	background-position: 12px 6px;
	border-radius: 16px;
}

div.noteOkta ul,
div.note_cautionOkta ul,
div.note_tipOkta ul
{
	margin-left: 25px;
	margin-top: 8px;
}

div.noteOkta ol,
div.note_cautionOkta ol div.note_tipOkta ol
{
	margin-left: 25px;
	margin-top: 8px;
}

p.noteHeading
{
	display: none;
}

p.noteContent
{
	margin: 0 20px;
	margin-top: 8px;
	margin-right: 12px;
	padding-left: 25px;
}

img.noteImgFloat
{
	display: none;
}

div.noteOkta > ul li:first-child,
div.note_cautionOkta > ul li:first-child
{
	margin-top: 6px;
}

.footer--top-line
{
	font-size: 13px;
	line-height: 18px;
	color: var(--color-carbon);
	font-weight: 400;
	margin-top: 20px;
}

.footer--bottom-line
{
	font-size: 16px;
	line-height: 31px;
	color: var(--color-carbon);
	font-weight: 600;
}

/* ========================================================================= */
/* === Madcap styles === */

MadCap|bodyProxy
{
	margin-bottom: 25px;
	clear: left;
}

MadCap|breadcrumbsProxy
{
	float: left;
	margin-bottom: 5px;
	padding-bottom: 5px;
	mc-breadcrumbs-divider: '  >  ';
	color: var(--color-gravel);
	font-size: 80%;
	border-bottom-color: transparent;
	line-height: 1.6rem;
	mc-breadcrumbs-prefix: '';
	padding-left: 6px;
}

MadCap|dropDown
{
	mc-closed-image: url('../../images/okta-assets/dropdownclosed.png');
	mc-open-image: url('../../images/okta-assets/dropdownopen.png');
	mc-image-spacing: 2%;
}

MadCap|dropDown.SecondLevel
{
	margin-left: 10px;
	mc-closed-image: url('../../images/okta-assets/dropdownclosedsecondlevel.png');
	mc-open-image: url('../../images/okta-assets/dropdownopensecondlevel.png');
}

MadCap|expanding
{
	mc-closed-image: url('../../images/okta-assets/dropdownclosed.png');
	mc-open-image: url('../../images/okta-assets/dropdownopen.png');
}

MadCap|popupBody
{
	background-color: var(--color-sky);
	padding: 10px;
	font-size: 95%;
	line-height: 1.3em;
	color: var(--color-snow);
}

MadCap|xref
{
	mc-format: '{para}';
	color: var(--color-sky);
	text-decoration: none;
}

MadCap|xref:hover
{
	color: var(--color-sky);
}

/* === Back-to-top floating button === */

.sf-back-to-top
{
	background-color: var(--color-sky);
	color: var(--color-snow);
	display: none;
	z-index: 999;
	position: fixed;
	right: 2em;
	bottom: 80px;
	width: 50px;
	height: 50px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.sf-back-to-top:hover
{
	box-shadow: 0 0 7px 3px rgb(0 0 0 / 8%), 0 3px 8px 3px rgb(0 0 0 / 8%);
}

a.sf-back-to-top
{
	letter-spacing: 2px;
	font-size: 12px;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.6;
	padding-left: 2px;
	padding-top: 4px;
	font-weight: bold;
	color: var(--color-snow);
	text-decoration: none;
}

a.sf-back-to-top .arrow::before
{
	font-size: 18px;
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	text-align: center;
	display: block;
	vertical-align: middle;
	cursor: pointer;
	margin-left: -5px;
	font-weight: bold;
	content: '^';
}

/* === Tiles section === */

.topics
{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -12px;
}

.topics > div
{
	margin: 0 12px;
	width: calc(100% / 3 - 25px);
}

div.tiles
{
	display: flex;
	flex-wrap: wrap;
	margin: 0 -12px;
}

div.tiles > a,
div.tiles > div
{
	display: block;
	padding: 25px;
	transition: all 0.4s cubic-bezier(.25,.8,.25,1);
	overflow: hidden;
	background: var(--color-cream);
	border-radius: 32px;
	min-height: 166px;
	margin: 12px;
	width: calc(100% / 3 - 30px);
	color: var(--color-cobalt);
}

div.tiles > a:hover,
div.tiles > div:hover
{
	color: var(--color-snow);
	background: var(--color-sky);
	box-shadow: 0 8px 24px rgb(65 65 75 / 3%);
	cursor: pointer;
}

div.tiles > a:hover a,
div.tiles > a:hover p,
div.tiles > a:hover h3,
div.tiles > div:hover a,
div.tiles > div:hover p,
div.tiles > div:hover h3,
.tile-title:hover,
.tile-subtitle:hover
{
	color: var(--color-snow);
}

/* Elements for text contained within each tile */

.tile-title
{
	font-size: 22px;
	line-height: 1.35;
	font-weight: 500;
	margin-top: 0;
	margin-bottom: 16px;
	color: var(--color-carbon);
}

.tile-title-smaller
{
	text-align: left;
	padding-left: 8px;
	color: var(--color-carbon);
	font-size: 1.2em;
}

.tile-subtitle
{
	min-height: 44px;
	color: var(--color-carbon);
	margin-bottom: 48px;
}

.tile-content
{
	color: var(--color-carbon);
	padding-left: 8px;
	font-size: 0.8em;
	text-align: left;
}

div.tiles .tile-title a
{
	color: var(--color-carbon);
	text-decoration: none;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.is-open-right .js-off-canvas-exit
{
	right: 0;
	height: 70px;
	background: none;
	box-shadow: none;
	border-bottom: 1px solid var(--color-snow);
}

.off-canvas-wrapper-inner.is-open-right
{
	right: 0;
}

.position-right.is-open
{
	left: 0;
	top: 70px;
	width: 100%;
	transition: width 0s, top .3s;
}

ul.off-canvas-list li a
{
	font-size: 16px;
	color: var(--color-carbon);
	padding: 24px 32px;
	line-height: 1.4;
	border-bottom: 1px solid var(--color-cream);
	background-color: var(--color-snow);
	width: 100%;
	position: relative;
}

ul.off-canvas-list li.js-drilldown-back > a
{
	padding-left: 46px;
}

ul.off-canvas-list li a:hover,
ul.off-canvas-list li.js-drilldown-back > a:hover,
ul.off-canvas-list ul > li > a:hover,
ul.off-canvas-list ul ul > li > a:hover
{
	background-color: var(--color-snow);
	color: var(--color-carbon);
}

.off-canvas
{
	transition: top .3s;
}

.off-canvas.position-right ul ul .tree-node.tree-node-leaf
{
	margin-left: 16px;
	border-left: 14px solid var(--color-cream);
}

.is-drilldown-submenu-parent > a::before,
.js-drilldown-back > a::before
{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 5em;
	height: 4em;
}

.is-drilldown-submenu-parent > a::after,
.js-drilldown-back > a::after
{
	content: '';
	position: absolute;
	top: 50%;
	right: 32px;
	width: 9px;
	height: 9px;
	border: 1px var(--color-sand);
	transform: translate(0, -50%) rotate(-45deg);
	border-style: none solid solid none;
	transition: transform .2s;
}

.js-drilldown-back > a::after
{
	transform: translate(0, -50%) rotate(135deg);
	right: auto;
	left: 16px;
}

.title-bar .menu-icon span
{
	width: 32px;
	height: 32px;
}

button.search-btn
{
	margin-left: auto;
	width: 32px;
	min-width: 32px;
	height: 32px;
	background-image: url('../../images/okta-assets/search-icon.svg');
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
}

button.search-btn-mobile
{
	margin-left: 0;
	position: absolute;
	top: 50%;
	left: auto;
	right: 96px;
	transform: translateY(-50%);
}

dt
{
	padding-top: 0.75em;
}

dd
{
	padding-bottom: 0.5em;
	margin-left: 0;
}

/*
	Release notes-related selectors
*/

/* Legacy selectors */

h1.relnotes-month
{
	font-size: 26px;
	line-height: 1.25;
	margin-top: 24px;
	margin-bottom: 23px;
}

h2.relnotes
{
	font-size: 24px;
}

h3.relnotes-reg
{
	font-size: 20px;
	line-height: 1.3;
	margin-top: 16px;
	margin-bottom: 16px;
}

h3.relnotes
{
	font-size: 20px;
	line-height: 1.3;
}

h4.relnotes
{
	font-size: 20px;
	line-height: 1.35;
	margin-bottom: 32px;
}

/* Legacy selectors for backwards compatibility (fixes section) */

ul.relnotes_fixes
{
	padding-left: 0;
}

ul.relnotes_fixes li
{
	display: grid;
	grid-template-columns: 140px 1fr;
}

ul.relnotes_fixes li p:nth-of-type(n+2)
{
	grid-column-start: 2;
}

/* New selectors for relnotes content model refactoring */

.relnotes_prod h2
{
	font-size: 26px;
}

.relnotes_prod h3
{
	font-size: 22px;
}

.relnotes_prod h4
{
	font-size: 18px;
}

div.relnotes_entry
{
	padding-left: 1em;
}

div.relnotes_entry > h4
{
	margin-bottom: 10px !important;
}

.relnotes_bugs > ul,
.relnotes_apps > ul
{
	padding-inline-start: 20px;
}

div.release_version
{
	float: right;
}

ul.tables_menu
{
	columns: 2;
}

/* ===========================================================================
Styles after this point are styles that are for specific mediums. If any 
additional styles are added to this template they will be listed after mediums.
[@media tablet] declares styles that will apply when the screen is in tablet view
[@media mobile] declares styles that will apply when the screen is in mobile view
============================================================================ */

@media only screen and (min-width: 1200px)
{
	ul.tables_menu
	{
		width: 70%;
	}
}

@media only screen and (max-width: 1200px)
{
	.coveo-headline-wrapper #standaloneSearchbox
	{
		width: calc(100% - 250px);
		min-width: auto;
	}

	div.tiles > a,
	div.tiles > div
	{
		width: calc(100% / 2 - 24px);
	}

	.navbar
	{
		width: calc(80% - 290px);
		margin-left: -40px;
	}
}

@media only screen and (max-width: 1126px)
{
	div.toolbar-button-drop-down
	{
		left: 81% !important;
	}
}

@media only screen and (max-width: 1024px)
{
	div.okta-topics
	{
		padding-right: 5%;
	}

	.main-section,
	.main-section.hide-search
	{
		padding-top: 0;
	}

	div.title-bar-container
	{
		width: 100%;
		display: inline-flex;
		z-index: 70;
	}

	nav.title-bar
	{
		padding-top: 15px;
		padding-bottom: 14px;
		border-bottom: 1px solid #D7D7DC;
		z-index: 1;
	}

	.title-bar .menu-icon span
	{
		background-image: url('../../images/okta-assets/hamburger-icon.svg');
	}

	.title-bar .menu-icon[aria-expanded="true"] span
	{
		background-image: url('../../images/okta-assets/cross-icon.svg');
	}

	.title-bar-layout a.logo
	{
		width: 190px;
		height: 26px;
		background: transparent url('../../images/okta-assets/logo.png') no-repeat center center;
		background-size: contain;
	}

	/*** Hide desktop navbar ***/

	div.navbar
	{
		display: none;
	}

	.rev-only_banner
	{
		top: 12px;
		right: 10%;
	}

	/*** Hide desktop logo container ***/

	.logo_container
	{
		display: none;
	}

	/*** Update search-box position ***/

	.coveo-headline-wrapper
	{
		position: relative;
		margin-top: 0;
	}

	.main-section.show-search
	{
		padding-top: 0;
	}

	/*** Body-main padding update ***/

	div.body-main
	{
		padding: 0 32px 16px;
	}

	/*** Breadcrumbs padding update ***/

	div.breadcrumbs
	{
		padding: 16px 160px 20px 32px;
	}

	.oie-label
	{
		right: 3%;
	}

	/*** Toolbar position update ***/

	div.toolbar-main
	{
		position: absolute;
		right: 4em;
		width: 36px;
		z-index: 80;
		padding-right: 0;
	}

	div.toolbar-bottom
	{
		padding: 0 32px;
	}

	div.toolbar-button-drop-down
	{
		left: -310% !important;
	}

	/*** Override: Mobile menu-icon styles ***/

	nav.title-bar .menu-icon
	{
		right: 0;
	}

	ul.menu li > a.selected
	{
		font-weight: 300;
		background-color: transparent !important;
	}
}

@media only screen and (max-width: 767px)
{
	h1
	{
		font-size: 28px;
		line-height: 1.25;
	}

	/*** Body-main padding update ***/

	div.body-main
	{
		padding: 0 16px 16px;
	}

	/*** Tiles(cards) width update ***/

	div.tiles > a,
	div.tiles > div
	{
		width: 100%;
	}

	/*** Featured topics width update ***/

	.topics > div
	{
		width: 100%;
	}

	/*** Featured topics width update ***/

	.coveo-headline-wrapper #standaloneSearchbox
	{
		width: 100%;
	}

	.coveo-custom-select
	{
		width: 120px;
	}

	/*** Mobile header padding update ***/

	nav.title-bar
	{
		padding-top: 12px;
		padding-bottom: 11px;
	}

	/*** Mobile logo size update ***/

	.title-bar-layout a.logo
	{
		width: 147px;
		height: 20px;
	}

	/*** Mobile navbar position update ***/

	.position-right.is-open
	{
		top: 64px;
	}

	.is-open-right .js-off-canvas-exit
	{
		height: 64px;
	}

	ul.off-canvas-list
	{
		margin-bottom: 4em;
	}

	button.search-btn-mobile
	{
		right: 100px;
		top: 55%;
	}

	div.toolbar-main
	{
		top: -1px;
		right: 3.5em;
	}

	/*** Breadcrumbs padding update ***/

	div.breadcrumbs
	{
		padding: 16px 144px 20px 16px;
	}

	/*** Breadcrumbs visibility update(show only last link) ***/

	div.breadcrumbs .MCBreadcrumbsLink
	{
		max-width: calc(100% - 34px);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	div.breadcrumbs .MCBreadcrumbsLink:not(:nth-last-child(3))
	{
		display: none;
	}

	div.breadcrumbs .MCBreadcrumbsSelf:not(:nth-last-child(3))
	{
		display: none;
	}

	div.breadcrumbs .MCBreadcrumbsDivider:not(:nth-last-child(4))
	{
		display: none;
	}
}

@media only screen and (max-width: 480px)
{
	ul.off-canvas-list
	{
		margin-bottom: 4em;
	}

	a.sf-back-to-top
	{
		line-height: 1.2;
		height: 45px;
		width: 45px;
	}

	/* To control box sizing for mobile output */

	img.MCDropDown_Image_Icon
	{
		box-sizing: border-box;
		max-height: 1.5ex;
		max-width: 2ex;
	}

	MadCap|glossaryTerm
	{
		background: #992f00;
	}

	MadCap|topicToolbarProxy
	{
		clear: both;
	}
}

MadCap|glossaryTerm
{
	mc-closed-image: none;
	mc-open-image: none;
	mc-image-position: none;
}

MadCap|toggler
{
	mc-closed-image: url('../../images/okta-assets/dropdownclosed.png');
	mc-open-image: url('../../images/okta-assets/dropdownopen.png');
}

/* ==== For Release Notes Only ========================================== */

MadCap|dropDownHead.relnotes
{
	font-size: 1.25rem;
	padding-bottom: 1rem;
	padding-top: 1rem;
}

/* ===== For Release Notes MiniTOC ================================ */

div.page-toc
{
	border-left: solid 8px #D7D7DC;
	padding-left: 24px;
	margin-bottom: 48px;
	margin-top: 48px;
}

p.box-heading
{
	font-size: 20px;
	line-height: 1.3;
	font-weight: 400;
	margin: 0 0 24px;
	color: var(--color-slate);
}

ul.minitoc
{
	margin: 0;
	padding-left: 24px;
	background-color: transparent;
	list-style-type: none;
}

ul.minitoc a
{
	color: var(--color-sky);
	text-decoration: none;
	font-weight: 600;
}

/* ====================== For Terminal Display ====================== */

.terminal
{
	margin-bottom: 1em;
	max-width: 150em;
}

.terminal .terminal-toolbar
{
	background: linear-gradient(to bottom, #e5e5e5 0%, #cfcfcf 100%);
	border-radius: 5px 5px 0 0;
	box-shadow: 0 1px 0 rgb(0 0 0 / 5%);
	height: 21px;
	padding-left: 4px;
	width: 100%;
}

.terminal .terminal-toolbar .terminal-circle
{
	float: left;
	width: 14px;
	height: 14px;
	border-width: 0.5px;
	border-style: solid;
	border-radius: 14px;
	margin: 4px;
}

.terminal .terminal-toolbar .terminal-circle.red
{
	background-color: #fc605c;
	border-color: #df423f;
}

.terminal .terminal-toolbar .terminal-circle.yellow
{
	background-color: #fdbc40;
	border-color: #de9f34;
}

.terminal .terminal-toolbar .terminal-circle.green
{
	background-color: #34c749;
	border-color: #20a92f;
}

.terminal .terminal-content
{
	background-color: black;
	color: #f7f7f9;
	font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
	font-size: 14px;
	line-height: 1.25;
	padding: 8px;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.terminal.terminal-home
{
	margin-bottom: 0;
}

.terminal.terminal-home .terminal-content
{
	font-size: 16px;
	min-height: 8em;
}

/* =============================================================================== */

.ea-item
{
	background: #fafafa;
	border-left: solid 2px #f1d10d;
	padding-left: 1rem;
}

/* =============================================================================================== */
/* ======================== Top Nav menu customizations  DO NOT TOUCH ============================ */
/* =============================================================================================== */

ul.navigation > li > a
{
	border: 1px solid transparent;
}

ul.navigation > li > a:hover,
ul.navigation > li > a:focus
{
	border-bottom: 1px solid #000 !important;
	padding-bottom: 15px !important;
	color: var(--color-turquoise);
}

ul.navigation > li > a::after
{
	content: url('../../images/okta-assets/caret-down.png');
	padding-left: 12px;
}

ul.navigation > li[data-mc-id="1"] > a::after
{
	content: none;
}

ul.navigation > li[data-mc-id="4"] > a::after,
ul.sub-menu > li[data-mc-id="7"] > a::after
{
	content: url('../../images/okta-assets/external-link-icon.svg');
	padding-left: 6px;
	position: relative;
	top: 4px;
}

ul.navigation li:hover > ul
{
	margin-top: 12px;
}

ul.navigation > li.has-children::after
{
	margin-bottom: -12px;
	z-index: 1000;
}

ul.sub-menu > li.has-children > a::after,
ul.sub-menu > li.tree-node-leaf > a::after
{
	content: none;
}

ul.navigation ul
{
	box-shadow: 0 0 20px rgb(0 0 0 / 15%) !important;
}

ul._Skins_okta_left_menu > li.has-children[data-mc-id="1"]
{
	padding-top: 1.5rem;
}

div.nav-search-wrapper
{
	display: none;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

hr.hr-grey
{
	border: solid 1px var(--color-cloud);
}

span.disableGlossary
{
	mc-disable-glossary-terms: true;
}

MadCap|toggler.grayArrow
{
	mc-closed-image: url('../../images/assets/icons/arrows/arrow-right-gray.png');
	mc-open-image: url('../../images/assets/icons/arrows/arrow-down-gray.png');
	color: var(--color-carbon);
}

img.thumbnail,
#thumbnail
{
	mc-thumbnail: popup;
	mc-thumbnail-max-width: 220px;
	mc-thumbnail-max-height: 220px;
	border: 1px solid var(--color-snow);
	-moz-box-shadow: 3px 3px 7px var(--color-snow);
	-webkit-box-shadow: 3px 3px 7px var(--color-snow);
	box-shadow: 3px 3px 7px var(--color-snow);
}

ul.navigation li.TOCSeparator
{
	margin-top: -14px;
	margin-bottom: -4px;
}

span.wintitle
{
	font-weight: bold;
}

span.uicontrol
{
	font-weight: bold;
}

span.menucascade
{
	
}

span.menucascade > span.uicontrol:not(:last-child)::after
{
	content: ' > ';
}

span.userinput
{
	font-family: monospace;
}

span.term
{
	font-style: italic;
}

span.msgblock
{
	font-family: monospace;
}

span.varname
{
	font-family: monospace;
}

span.varname::before
{
	content: '<';
}

span.varname::after
{
	content: '>';
}

span.filepath
{
	font-family: monospace;
}

span.url
{
	font-family: monospace;
}

dl.ref-arch-dl dt
{
	/* TO DO */
}

dl.ref-arch-dl dd
{
	/* TO DO */
}

html.hybrid
{
	
}

p.deprecation
{
	text-align: left;
	background-clip: border-box;
	margin: 10px 0;
	padding: 10px;
	background-color: var(--color-snow);
	border-color: var(--color-cream) var(--color-sky);
	border-width: 2px 2px 2px 8px;
	border-style: solid;
}

.err_title
{
	text-align: center;
	font-weight: 600;
	font-style: normal;
	line-height: normal;
	font-size: 36px;
	color: #5c6971;
	margin-top: 98px;
}

.err_msg
{
	text-align: center;
	font-weight: normal;
	font-style: normal;
	line-height: 1.4em;
	font-size: 24px;
	color: #2f3f4a;
}

