@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);
/*<meta />*/

/* OVERRIDE FLARE FOUNDATION STYLES */

/* Variables */
:root {
  --headingBold: "Cera-Pro-Bold", sans-serif !important;
  --headingRegular: "Cera-Pro-Medium", sans-serif !important;
  --bodyRegular: "Graphik-Regular", sans-serif !important;
  --dark: #1e293b;
}

:focus {
	outline: none;
	/* remove search box outline */
}

MadCap|xref.invisible {
	mc-format: ;
	display: none;
	/* Hide elements that we need to link to the output*/
}

/* TOP NAVIGATION STYLES */

.top-nav-container {
	width: 100vw;
}
.top-nav-container ul{
	padding: 0px;
}
.top-nav-list{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 2em;
	margin: 0 2em;
}
.top-nav-list a{
	color: #000000;
}
.logo {
	margin-right: auto;
	cursor: pointer;
}
.top-nav-links {
	list-style: none;
	font-family: var(--headingBold);
	color: #000000;
	position: relative;
	cursor: pointer;
	padding: 2em 0;
	margin: 0px;
}
 .top-nav-links::after {
	 content: "";
	 width: 0;
	 height: 0.1em;
	 border-radius: 0.2rem;
	 position: absolute;
	 left: 0.1em;
	 bottom: 0.5em;
	 background-color: #1D8187;
	 transition: width 200ms ease-in;
}
 .top-nav-links:hover::after, .top-nav-links:focus::after {
	 width: 100%;
}
 .top-nav-links:hover ul, .top-nav-links:focus ul {
	 opacity: 1;
	 visibility: visible;
}
.top-nav-links-drop {
	position: absolute;
	top: 6em;
	left: -1.6em;
	box-shadow: 0 0 10px #E0E0E0;
	background-color: #ffffff;
	border-radius: 0.2em;
	font-family: var(--headingRegular);
	font-size: 14px;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-in-out;
	z-index: 1;
}
.top-nav-links-drop li{
	list-style: none;
	padding: 0 3.2em 0 1.6em;
	border-radius: 0.2em;
	margin: 1em 0;
	white-space: nowrap;
}
 .top-nav-links-drop li:hover a, .top-nav-links-drop li:focus a{
	color:#1D8187;
}

/*Top Nav Containing search bar should only show for mobile and tablet below Flare added slide out menu */
/*Madcap Search bar styles determined by TopSideNavSearchBar skin*/
.top-nav-container-small {
	display: none;
}

/* federated-search-box */
.federated-search-box-root {
  position: relative;
}

.federated-search-box-input {
  height: 2em;
  width: 100%;
  border-left: solid 1px #cbd5e1;
  border-right: solid 1px #cbd5e1;
  border-top: solid 1px #cbd5e1;
  border-bottom: solid 1px #cbd5e1;
  border-top-left-radius: 0.4em;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  border-bottom-left-radius: 0.4em;
  color: #64748b;
  font-family: Cera-Pro-Medium, sans-serif;
  font-size: 1em;
  padding-left: 10px;
  background-color: #ffffff;
}

.federated-search-box-input-adornment {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 36px;
  background-color: #ffffff;
  border-top-right-radius: 0.4em;
  border-bottom-right-radius: 0.4em;
  text-align: center;
  padding: 4px 6px 2px 0px;
}

.federated-search-box-input-adornment > svg {
  cursor: pointer;
}

/* SIDE NAVIGATION STYLES */

ul.sidenav li > a {
	font-family: var(--bodyRegular);
	margin-bottom: 12px;
}

.sidenav-wrapper ul ul.is-accordion-submenu {
  margin-bottom: 4px;
}

