/**/ /*=========================================================================================================================================================== Hello! If this is your first time looking at a stylesheet within the text editor view, what you are reading right now is a "comment". Comments are added throughout this stylesheet with the purpose of making the source code easier to understand, comments will not be interpreted during the compile process. Since comments are not interpreted during the compile process, feel free to add or remove any comments. For help with MadCap Flare go to Help Ribbon > Topics Section > Open Help. Alternatively visit the Flare Online Help at help.madcapsoftware.com If you have any questions regarding how to work with this stylesheet or template project, please contact MadCap Technical Support. https://www.madcapsoftware.com/support/contact-options.aspx NOTE: Generally, this stylesheet has elements listed out in the order that they appear in the topic from top to bottom. The exception are General styles which are at the top and the stylesheet mediums which are at the bottom. EXAMPLE: Since the search-bar is at the top of the topic page, it will be listed closer to the top of this stylesheet. ===========================================================================================================================================================*/ /*==Topic General Styles==*/ @font-face { font-family: 'replica-regular'; src: url(../fonts/replica-regular.ttf); } @font-face { font-family: 'replica-bold'; src: url(../fonts/replica-bold.ttf); } @font-face { font-family: 'replicaprolight'; src: url(../fonts/replicaprolight.otf); } @font-face { font-family: 'replica-mono'; src: url(../fonts/replica-mono.ttf); } body { font-family: 'replica-regular', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; color: #404040; background-color: #fff; } h1 { font-family: 'replica-bold', Helvetica, Arial, sans-serif; font-size: 38px; line-height: 46px; font-weight: normal; margin-bottom: 8px; padding-bottom: 10px; margin-top: 20px; color: #494C4f; } h2 { font-family: 'replicaprolight', Helvetica, Arial, sans-serif; font-size: 28px; line-height: 36px; margin-bottom: 4px; margin-top: 18px; } h3 { font-family: 'replica-regular', Helvetica, Arial, sans-serif; font-weight: normal; font-size: 22px; line-height: 28px; margin-bottom: 4px; margin-top: 16px; } h4 { } li { margin-bottom: 6px; margin-top: 6px; } p { margin-bottom: 8px; margin-top: 8px; } p.note { background-color: #FFCCA9; background-image: url('../icons/p/note.svg'); object-fit: contain; background-position: 13px center; background-repeat: no-repeat; border-left: solid 4px #FC5704; overflow: hidden; padding: 15px 60px; border-radius: 4px; } p.tip { background-color: #C8EFD4; background-image: url('../icons/p/tip.svg'); object-fit: contain; background-position: 13px center; background-repeat: no-repeat; border-left: solid 4px #138535; overflow: hidden; padding: 15px 60px; border-radius: 4px; } p.important { background-color: #f7adad; background-image: url('../icons/p/important.svg'); object-fit: contain; background-position: 13px center; background-repeat: no-repeat; border-left: solid 4px #B21016; overflow: hidden; padding: 15px 60px; border-radius: 4px; } p.info { background-color: #a2d6f2; background-image: url('../icons/p/info.svg'); object-fit: contain; background-position: 13px center; background-repeat: no-repeat; border-left: solid 4px #0062B7; overflow: hidden; padding: 15px 60px; border-radius: 4px; } p.example { background-color: #63a0e6; background-image: url('../icons/p/example.svg'); object-fit: contain; background-position: 13px center; background-repeat: no-repeat; border-left: solid 4px #0452AB; overflow: hidden; padding: 15px 60px; border-radius: 4px; } img /*Setting max-width: 100%; property makes images always fit the width of the container*/ { max-width: 100%; } img.thumbnail { mc-thumbnail: popup; } .center { position: relative; margin-right: auto; margin-left: auto; float: none !important; text-align: center; } a.MCBreadcrumbsLink { font-style: italic; text-decoration: underline; } a.MCBreadcrumbsLink:visited { color: #494C4f; } a.MCBreadcrumbsLink:hover { color: #000000; } a { color: #0B67AF; text-decoration: none; } a:visited { color: #232B99; text-decoration: none; } .main-content a:visited[target="_blank"] { background-image: url('../icons/new-tab-used-icon.svg'); } a:hover { font-weight: normal; font-style: normal; font-stretch: normal; color: #4fc2a0; text-decoration: underline; } ul.navigation li > a:hover { letter-spacing: 0; } .searchTopic #resultList h3.title a:hover { text-decoration: none; color: #4fc2a0; } .searchTopic #pagination a:hover::after { background: #e6eaed; } .main-content a:hover[target="_blank"] { background-image: url('../icons/new-tab-hover-icon.svg'); } .versions-element .versions-dropdown a:hover { color: #4fc2a0; } .versions-element--extended .versions-dropdown a:hover { text-decoration: none; color: #b1bbc7; } a:active { color: #EB553D; text-decoration: underline; } .link-list-popup.needs-pie a:active { color: #eb553d; } .MCHelpControlList.MCRelatedTopicsControlList a:active { color: #eb553d; } var { font-size: 14px; line-height: 20px; font-family: replica-mono; display: inline-block; padding: 0 4px; margin: 0 2px; background-color: rgba(0,0,0,0.047); color: #393C44; font-style: normal; } /*==Master Page Topic Layout==*/ nav.title-bar /*Adds bottom border on top navigation bar*/ { border-bottom: 1px solid #d3d3d3; } div.top-bar /*Contains the breadcrumbs and toolbar*/ { min-height: 50px; /*Min-height is necessary for topics that are not included in a TOC*/ } /*==Elements for the left side of Master Page layout==*/ div.side-menu /*This is the div that the menu proxy is contained in*/ { padding-left: 10px; margin-top: 15px; } /*Styles that provide the border radius to the menu proxy items*/ ul.menu._Skins_SideMenu.mc-component li > a, ul.menu._Skins_SideMenuNotFixed.mc-component li > a { font-size: 16px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 29px; letter-spacing: 0.2px; color: #494c4f; padding: 5px 10px; } ul.menu._Skins_SideMenu.mc-component li > a:hover, ul.menu._Skins_SideMenuNotFixed.mc-component li > a:hover { border-radius: 4px; color: #1EBEA0; background-color: #f5f6f8; } ul.menu._Skins_SideMenu.mc-component li > a.selected, ul.menu._Skins_SideMenuNotFixed.mc-component li > a.selected { border-radius: 4px; } ul.menu._Skins_SideMenu.mc-component li > a.selected:hover, ul.menu._Skins_SideMenuNotFixed.mc-component li > a.selected:hover { border-radius: 4px; background-color: #f5f6f8; } ul.menu._Skins_SideMenu.mc-component ul > li > a, ul.menu._Skins_SideMenuNotFixed.mc-component ul > li > a { font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: 29px; letter-spacing: 0.2px; padding: 5px 10px; } ul.menu._Skins_SideMenu.mc-component ul > li > a:hover, ul.menu._Skins_SideMenuNotFixed.mc-component ul > li > a:hover { border-radius: 4px; text-color: #28bea1; background-color: #f5f6f8; } ul.menu._Skins_SideMenu.mc-component ul ul > li > a, ul.menu._Skins_SideMenuNotFixed.mc-component ul ul > li > a { font-weight: normal; font-style: normal; font-stretch: normal; line-height: 2.07; letter-spacing: 0.2px; color: #9ba2ab; } ul.menu._Skins_SideMenu.mc-component ul ul > li > a:hover, ul.menu._Skins_SideMenuNotFixed.mc-component ul ul > li > a:hover { border-radius: 4px; background-color: #f5f6f8; } ul.menu._Skins_SideMenu.mc-component ul ul ul > li > a:hover, ul.menu._Skins_SideMenuNotFixed.mc-component ul ul ul > li > a:hover { border-radius: 4px; background-color: #f5f6f8; } ul.menu._Skins_SideMenu.mc-component ul ul ul ul > li > a:hover, ul.menu._Skins_SideMenuNotFixed.mc-component ul ul ul ul > li > a:hover { border-radius: 4px; background-color: #f5f6f8; } div.topic-layout /*This layout was created using the Responsive Layout Editor in MadCap Flare. Go to: Home Ribbon > Styles Section > Responsive Layout*/ { mc-grid-row: true; margin-left: auto; margin-right: auto; } div.topic-layout::before { content: ' '; display: table; } div.topic-layout::after { content: ' '; display: table; clear: both; } div.topic-layout > div { float: left; -moz-box-sizing: border-box; box-sizing: border-box; } div.topic-layout > div:nth-child(1) /*Menu Proxy container*/ { width: 25%; margin-left: 0%; } div.topic-layout > div:nth-child(2) { width: 73%; margin-left: 2%; } /*=========================================================================================================================================================== Styles after this point are styles that are for specific mediums. If any additional styles are added to this template they will be listed after mediums. [@media tablet] declares styles that will apply when the screen is in tablet view [@media mobile] declares styles that will apply when the screen is in mobile view ===========================================================================================================================================================*/ @media only screen and (max-width: 1279px) { .row.nav-search { display: block; } div.search-container { display: none; } div.topic-layout > div:nth-child(1) { display: none; } div.topic-layout > div:nth-child(2) { width: 98%; margin-left: 2%; } } @media only screen and (max-width: 767px) { div.top-bar { min-height: 0; } .row.nav-search { display: block; } div.search-container { display: none; } div.topic-layout > div:nth-child(1) { display: none; } div.topic-layout > div:nth-child(2) { width: 98%; margin-left: 2%; } } span.MCBreadcrumbsPrefix { display: none; } .main-section { position: relative; } .main-section > .outer-row { padding-top: 0; } .breadcrumbs-block { position: absolute; left: 0; top: 0; width: 100vw; background: #f5f6f8; } div.MCBreadcrumbsBox_0 { margin: 0 auto; padding: 12px 1em; max-width: 1440px; } span.MCBreadcrumbsDivider { display: none; } span.MCBreadcrumbsSelf, a.MCBreadcrumbsLink { font-size: 14px; font-weight: normal; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 0.2px; color: #b1bbc7; display: inline-block; } span.MCBreadcrumbsSelf:not(:last-child)::after, a.MCBreadcrumbsLink::after { content: ''; display: inline-block; background: url('../icons/arrow.svg') center no-repeat; width: 4px; height: 8px; margin-left: 18px; margin-right: 18px; } a.MCBreadcrumbsLink { text-decoration: none; color: #28bea1; } @media screen and (min-width: 767px) { .MCBreadcrumbsBox_0.breadcrumbs { padding-right: 270px; } } @media screen and (max-width: 767px) { span.MCBreadcrumbsSelf, a.MCBreadcrumbsLink { display: none; } a.MCBreadcrumbsLink:last-of-type { display: block; } div.MCBreadcrumbsBox_0 { text-align: center; position: relative; } span.MCBreadcrumbsSelf:not(:last-child)::after, a.MCBreadcrumbsLink::after { position: absolute; left: 0; transform: rotate(180deg); width: 6px; height: 14px; background-size: contain; } } .widget-github { display: inline-block; margin-left: 9px; width: 37px; height: 37px; border-radius: 2px; background-color: #f3f5f7; float: right; } .widget-github-link { color: black; width: 100%; height: 100%; display: block; padding: 5px 4px; } .widget-github-link:hover { color: #EA5441; text-decoration: none; } .widget-github-link svg { width: 30px; height: 28px; } .widget-github-link:hover svg { fill: #EA5441; width: 30px; height: 28px; } .topicToolbarProxy._Skins_TopicToolbar .button { border: none; background: #f3f5f7 !important; border-radius: 2px; margin-left: 9px; width: 37px; height: 37px; position: relative; color: black; } .topicToolbarProxy._Skins_TopicToolbar .button img { display: none; } .topicToolbarProxy._Skins_TopicToolbar .button::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .topicToolbarProxy._Skins_TopicToolbar .previous-topic-button::after { width: 18px; height: 13px; background: url('../icons/left.svg') center no-repeat; } .topicToolbarProxy._Skins_TopicToolbar .next-topic-button::after { width: 18px; height: 13px; background: url('../icons/right.svg') center no-repeat; } .topicToolbarProxy._Skins_TopicToolbar .print-button::after { width: 24px; height: 25px; background: url('../icons/print.svg') center no-repeat; } .topicToolbarProxy._Skins_TopicToolbar .expand-all-button::after { width: 24px; height: 24px; background: url('../icons/full-view.svg') center no-repeat; } .topicToolbarProxy._Skins_TopicToolbar .collapse-all-button::after { width: 24px; height: 24px; background: url('../icons/full-view_red.svg') center no-repeat; } .topicToolbarProxy._Skins_TopicToolbar .collapse-all-button:hover::after { width: 24px; height: 24px; background: url('../icons/full-view.svg') center no-repeat; } .topicToolbarProxy._Skins_TopicToolbar .previous-topic-button:hover::after { width: 18px; height: 13px; background: url('../icons/left-arrow_red.svg') center no-repeat; } .topicToolbarProxy._Skins_TopicToolbar .next-topic-button:hover::after { width: 18px; height: 13px; background: url('../icons/right-arrow_red.svg') center no-repeat; } .topicToolbarProxy._Skins_TopicToolbar .print-button:hover::after { width: 24px; height: 25px; background: url('../icons/print_red.svg') center no-repeat; } .topicToolbarProxy._Skins_TopicToolbar .expand-all-button:hover::after { width: 24px; height: 24px; background: url('../icons/full-view_red.svg') center no-repeat; } .topicToolbarProxy._Skins_TopicToolbar .button:hover::after { color: #EA5441; } .scroll-top { display: none; position: fixed; width: 41px; height: 41px; background-color: #b1bbc7; right: 30px; bottom: 36px; border-radius: 100%; color: white; text-align: center; z-index: 30; } .scroll-top svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .a-anchor { text-decoration: inherit; color: inherit !important; position: relative; } .a-anchor::after { font-weight: 300; pointer-events: none; visibility: hidden; opacity: 0; transition: visibility .2s ease-in-out, opacity .2s ease-in-out; content: '#'; display: inline-block; margin-left: .5ch; color: #D8D8D8; } .a-anchor:hover { text-decoration: inherit; text-decoration: inherit; color: inherit; font-weight: unset; letter-spacing: unset; } .a-anchor:hover::after { pointer-events: all; visibility: visible; opacity: 1; } .a-anchor__target { pointer-events: none; visibility: hidden; opacity: 0; position: absolute; } ul.navigation .has-children > .sub-menu.ps { max-height: 50vh !important; } div.search-container { position: relative; z-index: 9; } .ps--active-x > .ps__rail-x, .ps--active-y > .ps__rail-y { left: 4px !important; } .ps__thumb-y { background-color: #28bea1; right: 1px; } .ps__rail-y { width: 8px; } .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y { background-color: #28bea1; width: 6px; } .ps:hover > .ps__rail-x, .ps:hover > .ps__rail-y, .ps--focus > .ps__rail-x, .ps--focus > .ps__rail-y, .ps--scrolling-x > .ps__rail-x, .ps--scrolling-y > .ps__rail-y { background: white; } .side-menu ._Skins_SideMenu .has-children .sub-menu li:not(.tree-node-leaf) a { position: relative; padding-bottom: 5px; padding-top: 5px; } .side-menu ._Skins_SideMenu .has-children .sub-menu li:not(.tree-node-leaf) a::after { display: block; content: ''; width: 5px; height: 10px; right: 22px; position: absolute; top: 15px; background: url('../icons/chevron-right.svg') center no-repeat; background-size: contain; } .side-menu ._Skins_SideMenu .has-children .sub-menu li.tree-node-leaf a::after { display: none; } .side-menu ._Skins_SideMenu .has-children .sub-menu li a.selected::after { visibility: hidden; } ul.navigation li > a { letter-spacing: 0; } @media screen and (max-width: 769px) { div.topic-layout { margin-top: 45px; } } /*Versions element*/ .MCHelpControl.MCHelpControl-Related.relatedTopics { display: inline-block; background: #f5f6f8; padding: 11px 40px 11px 14px; border-radius: 4px; height: 45px !important; position: relative; cursor: pointer; } .MCHelpControl.MCHelpControl-Related.relatedTopics::after { content: ''; display: block; width: 8px; height: 4px; position: absolute; top: calc(50% + 2px); right: 16px; transform: translate(0 , -50%); border: 4px solid transparent; border-top: 4px solid #494c4f; } .MCHelpControl.MCHelpControl-Related.relatedTopics:hover { height: 45px !important; text-decoration: none; } .MCHelpControl.MCHelpControl-Related.relatedTopics .MCHelpControl-RelatedHotSpot_ { background-image: none; font-size: 16px !important; color: #494c4f; text-underline: none !important; line-height: 24px !important; } .MCHelpControl.MCHelpControl-Related.relatedTopics img.MCHelpControl_Image_Icon { display: none; } /* version button popup */ .link-list-popup.needs-pie { background-color: #fff; border: none; margin: 0px; padding: 0px; box-shadow: 0 2px 8px 0 rgba(185, 185, 185, 0.5); transform: translate(-50%, 15px); } .link-list-popup.needs-pie ul { padding: 6px 18px; } .link-list-popup.needs-pie li:hover a { color: #4fc2a0; } .link-list-popup.needs-pie ul li:hover { background: none; } .link-list-popup.needs-pie ul li a { font-size: 13px; font-weight: normal; line-height: 1.54; letter-spacing: normal; color: #686e76; } /* version button list */ .MCHelpControlList.MCRelatedTopicsControlList { background-color: #fff; border: none; margin: 0; list-style: none; box-shadow: 0 2px 8px 0 rgba(185, 185, 185, 0.5); padding: 6px 18px; position: absolute; z-index: 10; width: 100%; left: 0; top: calc(100% + 4px); opacity: 0; visibility: hidden; transition: opacity .2s ease-in-out; } .MCHelpControl.MCHelpControl-Related.relatedTopics.active .MCHelpControlList.MCRelatedTopicsControlList { opacity: 1; visibility: visible; } .MCHelpControlList.MCRelatedTopicsControlList li:hover a { color: #4fc2a0; } .MCHelpControlList.MCRelatedTopicsControlList a { font-size: 13px; font-weight: normal; line-height: 1.54; letter-spacing: normal; color: #686e76; } /* double scroll reset */ .off-canvas-content { overflow: unset; } /* dropdowns */ .MCDropDown_Open .MCDropDownHotSpot_.MCHotSpotImage, .MCDropDown_Closed .MCDropDownHotSpot_.MCHotSpotImage { background-image: none; position: relative; background-color: #f5f6f8; margin: 0; padding-left: 16px; } .MCDropDown_Image_Icon { display: none; } .MCDropDown_Open > .MCDropDownHead > .MCDropDownHotSpot_.MCHotSpotImage::after, .MCDropDown_Closed > .MCDropDownHead > .MCDropDownHotSpot_.MCHotSpotImage::after { content: ''; display: block; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 14px; height: 8px; background: url('../images/assets/icons/arrows/arrow-down-black.png') center no-repeat; } .MCDropDown.dropDown.MCDropDown_Open { border: 1px solid #f5f6f8; border-radius: 4px; } .MCDropDown_Open > .MCDropDownHead > .MCDropDownHotSpot_.MCHotSpotImage { border-radius: 4px 4px 0 0; } .MCDropDown_Open > .MCDropDownHead > .MCDropDownHotSpot_.MCHotSpotImage::after { background: url('../images/assets/icons/arrows/arrow-up-black.png') center no-repeat; } .MCDropDown { margin: 20px 0; } .MCDropDownBody { margin-right: 20px; margin-left: 20px; } /*text tooltips*/ .MCTextPopup { background: #d4e4f1; color: #494c4f !important; width: 30px; display: inline-block; height: 30px; line-height: 30px; text-align: center; font-size: 12px; border-radius: 5px; letter-spacing: .3px; margin-right: 7px; position: relative; } .MCTextPopup:hover { text-decoration: none; } .MCTextPopup .MCTextPopupBody { box-shadow: 0 2px 8px 0 rgba(189, 189, 189, 0.5); font-size: 13px; font-weight: bold; line-height: 1.69; letter-spacing: 0.4px; color: #ffffff !important; top: calc(-50% - 10px) !important; left: 50% !important; background-color: #494c4f !important; transform: translate(-50%, -50%); } .MCTextPopup .MCTextPopupArrow { border-bottom-width: 0; border-bottom-color: transparent; border-bottom: none; position: absolute; z-index: -1; margin: 0; border-bottom-width: 0; border-top: 25px solid #494c4f !important; top: unset; bottom: -9px; } /*search result page*/ .search-container { display: none; } .searchTopic div.topic-layout > div:nth-child(2) { width: 100%; } .searchTopic div.topic-layout > div:nth-child(1) { display: none; } .searchTopic .toolbar-wrapper { display: none; } .searchTopic .search-container { float: none; max-width: 800px; } .searchTopic .search-bar._Skins_SearchTopics.mc-component .search-field { padding: 25px 20px; line-height: 1.88; color: #b1bbc7; border: none; box-shadow: 0 2px 13px 0 rgba(200, 200, 200, 0.5); } .searchTopic .search-bar._Skins_SearchTopics.mc-component .search-submit { border: none; height: 50px; background: #ffffff url('../icons/search-green.svg') center no-repeat; background-size: 20px; } /*Search result message fallback*/ .searchTopic #results-heading, .search-result-message { color: #b1bbc7; font-size: 16px; font-weight: 300; } .searchTopic div.topic-layout > div:nth-child(2) { margin-left: 0; } .searchTopic .top-bar { display: none; } .searchTopic #resultList li { border-bottom: 1px solid #e1e3e7; padding-bottom: 20px; padding-right: 20%; margin-bottom: 0; } .searchTopic #resultList h3.title a { color: #494c4f; font-weight: bold; line-height: 2.13; } .searchTopic #resultList .url cite { color: #b1bbc7; line-height: 1.86; font-size: 14px; } .searchTopic #resultList .description { font-size: 16px; line-height: 1.63; color: #494c4f; } .searchTopic #resultList .description b { color: #0461b1; } .searchTopic #pagination { display: flex !important; justify-content: center; height: unset; line-height: unset; margin: 50px 0; } .searchTopic #pagination a { display: block; border: none; text-align: center; color: #b1bbc7; padding: 0; width: 60px; height: 60px; line-height: 60px; font-size: 16px; position: relative; z-index: 1; background: #f3f5f7; opacity: .99; border-radius: 4px; margin: 0 4px; } .searchTopic #pagination a::after { content: ''; width: 38px; height: 38px; position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; border-radius: 4px; opacity: .99; } .searchTopic #pagination a#selected { border: none; z-index: 1; color: white; } .searchTopic #pagination a#selected::after { background-color: #4fc2a0; } .searchTopic #pagination a.nextPage { margin-left: 16px; } .searchTopic #pagination a.previousPage { margin-right: 16px; } .searchTopic #pagination a.nextPage:hover::after, .searchTopic #pagination a.previousPage:hover::after { background: transparent; } .searchTopic #pagination a.nextPage:hover, .searchTopic #pagination a.previousPage:hover { background: #e6eaed; } .searchTopic #pagination a.nextPage, .searchTopic #pagination a.previousPage { width: auto; padding: 0 14px; } .searchTopic .search-container { display: block; } @media screen and (max-width: 767px) { .searchTopic .main-section .search { width: 70%; } .searchTopic .top-bar { display: block; } } /*broken pages hot fix*/ .sidenav-layout { display: block; } /*integration guides verification styles*/ div.note { background-color: #FFCCA9; border-left: solid 4px #FC5704; overflow: hidden; padding: 15px 60px; border-radius: 4px; margin-top: 10px; margin-bottom: 10px; } div.tip { background-color: #C8EFD4; border-left: solid 4px #138535; overflow: hidden; padding: 15px 60px; border-radius: 4px; margin-top: 10px; margin-bottom: 10px; } div.important { background-color: #f7adad; border-left: solid 4px #B21016; overflow: hidden; padding: 15px 60px; border-radius: 4px; margin-top: 10px; margin-bottom: 10px; } div.info { background-color: #a2d6f2; border-left: solid 4px #0062B7; overflow: hidden; padding: 15px 60px; border-radius: 4px; margin-top: 10px; margin-bottom: 10px; } div.example { background-color: #63a0e6; border-left: solid 4px #0452AB; overflow: hidden; padding: 15px 60px; border-radius: 4px; margin-top: 10px; margin-bottom: 10px; } .table-wrap { overflow: auto; } /*scroll for side-menu hot-fix*/ .side-menu .sticky-container { min-height: 100vh; } /*Mobile search for other topics*/ .top-bar { display: flex; align-items: center; justify-content: space-between; } .search-toggle-button { display: none; } .search-bar._Skins_SearchTopics.mc-component .search-field { border: none; box-shadow: 0 2px 13px 0 rgba(200, 200, 200, 0.5); } .search-bar._Skins_SearchTopics.mc-component .search-submit { margin-top: 0; } .search-bar._Skins_SearchHome.mc-component .search-field { border: none; box-shadow: 0 2px 13px 0 rgba(200, 200, 200, 0.5); color: #b1bbc7; } .search-bar.search-bar-container._Skins_SearchHome.mc-component .search-submit { border: none; background-size: 15px; width: 50px; } .search-bar._Skins_SearchHome.mc-component { height: auto; } .nav-search-wrapper { display: none; } @media only screen and (max-width: 992px) { /*burger icon*/ nav.title-bar .menu-icon { right: 0; } .title-bar .menu-icon span { height: 40px; width: 30px; display: block; background: transparent url('../icons/menu-burger.svg') no-repeat center center; background-size: cover; } } @media screen and (max-width: 767px) { .main-section .search { visibility: hidden; transition: opacity 0.4s ease-in-out; opacity: 0; z-index: 99; position: fixed; top: 25%; left: 50%; transform: translate(-50% , 0); } .main-section .search.is-visible { visibility: visible; opacity: 1; } .search-toggle-overlay { visibility: hidden; opacity: 0; transition: opacity 0.4s ease-in-out; } .search-toggle-overlay.active { visibility: visible; position: fixed; width: 100%; height: 100%; top: 0; opacity: 0.46; background-color: #101010; left: 0; z-index: 9; } .search-toggle-button { display: block; width: 30px; height: 30px; background: url('../icons/search.svg') center no-repeat; background-size: contain; position: absolute; right: 65px; top: 50%; transform: translateY(-50%); } } @media screen and (min-width: 766px) { .search-bar._Skins_SearchHome.mc-component .search-submit { height: 34px; width: 40px; } .search-bar._Skins_SearchHome.mc-component .search-field { height: 34px; font-size: 14px; } .search-bar._Skins_SearchHome.mc-component { margin-top: 0; width: 100%; } .top-bar .search { float: right; max-width: 266px; order: 3; margin: 0; } } /*Feature links elements*/ .fl-wrapper { margin-right: -17px; margin-left: -17px; } .fl-container { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; } .fl-tile { border-radius: 4px; box-shadow: 0 2px 13px 0 rgba(200, 200, 200, 0.5); background-color: #ffffff; text-align: center; min-width: calc(30% - 17px); flex: 1; border-top: 4px solid #4fc2a0; margin: 17px; position: relative; transition: max-height .2s ease-in-out; } .fl-tile[expandable='true'] { overflow: hidden; padding-bottom: 45px; max-height: 400px; } .fl-tile[expandable='true'] .fl-link:last-of-type { border: none; } .fl-title { font-size: 19px; font-weight: bold; letter-spacing: 0.4px; color: #3e3e3e; text-align: center; padding: 15px 18px 10px; border-bottom: 1px solid #e9ecf1; margin: 0; } .fl-link, .fl-link:visited { padding: 10px 15px; display: block; font-size: 15px; line-height: 1.47; letter-spacing: 0.4px; border-bottom: 1px solid #e9ecf1; text-decoration: none; text-align: left; } .fl-link:hover, .fl-link:visited:hover { background: #f5f6f8; } .fl-container-2 .fl-tile { min-width: calc(50% - 34px); } @media screen and (max-width: 1169px) { .fl-tile { min-width: calc(50% - 34px); } } @media screen and (max-width: 680px) { .fl-tile { min-width: calc(100% - 34px); } } /* Module Reference Element*/ .content-holder { float: left; width: calc(100% - 320px); padding-right: 34px; } .clearfix::after { content: ''; clear: both; display: table; } .mr-container, .mr-aside-container { width: 100%; border-radius: 4px; background-color: #f5f6f8; padding: 10px; margin: 20px 0; } .mr-aside-container { position: relative; width: 320px; float: right; margin: 0; border-top: 4px solid #0461b1; box-shadow: 0 2px 13px 0 rgba(200, 200, 200, 0.5); padding: 15px 20px; } .mr-title, .mr-aside-title { font-size: 16px; font-weight: bold; line-height: 2.13; letter-spacing: 0.5px; color: #494c4f; margin: 0; } .mr-list { padding: 0; margin: 0; padding-left: 17px; } .mr-link, .mr-aside-link { word-break: break-word; font-size: 15px; line-height: 1.47; letter-spacing: 0.4px; } .mr-container.expanded { max-height: 100%; } .mr-col { width: 100%; } .mr-container .mr-title { text-align: center; padding: 15px 0; } .mr-list-container .mr-list { padding: 20px; } .mr-list-container { display: flex; justify-content: space-around; flex-wrap: wrap; } .mr-list-container .mr-list { padding: 20px 30px; } @media screen and (max-width: 767px) { .mr-container { width: 100%; } .content-holder { width: 100%; } .mr-aside-container { width: 100%; } } .mr-list-container .mr-list-primary { border-top: 4px solid #0461b1; border-radius: 4px; background: white; padding: 0; list-style: none; margin: 20px; } .mr-list-container .mr-list-primary.expanded { padding-bottom: 40px; } .mr-list-container .mr-list-primary li { padding: 11px 16px; border-top: 1px solid #e9ecf1; margin: 0; } .mr-container .mr-col.mr-col--4 { max-width: 300px; } /*js toggler styles*/ .toggle-btn { cursor: pointer; color: #4fc2a0; padding: 10px 15px; font-size: 15px; line-height: 1.47; letter-spacing: 0.4px; text-align: center; position: absolute; bottom: 0; left: 0; background: white; width: 100%; border-top: 1px solid #e9ecf1; } .mr-container .toggle-btn { background-color: white; } .mr-aside-container .toggle-btn { background-color: #f5f6f8; } .js-expandable-container { position: relative; } [expandable='true'] { overflow: hidden; padding-bottom: 45px; max-height: 400px; } .js-expandable-container.expanded { max-height: 100%; } .mr-list-primary[expandable="ture"] { padding-bottom: 35px; } /*Grid Helper*/ .grid { display: flex; } .grid--center { justify-content: center; } .col--4 { width: 33.3%; } .col--6 { width: 50%; } @media screen and (max-width: 1170px) { .mr-col.col--4, .mr-col.col--6 { width: auto; } } @media screen and (max-width: 769px) { .mr-col.col--4, .mr-col.col--6 { width: 100%; } } /*home page upates ac-376*/ .title-bar-layout a.logo { background-size: contain; height: 67px; } .menu-icon-container { min-height: 67px; } .title-bar-layout .logo-wrapper { min-height: 67px; } /*search result message on results page ac-375*/ #results-heading a.a-anchor { display: none; } /*Header mobile collapse*/ /*@media screen and (max-width: 767px){*/ /*.sticky-container.scrolled-down {*/ /*transform: translate(0, -100%);*/ /*}*/ /*.sticky-container {*/ /*transition: transform .5s ease-in-out;*/ /*position: fixed;*/ /*top: 0;*/ /*width: 100%;*/ /*}*/ /*.off-canvas-content {*/ /*padding-top: 85px;*/ /*}*/ /*}*/ /*AC-404 Add icon to "Open in new tab" link*/ .main-content a[target="_blank"] { display: inline-block; padding-right: 20px; position: relative; background-image: url('../icons/new-tab-new-icon.svg'); background-position: 98% 5px; background-size: 13px 13px; background-repeat: no-repeat; } @media only screen and (max-width: 992px) { div.topic-layout > div:nth-child(2) { margin-left: 0; } } /*AC-426 Remove arrows from top nav*/ ul.navigation ul > li.has-children > a:after { display: none; } ul.navigation ul ul { top: -10px; } /*Mobile side menu*/ @media only screen and (max-width: 992px) { /*tablet*/ /*side menu */ .off-canvas { background: white; } .is-drilldown-submenu-parent > a { position: relative; } .is-drilldown-submenu-parent > a::after, .js-drilldown-back > a::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 6px; height: 11px; background: url('../icons/chevron-right.svg') center no-repeat; background-size: contain; } .js-drilldown-back > a::after { background: url('../icons/chevron-back-green.svg') center no-repeat; background-size: contain; } .off-canvas.position-right { padding-top: 118px; } .off-canvas ul ul { background: white; } ul.off-canvas-list ul ul > li > a:hover, ul.off-canvas-list ul > li > a:hover { background: none; } ul.off-canvas-list li.js-drilldown-back { position: relative; background: #eef0f1; } ul.off-canvas-list li.js-drilldown-back > a { color: black !important; padding-left: 20px; } ul.off-canvas-list li.js-drilldown-back > a::after { width: 10px; height: 20px; left: 0; } .is-drilldown-submenu.slide-in-right.is-active { padding-top: 118px; } ul.off-canvas-list li.js-drilldown-back > a:hover { background: none !important; } ul.off-canvas-list li { padding: 0 30px 0 16px; } ul.off-canvas-list li:first-child > a { border-top: 1px solid #eef0f1; } ul.off-canvas-list li a { color: #758599 !important; padding: 13px 0; font-weight: bold; letter-spacing: 0.5px; line-height: 1.38; border-bottom: 1px solid #eef0f1; } ul.off-canvas-list li a:hover { background: none; } .js-off-canvas-exit { box-shadow: none; } } @media screen and (max-width: 767px) { /*Mobile*/ } .aside-close-button { width: 26px; height: 26px; display: block; position: absolute; top: 30px; right: 30px; background: url('../icons/close-icon.svg') center no-repeat; background-size: contain; } .search-toggle-button { display: none; } .js-off-canvas-exit:hover { background: rgba(254, 254, 254, 0.25); } /*overlay*/ .js-off-canvas-exit { box-shadow: none; opacity: 0.33; background-color: #0c0c0c; } /*versions element*/ .versions-element { position: relative; display: inline-block; margin: 15px 0; } .versions-element .versions-trigger { display: inline-block; background: #f5f6f8; padding: 11px 40px 11px 14px; border-radius: 4px; height: 45px; position: relative; cursor: pointer; } .versions-element .versions-trigger::after { content: ''; display: block; width: 8px; height: 4px; position: absolute; top: calc(50% + 2px); right: 16px; transform: translate(0 , -50%); border: 4px solid transparent; border-top: 4px solid #494c4f; } .versions-element .versions-dropdown { background-color: #fff; border: none; margin: 0; list-style: none; box-shadow: 0 2px 8px 0 rgba(185, 185, 185, 0.5); padding: 6px 18px; position: absolute; z-index: 10; width: 100%; left: 0; top: calc(100% + 4px); opacity: 0; visibility: hidden; transition: opacity .2s ease-in-out; } .versions-element .versions-dropdown.visible { opacity: 1; visibility: visible; } .versions-element .versions-dropdown a { font-size: 13px; font-weight: normal; line-height: 1.54; letter-spacing: normal; color: #686e76; } .versions-element--extended { } .versions-element--extended .versions-trigger { padding: 6px 60px 6px 55px; font-size: 14px; font-weight: bold; line-height: 25px; height: auto; } .versions-element--extended .versions-trigger::after { display: none; } .versions-element--extended .versions-trigger .arrow { content: ''; display: block; width: 22px; height: 22px; position: absolute; top: 50%; right: 14px; transform: translate(0 , -50%); border-radius: 50%; background: rgba(177,187,199, 0.33); } .versions-element--extended .versions-trigger .arrow::after { content: ''; display: block; width: 8px; height: 4px; position: absolute; top: calc(50% + 3px); right: 7px; transform: translate(0 , -50%); border: 4px solid transparent; border-top: 4px solid #686e76; } .versions-element--extended .versions-trigger::before { content: ''; display: block; width: 26px; height: 21px; position: absolute; top: 12px; left: 12px; background: url('../icons/version-icon.svg') center no-repeat; background-size: contain; } .versions-element--extended .versions-dropdown { position: relative; left: calc(100% - 49px); top: -10px; box-shadow: 0 2px 8px 0 rgba(185, 185, 185, 0.5); } .versions-element--extended .versions-dropdown::after { content: ''; position: absolute; width: 8px; height: 8px; background: #fff; top: -4px; left: 20px; transform: rotate(45deg); } .versions-element--extended .versions-dropdown a { font-size: 14px; line-height: 2.14; } .versions-element--extended .version-display { font-size: 14px; display: block; color: #686e76; } .tab-pane { display: none; } .tab-pane.active { display: block; }