/*<meta />*/

@import url('search-dropdown.css') ;
@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);

/*===========================================================================================================================================================

Hello! If this is your first time looking at a stylesheet within the text editor view, what you are reading right now is a "comment". Comments are added throughout this stylesheet with the purpose of making the source code easier to understand, comments will not be interpreted during the compile process. Since comments are not interpreted during the compile process, feel free to add or remove any comments.

For help with MadCap Flare go to Help Ribbon > Topics Section > Open Help. Alternatively visit the Flare Online Help at help.madcapsoftware.com

If you have any questions regarding how to work with this stylesheet or template project, please contact MadCap Technical Support. 
https://www.madcapsoftware.com/support/contact-options.aspx

===========================================================================================================================================================*/

/*== Home Page General Styles ==*/
/* SILKA FONT SETTINGS */

@font-face 
{
	font-family: 'Silka-Bold';
	src: url(../Fonts/Silka-Bold.woff2);
	font-display: swap;
}

@font-face 
{
	font-family: 'Silka-SemiBold';
	src: url(../Fonts/Silka-SemiBold.woff2);
	font-display: swap;
}

@font-face 
{
	font-family: 'Silka-Regular';
	src: url(../Fonts/Silka-Regular.woff2);
	font-display: swap;
}

/* INTER FONT SETTINGS */

@font-face 
{
	font-family: 'Inter-Var';
	src: url(../Fonts/Inter-Var.woff2);
	font-weight: 100 900;
	font-display: swap;
}

@font-face 
{
	font-family: 'Poppins-Regular';
	src: url(../Fonts/Poppins-Regular.ttf);
}

@font-face 
{
	font-family: 'Poppins-Bold';
	src: url(../Fonts/Poppins-Bold.ttf);
}

@font-face 
{
	font-family: 'Poppins-Light';
	src: url(../Fonts/Poppins-Light.ttf);
}

/* BASIS FONT SETTINGS*/

@font-face 
{
	font-family: 'Basis-Grotesque-Regular';
	src: url(../Fonts/BasisGrotesquePro-Regular.woff2);
	font-weight: 100 900;
	font-display: swap;
}

@font-face 
{
	font-family: 'Basis-Grotesque-Bold';
	src: url(../Fonts/BasisGrotesquePro-Bold.woff2);
	font-weight: 100 900;
	font-display: swap;
}

/*******************************************************
 *     ██████  ██████  ██       ██████  ██████  ███████ 
 *    ██      ██    ██ ██      ██    ██ ██   ██ ██      
 *    ██      ██    ██ ██      ██    ██ ██████  ███████ 
 *    ██      ██    ██ ██      ██    ██ ██   ██      ██ 
 *     ██████  ██████  ███████  ██████  ██   ██ ███████                                                    
 * COLORS */