.submenu-toggle-container {
  width: 16px !important;
  height: 16px !important;
  background: url("https://images.ctfassets.net/lbgy40h4xfb7/7fDTsV2o4uBadje9McqHKg/15dc4c0a8d0c021b48a613025a9f58fd/Heroicon.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.is-accordion-submenu-parent > a[aria-expanded='false'] > .submenu-toggle-container {
  background: url("https://images.ctfassets.net/lbgy40h4xfb7/4PyM4uuV4hdLefPxyDApEL/acfbcb3394df4f3c4b48280a2c22b917/Heroicon-down.svg");
}

.submenu-toggle-container .submenu-toggle,
.submenu-toggle-container .invisible-label {
  display: none !important;
}

/* BODY CONTAINER STYLES */

.body-container {
	padding: 20px 100px 0 100px;
}

/* BODY AND ON THIS PAGE MENU STYLE*/
.topic-container {
	display:flex;
	gap: 100px;
}
.body-proxy {
	max-width: 70%;
}
.menu-proxy{
	max-width: 25%
}

/* BY DEFAULT - HIDE H1 ON SIDE MENU PROXY - commenting this out for now because some pages only have H1 which leads to an empty looking side menu
.menu-proxy .sticky-menu > ul > li:first-child {
	display: none;
}
*/

/* BY DEFAULT - HIDE LEVEL 3+ ON SIDE MENU PROXY*/
.menu-proxy .sticky-menu ul > ul ul,
.menu-proxy .sticky-menu ul > li > ul ul {
	display: none;
}

.menu-proxy .sticky-menu ul > ul ul > li > a,
.menu-proxy .sticky-menu ul > li > ul ul > li > a {
	font-size: 14px !important;
	line-height: 20px !important;
	padding-left: 25px !important;
}

p.menu-header {
	padding-left: 10px;
	margin-bottom: 0px;
	color: #1e293b;
	text-transform: uppercase;
}

/* breadcrumbs */

MadCap|breadcrumbsProxy {
	mc-breadcrumbs-prefix: '';
	/* remove context before breadcrumb */
}

div.MCBreadcrumbsBox_0{
	border-bottom-color: #E2E8F0;
}

/* In This Section MiniTOC */

p.FirstPageOfChapter{
	margin: 50px 0 0 0;
	padding: 30px 0 0 0;
	border-top: 1px solid #E2E8F0;
	font-size: 1.2em;
}

div.MCMiniTocBox_0{
	padding: 0em;
	border-style:none;
}

p.MiniTOC1_0{
	margin: 1em 0em 0em 0em;
}

a.MiniTOC1:link,
a.MiniTOC1:hover,
a.MiniTOC1:visited,
a.MiniTOC1:active,
a.MiniTOC1:focus
{
	font-weight: normal;
	color: #1D8187;
}

a.MiniTOC2:link,
a.MiniTOC2:hover,
a.MiniTOC2:visited,
a.MiniTOC2:active,
a.MiniTOC2:focus
{
	font-weight: normal;
}

a.MiniTOC3:link,
a.MiniTOC3:hover,
a.MiniTOC3:visited,
a.MiniTOC3:active,
a.MiniTOC3:focus
{
	font-weight: normal;
}

a.MiniTOC4:link,
a.MiniTOC4:hover,
a.MiniTOC4:visited,
a.MiniTOC4:active,
a.MiniTOC4:focus
{
	font-weight: normal;
}


/* FOOTER STYLES */

.footer-wrapper {
	margin: 100px 0 0 0;
	padding: 30px 0 0 0;
	border-top: 1px solid #E2E8F0;
}

.footer-wrapper ul {
	list-style: none;
}

.footer-links-container {
	display: flex; 
}

.footer-column {
	flex: 1 1;
}

.footer-column p {
	font-family: var(--headingBold);
	text-transform: uppercase;
}
.footer-links-container ul {
	padding: 0px;
}

.footer-social {
	display: flex;
	align-items: center;
	color: #586470;
}

.footer-social p {
	flex: 0 0 50%;
}

.footer-social ul {
	flex: 0 0 50%;
	display: flex;
	justify-content: flex-end;
}

.footer-social li.social {
	font-size: 1.4em;
	flex: 0 0 5%;
}

.footer-social li.social a {
	color: #586470;
	text-decoration: none;
}

.footer-social li.social a:hover {
	text-decoration: none;
}

/* FONTS */

@font-face {
  font-family: "Cera-Pro-Bold";
  font-style: normal;
  font-weight: 700;
  src: local("Cera-Pro-Bold"), local("Cera-Pro-Bold"),
    url("https://assets.ctfassets.net/lbgy40h4xfb7/4R9vsXghxbSmTyxk3gg0zC/54bdfa49ea32e9a1cc7b163c2269533a/Cera-Pro-Bold.woff")
      format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Cera-Pro-Medium";
  font-style: normal;
  font-weight: 500;
  src: local("Cera-Pro-Medium"), local("Cera-Pro-Medium"),
    url("https://assets.ctfassets.net/lbgy40h4xfb7/4zBT7jb7T1IKJwpaopd2Yr/12d8be2a73a55236451786b5e2926626/Cera-Pro-Medium.woff")
      format("woff");
  font-display: swap;
}
@font-face {
  font-family: "Graphik-Regular";
  font-style: normal;
  font-weight: normal;
  src: local("Graphik-Regular"), local("Graphik-Regular"),
    url("https://assets.ctfassets.net/lbgy40h4xfb7/40pCvqhmFqTKRXGmcCIS9e/2077ffc45cca32659973b91a497a25c2/Graphik-Regular.woff")
      format("woff");
  font-display: swap;
}

body {
  color: var(--dark);
  font-family: var(--bodyRegular);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark);
  font-family: var(--headingBold);
  font-weight: 700;
}

