/**/
@namespace MadCap url(http://www.madcapsoftware.com/Schemas/MadCap.xsd);
/*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');*/
@font-face
{
font-family: "Inter";
src: url('../Fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
font-weight: 1 1000;
}
/* Add other font properties if necessary */
body
{
font-family: Inter;
-webkit-font-smoothing: antialiased;
}
.title-bar-layout
{
flex-wrap: nowrap;
mc-hidden: hidden;
}
.MCTopicPopupContainer
{
padding-top: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 10px;
mc-hidden: hidden;
}
.MCTextPopupArrow
{
border-bottom-color: var(--Egyptian-Teal);
mc-hidden: hidden;
}
.row.nav-search
{
display: none;
mc-hidden: hidden;
}
.is-accordion-submenu-parent > a span.submenu-toggle /* Same as before. Removes the border that creates the default triangle shape */
{
border: none;
mc-hidden: hidden;
}
.is-accordion-submenu-parent > a span.submenu-toggle::after /* Adds a default icon (for when the menu is collapsed). */
{
content: url('../Images/Icons/NavArrow_Open.svg');
/* The icon code */
position: absolute;
/* Do not change */
left: -11px;
/* The left/right positioning of the icon */
bottom: -16px;
/* The top/bottom positioning of the icon */
mc-hidden: hidden;
}
.is-accordion-submenu-parent > a [aria-expanded='true'] span.submenu-toggle /* Stops the icon from flipping upside down when you expand the menu */
{
-webkit-transform-origin: none;
-ms-transform-origin: none;
transform-origin: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
mc-hidden: hidden;
}
.is-accordion-submenu-parent > a [aria-expanded='false'] span.submenu-toggle /* Stops the icon from flipping upside down when you expand the menu */
{
-webkit-transform-origin: none;
-ms-transform-origin: none;
transform-origin: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
mc-hidden: hidden;
}
.is-accordion-submenu-parent > a [aria-expanded='true'] span.submenu-toggle::after /* Changes the icon for when the menu is expanded*/
{
content: url('../Images/Icons/NavArrow_Close.svg');
mc-hidden: hidden;
}
.is-accordion-submenu-parent > a[aria-expanded='true'] > .submenu-toggle-container > span.submenu-toggle
{
transform: rotate(270deg);
position: absolute;
left: -1px;
/* The left/right positioning of the icon */
bottom: -16px;
mc-hidden: hidden;
}
p.status-bar-left
{
font-family: Inter;
text-align: left;
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
font-size: 11pt;
mc-hidden: hidden;
}
p.status-bar-right
{
font-family: Inter;
text-align: right;
color: var(--ui-1100);
margin-top: 0px;
margin-bottom: 0px;
font-size: 10pt;
mc-hidden: hidden;
}
p a:link
{
color: var(--Egyptian-Teal);
text-decoration: none;
font-weight: 500;
}
a:link
{
color: var(--Egyptian-Teal);
text-decoration: none;
}
p.status-bar-right a:link
{
color: var(--Egyptian-Teal);
}
p.status-bar-right a:link
{
color: var(--Egyptian-Teal);
}
p.tab-bar-unselected a:link
{
color: var(--Egyptian-Teal);
}
.featured-snippets-container .micro-response-title a:visited
{
color: var(--Egyptian-Teal);
}
p a:visited
{
color: var(--Egyptian-Teal);
text-decoration: none;
}
a:visited
{
color: var(--Egyptian-Teal);
text-decoration: none;
}
p.status-bar-right a:visited
{
color: var(--Egyptian-Teal);
}
p.tab-bar-unselected a:visited
{
color: var(--Egyptian-Teal);
}
#resultList h3.title a:visited
{
color: var(--Egyptian-Teal);
font-weight: 500;
}
p a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.featured-snippets-container .micro-response-title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
color: var(--Egyptian-Teal);
}
p.status-bar-right a:hover
{
color: var(--Egyptian-Teal);
font-weight: 500;
}
p.tab-bar-unselected a:hover
{
color: var(--Egyptian-Teal);
font-weight: 500;
}
a:hover
{
color: var(--Egyptian-Teal);
font-weight: 500;
}
ul.sidenav li a:hover
{
font-weight: 500;
}
ul.menu._Skins_Hardware_Menu.mc-component ul > li > a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
background: none;
}
ul.menu._Skins_Hardware_Menu.mc-component ul ul > li > a:hover
{
background: none;
}
ul.menu._Skins_Hardware_Menu.mc-component li > a:hover
{
cursor: default;
background: none !important;
}
div.Highlight-Red-Info a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
div.Highlight-Red-Warn a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
div.Highlight-Teal-Info a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
div.Highlight-Green-Check a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
div.Highlight-Grey-Info a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Admin_Central_Hub.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Acquire.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Bookings.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Enterprise.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Hardware.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_KitcheniQ.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Marketing.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Ordering.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Payments.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Point-of-Sale.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Stocks.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
._Skins_Search_Results_Zonal.mc-component #resultList h3.title a:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
#resultList h3.title a:hover
{
color: var(--Egyptian-Teal);
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
div.Highlight-Teal-Info a:hover
{
color: var(--Egyptian-Teal);
}
div.Highlight-Teal-Check a:hover
{
color: var(--Egyptian-Teal);
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
div.Highlight-Teal-Example a:hover
{
color: var(--Egyptian-Teal);
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
div.Highlight-Teal-Info a:hover
{
color: var(--Egyptian-Teal);
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
div.Highlight-Teal-MiniTOC a:hover
{
color: var(--Egyptian-Teal);
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.featured-snippets-container .micro-response-title a
{
color: var(--Egyptian-Teal);
text-decoration: none;
font-weight: 500;
}
.featured-snippets-container .micro-response-url cite
{
color: #9ba1a6;
font-size: 11pt;
}
.featured-snippets-container .micro-content-expand
{
border-top: solid 2px #DFE3E6;
border-bottom: solid 2px #DFE3E6;
margin-top: 10px;
}
.featured-snippets-container .micro-content-collapsed .micro-content-expand
{
background: url(../Images/Icons/DwnArrow_Black.svg) no-repeat center center !important;
}
.featured-snippets-container .micro-content-expanded .micro-content-expand
{
background: url(../Images/Icons/UpArrow_Black.svg) no-repeat center center !important;
}
/*a:hover
{
color: var(--Pale-Teal);
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
font-weight: 500;
text-underline-offset: 4px;
} */
p.MiniTOC1
{
font-weight: 500;
}
a.MiniTOC1
{
font-weight: 500;
}
a.MiniTOC1:hover
{
color: var(--Egyptian-Teal);
text-decoration: underline var(--Rasberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
font-weight: 500;
}
p.MiniTOC1_0
{
margin-top: 8px;
margin-bottom: 8px;
font-weight: 500;
mc-hidden: hidden;
}
.xref
{
font-weight: normal;
color: var(--Egyptian-Teal);
text-decoration: none;
}
ul.menu._Skins_Hardware_Menu.mc-component ul ul > li > a
{
border-bottom: 1px solid var(--ui-800);
}
ul.menu._Skins_Hardware_Menu.mc-component ul > li > a
{
color: var(--Egyptian-Teal);
font-weight: 500;
}
.link
{
color: var(--Egyptian-Teal) !important;
font-size: 12pt !important;
mc-hidden: hidden;
}
button.CloseTopicPopupButton.CloseTopicInner
{
font-size: 22px;
color: black !important;
padding-top: 50px !important;
padding-right: 22px !important;
}
.search-bar.search-bar-container._Skins_Search_Bar.mc-component .search-submit
{
border-radius: 8px;
content: url('../Images/Icons/Search_White.svg');
position: relative;
right: 5px;
top: 5px;
width: 45px;
height: 45px;
padding-left: 5px;
padding-right: 5px;
mc-hidden: hidden;
}
.search-bar._Skins_Search_Bar.mc-component .search-filter
{
/*background-color: var(--Egyptian-Teal);*/
content: url('../Images/Icons/Filter_Wh.svg');
position: relative;
top: 5px;
right: 1px;
width: 45px;
height: 45px;
padding-left: 5px;
mc-hidden: hidden;
}
.search-bar .search-filter.selected
{
background-color: var(--Egyptian-Teal);
mc-hidden: hidden;
}
._Skins_Search_Bar.mc-component .search-filter-content
{
border-radius: 8px;
border: 1px solid var(--light-theme-ui-600-ui-border-subtle, #DFE3E6);
box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
mc-hidden: hidden;
}
.search-bar._Skins_Search_Bar.mc-component .search-filter-wrapper.open
{
background-color: transparent;
mc-hidden: hidden;
}
ul.sidenav li a.selected
{
background-color: var(--Light-Mint-Teal);
}
.title-bar-layout a.logo
{
background-color: transparent;
background-image: url('../Images/Branding/ZonalConnect_Help.svg');
background-position: left center;
background-repeat: no-repeat;
background-size: 95px;
width: 250px;
padding-top: 50px;
mc-hidden: hidden;
}
button.mc-dropdown-item:before
{
content: url('../Images/Icons/Side_Black.svg');
display: inline-flex;
padding-right: 10px;
padding-top: 5px;
vertical-align: middle;
}
button.mc-dropdown-item::before svg
{
height: 30px;
/* Adjust the height as needed */
width: 16px;
/* Adjust the width as needed */
}
ul.sidenav li
{
margin-left: -15px;
}
ul.sidenav li a
{
padding-left: 35px;
font-weight: 500;
}
ul.off-canvas-list li a
{
padding-left: 35px;
line-height: 1.6em;
}
/* DESKTOP/1001: This section controls special icons for side navigation in conjunction with classes added to side nav skins */
/*Kitchen iQ Brand Icon*/
ul.sidenav > li.tree-node.Kitchen-iQ.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_KitcheniQ_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.sidenav > li.tree-node.Kitchen-iQ.tree-node-leaf > a.selected::before
{
content: url('../Images/Branding/Icon_KitcheniQ_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Acquire Brand Icon*/
ul.sidenav > li.tree-node.Acquire.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Acquire_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.sidenav > li.tree-node.Acquire.tree-node-leaf > a.selected::before
{
content: url('../Images/Branding/Icon_Acquire_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Point of Sale Brand Icon*/
ul.sidenav > li.tree-node.POS.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_POS_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.sidenav > li.tree-node.POS.tree-node-leaf > a.selected::before
{
content: url('../Images/Branding/Icon_POS_XTiny.svg');
position: absolute;
left: 12px;
top: 77px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Ordering Brand Icon*/
ul.sidenav > li.tree-node.Ordering.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Ordering_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.sidenav > li.tree-node.Ordering.tree-node-leaf > a.selected::before
{
content: url('../Images/Branding/Icon_Ordering_XTiny.svg');
position: absolute;
left: 12px;
top: 77px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Payments Brand Icon*/
ul.sidenav > li.tree-node.Payments.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Payments_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.sidenav > li.tree-node.Payments.tree-node-leaf > a.selected::before
{
content: url('../Images/Branding/Icon_Payments_XTiny.svg');
position: absolute;
left: 12px;
top: 77px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Hardware Brand Icon*/
ul.sidenav > li.tree-node.Hardware.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Hardware_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.sidenav > li.tree-node.Hardware.tree-node-leaf > a.selected::before
{
content: url('../Images/Branding/Icon_Hardware_XTiny.svg');
position: absolute;
left: 12px;
top: 77px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Whats New Icon*/
ul.sidenav > li.tree-node.Whats-New.tree-node-leaf > a.selected::before
{
content: url('../Images/Icons/New_Teal_XTiny.svg') !important;
position: absolute;
left: 11px;
top: 121px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.sidenav > li.tree-node.Whats-New.tree-node-leaf::before
{
content: url('../Images/Icons/New_Black_XTiny.svg');
position: absolute;
left: 11px;
top: 120px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.sidenav > li.tree-node.Whats-New.tree-node-leaf.tree-node-selected::before
{
content: none;
}
ul.sidenav > li.tree-node.POS.tree-node-leaf.tree-node-selected::before
{
content: none;
}
/* End of 1001 */
/*
ul.sidenav > li.tree-node.tree-node-leaf[data-mc-id="1"] > a::before {
content: url('../Images/Icons/Started_Black.svg');
position: absolute;
left: 16px;
top: 131px;
z-index: 1;
}
ul.sidenav > li.tree-node.tree-node-leaf[data-mc-id="1"] > a.selected::before {
content: url('../Images/Icons/Started_Blue.svg');
position: absolute;
left: 16px;
top: 131px;
z-index: 1;
}
*/
/* DESKTOP/1002: This section controls side navigation for house icon / layers icons (black/teal) and selected accent option */
ul.sidenav > li.tree-node.tree-node-leaf[data-mc-id="0"]
{
position: relative;
}
ul.sidenav > li.tree-node.tree-node-leaf[data-mc-id="0"] > a::before
{
content: url('../Images/Icons/House_Black.svg');
position: absolute;
left: 11px;
top: 12px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.sidenav > li.tree-node.tree-node-leaf[data-mc-id="0"] > a.selected::before
{
content: url('../Images/Icons/House_Teal.svg');
position: absolute;
left: 11px;
top: 12px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.sidenav > li.tree-node.tree-node-leaf > a::before
{
content: none;
/*changed this to be none from the side_black to remove floating icon, unsure if it will break anything*/
position: absolute;
left: 8px;
top: 12px;
}
/* commenting out to see if the one below works without specifying the n+2
ul.sidenav > li.is-accordion-submenu-parent:nth-child(n+2) > a::before
{
content: url('../Images/Icons/Side_Black.svg');
position: absolute;
left: 8px;
top: 12px;
} */
ul.sidenav > li.is-accordion-submenu-parent > a::before
{
content: url('../Images/Icons/Side_Black.svg');
position: absolute;
left: 8px;
top: 12px;
}
ul.sidenav > li.is-accordion-submenu-parent.tree-node-selected > a::before
{
content: url('../Images/Icons/Layers_Teal.svg');
position: absolute;
left: 8px;
top: 12px;
}
ul.sidenav > li.accordion-submenu-parent.tree-node-selected::before
{
content: none;
}
/*
ul.sidenav > li:tree-node.tree-node-preloaded.has-children.is-accordion-submenu-parent > a.selected::before {
content: url('../Images/Icons/Layers_Teal.svg');
position: absolute;
left: 8px;
top: 12px;
} /*
/*
ul.sidenav > li.is-accordion-submenu-parent.active:nth-child(n+2) > a::before
{
content: url('../Images/Icons/Layers_Teal.svg');
position: absolute;
left: 8px;
top: 12px;
} */
ul.sidenav li a.selected
{
background-image: url('../Images/Icons/Accent_Teal.svg');
background-position: left center;
background-repeat: no-repeat;
font-weight: 600;
}
ul.sidenav li li a.selected
{
background-image: url('../Images/Icons/Accent_Teal.svg');
background-position: left center;
background-repeat: no-repeat;
font-weight: 600;
}
ul.sidenav ul ul ul > li > a.selected
{
background-image: url('../Images/Icons/Accent_Teal.svg');
background-position: left center;
background-repeat: no-repeat;
font-weight: 600;
margin-left: 5.1rem;
}
ul.sidenav ul ul ul ul > li > a.selected
{
background-image: url('../Images/Icons/Accent_Teal.svg');
background-position: left center;
background-repeat: no-repeat;
font-weight: 600;
margin-left: 5.9rem;
}
ul.sidenav ul ul ul ul > li > a
{
margin-left: 5.9rem;
}
ul.sidenav ul ul ul > li
{
padding-left: 10px;
}
ul.sidenav ul > li > a.selected
{
background-image: url('../Images/Icons/Accent_Teal.svg');
background-position: left center;
background-repeat: no-repeat;
font-weight: 600;
}
ul.sidenav ul ul > li > a.selected
{
background-image: url('../Images/Icons/Accent_Teal.svg');
background-position: left center;
background-repeat: no-repeat;
font-weight: 600;
}
/* this causes a floating layers icon - updated option below
ul.sidenav > li:nth-child(n+2) > a.selected::before
{
content: url('../Images/Icons/Layers_Teal.svg');
position: absolute;
left: 8px;
top: 12px;
}*/
ul.sidenav ul ul ul > li > a
{
margin-left: 6em;
margin-top: 4px;
background-color: transparent;
}
/* End of 1002 */
div.side-content /*Container for Menu proxy*/
{
float: right;
margin-left: 10px;
margin-bottom: 10px;
width: 33.333%;
mc-hidden: hidden;
}
nav.tab-bar
{
border-bottom: solid 2px #dfe3e6;
height: 56px;
}
.title-bar-layout .logo-wrapper
{
/*height: 55px !important;*/
mc-hidden: hidden;
}
.sidenav-container
{
height: 100% !important;
mc-hidden: hidden;
position: relative;
}
ul.menu._Skins_Right_Side_Menu.mc-component li
{
border-bottom: solid 1px var(--ui-600);
}
ul.menu._Skins_Right_Side_Menu.mc-component
{
float: right;
}
.img-floatright-thumb
{
float: right;
mc-thumbnail: popup;
mc-thumbnail-max-height: 200px;
mc-thumbnail-max-width: auto;
background-color: var(--Light-Mint-Teal);
padding: 12px;
}
.img-floatleft-thumb
{
float: left;
mc-thumbnail: popup;
mc-thumbnail-max-height: 150px;
mc-thumbnail-max-width: auto;
background-color: var(--Light-Mint-Teal);
padding: 12px;
}
.img-thumb
{
mc-thumbnail: popup;
mc-thumbnail-max-height: 150px;
mc-thumbnail-max-width: auto;
background-color: var(--Light-Mint-Teal);
padding: 12px;
}
.img-thumb-XS
{
mc-thumbnail: popup;
mc-thumbnail-max-height: 30px;
mc-thumbnail-max-width: auto;
background-color: var(--Light-Mint-Teal);
padding: 2px;
}
.MCPopupContainer
{
background-color: var(--Light-Mint-Teal);
border: none;
padding: 16px;
position: absolute;
cursor: pointer;
/* -moz-border-radius: 8px;
border-radius: 8px;*/
z-index: 1001;
mc-hidden: hidden;
}
img.IconInText
{
vertical-align: text-bottom;
}
:root
{
}
body
{
color: #000000;
font-family: Inter;
}
.body-container
{
padding-left: 2%;
padding-top: 2%;
mc-hidden: hidden;
}
.body-container-blogs
{
padding-left: 2%;
padding-top: 0%;
mc-hidden: hidden;
}
.body-container-sidebar-topics
{
padding-left: 0px;
padding-top: 0px;
padding-right: 33.333%;
mc-hidden: hidden;
}
:focus
{
outline: none;
}
.sidenav-wrapper
{
/*Set a height for the sidenav to enable scrolling*/
height: 100%;
/* Enable vertical scrolling */
overflow-y: auto;
/* Customize the scrollbar */
scrollbar-width: 6px;
scrollbar-color: rgba(63, 67, 80, 0.24);
}
/* Customize the appearance of the scrollbar */
.sidenav-wrapper::-webkit-scrollbar
{
width: 8px;
}
.sidenav-wrapper::-webkit-scrollbar-thumb
{
background-color: rgba(63, 67, 80, 0.24);
border-radius: 3px;
}
.sidenav-wrapper::-webkit-scrollbar-track
{
background-color: #ffffff;
border-radius: 3px;
}
/*SCROLL BAR- Side Nav Tablet & Mobile */
.search-filter-content
{
/*Set a height for the sidenav to enable scrolling
height: 100%;*/
/* Enable vertical scrolling */
overflow-y: auto;
/* Customize the scrollbar */
scrollbar-width: 6px;
scrollbar-color: #3F4350 #dddddd;
}
/* Customize the appearance of the scrollbar */
.search-filter-content::-webkit-scrollbar
{
width: 8px;
}
.search-filter-content::-webkit-scrollbar-thumb
{
background-color: rgba(63, 67, 80, 0.24);
border-radius: 3px;
}
.sidenav-wrapper::-webkit-scrollbar-track
{
background-color: #fffff;
border-radius: 3px;
}
/* Content */
img
{
border: none;
max-width: 100%;
}
p
{
font-size: 12.0pt;
line-height: 20pt;
letter-spacing: 0.25px;
font-family: Inter;
color: #000000;
}
p.table-text
{
font-size: 12pt;
mc-hidden: hidden;
}
table p
{
line-height: 16.5pt;
}
h1
{
font-size: 24.0pt;
color: #000000;
font-family: 'Inter';
font-weight: 700;
}
h2
{
font-weight: 700;
font-size: 20pt;
font-family: 'Inter';
color: #000000;
}
h3
{
font-size: 18.0pt;
font-family: 'Inter';
color: #000000;
font-weight: 700;
}
h4
{
font-size: 16.0pt;
font-family: 'Inter';
font-weight: 700;
color: #000000;
}
h5
{
font-size: 14.0pt;
font-family: 'Inter';
color: #000000;
font-weight: 700;
}
h6
{
font-weight: 700;
font-size: 8.0pt;
font-family: 'Inter';
color: #000000;
}
#resultList h3.title a
{
color: var(--Egyptian-Teal);
font-weight: 500;
}
#resultList h3.title a
{
color: var(--Egyptian-Teal);
font-size: 14pt;
}
/* Home page topic */
div.home-layout
{
padding: 2% 5%;
mc-hidden: hidden;
}
div.home-section
{
padding: 5% 0;
border-bottom: solid 1px var(--ui-0);
mc-hidden: hidden;
}
html.home-topic /*Used on home topic to override padding set in the skin*/
{
}
html.home-topic .body-container /*Overrides padding set in the skin*/
{
padding: 1%;
}
html.home-topic .main-section > .outer-row /*Overrides padding set in the skin when in tablet/mobile*/
{
max-width: 100%;
padding: 0;
}
MadCap|breadcrumbsProxy
{
mc-breadcrumbs-prefix: " ";
text-indent: 18px;
color: #000000;
font-size: 12pt;
border-bottom-width: 0px;
background-image: url('../Images/Icons/BackArrow_Black.svg');
background-repeat: no-repeat;
mc-breadcrumbs-divider: " " '\2022' " ";
mc-breadcrumbs-count: 4;
}
/* Badges */
span.badge-plum
{
display: inline-block;
padding: 5px 10px;
background-color: var(--plum-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-tomato
{
display: inline-block;
padding: 5px 10px;
background-color: var(--tomato-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-mint
{
display: inline-block;
padding: 5px 10px;
background-color: var(--mint-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-teal
{
display: inline-block;
padding: 5px 10px;
background-color: var(--teal-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-crimson
{
display: inline-block;
padding: 5px 10px;
background-color: var(--crimson-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-pink
{
display: inline-block;
padding: 5px 10px;
background-color: var(--pink-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-purple
{
display: inline-block;
padding: 5px 10px;
background-color: var(--purple-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-indigo
{
display: inline-block;
padding: 5px 10px;
background-color: var(--indigo-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-sky
{
display: inline-block;
padding: 5px 10px;
background-color: var(--sky-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-cyan
{
display: inline-block;
padding: 5px 10px;
background-color: var(--cyan-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-green
{
display: inline-block;
padding: 5px 10px;
background-color: #3D9A50;
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-lime
{
display: inline-block;
padding: 5px 10px;
background-color: var(--lime-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-yellow
{
display: inline-block;
padding: 5px 10px;
background-color: var(--yellow-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-orange
{
display: inline-block;
padding: 5px 10px;
background-color: var(--orange-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-brown
{
display: inline-block;
padding: 5px 10px;
background-color: var(--brown-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-gold
{
display: inline-block;
padding: 5px 10px;
background-color: var(--gold-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-bronze
{
display: inline-block;
padding: 5px 10px;
background-color: var(--bronze-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-primary-standard-blue
{
display: inline-block;
padding: 5px 10px;
background-color: var(--accent-1000);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-primary-standard-egyptian-teal
{
display: inline-block;
padding: 5px 10px;
background-color: var(--Egyptian-Teal);
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-primary-standard-black
{
display: inline-block;
padding: 5px 10px;
background-color: #000000;
color: white;
border-radius: 20px;
margin-bottom: 8px;
}
span.badge-primary-standard-black a
{
color: white;
}
span.badge-primary-standard-black:hover
{
background-color: var(--ui-800);
color: black;
}
span.badge-primary-standard-black:hover a
{
color: black;
}
/* Custom Scroll Button */
#myBtn
{
display: none;
position: fixed;
bottom: 10px;
right: 27px;
z-index: 99;
font-family: inter;
font-size: 11pt;
font-weight: 500;
border: none;
color: var(--ui-1200);
background-color: #ECEEF0 !important;
cursor: pointer;
padding: 0.6875rem 0.6875rem 0.6875rem 0.6875rem;
border-radius: 8px;
}
#myBtn:hover
{
background-color: #DFE3E6 !important;
}
/* API Styling */
/* Links */
a
{
color: var(--Egyptian-Teal);
}
a.MCBreadcrumbsLink
{
text-decoration: none;
color: #000000;
font-size: 12pt;
}
a.MCBreadcrumbsLink:visited
{
color: #000000;
font-size: 12pt;
}
a.MCBreadcrumbsLink:hover
{
color: var(--Egyptian-Teal);
font-size: 12pt;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
/* Drop Downs / Other Madcap Specific Stying */
MadCap|dropDown
{
border-bottom: 1px solid var(--ui-0);
mc-image-position: left;
mc-image-spacing: 10px;
mc-open-image: url('../Images/Minus.png');
mc-closed-image: url('../Images/Plus.png');
padding: 10px 0;
}
MadCap|dropDownBody
{
padding: 0px 10px 10px;
}
MadCap|dropDownHotspot
{
cursor: hand;
border-bottom: none;
}
MadCap|expandingBody
{
color: #000000;
font-style: italic;
}
MadCap|expandingHead
{
font-style: italic;
font-weight: normal;
cursor: hand;
text-decoration: none;
color: #000000;
}
MadCap|xref
{
font-weight: bold;
mc-format: '{para}';
text-decoration: underline;
color: #000000;
}
div.Helpful-Two-Column /*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;
mc-hidden: hidden;
}
div.Helpful-Two-Column::before
{
content: ' ';
display: table;
}
div.Helpful-Two-Column::after
{
content: ' ';
display: table;
clear: both;
}
div.Helpful-Two-Column > div
{
float: left;
-moz-box-sizing: border-box;
background-color: #F8F9FA;
margin-bottom: 10px;
}
div.Helpful-Two-Column > div:nth-child(1)
{
width: 66.66667%;
margin-left: 0%;
padding-top: 6px;
padding-left: 10px;
}
div.Helpful-Two-Column > div:nth-child(2)
{
width: 33.33333%;
margin-left: 0%;
padding-top: 6px;
padding-left: 10px;
}
/* Lists */
dd,
dd p,
dt,
dt p,
li,
li p
{
margin-bottom: 8px;
margin-top: 8px;
}
dl,
ol,
ul
{
letter-spacing: .25px;
line-height: 20pt;
margin-top: 0px;
margin-bottom: 0px;
}
/* Master page */
div.home-footer
{
background-color: var(--ui-0);
padding: 2% 5%;
mc-hidden: hidden;
}
p.footer
{
margin-top: 5px;
margin-bottom: 5px;
line-height: 13pt;
color: var(--ui-0);
mc-hidden: hidden;
}
p.footer-sub
{
color: var(--ui-0);
font-size: 14pt;
margin-top: 14px;
mc-hidden: hidden;
}
/* Status Bar - shown at the top of screens with titles, date created modified and history */
div.Status-Bar
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
height: auto;
mc-hidden: hidden;
}
div.Status-Bar::before
{
content: ' ';
display: table;
mc-hidden: hidden;
}
div.Status-Bar::after
{
content: ' ';
display: table;
clear: both;
mc-hidden: hidden;
}
div.Status-Bar > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
mc-hidden: hidden;
}
div.Status-Bar > div:nth-child(1)
{
width: 55%;
margin-left: 0%;
border: 1px solid #DFE3E6;
border-radius: 8px 0 0 8px;
background-color: #FBFCFD;
height: 36px;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
border-right: none;
}
div.Status-Bar > div:nth-child(2)
{
width: 45%;
text-align: right;
border: 1px solid #DFE3E6;
border-radius: 0 8px 8px 0;
background-color: #FBFCFD;
height: 36px;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
border-left: none;
}
/* Tab Strips - used where you can navigate to multiple pages from other pages not having to use the side nav */
/* 2-1 = 2 Buttons, Button 1 Selected */
/* 2-2 = 2 Buttons, Button 2 Selected */
div.Tab-Strip-Button-2-2::before
{
content: ' ';
display: table;
}
div.Tab-Strip-Button-2-2::after
{
content: ' ';
display: table;
clear: both;
}
div.Tab-Strip-Button-2-2 > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.Tab-Strip-Button-2-2 > div:nth-child(1)
{
width: auto;
height: 32px;
margin-left: 0%;
display: inline-block;
margin-right: 10px;
}
div.Tab-Strip-Button-2-2 > div:nth-child(2)
{
width: auto;
margin-left: auto;
height: 32px;
padding-left: 8px;
display: inline-block;
background-color: #000000;
border-radius: 8px;
padding-left: 10px;
padding-right: 10px;
}
div.Hero-Banner /*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;
mc-hidden: hidden;
}
div.Hero-Banner::before
{
content: ' ';
display: table;
}
div.Hero-Banner::after
{
content: ' ';
display: table;
clear: both;
}
div.Hero-Banner > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.Hero-Banner > div:nth-child(1)
{
width: 100%;
height: 220px;
margin-left: 0%;
background: linear-gradient(180deg, #DFF3F2 0%, #F8F9FA 100%);
padding-left: 25px;
padding-top: 10px;
}
div.Hero-Banner > div:nth-child(2)
{
width: 100%;
height: 100px;
background: linear-gradient(to right, #00254D, white);
padding-top: 25px;
}
/*==Drop Down Styles==*/
.dropDownHotspot:link
{
font-weight: 600;
}
.dropDownHotspot:hover
{
font-weight: 600;
}
MadCap|dropDown.Section-DropDown
{
border-bottom: solid 2px #DFE3E6;
mc-image-position: left;
mc-image-spacing: 20px;
padding: 1px 0;
}
MadCap|dropDownHead.Section-DropDown
{
line-height: 65px;
overflow: hidden;
padding: 10px 15px 10px 30px;
font-family: Inter;
font-weight: bold;
font-size: 12pt;
color: black;
border-top: solid 2px #DFE3E6;
text-indent: -15px;
}
MadCap|dropDownBody.Section-DropDown
{
margin-left: 41px;
}
.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage.Section-DropDown
{
background-image: url('../Images/Icons/FwdArrow_Black.svg') !important;
}
.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage.Section-DropDown
{
background-image: url('../Images/Icons/DwnArrow_Black.svg') !important;
}
.MCDropDown dropDown dropDownSection-DropDown MCDropDown_Open
{
border-bottom: solid 2px #DFE3E6;
}
MadCap|dropDown.Narrow-Section-DropDown
{
border-bottom: solid 2px #DFE3E6;
mc-image-position: left;
mc-image-spacing: 20px;
padding: 1px 0;
margin-bottom: 25px;
}
MadCap|dropDownHead.Narrow-Section-DropDown
{
line-height: 25px;
overflow: hidden;
padding: 10px 15px 10px 30px;
font-family: Inter;
font-weight: bold;
font-size: 12pt;
color: black;
text-indent: -15px;
border-top: solid 2px #DFE3E6;
}
MadCap|dropDownBody.Narrow-Section-DropDown
{
margin-left: 41px;
}
.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage.Narrow-Section-DropDown
{
background-image: url('../Images/Icons/FwdArrow_Black.svg') !important;
}
.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage.Narrow-Section-DropDown
{
background-image: url('../Images/Icons/DwnArrow_Black.svg') !important;
}
.MCDropDown dropDown dropDownNarrow-Section-DropDown MCDropDown_Open
{
border-bottom: solid 2px #DFE3E6;
}
MadCap|dropDown.FAQ-DropDown
{
border-bottom: solid 2px #DFE3E6;
mc-image-position: left;
mc-image-spacing: 20px;
padding: 1px 0;
border-left: solid 2px #DFE3E6;
border-right: solid 2px #DFE3E6;
border-top: solid 2px #DFE3E6;
}
MadCap|dropDownHead.FAQ-DropDown
{
line-height: 65px;
overflow: hidden;
padding: 10px 15px;
font-family: Inter;
font-weight: bold;
font-size: 12pt;
color: black;
background-color: #f5f5f5;
}
MadCap|dropDownBody.FAQ-DropDown
{
margin-left: 41px;
}
.MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage.FAQ-DropDown
{
background-image: url('../Images/Icons/FwdArrow_Black.svg') !important;
}
.MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage.FAQ-DropDown
{
background-image: url('../Images/Icons/DwnArrow_Black.svg') !important;
}
.MCDropDown dropDown dropDownFAQ-DropDown MCDropDown_Open
{
border-bottom: solid 2px #DFE3E6;
border-left: solid 2px #DFE3E6;
border-right: solid 2px #DFE3E6;
}
.dropDown.dropDownFAQ-DropDown
{
background-color: #f5f5f5;
margin-bottom: 15px;
margin-top: 15px;
}
.dropDown.dropDownFAQ-DropDown a
{
color: var(--Egyptian-Teal);
}
div.Home-Product-Header /*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.*/
{
display: flex;
flex-wrap: wrap;
/*mc-grid-row: true;*/
margin-left: auto;
margin-right: auto;
mc-hidden: hidden;
}
div.Home-Product-Header::before
{
content: ' ';
display: table;
}
div.Home-Product-Header::after
{
content: ' ';
display: table;
clear: both;
}
div.Home-Product-Header > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
mc-hidden: hidden;
}
div.Home-Product-Header > div:nth-child(1)
{
width: 66.66667%;
margin-left: 0%;
padding-left: 10px;
padding-top: 25px;
}
div.Home-Product-Header > div:nth-child(2)
{
width: 33.33333%;
margin-left: 0%;
padding: 10px;
}
MadCap|slideshow
{
border-style: none;
box-shadow: none !important;
}
.mc-wrapper .mc-viewport
{
box-shadow: none;
mc-hidden: hidden;
}
div.Module-Home-3Tiles /*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;
mc-hidden: hidden;
}
div.Module-Home-3Tiles::before
{
content: ' ';
display: table;
}
div.Module-Home-3Tiles::after
{
content: ' ';
display: table;
clear: both;
}
div.Module-Home-3Tiles > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 12px;
}
div.Module-Home-3Tiles > div:nth-child(1)
{
width: 32%;
margin-left: 0.666%;
}
div.Module-Home-3Tiles > div:nth-child(2)
{
width: 32%;
margin-left: 1.3333%;
}
div.Module-Home-3Tiles > div:nth-child(3)
{
width: 32%;
margin-left: 1.3333%;
}
/* 3TilesMiniPanels Are used to create the home page boxes with icon, heading and text */
div.TilesMiniPanels3
{
font-family: Inter;
color: #000000;
border: 1px solid #C1C8CD;
border-radius: 12px;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(240px, 1fr));
flex-direction: column;
align-items: flex-start;
align-self: stretch;
padding-left: 20px;
padding-right: 20px;
margin-top: 14px;
margin-right: 14px;
mc-hidden: hidden;
}
div.TilesMiniPanels3 p
{
font-size: 12pt;
font-weight: 400;
color: var(--ui-1100);
margin: 0;
padding-bottom: 12px;
}
div.TilesMiniPanels3:hover
{
background-color: var(--Light-Mint-Teal);
}
.TilesMiniPanels3 .flex-container
{
display: flex;
align-items: center;
margin: -5px;
gap: 12px;
}
/* 3SuperTilesMiniPanels Are used to create the home page boxes with icon, heading and text */
div.TilesSuperMiniPanels3
{
font-family: Inter;
color: #000000;
border: 1px solid #C1C8CD;
border-radius: 12px;
display: grid;
grid-template-rows: repeat(auto-fit, minmax(95px, 1fr));
flex-direction: column;
align-items: flex-start;
align-self: stretch;
padding-left: 20px;
padding-right: 20px;
margin-top: 14px;
margin-right: 14px;
mc-hidden: hidden;
}
div.TilesSuperMiniPanels3 p
{
font-size: 12pt;
font-weight: 400;
color: var(--ui-1100);
margin: 0;
padding-bottom: 12px;
}
div.TilesSuperMiniPanels3:hover
{
background-color: var(--Light-Mint-Teal);
}
.TilesSuperMiniPanels3 .flex-container
{
display: flex;
align-items: center;
margin: -5px;
gap: 12px;
mc-hidden: hidden;
}
/*Time Lines*/
/* The actual timeline (the vertical ruler) */
.timeline
{
position: relative;
max-width: 1200px;
/*margin: 0 auto; */
mc-hidden: hidden;
}
/* The actual timeline (the vertical ruler) */
.timeline::after
{
content: '';
position: absolute;
width: 4px;
background-color: var(--Egyptian-Teal);
top: 0;
bottom: 0;
left: 0%;
margin-left: -3px;
}
/* Container around content */
.container-timeline
{
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 85%;
}
/* The circles on the timeline */
.container-timeline::after
{
content: attr(data-step);
position: absolute;
width: 30px;
height: 30px;
left: -15px;
background-color: var(--Egyptian-Teal);
top: 15px;
border-radius: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
}
/* Place the container to the left */
.left
{
left: 0;
}
/* Place the container to the right */
.right
{
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before
{
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid gray;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent gray;
}
/* Add arrows to the right container (pointing left) */
.left::before
{
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid var(--ui-800);
border-width: 10px 10px 10px 0;
border-color: transparent var(--ui-800) transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after
{
left: -16px;
}
/* The actual content */
.content-timeline
{
padding: 1px 30px;
position: relative;
border: 1px solid var(--ui-800);
border-radius: 6px;
mc-hidden: hidden;
}
.content-timeline p
{
margin-right: 50px;
}
.content-timeline:hover
{
background-color: var(--Light-Mint-Teal);
}
/*Highlights/Warnings/Info Section*/
div.Highlight-Red-Info
{
background-color: var(--negative-300);
font-family: Inter;
color: #000000;
background-image: url('../Images/Icons/InfoIcon_Red.svg');
background-repeat: no-repeat;
background-position: 8px center;
padding: 10px 10px 10px 40px;
margin-bottom: 15px;
font-size: 12pt;
line-height: 20pt;
letter-spacing: 0.25px;
}
div.Highlight-Red-Info a
{
color: var(--Egyptian-Teal);
}
div.Highlight-Red-Warn
{
background-color: var(--negative-300);
font-family: Inter;
color: #000000;
background-image: url('../Images/Icons/Caution_Red.svg');
background-repeat: no-repeat;
background-position: 8px center;
padding: 10px 10px 10px 40px;
margin-bottom: 15px;
font-size: 12pt;
line-height: 20pt;
letter-spacing: 0.25px;
}
div.Highlight-Red-Warn a
{
color: var(--Egyptian-Teal);
}
div.Highlight-Teal-Info
{
font-family: Inter;
color: #000000;
background-repeat: no-repeat;
background-position: 8px center;
padding: 10px 10px 10px 40px;
font-size: 12pt;
margin-bottom: 15px;
background-color: var(--Light-Mint-Teal);
background-image: url('../Images/Icons/InfoIcon_Teal.svg');
line-height: 20pt;
letter-spacing: 0.25px;
}
div.Highlight-Purple-Video
{
font-family: Inter;
color: #000000;
background-repeat: no-repeat;
background-position: 8px center;
padding: 10px 10px 10px 40px;
font-size: 12pt;
margin-bottom: 15px;
background-color: var(--purple-300);
background-image: url('../Images/Icons/VideoIcon_Purple.svg');
line-height: 20pt;
letter-spacing: 0.25px;
}
div.youtube-video-container
{
background-color: var(--purple-300);
border-radius: 12px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 45px;
padding-left: 45px;
width: 650px;
background-repeat: no-repeat;
background-position: 8px center;
background-image: url('../Images/Icons/VideoIcon_Purple.svg');
}
div.Highlight-Teal-Info a
{
font-weight: 500;
}
div.Highlight-Teal-Check
{
font-family: Inter;
color: #000000;
background-repeat: no-repeat;
background-position: 12px center;
padding: 10px 10px 10px 40px;
margin-bottom: 15px;
background-image: url('../Images/Icons/Tick_Teal.svg');
background-color: var(--Light-Mint-Teal);
line-height: 20pt;
letter-spacing: 0.25px;
}
div.Highlight-Teal-Check a
{
color: var(--Egyptian-Teal);
font-weight: 500;
}
div.Highlight-Teal-Check h5
{
color: var(--Egyptian-Teal);
padding-left: 10px;
margin-bottom: 20px;
margin-top: 18px;
}
div.Highlight-Teal-Example
{
font-family: Inter;
color: #000000;
background-repeat: no-repeat;
padding: 1px 10px 10px 40px;
font-size: 12pt;
margin-bottom: 15px;
background-image: url('../Images/Icons/Tick_Teal.svg');
background-position: 12px 22px;
background-color: var(--Light-Mint-Teal);
letter-spacing: 0.25px;
}
div.Highlight-Teal-Example a
{
color: var(--Egyptian-Teal);
font-weight: 500;
}
div.Highlight-Teal-Example h5
{
color: var(--Egyptian-Teal);
padding-left: 10px;
margin-bottom: 20px;
margin-top: 18px;
}
div.Highlight-Teal-Info
{
font-family: Inter;
color: #000000;
background-repeat: no-repeat;
background-position: 6px center;
padding: 10px 10px 10px 40px;
font-size: 12pt;
margin-bottom: 15px;
background-image: url('../Images/Icons/InfoIcon_Teal.svg');
background-color: var(--Light-Mint-Teal);
line-height: 20pt;
letter-spacing: 0.25px;
}
div.Highlight-Teal-MiniTOC
{
font-family: Inter;
color: #000000;
background-repeat: no-repeat;
background-position: 12px 20px;
padding: 1px 10px 1px 40px;
margin-bottom: 15px;
background-image: url('../Images/Icons/InfoIcon_Teal.svg');
background-color: var(--Light-Mint-Teal);
line-height: 20pt;
letter-spacing: 0.25px;
}
div.Highlight-Teal-Topics
{
font-family: Inter;
color: #000000;
background-repeat: no-repeat;
background-position: 8px Center;
padding: 1px 10px 10px 40px;
font-size: 12pt;
margin-bottom: 15px;
background-image: url('../Images/Icons/Topic_List.svg');
background-color: var(--Light-Mint-Teal);
background-position: 12px 22px;
letter-spacing: 0.25px;
}
div.Highlight-Teal-Topics h5
{
color: var(--Egyptian-Teal);
margin-bottom: 20px;
margin-top: 18px;
padding-left: 10px;
}
div.Highlight-Teal-Info h5
{
color: var(--Egyptian-Teal);
margin-bottom: 20px;
margin-top: 18px;
padding-left: 10px;
}
div.Highlight-Grey-Info a
{
color: var(--Egyptian-Teal);
font-weight: 500;
}
div.Highlight-Amber-Warn
{
font-family: Inter;
color: #000000;
background-repeat: no-repeat;
background-position: 8px center;
padding: 10px 10px 10px 40px;
font-size: 12pt;
margin-bottom: 15px;
background-color: var(--warning-300);
background-image: url('../Images/Icons/Caution_Amber.svg');
line-height: 20pt;
letter-spacing: 0.25px;
}
div.Highlight-Grey-Info
{
font-family: Inter;
color: #000000;
background-repeat: no-repeat;
padding: 10px 10px 10px 40px;
font-size: 12pt;
margin-bottom: 15px;
background-color: var(--ui-300);
background-image: url('../Images/Icons/InfoIcon_Teal.svg');
background-position: 8px center;
line-height: 20pt;
letter-spacing: 0.25px;
}
/*END OF Highlights/Warnings/Info Section***********************************************/
/*Quick Links section*/
div.QuickLinks
{
background-color: var(--ui-0);
padding-left: 10px;
padding-top: 1px;
padding-bottom: 1px;
padding-right: 10px;
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: left;
margin-top: 10px;
mc-hidden: hidden;
}
div.QuickLinks:hover
{
font-weight: 500;
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
div.QuickLinks p
{
font-size: 14pt;
font-weight: 500;
color: var(--Egyptian-Teal);
}
div.QuickLinks a
{
color: var(--ui-0);
}
div.micro-response a
{
color: var(--Egyptian-Teal);
font-size: 12pt;
font-weight: 500;
}
/*END OF QuickLinks***********************************************/
/* MiniPanels Are used to create the home page boxes with icon, heading and text */
div.MiniPanels
{
font-family: Inter;
color: #000000;
background-color: white;
border: 1px solid #C1C8CD;
border-radius: 12px;
display: flex;
height: auto;
/* Increase the height to accommodate the new rows */
flex-direction: column;
align-items: flex-start;
align-self: stretch;
padding-left: 20px;
padding-right: 20px;
margin-top: 14px;
margin-right: 14px;
z-index: 1;
mc-hidden: hidden;
}
div.MiniPanels p
{
font-size: 12pt;
font-weight: 400;
color: var(--ui-1100);
margin: 0;
padding-bottom: 12px;
}
div.MiniPanels:hover
{
background-color: var(--Light-Mint-Teal);
background-image: none;
}
.MiniPanels .flex-container
{
display: flex;
align-items: center;
margin: -5px;
gap: 12px;
}
#resultList .description
{
line-height: 1.5em;
margin-bottom: 10px;
mc-hidden: hidden;
}
div.Product-Title-withIcon /*Used on Product Home Pages with New Icons and H1 Text for Help For X*/
{
mc-grid-row: true;
margin-left: auto;
margin-right: auto;
mc-hidden: hidden;
}
div.Product-Title-withIcon::before
{
content: ' ';
display: table;
}
div.Product-Title-withIcon::after
{
content: ' ';
display: table;
clear: both;
}
div.Product-Title-withIcon > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.Product-Title-withIcon > div:nth-child(1)
{
width: 5%;
margin-left: 0%;
max-width: 65px;
}
div.Product-Title-withIcon > div:nth-child(2)
{
width: 95%;
margin-left: 0%;
padding-top: 5px;
padding-left: 10px;
}
p.MiniTOC1
{
font-weight: 500;
color: var(--Egyptian-Teal);
}
a.MiniTOC1_0:hover
{
color: var(--Pale-Teal);
text-decoration: underline var(--brand-rasberry);
text-decoration-thickness: 2px;
}
MadCap|miniTocProxy
{
border-top-style: none;
padding-top: 1px;
margin-top: 1px;
}
div.Blogs-Guides /*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;
overflow: auto;
mc-hidden: hidden;
display: flex;
align-items: stretch;
}
div.Blogs-Guides::before
{
content: ' ';
display: table;
mc-hidden: hidden;
}
div.Blogs-Guides::after
{
content: ' ';
display: table;
clear: both;
mc-hidden: hidden;
}
div.Blogs-Guides > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 20px;
}
div.Blogs-Guides > div:nth-child(1)
{
width: 30%;
margin-left: 0%;
min-height: 250px;
height: auto;
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
div.Blogs-Guides > div:nth-child(2)
{
width: 70%;
margin-left: 0%;
border-top: 1px solid #C1C8CD;
border-right: 1px solid #C1C8CD;
border-bottom: 1px solid #C1C8CD;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
padding-top: 20px;
padding-right: 25px;
padding-left: 25px;
min-height: 250px;
height: auto;
position: relative;
display: block;
}
div.Blogs-Guides > div:nth-child(2):hover
{
background-color: var(--Light-Mint-Teal);
cursor: pointer;
}
div.Blogs-Guides > div:nth-child(2) p
{
font-weight: 400 !important;
}
div.read-more
{
position: absolute;
bottom: 12px;
right: 12px;
display: flex;
align-items: center;
gap: 8px;
/* Space between text and circle */
cursor: pointer;
}
/* Style the "Read More" text */
.read-more span
{
font-size: 14px;
font-weight: 500;
color: var(--Egyptian-Teal);
transition: color 0.3s ease;
}
/* The circular button */
.read-more-circle
{
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--Egyptian-Teal);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: background-color 0.3s ease, transform 0.2s ease;
}
/* Add the arrow inside the circle */
.read-more-circle::before
{
content: "";
width: 20px;
height: 20px;
background-image: url('../Images/Icons/FwdArrowT_White.svg');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: absolute;
}
/* Make sure the link fills the entire area */
.read-more a
{
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
/* Hover Effects
.read-more:hover span {
color: #005f73;
}
.read-more:hover .read-more-circle {
background-color: var(--Raspberry);
transform: scale(1.1);
}
*/
.New-Features-Header p
{
display: inline-block;
background-color: var(--Light-Mint-Teal);
border-radius: 8px;
line-height: 32px;
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
}
.New-Features-Header p:hover
{
background-color: var(--Pale-Teal);
}
div.Search-Results /*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.Search-Results::before
{
content: ' ';
display: table;
}
div.Search-Results::after
{
content: ' ';
display: table;
clear: both;
}
div.Search-Results > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.Search-Results > div:nth-child(1)
{
width: 62%;
margin-left: 0%;
}
div.Search-Results > div:nth-child(2)
{
width: 35%;
margin-left: 1.5%;
margin-right: 1.5%;
}
div.Video-4-Containers /*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;
mc-hidden: hidden;
}
div.Video-4-Containers::before
{
content: ' ';
display: table;
}
div.Video-4-Containers::after
{
content: ' ';
display: table;
clear: both;
}
div.Video-4-Containers > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.Video-4-Containers > div:nth-child(1)
{
width: 25%;
margin-left: 0%;
padding: 10px;
max-height: fit-content;
}
div.Video-4-Containers > div:nth-child(2)
{
width: 25%;
margin-left: 0%;
padding: 10px;
max-height: fit-content;
}
div.Video-4-Containers > div:nth-child(3)
{
width: 25%;
margin-left: 0%;
padding: 10px;
max-height: fit-content;
}
div.Video-4-Containers > div:nth-child(4)
{
width: 25%;
margin-left: 0%;
padding: 10px;
max-height: fit-content;
}
div.New-Features-Left /*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;
background-color: var(--ui-100);
border-radius: 12px;
margin: 0px;
mc-hidden: hidden;
}
div.New-Features-Left::before
{
content: ' ';
display: table;
}
div.New-Features-Left::after
{
content: ' ';
display: table;
clear: both;
}
div.New-Features-Left > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.New-Features-Left > div:nth-child(1)
{
width: 50%;
margin-right: 1%;
padding-left: 25px;
height: auto;
}
div.New-Features-Left > div:nth-child(1) h5
{
font-weight: 500;
}
div.New-Features-Left > div:nth-child(2)
{
width: 45%;
margin-left: 0%;
height: auto;
position: relative;
padding-top: 10px;
}
div.New-Features-Left > div:nth-child(2) img
{
position: relative;
top: 0;
/*left: 25%;*/
object-fit: contain;
background: var(--Light-Mint-Teal);
border-radius: 12px;
}
div.New-Features-Left > div:nth-child(2) iframe.youtube-player_0
{
width: 340px;
height: 188px;
}
div.New-Features-Right /*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;
background-color: var(--ui-100);
border-radius: 12px;
margin: 0px;
mc-hidden: hidden;
}
div.New-Features-Right::before
{
content: ' ';
display: table;
}
div.New-Features-Right::after
{
content: ' ';
display: table;
clear: both;
}
div.New-Features-Right > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.New-Features-Right > div:nth-child(1)
{
width: 45%;
margin-left: 0%;
padding-top: 10px;
height: auto;
position: relative;
}
div.New-Features-Right > div:nth-child(2)
{
width: 50%;
margin-right: 10px;
margin-left: 10px;
height: auto;
}
div.New-Features-Right > div:nth-child(1) img
{
position: relative;
/* This allows precise positioning within the parent */
top: 0;
/* Align the image to the bottom */
/*left: 25px;*/
object-fit: contain;
background: var(--Light-Mint-Teal);
border-radius: 12px;
}
div.New-Features-Right > div:nth-child(1) iframe.youtube-player_0
{
width: 340px;
height: 188px;
}
.img-scale-small
{
transform: scale(0.6);
max-width: 65%;
height: auto;
}
.img-scale-medium
{
transform: scale(0.8);
max-width: 85%;
height: auto;
}
.img-scale-large
{
transform: scale(1);
max-width: 100%;
height: auto;
}
div.noPageBreak
{
page-break-inside: avoid;
mc-hidden: hidden;
}
MadCap|codeSnippetCopyButton:link
{
font-size: 10pt;
font-weight: 500;
}
MadCap|codeSnippetCopyButton:hover
{
color: var(--Egyptian-Teal);
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
font-weight: 500;
text-underline-offset: 4px;
}
MadCap|codeSnippet
{
}
MadCap|popupHead
{
color: var(--Egyptian-Teal);
font-weight: 500;
}
MadCap|popup:hover
{
text-decoration: underline var(--Raspberry);
text-decoration-thickness: 2px;
font-weight: 500;
text-underline-offset: 4px;
}
.popupBody
{
font-size: 10pt;
color: var(--Egyptian-Teal);
background-color: var(--Light-Mint-Teal);
}
h3.title
{
mc-hidden: hidden;
}
p.tab-bar-unselected
{
mc-hidden: hidden;
}
div.micro-response
{
mc-hidden: hidden;
}
/* This section controls tabs in What's New Pages so that they show in the correct style with the active tab, this is also in conjunction with Tabs-Dynamic*.js and Div within Whats Pages with */
.tabs-container
{
display: flex;
justify-content: center;
margin-top: 20px;
}
.tabs
{
display: flex;
border-bottom: 1px solid #DFE3E6;
}
.tab
{
display: inline-block;
padding: 10px 10px;
font-size: 16px;
font-weight: 500;
text-decoration: none;
color: #687076 !important;
gap: 8px;
width: max-content;
}
.tab.active
{
font-weight: 500;
border-radius: 1px 1px 0px 0px;
border-bottom: 2px solid #000 !important;
color: #000 !important;
display: inline-block;
width: max-content;
}
.tab:hover
{
cursor: pointer;
/* End of tabs section above */
}
div.Hardware-Images /*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.Hardware-Images::before
{
content: ' ';
display: table;
}
div.Hardware-Images::after
{
content: ' ';
display: table;
clear: both;
}
div.Hardware-Images > div
{
float: left;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
div.Hardware-Images > div:nth-child(1)
{
width: 33.33333%;
margin-left: 0%;
}
div.Hardware-Images > div:nth-child(2)
{
width: 33.33333%;
margin-left: 0%;
}
div.Hardware-Images > div:nth-child(3)
{
width: 33.33333%;
margin-left: 0%;
}
MadCap|menuProxy
{
--accent-100: inherit;
}
@media only screen and (max-width: 1279px)
{
.timeline
{
max-width: 100%;
/* Ensure the timeline stretches across available width */
left: 20px;
/* Add some padding from the left */
}
ul.off-canvas-accordion ul ul > li > a
{
margin-left: 1em !important;
}
.container-timeline
{
width: 100%;
/* Allow each container to take up the full width */
padding-left: 40px;
padding-right: 40px;
}
.container-timeline::after
{
}
.left
{
width: 100%;
/* Stack elements vertically on smaller screens */
left: 0;
/* Ensure they're aligned to the left */
margin-left: 0;
}
.content-timeline
{
padding: 10px 20px;
/* Adjust padding to fit better on small screens */
margin-left: 45px;
}
.left::before
{
left: 75px;
}
.off-canvas.position-left
{
height: 100%;
overflow-y: auto;
scrollbar-width: 6px;
scrollbar-color: #3F4350 #dddddd;
border-right: solid 2px var(--ui-600);
padding-right: 20px;
padding-top: 20px;
}
.position-left.is-open
{
padding-top: 20px;
}
.position-left
{
width: 250px;
}
ul.off-canvas > li.tree-node.tree-node-leaf[data-mc-id="0"] > a::before
{
content: url('../Images/Icons/House_Black.svg');
position: absolute;
left: 11px;
top: 12px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas > li.tree-node.tree-node-leaf[data-mc-id="0"] > a.selected::before
{
content: url('../Images/Icons/House_Teal.svg');
position: absolute;
left: 11px;
top: 12px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*TABLET/1001 This section controls special icons for side navigation in conjunction with classes added to side nav skins */
/*Kitchen iQ Brand Icon*/
ul.off-canvas > li.tree-node.Kitchen-iQ.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_KitcheniQ_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas > li.tree-node.Kitchen-iQ.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_KitcheniQ_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Acquire Brand Icon*/
ul.off-canvas > li.tree-node.Acquire.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Acquire_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas > li.tree-node.Acquire.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_Acquire_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Payments Brand Icon*/
ul.off-canvas > li.tree-node.Payments.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Payments_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas > li.tree-node.Payments.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_Payments_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Point of Sale Brand Icon*/
ul.off-canvas > li.tree-node.POS.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_POS_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas > li.tree-node.POS.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_POS_XTiny.svg');
position: absolute;
left: 12px;
top: 77px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Ordering Brand Icon*/
ul.off-canvas > li.tree-node.Ordering.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Ordering_XTiny.svg');
position: absolute;
left: 12px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas > li.tree-node.Ordering.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_Ordering_XTiny.svg');
position: absolute;
left: 12px;
top: 77px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Whats New Icon*/
ul.off-canvas > li.tree-node.Whats-New.tree-node-leaf::before
{
content: url('../Images/Icons/New_Black_XTiny.svg');
position: absolute;
left: 12px;
top: 120px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas > li.tree-node.Whats-New.tree-node-leaf > a.selected::before
{
content: url('../Images/Icons/New_Teal_XTiny.svg');
position: absolute;
left: 12px;
top: 120px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas > li.tree-node.Whats-New.tree-node-leaf.tree-node-selected::before
{
content: none;
}
/* End of 1001 */
ul.off-canvas-list ul > li > a.selected
{
background-image: url('../Images/Icons/Accent_Teal.svg');
background-position: left center;
background-repeat: no-repeat;
font-weight: 600;
}
ul.off-canvas-list li li a.selected
{
background-image: url('../Images/Icons/Accent_Teal.svg');
background-position: left center;
background-repeat: no-repeat;
font-weight: 600;
}
ul.off-canvas-list ul > li > a.selected
{
background-image: url('../Images/Icons/Accent_Teal.svg');
background-position: left center;
background-repeat: no-repeat;
font-weight: 600;
}
ul.off-canvas-list ul ul > li > a.selected
{
background-image: url('../Images/Icons/Accent_Teal.svg');
background-position: left center;
background-repeat: no-repeat;
font-weight: 600;
}
/* ul.off-canvas-list > li:nth-child(n+2) > a.selected::before
{
content: url('../Images/Icons/Layers_Teal.svg');
position: absolute;
left: 8px;
top: 12px;
}*/
ul.off-canvas-list > li:nth-child(1) > a::before
{
content: url('../Images/Icons/House_Black.svg');
position: absolute;
left: 10px;
top: 32px;
}
ul.off-canvas-list > li:nth-child(1) > a.selected::before
{
content: url('../Images/Icons/House_Teal.svg');
position: abolute;
left: 10px;
top: 32px;
}
/*MOBILE/1001 This section controls special icons for side navigation in conjunction with classes added to side nav skins */
/*Kitchen iQ Brand Icon*/
ul.off-canvas-list > li.tree-node.Kitchen-iQ.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_KitcheniQ_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas-list > li.tree-node.Kitchen-iQ.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_KitcheniQ_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Acquire Brand Icon*/
ul.off-canvas-list > li.tree-node.Acquire.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Acquire_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas-list > li.tree-node.Acquire.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_Acquire_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Point of Sale iQ Brand Icon*/
ul.off-canvas-list > li.tree-node.POS.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_POS_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas-list > li.tree-node.POS.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_POS_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Ordering Brand Icon*/
ul.off-canvas-list > li.tree-node.Ordering.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_Ordering_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas-list > li.tree-node.Ordering.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Ordering_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Payments Brand Icon*/
ul.off-canvas-list > li.tree-node.Payments.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_Payments_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas-list > li.tree-node.Payments.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Payments_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Hardware Brand Icon*/
ul.off-canvas-list > li.tree-node.Ordering.tree-node-leaf-selected > a.selected::before
{
content: url('../Images/Branding/Icon_Hardware_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas-list > li.tree-node.Ordering.tree-node-leaf::before
{
content: url('../Images/Branding/Icon_Hardware_XTiny.svg');
position: absolute;
left: 16px;
top: 75px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
/*Whats New Icon*/
ul.off-canvas-list > li.tree-node.Whats-New.tree-node-leaf::before
{
content: url('../Images/Icons/New_Black_XTiny.svg');
position: absolute;
left: 16px;
top: 120px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas-list > li.tree-node.Whats-New.tree-node-leaf > a.selected::before
{
content: url('../Images/Icons/New_Teal_XTiny.svg');
position: absolute;
left: 16px;
top: 120px;
z-index: 1;
display: block;
margin: 0;
padding: 0;
}
ul.off-canvas-list > li.tree-node.Whats-New.tree-node-leaf.tree-node-selected::before
{
content: none;
}
/*End of 1001*/
ul.off-canvas-list > li.is-accordion-submenu-parent:nth-child(n+2) > a::before
{
content: url('../Images/Icons/Side_Black.svg');
position: absolute;
left: 8px;
top: 12px;
}
/* Customize the appearance of the scrollbar */
.off-canvas.position-left::-webkit-scrollbar
{
width: 8px;
}
.off-canvas.position-left::-webkit-scrollbar-thumb
{
background-color: rgba(63, 67, 80, 0.24);
border-radius: 3px;
}
.off-canvas.position-left::-webkit-scrollbar-track
{
background-color: #fffff;
border-radius: 3px;
}
ul.off-canvas-list li a
{
font-weight: 500;
}
div.Helpful-Two-Column > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.Helpful-Two-Column > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
html.home-topic .body-container
{
margin-left: 0;
}
.js-off-canvas-exit
{
box-shadow: none;
}
div.Status-Bar > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
border-radius: 8px;
border: 1px solid #DFE3E6;
margin-bottom: 10px;
}
div.Status-Bar > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
border-radius: 8px;
text-align: center;
border: 1px solid #DFE3E6;
height: auto;
}
div.Tab-Strip-Button-2-2 > div:nth-child(1)
{
width: 50%;
margin-left: 0%;
}
div.Tab-Strip-Button-2-2 > div:nth-child(2)
{
width: 50%;
margin-left: 0%;
}
div.Hero-Banner > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
.is-off-canvas-list > a span.submenu-toggle /* Same as before. Removes the border that creates the default triangle shape */
{
border: none;
}
.is-off-canvas-list > a span.submenu-toggle::after /* Adds a default icon (for when the menu is collapsed). I used a white Spade this time. */
{
content: url('../Images/Icons/NavArrow_Open.svg');
/* The icon code */
position: absolute;
/* Do not change */
left: -14px;
/* The left/right positioning of the icon */
bottom: -16px;
/* The top/bottom positioning of the icon */
}
.is-off-canvas-list > a [aria-expanded='true'] span.submenu-toggle /* Stops the icon from flipping upside down when you expand the menu */
{
-webkit-transform-origin: none;
-ms-transform-origin: none;
transform-origin: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.is-off-canvas-list > a [aria-expanded='true'] span.submenu-toggle::after /* Changes the icon for when the menu is expanded - Black Icon and Blue Icons */
{
content: url('../Images/Icons/NavArrow_Close.svg');
}
div.Home-Product-Header > div:nth-child(1)
{
width: 66.66667%;
margin-left: 0%;
}
div.Home-Product-Header > div:nth-child(2)
{
width: 33.33333%;
margin-left: 0%;
}
div.TilesMiniPanels3
{
grid-template-rows: repeat(auto-fit, minmax(140px, 1fr));
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
div.Module-Home-3Tiles > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.Module-Home-3Tiles > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
div.Module-Home-3Tiles > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
/* Place the timelime to the left */
.timeline::after
{
left: 31px;
}
/* Full-width containers */
.container
{
width: 100%;
padding-left: 70px;
padding-right: 25px;
mc-hidden: hidden;
}
/* Make sure that all arrows are pointing leftwards */
.container::before
{
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after,
.right::after
{
left: 15px;
}
/* Make all right containers behave like the left ones */
.right
{
left: 0%;
}
div.Product-Title-withIcon > div:nth-child(1)
{
width: 5%;
margin-left: 0%;
max-width: 65px;
}
div.Product-Title-withIcon > div:nth-child(2)
{
width: 95%;
margin-left: 0%;
}
div.Blogs-Guides > div:nth-child(1)
{
width: 30%;
margin-left: 0%;
}
div.Blogs-Guides > div:nth-child(2)
{
width: 70%;
margin-left: 0%;
}
div.Search-Results > div:nth-child(1)
{
width: 60%;
margin-left: 5%;
}
div.Search-Results > div:nth-child(2)
{
width: 35%;
margin-left: 0%;
}
div.Video-4-Containers > div:nth-child(1)
{
width: 45%;
margin-left: 3%;
padding: 10px;
max-height: max-content;
}
div.Video-4-Containers > div:nth-child(2)
{
width: 45%;
margin-left: 2%;
padding: 10px;
max-height: max-content;
}
div.Video-4-Containers > div:nth-child(3)
{
width: 45%;
margin-left: 3%;
padding: 10px;
max-height: max-content;
}
div.Video-4-Containers > div:nth-child(4)
{
width: 45%;
margin-left: 2%;
padding: 10px;
max-height: max-content;
}
.title-bar-layout a.logo
{
margin-left: 50px;
}
div.New-Features-Left > div:nth-child(1)
{
width: 50%;
margin-left: 0%;
}
div.New-Features-Left > div:nth-child(2)
{
width: 30%;
margin-left: 0%;
}
div.New-Features-Right > div:nth-child(1)
{
width: 30%;
margin-left: 0%;
}
div.New-Features-Right > div:nth-child(2)
{
width: 50%;
margin-left: 15%;
}
div.New-Features-Left > div:nth-child(2) img
{
left: 25%;
transform: scale(0.7);
}
div.New-Features-Right > div:nth-child(1) img
{
left: 25%;
transform: scale(0.7);
}
.title-bar-layout a.logo
{
padding-top: 50px;
}
div.Hardware-Images > div:nth-child(1)
{
width: 33.33333%;
margin-left: 0%;
}
div.Hardware-Images > div:nth-child(2)
{
width: 33.33333%;
margin-left: 0%;
}
div.Hardware-Images > div:nth-child(3)
{
width: 33.33333%;
margin-left: 0%;
}
}
@media only screen and (max-width: 767px)
{
.side-content
{
display: none;
}
.title-bar-layout a.logo
{
margin-left: 50px;
margin-top: 8px;
}
.off-canvas.position-left
{
height: 100%;
overflow-y: auto;
scrollbar-width: 6px;
scrollbar-color: #3F4350 #dddddd;
border-right: solid 2px var(--ui-600);
padding-right: 2px;
padding-top: 20px;
}
/* Customize the appearance of the scrollbar */
.off-canvas.position-left::-webkit-scrollbar
{
width: 8px;
}
.off-canvas.position-left::-webkit-scrollbar-thumb
{
background-color: rgba(63, 67, 80, 0.24);
border-radius: 3px;
}
.off-canvas.position-left::-webkit-scrollbar-track
{
background-color: #fffff;
border-radius: 3px;
}
/* Hide the div by default on mobile */
.js-off-canvas-exit
{
box-shadow: none;
}
.title-bar-layout a.logo
{
background-position: left top !important;
width: 200px;
}
div.Status-Bar > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
border-radius: 8px;
border: 1px solid #DFE3E6;
margin-bottom: 10px;
height: auto;
}
div.Status-Bar > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
border-radius: 8px;
text-align: center;
border: 1px solid #DFE3E6;
height: auto;
}
div.Tab-Strip-Button-2-2 > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.Tab-Strip-Button-2-2 > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
div.Hero-Banner > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.Helpful-Two-Column > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.Helpful-Two-Column > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
MadCap|breadcrumbsProxy
{
font-size: 10pt;
}
div.Home-Product-Header > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.Home-Product-Header > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
div.Module-Home-3Tiles > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.Module-Home-3Tiles > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
div.Module-Home-3Tiles > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
.dropDownHead.dropDownHeadFAQ-DropDown
{
line-height: 20px;
padding-left: 10px;
}
.timeline::after
{
left: 31px;
}
div.youtube-video-container
{
width: 400px;
}
iframe.youtube-player_0
{
width: 340px;
height: 188px;
}
/* Full-width containers */
.container
{
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.container::before
{
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after,
.right::after
{
left: 15px;
}
/* Make all right containers behave like the left ones */
.right
{
left: 0%;
}
div.Product-Title-withIcon > div:nth-child(1)
{
width: 10%;
margin-left: 0%;
max-width: 70px;
}
div.Product-Title-withIcon > div:nth-child(2)
{
width: 90%;
margin-left: 0%;
padding-top: 4px;
padding-left: 10px;
}
div.Blogs-Guides
{
flex-direction: column;
}
div.Blogs-Guides > div
{
margin-bottom: 0px;
}
div.Blogs-Guides > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
margin-top: 30px;
height: 180px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
div.Blogs-Guides > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
margin-top: 0%;
height: 350px;
padding-top: 5px;
border-left: 1px solid #C1C8CD;
border-right: 1px solid #C1C8CD;
border-bottom: 1px solid #C1C8CD;
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
border-top-right-radius: 0px;
}
div.read-more
{
position: absolute;
bottom: 8px;
right: 8px;
padding: 8px;
}
/*div.read-more:hover
{
border: 2px solid var(--Egyptian-Teal);
border-radius: 10px;
background-color: var(--Light-Mint-Teal);
background-position: right 10px center;
background-repeat: no-repeat;
width: 85px;
} */
/* div.read-more a
{
font-size: 10pt;
font-weight: 500;
} */
div.Search-Results > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.Search-Results > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
div.Video-4-Containers > div:nth-child(1)
{
width: 90%;
margin-left: 5%;
max-height: max-content;
padding-bottom: 10px;
}
div.Video-4-Containers > div:nth-child(2)
{
width: 90%;
margin-left: 5%;
max-height: max-content;
padding-bottom: 10px;
}
div.Video-4-Containers > div:nth-child(3)
{
width: 90%;
margin-left: 5%;
max-height: max-content;
padding-bottom: 10px;
}
div.Video-4-Containers > div:nth-child(4)
{
width: 90%;
margin-left: 5%;
max-height: max-content;
padding-bottom: 10px;
}
div.New-Features-Left > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
padding: 15px;
}
div.New-Features-Left > div:nth-child(2)
{
display: none;
}
div.New-Features-Right > div:nth-child(1)
{
display: none;
}
div.New-Features-Right > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
div.Hardware-Images > div:nth-child(1)
{
width: 100%;
margin-left: 0%;
}
div.Hardware-Images > div:nth-child(2)
{
width: 100%;
margin-left: 0%;
}
div.Hardware-Images > div:nth-child(3)
{
width: 100%;
margin-left: 0%;
}
}
@media print
{
/* Links */
MadCap|xref
{
font-weight: normal;
mc-format: '{quote}{para}{quote} {pageref}';
text-decoration: none;
}
p
{
font-size: 10pt;
}
ol
{
font-size: 10pt;
}
div.Highlight-Amber-Warn
{
font-size: 10pt;
}
div.Highlight-Grey-Info
{
font-size: 10pt;
}
div.Highlight-Red-Info
{
font-size: 10pt;
}
div.Highlight-Teal-Info
{
font-size: 10pt;
}
div.Highlight-Green-Check
{
font-size: 10pt;
}
div.Highlight-Teal-Info
{
font-size: 10pt;
}
div.Highlight-Teal-Topics
{
font-size: 10pt;
}
h1
{
font-size: 28.0pt;
font-weight: bolder;
}
h2
{
font-weight: bolder;
}
h3
{
font-weight: bolder;
}
}
MadCap|miniTocProxy.Select-Section
{
}
p.Invisible
{
font-size: 12.0pt;
line-height: 20pt;
letter-spacing: 0.25px;
font-family: Inter;
color: #000000;
visibility: hidden;
mc-hidden: hidden;
}
span.mc-variable.Status\00002EActive
{
color: var(--positive-1100);
font-weight: 500;
margin-right: 20px;
}
span.mc-variable.Status\00002EEnd_of_Life
{
color: var(--negative-1100);
font-weight: 500;
margin-right: 20px;
}