/* The colors below are temporarily added to the :root until the Light/Dark theme switcher is ready */
:root
{
/* These are article-only colors */
	--body-background: #ffffff;
	--body-text: #121826;
	--h1-header: #183663;
	--h2-header: #324F7B;
	--h3-header: #506D95;
	--h456-header: #8a8a8a;
	--link: #092750;
	--img-filter: none;
/* The colors below are found in the Unqork Platform */
	--aqua-50: #E4F8F9;
	--aqua-100: #53BEC6;
	--aqua-200: #53BEC6;
	--aqua-300: #31A0AA;
	--aqua-400: #1A818A;
	--aqua-500: #03636A;
	--Brand: #076685;
	--Black: #000000;
	--Dark-Gray: #7C878E;
	--Dark-GrayCharcoal: #253746;
	--Medium-Gray: #b9bec1;
	--Light-Gray: #d0d3d5;
	--black: #000000;
	--blue-old: #218efe;
	--blue-100: #D6EDFD;
	--blue-200: #B4DBF9;
	--blue-300: #2B72CA;
	--blue-400: #17438D;
	--blue-500: #002b70;
	--blue-black: #001C4A;
	--choiceChipBorder-old: #EDEEF0;
	--color-primary: #0060df;
	--color-secondary: #FFFFFF;
	--darkBlue-500: #003380;
	--font-color: #121826;
	--green-50: #F4FBF7;
	--green-100: #D5F6E7;
	--green-200: #88DDB1;
	--green-300: #08874C;
	--green-400: #046739;
	--green-500: #0F4226;
	--grey-header: #7C878E;
	--grey-old: #8e8e93;
	--grey-50: #F5F8FA;
	--grey-100: #E6ECF1;
	--grey-200: #D2DCE4;
	--grey-300: #8793A1;
	--grey-400: #ACBBC8;
	--grey-500: #404d5b;
	--grey-600: #242E3B;
	--grey-700: #121826;
	--magenta-500: #5b0159;
    --magenta-400: #7a1566;
    --magenta-300: #c54084;
    --magenta-200: #f6b8cb;
    --magenta-100: #ffe5e8;
    --magenta-50: #fff8f8;
	--navy-50: #F1F4FA;
	--navy-100: #506D95;
	--navy-200: #324F7B;
	--navy-300: #183663;
	--navy-400: #092750;
	--navy-500: #031A3A;
	--orange-50: #FEF7F0;
	--orange-100: #FDE5C3;
	--orange-200: #FFCE85;
	--orange-300: #FFB340;
	--orange-400: #C25700;
	--orange-500: #802F00;
	--orange-black: #421800;
	--pink: #FD2F94;
	--purple-50: #FAF9FB;
	--purple-200: #E2C2F5;
	--purple-300: #8247BD;
	--purple-400: #52248F;
	--purple-500: #3A0467;
	--purple-black: #280247;
	--red-50: #FEF6F7;
	--red-100: #ffe0e0;
	--red-300: #E02D45;
	--red-400: #BD0A2E;
	--red-500: #830119;
	--red-black: #47000D;
	--red-caseManagement: #BE0B2F;
	--search-field: #ffffff;
	--side-nav: #f4f8fa;
	--side-nav-font: #092750;
	--side-nav-selected: #e6ecf1;
	--teal-50: #EFF7FA;
	--teal-100: #C3D8E0;
	--teal-200: #73A5B6;
	--teal-300: #33768E;
	--teal-400: #245F75;
	--teal-500: #1B4F64;
	--teal-black: #102F3B;
	--tip-100: #c7faef;
	--top-nav: #ffffff;
	--violet-100: #E9E3FE;
	--violet-300: #6149df;
	--violet-400: #402CA5;
	--white: #FFFFFF;
	--workflow-next: #3079c4;
	--yellow-viewingBtn: #FCF2D3;
	--color-h1: #092750;
	--color-h2: #7C878E;
	--color-tab: #33768E;
	--color-tab-hover: #C3D8E0;
	--filter_grey-600: brightness(0) saturate(100%) invert(10%) sepia(33%) saturate(714%) hue-rotate(173deg) brightness(95%) contrast(88%);
	--filter_teal-100: brightness(0) saturate(100%) invert(92%) sepia(13%) saturate(271%) hue-rotate(153deg) brightness(92%) contrast(90%);
	--filter_teal-300: brightness(0) saturate(100%) invert(35%) sepia(92%) saturate(274%) hue-rotate(150deg) brightness(99%) contrast(96%);
	--filter_teal-400: brightness(0) saturate(100%) invert(31%) sepia(45%) saturate(704%) hue-rotate(150deg) brightness(87%) contrast(85%);
	--filter_white: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
	--filter_aqua-400: brightness(0) saturate(100%) invert(36%) sepia(94%) saturate(395%) hue-rotate(136deg) brightness(95%) contrast(87%);
	--filter_magenta-400: brightness(0) saturate(100%) invert(12%) sepia(41%) saturate(6855%) hue-rotate(299deg) brightness(86%) contrast(93%);
}

/* CORE CONTENT ====================================== CORE CONTENT COLORS ====================================== CORE CONTENT */