h1 {
	font-size: 2em;
	margin-bottom: 0.1em;
	/* mc-heading-level: 0; Hides h1 from menu-proxy no longer in use as we want H1s to be used in variables */
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.25em;
}

h4 {
	font-size: 1em;
}

h5 {
	font-size: 0.85em;
}

h6 {
	font-size: 0.7em;
}

p {
	line-height: 1.5;
}

p.prereq
{
	mc-auto-number-format: '{b}Prerequisites{/b}: ';
}

p.Postreq
{
	mc-auto-number-format: '{b}Postrequisites{/b}: ';
}

p.result
{
	mc-auto-number-format: '{b}Result{/b}: ';
}

p.shortdescription {
	font-family: var(--headingRegular);
	font-size: 18px;
	line-height: 28px;
	margin-top: 0;
}
/*Responsive images*/
img{
	max-width: 100%;
	}

li {
	margin: 1em 0;
	line-height: 1.5;
}

li.optional
{
	orphans: 2;
	widows: 2;
	mc-auto-number-class: inherit;
	mc-auto-number-format: '{b}Optional{/b}: ';
}

ol ol
{
	list-style-type: lower-alpha;
}

ol ol ol
{
	list-style-type: lower-roman;
}

a {
	color: #1D8187;
	text-decoration: none;
}

a[target="_blank"].external {
  position: relative;
}

a[target="_blank"].external::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url("https://images.ctfassets.net/lbgy40h4xfb7/4EuUWCo6AmKYBQb7i9w4hz/ab0a9061cabab966aff0971885066420/external-icon.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  right: -20px;
  top: 50%;
  transform: translateX(10%) translateY(10%);
}

.xref {
	color: #1D8187;
	text-decoration: none;
}

MadCap|xref
{
	mc-format: '{h1}';
}

MadCap|xref.TopicTitle
{
	mc-format: '{title}';
}

MadCap|xref.TopicHeading
{
	mc-format: '{paratext}';
}

MadCap|xref.APIRef
{
	mc-format: 'API Reference';
}

/* Tables*/

div.table-indent-1 {
	padding-left: 2.5em;
}

/* Inline Code*/

span.placeholder {
	color: #0287c6;
	background: #f1f5f9;
}

span.code {
	font-family: Monospace;
	font-size: 14px;
	padding: 4px 8px;
	border: solid #cbd5e1 1px;
	border-radius: 4px;
	background-color: #f8fafc;
	display: inline-block;
	margin: 2px 0px;
}

span.get {
	font-family: var(--headingRegular);
	font-size: 14px;
	line-height: 20px;
	padding: 4px 12px;
	border-radius: 4px;
	background-color: #dbf1d1;
	color: #000000;
}