.theme-light
{
	mc-hidden: hidden;
	--aqua-300: #31A0AA;
	--aqua-400: #1A818A;
	--aqua-500: #03636A;
	--black: #000000;
	--blue-100: #D6EDFD;
	--blue-300: #2B72CA;
	--blue-500: #002b70;
	--blue-old: #218efe;
	--choiceChipBorder-old: #EDEEF0;
	--color-primary: #0060df;
	--color-accent: #fd6f53;
	--darkBlue-500: #003380;
	--font-color: #121826;
	--green-400: #046739;
	--grey-header: #7C878E;
	--grey-old: #8e8e93;
	--grey-50: #F5F8FA;
	--grey-100: #E6ECF1;
	--grey-200: #D2DCE4;
	--grey-300: #8793A1;
	--grey-400: #ACBBC8;
	--grey-500: #404d5b;
	--grey-600: #242E3B;
	--orange-400: #C25700;
	--pink: #FD2F94;
	--purple-200: #E2C2F5;
	--purple-300: #8247BD;
	--purple-400: #52248F;
	--red-100: #ffe0e0;
	--red-300: #E02D45;
	--search-field: #ffffff;
	--side-nav: #f4f8fa;
	--side-nav-font: #092750;
	--side-nav-selected: #e6ecf1;
	--teal-50: #EFF7FA;
	--teal-100: #C3D8E0;
	--teal-200: #73A5B6;
	--teal-300: #33768E;
	--teal-400: #245F75;
	--teal-500: #1B4F64;
	--tip-100: #c7faef;
	--top-nav: #ffffff;
	--navy-50: #F1F4FA;
	--navy-200: #324F7B;
	--navy-400: #092750;
	--violet-100: #E9E3FE;
	--violet-300: #6149df;
	--violet-400: #402CA5;
	--white: #FFFFFF;
	--workflow-next: #3079c4;
	--yellow-viewingBtn: #FCF2D3;
	--color-secondary: #ffffff;
	--color-h1: #092750;
	--color-h2: #7C878E;
	--color-tab: #33768E;
	--color-tab-hover: #C3D8E0;
}

.theme-dark
{
	mc-hidden: hidden;
	--black: #000000;
	--blue-100: #D6EDFD;
	--blue-300: #2B72CA;
	--blue-500: #2B72CA;
	--blue-old: #218efe;
	--choiceChipBorder-old: #D2DCE4;
	--color-primary: #242E3B;
	--color-secondary: #404D5B;
	--color-accent: #12cdea;
	--darkBlue-500: #003380;
	--font-color: #E6ECF1;
	--green-400: #046739;
	--grey-header: #D2DCE4;
	--grey-old: #8e8e93;
	--grey-50: #F5F8FA;
	--grey-100: #E6ECF1;
	--grey-200: #D2DCE4;
	--grey-300: #8793A1;
	--grey-500: #404d5b;
	--grey-400: #647587;
	--grey-600: #fbfbfe;
	--grey-400-ud: #5d6a79; 
	--navy-50: #F1F4FA;
	--navy-200: #324F7B;
	--navy-400: #C3D8E0;
	--purple-200: #E2C2F5;
	--purple-300: #8247BD;
	--purple-400: #52248F;
	--orange-400: #C25700;
	--red-100: #db8282;
	--red-300: #E02D45;
	--search-field: #E6ECF1;
	--side-nav: #5D6A79;
	--side-nav-font: #E6ECF1;
	--side-nav-selected: #8793A1;
	--teal-50: #EFF7FA;
	--teal-100: #33768E;
	--teal-200: #73A5B6;
	--teal-300: #33768E;
	--tip-100: #31A0AA;
	--top-nav: #8793A1;
	--violet-100: #E9E3FE;
	--violet-300: #6149df;
	--violet-400: #402CA5;
	--white: #FFFFFF;
	--workflow-next: #3079c4;
	--yellow-viewingBtn: #FCF2D3;
	--color-h1: #C3D8E0;
	--color-h2: #D2DCE4;
	--color-tab: #C3D8E0;
	--color-tab-hover: #EFF7FA;
}

.theme-udesigner
{
	mc-hidden: hidden;
	--black: #000000;
	--blue-100: #D6EDFD;
	--blue-300: #2B72CA;
	--blue-500: #002b70;
	--blue-old: #218efe;
	--choiceChipBorder-old: #EDEEF0;
	--color-primary: #242E3B;
	--color-secondary: #FFF9F8;
	--color-accent: #fd6f53;
	--darkBlue-500: #003380;
	--font-color: #121826;
	--green-400: #046739;
	--grey-header: #7C878E;
	--grey-old: #8e8e93;
	--grey-50: #F5F8FA;
	--grey-100: #E6ECF1;
	--grey-200: #D2DCE4;
	--grey-300: #8793A1;
	--grey-400: #ACBBC8;
	--grey-500: #404d5b;
	--grey-600: #242E3B;
	--orange-400: #C25700;
	--purple-200: #E2C2F5;
	--purple-300: #8247BD;
	--purple-400: #52248F;
	--red-100: #ffe0e0;
	--red-300: #E02D45;
	--search-field: #ffffff;
	--side-nav: #f4f8fa;
	--side-nav-font: #092750;
	--side-nav-selected: #e6ecf1;
	--teal-50: #EFF7FA;
	--teal-100: #C3D8E0;
	--teal-200: #73A5B6;
	--teal-300: #33768E;
	--tip-100: #c7faef;
	--top-nav: #ffffff;
	--navy-50: #F1F4FA;
	--navy-400: #092750;
	--violet-100: #E9E3FE;
	--violet-300: #6149df;
	--violet-400: #402CA5;
	--white: #FFFFFF;
	--workflow-next: #3079c4;
	--yellow-viewingBtn: #FCF2D3;
	--color-h1: #402CA5;
	--color-h2: #6149df;
	--color-tab: #402CA5;
	--color-tab-hover: #E9E3FE;
}

.js-off-canvas-exit
{
	background: none;
	box-shadow: none;
}

body
{
	font-family: 'Poppins-Regular';
	line-height: 1.5em;
	background-color: var(--grey-50);
	
}

p
{
	margin-bottom: 8px;
	margin-top: 8px;
}

/* Side-Nav Padding & Margins */
ul.sidenav
{
	font-family: Basis-Grotesque-Regular !important;
}

ul.sidenav a.selected
{
	font-family: Basis-Grotesque-Bold !important;
}

ul.sidenav li > a.selected
{
	margin-left: -1em;
}

ul.sidenav ul > li > a.selected
{
	padding-left: 2em;
	margin-left: -1em;
}

ul.sidenav ul ul > li > a.selected
{
	padding-left: 3em;
	margin-left: -1em;
}

ul.sidenav ul ul ul > li > a.selected
{
	padding-left: 4em;
	margin-left: -1em;
}

ul.sidenav ul ul ul ul > li > a.selected
{
	padding-left: 5em;
	margin-left: -1em;
}

ul.sidenav ul ul ul ul > li > a.selected
{
	padding-left: 6em;
	margin-left: -1em;
}

ul.sidenav ul ul ul ul ul > li > a.selected
{
	padding-left: 7em;
	margin-left: -1em;
}

/* Marketing Blurb */

span.MarketingCenter
{
	font-size: 11pt;
	background-color: #EDF6FC;
	color: #002B70;
	text-align: center;
	padding: 15px 15px;
	border: double 2px #17438D;
	border-radius: 6px;
	background-repeat: no-repeat;
	line-height: 18px;
	overflow: visible;
}

p.Marketing
{
	color: #002B70;
	padding: 15px 60px;
	border: double 2px #17438D;
	border-radius: 6px;
	background-repeat: no-repeat;
	line-height: 18px;
	background-color: #EDF6FC;
	background-image: url('../Images/Inline/marketing_horn.png');
	background-size: 3em;
	background-position: 0.75% 50%;
	padding-left: 70px;
	mc-auto-number-class: BoldTextDarkBlue;
	mc-auto-number-format: '  CODELESS CLASSROOM  ';
}

span.BoldTextDarkBlue
{
	font-size: 12pt;
	font-weight: 900;
	color: #002b70;
	margin-top: 20px;
	margin-bottom: 20px;
	letter-spacing: 1;
	line-height: 20pt;
	widows: 3;
	orphans: 3;
	font-family: Inter-Var;
}

p.Center-Image
{
	text-align: center;
}

a
{
	color: #092750;
}

a:link
{
	color: #092750;
	mc-popup-width: auto;
}

a:visited
{
	color: #092750;
	mc-popup-width: auto;
}