span.patch {
	font-family: var(--headingRegular);
	font-size: 14px;
	line-height: 20px;
	padding: 4px 12px;
	border-radius: 4px;
	background-color: #fff4d5;
	color: #000000;
}

span.post {
	font-family: var(--headingRegular);
	font-size: 14px;
	line-height: 20px;
	padding: 4px 12px;
	border-radius: 4px;
	background-color: #cceefd;
	color: #000000;
}

span.put {
	font-family: var(--headingRegular);
	font-size: 14px;
	line-height: 20px;
	padding: 4px 12px;
	border-radius: 4px;
	background-color: #DCD1F0;
	color: #000000;
}

span.delete {
	font-family: var(--headingRegular);
	font-size: 14px;
	line-height: 20px;
	padding: 4px 12px;
	border-radius: 4px;
	background-color: #ffdada;
	color: #000000;
}

span.data-type{
	padding: 0.2em 0.3em;
	border: solid #cbd5e1 1px;
    border-radius: 4px;
	background-color: #f8fafc;
	color: #1f0b48;
	font-size: 0.8em;
}

span.required{
	padding: 0.2em 0.3em;
	border: solid #cbd5e1 1px;
    border-radius: 4px;
	background-color: #f8fafc;
	color: #992929;
	font-size: 0.8em;
}

span.add-on-feature {
	font-family: var(--headingRegular);
	padding: 4px 12px;
	border-radius: 4px;
	background-color: #dbf1d1;
	color: #000000;
}

span.la-feature {
	font-family: var(--headingRegular);
	padding: 4px 12px;
	border-radius: 4px;
	background-color: #fff4d5;
	color: #000000;
}

/* Code Snippet */

MadCap|codeSnippet {
	background: #f8fafc;
	font-size: 1em;
	margin-bottom: 1.5em;
}

MadCap|codeSnippetBody {
	mc-code-lang: 'Bash';
	font-size: 0.9em;
	line-height: 1.5;
	color: 
}

MadCap|codeSnippetCaption {
	color: #000000;
	text-decoration: none;
}

MadCap|codeSnippetCopyButton {
	display: none;
	padding: 0.5em;
	padding-right: 0.5em;
	background-color: #1D8187;
	color: #ffffff;
	font-size: 0.75em;
	text-decoration: none;
}

MadCap|codeSnippetCopyButton:hover {
	background-color: #1D8187;
	color: #ffffff;
	text-decoration: none;
}

/* Important Info Boxes */

div.note {
	border-left: solid 8px #81e0e5;
	background-color: #f8fafc;
	overflow: hidden;
	padding: 8px 24px;
	margin: 1em 0;
}

.noteInDiv {
	mc-auto-number-format: '{b}Note: {/b}';
}

div.tip {
	border-left: solid 8px #70c945;
	background-color: #f8fafc;
	overflow: hidden;
	padding: 8px 24px;
	margin: 1em 0;
}

.tipInDiv {
	mc-auto-number-format: '{b}Tip: {/b}';
}

div.caution {
	border-left: solid 8px #ffdd80;
	background-color: #f8fafc;
	overflow: hidden;
	padding: 8px 24px;
	margin: 1em 0;
}

.cautionInDiv {
	mc-auto-number-format: '{b}Caution: {/b}';
}

div.warning {
	border-left: solid 8px #ff5757;
	background-color: #f8fafc;
	overflow: hidden;
	padding: 8px 24px;
	margin: 1em 0;
}

.warningInDiv {
	mc-auto-number-format: '{b}Warning: {/b}';
}

div.example {
	border-left: solid 8px #9576d2;
	background-color: #f8fafc;
	overflow: hidden;
	padding: 8px 24px;
	margin: 1em 0;
}

.exampleInDiv {
	mc-auto-number-format: '{b}Example: {/b}';
}

div.access {
	border: 1px solid #e2e8f0;
	border-radius: 6px;
	box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.1),
	  0px 4px 6px -1px rgba(16, 24, 40, 0.1);
	overflow: hidden;
	padding: 8px 24px;
	margin: 1em 0;
}