.Home-Buttons a:visited
{
	text-decoration: none;
	color: #FFFFFF;
}

div.home-tiles a:hover	/*Complex Selector: When hovering over links within the home tiles the following properties will apply.*/
{
	color: #402ca5;
}

/* Alternate HTML Links */

a.NoUnderScore
{
	color: #092750;
	text-decoration: none;
	margin-right: .5rem;
}

a.NoUnderScore:hover
{
	color: #092750;
	text-decoration: underline;
}

a.NoUnderScorePurple
{
	color: #3A0467;
	text-decoration: none;
}

a.NoUnderScorePurple:hover
{
	color: #3A0467;
	text-decoration: underline;
}

/*== Home header bar styles ==*/

.inner-wrap .tab-bar .nav-search	/*Prevents the search in the header from appearing on the home page*/
{
	display: block;
}

.inner-wrap .main-section > .outer-row
{
	max-width: 100%;
	padding: 0;
}

/* div.main-section <-Removed due to conflict.
{
	overflow-y: overlay !important;
}
*/

/*== home page masterpage styles ==*/

div.home-container	/*wraps the content on the home page*/
{
	width: 100%;
}

/* Deprecated 
div.sidenav-wrapper
{
	display: none !important;
}

nav.sidenav-wrapper
{
	display: none !important;
}

.sidenav-wrapper
{
	display: none !important;
}

div.sidenav-container
{
	display: none !important;
}

nav.title-bar .menu-icon
{
	display: none !important;
}
*/

.body-container
{
	justify-content: center;
	/*Overrides padding set in the skin*/
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url('../Images/qorkflowflip-transparent50.png');
	align-items: center;
	padding-top: 15px;
	padding-left: 15px;
	padding-right: 15px;
}

.height-container-sidenav
{
	padding-bottom: 0px;
	padding-left: 6vw;
	padding-right: 6vw;
}

/*== Home Page Topic Hero section ==*/

div.topic-hero
{
	width: fit-content;
	margin-left: 2vw;
}