.accessInDiv {
	mc-auto-number-format: '{b}Who can use this feature?{/b}';
}

/* INFO BOXES V2*/

div.infobox {
	display: flex;
	border-left: solid 8px #02A9F7;
	background-color: #f8fafc;
	overflow: hidden;
	margin: 1em 0;
	padding: 0 1em;
}

i.ph-info {
	color: #02A9F7;
	padding: 0.5em 0.5em 0 0;
	font-size: 1.5em;
}

div.tipbox {
	display: flex;
	border-left: solid 8px #4CBB17;
	background-color: #f8fafc;
	overflow: hidden;
	margin: 1em 0;
	padding: 0 1em;
}

i.ph-lightbulb {
	color: #4CBB17;
	padding: 0.5em 0.5em 0 0;
	font-size: 1.5em;
}

div.cautionbox {
	display: flex;
	border-left: solid 8px #FFCD41;
	background-color: #f8fafc;
	overflow: hidden;
	margin: 1em 0;
	padding: 0 1em;
}

i.ph-warning {
	color: #FFCD41;
	padding: 0.5em 0.5em 0 0;
	font-size: 1.5em;
}

div.warningbox {
	display: flex;
	border-left: solid 8px #FF4444;
	background-color: #f8fafc;
	overflow: hidden;
	margin: 1em 0;
	padding: 0 1em;
}

i.ph-warning-octagon {
	color: #FF4444;
	padding: 0.5em 0.5em 0 0;
	font-size: 1.5em;
}

/* DROPDOWNS */

.dropDown {
  border-radius: 12px;
  box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.1),
    0px 4px 6px -1px rgba(16, 24, 40, 0.1);
}

MadCap|dropDown{
	box-shadow: rgb(0 0 0 / 10%) 0px 0px 8px;
	margin-bottom: 1.5em;
}

MadCap|dropDownHead{
	padding: 1em 0 1em 1em;
}

MadCap|dropDownHotSpot{
	color: #000000;
}

MadCap|dropDownBody{
	padding-right: 1em;
}

/* HOMEPAGES */

/* CARD/TILE SINGLE LINK STYLES */

.landing-page-container {
	display:flex;
	flex-wrap:wrap;
	align-items: stretch;
}

.landing-page-container a {
	flex: 0 1 calc(33.33% - 20px); /*flex grow set to 0 to maintain column layout, use 30% for 3 column*/
	margin: 10px 20px 10px 0px;
	text-decoration:none;
	box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.1),
    0px 4px 6px -1px rgba(16, 24, 40, 0.1);
	background-color: #ffffff;
	color: var(--dark);
	border-radius: 12px;
	border: 1px solid #e2e8f0;
	padding: 20px;
}

.landing-page-container a:hover{
	background-color: #1D8187;
	color: #ffffff;
}

.card .card-header {
  font-family: var(--headingBold);
  font-weight: 700;
}

.card-header{
	margin-bottom: 12px;
}

.card-content{
	font-size: 16px;
	line-height: 24px;
	padding: 0;
}

/* CARD/TITLE TEXT ONLY */

.text-box-container {
	display:flex;
	flex-wrap:wrap;
	gap: 30px 30px;
}

.text-box{
	flex: 0 1 calc(33.33% - 20px); /*flex grow set to 0 to maintain column layout, use 30% for 3 column*/
	font-size: 16px;
	line-height: 24px;
	border-radius: 12px;
	border-color: #2f106c;
	border-style: solid;
	border-width: 1px;
	padding: 20px;
}
/* LINK COLUMNS STYLES */

.link-container {
	display:flex;
	flex-wrap:wrap;
	gap: 0 30px;
}

.link-box{
	flex: 0 1 calc(33.33% - 20px); /*flex grow set to 0 to maintain column layout, use 30% for 3 column*/
	font-size: 16px;
	line-height: 24px;
}

p.link-box-header {
  font-family: var(--headingBold);
  font-weight: 700;
}