h1
{
    font-weight: bold;
    font-size: 2.5em;
    font-family: Basis-Grotesque-Bold;
	letter-spacing: 1.5px;
    color: var(--navy-300);
    line-height: normal;
    padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

h1 > p:first-of-type
{
	padding-bottom: 1em;
}

h1.hyperlink
{
	font-weight: bold;
	font-size: 24.0pt;
	font-family: Basis-Grotesque-Bold;
	color: var(--h1-header);
	line-height: normal;
}

h1.hyperlink:hover
{
	position: relative;
	cursor: pointer;
}

h1.hyperlink:hover:after
{
	content: url('../Images/Inline/link_teal.png');
	display: inline;
	padding-left: 3px;
	position: absolute;
	text-align: center;
	cursor: pointer;
}

h1.hyperlink:active
{
	font-weight: bold;
	font-size: 24.0pt;
	color: var(--purple-400);
	line-height: normal;
	text-align: left;
}

h1.hyperlink:active:after
{
	content: url('../Images/Inline/link_purple.png');
	display: inline;
	transform: translateY(1px);
	transform: scale(0.98);
	padding-left: 3px;
	text-align: center;
	position: absolute;
}

h2
{
	margin-bottom: 0px;
	padding-bottom: 0px;
	font-size: 1.7em;
	color: var(--h2-header);
}

h2.hyperlink
{
	font-size: 20.0pt;
	color: var(--h2-header);
}

h2.hyperlink:hover
{
	position: relative;
	cursor: pointer;
}

h2.hyperlink:hover:after
{
	content: url('../Images/Inline/link_teal.png');
	display: inline;
	padding-left: 2px;
	position: absolute;
	cursor: pointer;
}

h2.hyperlink:active
{
	color: var(--purple-400);
	text-align: left;
}

h2.hyperlink:active:after
{
	content: url('../Images/Inline/link_purple.png');
	display: inline;
	transform: translateY(1px);
	transform: scale(0.98);
	padding-left: 2px;
	position: absolute;
}

h3
{
	font-size: 1.3em;
	color: var(--h3-header);
}

h4
{
	font-size: 1.2em;
	color: var(--h456-header);
}

h5
{
	font-size: 1.1em;
	color: var(--h456-header);
}

h6
{
	font-size: 1em;
	color: var(--h456-header);
}

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p 
{
    margin-top: 0px;
    padding-top: 0px;
}

h2, h3, h4, h5, h6
{
	font-weight: bold;
	font-family: Basis-Grotesque-Bold;
	line-height: normal;
	padding-top: 0px;
	margin-top: .5em;
	padding-bottom: 0px;
	margin-bottom: .1em;
}

hTable
{
	font-weight: bold;
	font-family: Silka-SemiBold;
	color: var(--grey-header);
	font-size: 16.0pt;
	line-height: normal;
}

.search,
.search-bar
{
	margin-top: 1vw;
}

div.home
{
	overflow-y: visible;
	margin-bottom: 0px;
}

MadCap|main-content
{
	overflow-y: overlay;
}

div.search-home
{
	width: 100%;
	margin-left: 0%;
	margin-bottom: 5%;
	margin-right: 10%;
	padding: 0;
}

div.search-container
{
	text-align: center;
	margin: auto;
	width: 50%;
	padding-top: 1vw;
	padding-bottom: 1vw;
}

div.search-container:focus
{
	border: 4px black;
}

div.home-header
{
}

/* Homepage Announcements Section */

div.announcements
{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-around;
	overflow: visible;
}

div.announcementsChild
{
	display: flex;
	width: 50%;
	justify-content: space-around;
}

/* ========================================================= Homepage Buttons ========================================================= */

.Home-Flex-Container
{
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

a.Home
{
	text-decoration: none;
	display: flex;
	flex-wrap: wrap;
	flex-direction:row;
	max-width: 32%;
}

.Home-Card {
    cursor: pointer;
    display: flex;
    color: var(--navy-500) !important;
    border: .5px solid var(--grey-200);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 20px;
    flex-grow: 1;
    margin: .5rem 0rem;
    position: relative;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: ease-in-out all .4s;
    align-items: center;
    align-content: space-around;
	box-shadow: 0 4px 6px var(--grey-200);
}

.Home-Card:hover
{
	box-shadow: 0 2px 3px var(--grey-200);
	background-color: var(--teal-50);
	transition: ease-in-out all .1s;
	border-color: var(--grey-300);
}

.Home-Container
{
	padding: 1em 1em 1em 1em;
}

h2.Home-Header
{
	font-weight: bold;
	font-family: Silka-SemiBold;
	font-size: 14pt;
	line-height: normal;
	color: var(--navy-400);
	padding-top: 0px;
	margin-top: 0px;
	margin-bottom: .2em;
}

p.Home-Text
{
	font-family: Basis-Grotesque-Regular;
	font-size: 12pt;
	line-height: normal;
	color: var(--navy-200);
}

a.Home:hover
{
	text-decoration: none;
}

.Home-Icon
{
	width: 50px;
	max-width: 20%;
	max-height: 100%;
	margin: 1em 0px 1em 1em;
}

.Home-Buttons-Resources
{
	cursor: pointer;
	display: flex;
	color: var(--navy-500);
	background: #6149df;
	transition: ease-in-out all .2s;
	border-radius: 4px;
	font-size: 20px;
	display: block;
	flex-grow: 1;
	flex-basis: 200px;
	border: 1.5px solid transparent;
	margin: .9rem 9px;
	align-items: center;
	position: relative;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.Home-Buttons:hover
{
	transform: translateY(-1px);
	transform: scale(1.01);
	color: var(--navy-500);
	background-color: #402ca5;
}

.Home-Buttons-Resources:hover
{
	transform: translateY(-1px);
	transform: scale(1.01);
	color: var(--navy-500);
	background-color: #402ca5;
}

.Home-Buttons:active
{
	transform: translateY(1px);
	transform: scale(0.98);
	color: var(--navy-500);
	background-color: #402ca5;
}

.Home-Buttons-Resources:active
{
	transform: translateY(1px);
	transform: scale(0.98);
	color: var(--navy-500);
	background-color: #402ca5;
}

.Home-Buttons a
{
	text-decoration: none;
	color: var(--navy-400);
	font-family: 'Inter-Var';
	font-weight: bold;
	padding: 1.0rem .3rem;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.Home-Buttons-Resources a
{
	text-decoration: none;
	color: #FFFFFF;
	font-family: 'Inter-Var';
	font-weight: bold;
	padding: .3rem .3rem;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.title-bar-container
{
	box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px 0px;
}

/*=======================================Home Tiles section====================================================*/

div.home-tiles
{
	width: 100%;
	min-height: 100%;
	padding-right: 3vw;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	text-align: center;
}

div.home-tiles > div
{
	background: #6149df;
	padding: .8rem .3rem !important;
	transition: ease-in-out all .3s;
	border-radius: 4px;
	font-size: 20px;
	display: block;
	border: 1.5px solid transparent;
	flex-basis: 350px;
	margin: 1vw;
	flex-grow: 1;
	align-items: center;
	position: relative;
}

div.announcementsContainer {
    border-radius: 2px 2px 2px 2px;
    border: 1px solid var(--grey-200);
    background-color: rgba(255, 255, 255, 0.7);
    box-sizing: border-box;
    margin: auto;
    margin-top: 1em;
	box-shadow: 0 4px 6px var(--grey-200);
}

div.home-tiles div:hover	/*Complex Selector: When hovering over home tiles the following properties will apply.*/
{
	background-color: #402ca5;
}

/*=Elements for text contained within each home-tile=*/

div.home-tiles a	/*Complex Selector: Any anchor (links) tags that are within div.home-tiles will have the following properties*/
{
	text-decoration: none;
	color: #6149df;
	transition: ease-in-out all .3s;
	cursor: pointer;
	display: block;
}

/* Icons for Homepage What's New Section */

.ico-releaseNotes,
.ico-docHub
{
	font-weight: inherit;
	font-color: inherit;
}

.ico-releaseNotes:before
{
	display: inline-block;
	content: "";
	background: url(../Images/Inline/Editor_Icons/releaseNotesIcon.svg) no-repeat 0 0;
	background-size: 1em;
	background-position: center;
	height: 1em;
	width: 1em;
	padding: 0pt 2pt;
	margin-right: .15rem;
	vertical-align: text-bottom;
}

.ico-docHub:before
{
	display: inline-block;
	content: "";
	background: url(../Images/Inline/Editor_Icons/docHub_Icon.svg) no-repeat 0 0;
	background-size: 1em;
	background-position: center;
	height: 1em;
	width: 1em;
	padding: 0pt 2pt;
	margin-right: .15rem;
	vertical-align: text-bottom;
}

/*== Home Page Footer ==*/

MadCap|searchBarProxy.homeSearchBar
{
	
}

MadCap|searchBarProxy.homeSearchBar:focus
{
	border: 2px black;
}

button
{
	background-color: #33768e;
	color: #f9fafb;
	border-radius: 6px;
	transition-duration: 0.2s;
}

button:hover
{
	background-color: #f9fafb;
	color: #33768e;
}

div.Homepage-Split	/*This is a custom responsive layout row style (div class) in your stylesheet. To provide your own description for this style: (1) Open the stylesheet; (2) Find and select the div class with this name; and (3) In the Comment field, replace this text with your own. For more information on adding comments to styles, see the online Help.*/
{
	mc-grid-row: true;
	margin-left: auto;
	margin-right: auto;
}

div.Homepage-Split::before
{
	content: ' ';
	display: table;
}

div.Homepage-Split::after
{
	content: ' ';
	display: table;
	clear: both;
}

div.Homepage-Split > div
{
	float: left;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.Homepage-Split > div:nth-child(1)
{
	width: 35%;
	margin-left: 0%;
}

div.Homepage-Split > div:nth-child(2)
{
	width: 55%;
	margin-left: 0%;
}

/*Experiments*/

.flex-parent-element
{
	display: flex;
	flex-flow: row wrap;
	flex-wrap: wrap-reverse;
	justify-content: center;
	align-items: baseline;
	max-width: 80%;
	margin-left: 10%;
}

.flex-parent-element-header
{
	display: flex;
	flex-flow: row wrap;
	flex-wrap: wrap;
}

.flex-child-element-left
{
	flex: 2 0 70%;
	margin-right: 0%;
	width: 25%;
	min-width: 25rem;
}

.flex-child-element-right
{
	flex: 1 0 30%;
	margin-left: 0%;
	margin-right: 0%;
	height: 25%;
}

img.InLine14ptWideAuto
{
	vertical-align: middle;
	width: auto;
	height: 16px;
	margin-bottom: 3px;
}

.search-bar.search-bar-container._Skins_RB___SearchHome.mc-component .search-submit
{
	border: none;
}

.search-bar .search-submit
{
	border: none;
}

input.search-field.needs-pie:focus-visible
{
	outline-color: var(--navy-200);
}

.new_stamp
{
	
}

.new_stamp::after
{
    content: "NEW";
	display: inline-block;
    font-size: .7em;
    font-family: 'Inter-Var';
    line-height: 1.5;
    font-weight: 500;
	vertical-align: text-top;
    color: var(--green-500);
    background-color: #d5f6e7 !important;
    border: 1px solid var(--green-200);
    border-radius: 20px;
    padding: 2px 8px !important;
    white-space: normal;
    margin-left: .8em;
}

.updated_stamp
{
	
}

.updated_stamp::after
{
	content: "UPDATED";
	display: inline-block;
	font-size: .7em;
    font-family: 'Inter-Var';
	line-height: 1.5;
	font-weight: 500;
	text-align: center;
	vertical-align: text-top;
	color: var(--blue-500);
	background-color: #edf6fc !important;
	border: 1px solid var(--blue-200);
	border-radius: 20px;
	padding: 2px 8px !important;
	white-space: normal;
	margin-left: .8em;
}

a.logo {
    width: 260px !important;
    background-size: contain !important;
}

.TOClinkOut > a::before
{
    content: "";
    display: inline-block;
    background: url(../Images/linkoutarrownavy.png) no-repeat;
    background-size: 100%;
    width: 10px;
    height: 10px;
    margin: 0px 4px 0 0;
}

/*===========================================================================================================================================================
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 screen and (max-width: 1280px)
{
	a.Home
	{
		text-decoration: none;
		display: flex;
		width: 100% !important;
		max-width: 100%;
	}

	h1
	{
		font-size: 2em;
	}

	div.home-container
	{
		width: 100%;
		margin-left: 0px;
	}

	div.search-home
	{
		margin-left: 0%;
		width: 90%;
	}

	div.footer
	{
		padding-top: 10px;
	}

	nav.title-bar .menu-icon
	{
		display: block !important;
	    width: 24px;
	    height: 24px;
	    background-size: contain;
	}

	.title-bar .menu-icon span
	{
		display: block !important;
		width: 24px;
        height: 24px;
        background-size: contain;
	}
}


@media only screen and (max-width: 767px)
{
		MadCap|searchBarProxy.homeSearchBar
		{
			width: 100%;
		}

		h1
		{
			font-size: 1.2em;
			letter-spacing: 1px;
		}

		h2
		{
			font-size: 1.2em;
		}

		div.topic-hero
		{
			text-align: center;
		}

		div.home-container
		{
			width: 100%;
			margin-left: 0px;
		}

		div.search-home
		{
			width: 80%;
			margin-left: 10%;
		}

		div.search-container
		{
			margin-bottom: initial;
		}

		div.home-tiles-container
		{
			padding-bottom: 0;
		}

		.title-bar .menu-icon span
		{
			display: block !important;
		    width: 24px;
		    height: 24px;
		    background-size: contain;
		}

		nav.title-bar .menu-icon
		{
			display: block !important;
			width: 24px;
	        height: 24px;
	        background-size: contain;
		}
}

	a.button
	{
		background-color: #33768e;
		color: #f9fafb;
		border-radius: 6px;
		transition-duration: 0.2s;
	}

	a.button:hover
	{
		background-color: #f9fafb;
		color: #33768e;
	}

	.display-block
	{
		display: block;
	}

	a.display
	{
		display: block;
	}

	a.fill-div
	{
		display: block;
		height: 100%;
		width: 100%;
		text-decoration: none;
	}