@media all and (max-width:480px){
	.top-nav-container{
		display:none;
	}
	.top-nav-container-small {
		display: block;
	}
	.landing-page-container {
		flex-direction: column;
	}
	.text-box-container {
		flex-direction: column;
	}
	.link-container {
		flex-direction: column;
	}
	.body-proxy {
	max-width: 100%;
	}
	.menu-proxy {
		display: none;
	}
	.footer-links-container{
		display: none;
	}
	.title-bar .menu-icon span {
	background: url("https://images.ctfassets.net/lbgy40h4xfb7/3ZGvqDURHruV5aJgBlK5Hm/fa2f7596601173a5b2d447e8a1848bbd/menu-hamburger.svg");
	background-position: center;
	background-repeat: no-repeat;
	}
}

@media all and (max-width:1280px){
	.top-nav-container{
		display:none;
	}
	.top-nav-container-small {
		display: block;
	}
	.landing-page-container {
		flex-direction: column;
	}
	.text-box-container {
		flex-direction: column;
	}
	.link-container {
		flex-direction: column;
	}
	.body-proxy {
	max-width: 100%;
	}
	.menu-proxy {
		display: none;
	}
	.footer-links-container{
		display: none;
	}
	.title-bar .menu-icon span {
	background: url("https://images.ctfassets.net/lbgy40h4xfb7/3ZGvqDURHruV5aJgBlK5Hm/fa2f7596601173a5b2d447e8a1848bbd/menu-hamburger.svg");
	background-position: center;
	background-repeat: no-repeat;
	}
}

@media all and (max-width:1550px){
	.body-container {
	padding: 20px 50px 0 50px;
	}
	.topic-container {
	gap: 50px;
	}
	.text-box-container {
	gap: 50px;
	}
	.text-box{
	flex: 0 1 calc(50% - 50px);
	}	
	.link-container {
	gap: 0 50px;
	}
	.link-box{
	flex: 0 1 calc(50% - 50px);
	}
	.landing-page-container a {
	flex: 0 1 calc(50% - 50px); 
	margin: 10px 30px 10px 0px;
	}
	ul.menu._Skins_Menu.mc-component {
		width: 250px;
	}
	ul.menu._Skins_Menu.mc-component li > a {
		font-size: 14px;
		line-height: 21px;
	}
}

/* TABS STYLES */

ul.tabs
{
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
}

ul.tabs:after
{
	position: absolute;
	content: "";
	width: 100%;
	bottom: 0;
	left: 0;
	border-bottom: 1px solid #ddd;
}

ul.tabs .tab-link
{
	color: #333;
	display: inline-block;
	padding: 10px 10px;
	cursor: pointer;
	margin-left: -4px;
	margin-bottom: 0px;
	position: relative;
	z-index: 0;
}

ul.tabs .current
{
	background: #fff;
	color: #1d8187;
	margin-left: 0px;
	margin-right: 10px;
	border-top: 1px solid #ddd;
	border-bottom: 0px solid white;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	z-index: 100;
}

ul.tabs .tab-link:hover
{
	background: #fff;
	color: #1d8187;
	display: inline-block;
	padding: 10px 10px;
	cursor: pointer;
	margin-left: -5px;
	border: 1px solid transparent;
}

ul.tabs .current:hover
{
	background: #1d8187;
	color: #fff;
	margin-left: 0px;
	margin-right: 10px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid transparent;
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
	z-index: 2;
}

.tab-content
{
	display: none;
	background: #ededed;
	padding: 15px;
	background-color: transparent;
}

.tab-content.current
{
	display: inherit;
}

/*Flash of Style*/
/* Set menus to be initially hidden, to prevent FOUC (flash of unstyled content). The menus can initially appear unformatted before all scripts have run, which was evident in Chrome browser especially. So we hide the menus in the CSS, and then make them visible in the script (do not use the display property to do this!), after they have been manipulated. */
.top-nav-list
{
  visibility: hidden;
}

/*
  Everything So far is Cosmetic styling 

  Flexbox + Important CSS Starts Here

*/

/*
  Overall Layout
*/

