/*******************************************************************************
 *   Theme:         Author-it Magellan Main Stylesheet
 *   Author:        Author-it Software Corp (http://www.author-it.com)
 *   Copyright:     Author-it Software Corp, All Rights Reserved
 *   Last Updated:  5-Oct-2022
 *   Version:       2022.R5
 *
 *   IMPORTANT:     For user or theme customisations DO NOT MODIFY THIS FILE.
 *                  Modify the themestyles.css file instead by overiding or
 *                  adding styles that you want to change.
 *******************************************************************************/

@charset "utf-8";

/*#region DEFAULTS - contains site defaults */
/*******************************************************************************
     This section contains site level defaults like variables and defaults
     for common elements
 
  *******************************************************************************/


html {
  /* base colors */
  --primary-color: #FE8C00;
  --primary-light-color: #FFBA6E;
  --secondary-color: #3688BF;
  --secondary-light-color: #C7E2F2;
  --dark-gray-color: #404040;
  --gray-color: #6C6C6C;
  --medium-gray-color: #AAAAAA;
  --light-gray-color: #CECECE;
  /* functional colors */
  --background-color: white;
  --landing-bg-color: white;
  --heading-bg-color: var(--light-gray-color);
  --panel-head-bg-color: var(--light-gray-color);
  --widget-head-bg-color: var(--light-gray-color);
  --footer-bg-color: var(--light-gray-color);
  --content-bg-color: white;
  --control-bg-color: white;
  --button-bg-color: var(--light-gray-color);
  --active-btn-bg-color: var(--primary-light-color);
  --submit-btn-bg-color: var(--primary-color);
  --form-bg-color: white;
  --widget-bg-color: white;
  --text-color: var(--dark-gray-color);
  --title-color: white;
  --title-outline-color: black;
  --footer-text-color: var(--dark-gray-color);
  --heading-text-color: var(--dark-gray-color);
  --panel-head-text-color: var(--dark-gray-color);
  --widget-head-text-color: var(--dark-gray-color);
  --button-text-color: var(--dark-gray-color);
  --active-btn-text-color: var(--dark-gray-color);
  --submit-btn-text-color: white;
  --shadow-color: var(--light-gray-color);
  /* functional elements */
  --border-radius-small: 2px;
  --border-radius-large: 4px;
  --transition-speed: 0.4s;
  /* default icons - FontAwesome */
  --toc-open: '\f0d7';
  --toc-closed: '\f0da';
  --left-pane-open: '\f104';
  --left-pane-closed: '\f105';
  --right-pane-open: '\f105';
  --right-pane-closed: '\f104';
  --widget-open: '\f067';
  --widget-closed: '\f068';
  --breadcrumbs-separator: '\f105';
  --related-menu-closed: '\f104';
  --related-menu-open: '\f105';
  --glossary-link-icon: '\f05a';
  --popup-link-icon: '\f0e5';
  --external-link-icon: '\f08e';
  --expand-inline-open: '\f104';
  --expand-inline-closed: '\f105';
  --expand-block-open: '\f106';
  --expand-block-closed: '\f107';
}

body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  line-height: 1.5;
  font-size: 14px;
  color: var(--text-color);
  user-select: none;
}

html[dir="rtl"] body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* defaults for headings*/
h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
span:focus,
a:focus {
  outline: none;
}

/* defaults for links*/
a {
  color: var(--primary-color);
}

a:hover,
a:active,
a:visited,
a:focus {
  outline: none;
  text-decoration: none;
  color: var(--primary-color);
}

/* defaults for images */
img {
  border: none;
  outline: none;
  max-width: 100%;
  /* on smaller screens this causes images to re-size automatically */
}

/* scrollbars for various browsers */

/* IE */
body {
  scrollbar-base-color: #FFFFFF;
  scrollbar-face-color: var(--light-gray-color);
  scrollbar-3dlight-color: #FFFFFF;
  scrollbar-highlight-color: #FFFFFF;
  scrollbar-track-color: #FFFFFF;
  scrollbar-arrow-color: var(--light-gray-color);
  scrollbar-shadow-color: #FFFFFF;
  scrollbar-dark-shadow-color: var(--dark-gray-color);
}

/* Firefox */
body {
  scrollbar-color: var(--light-gray-color) #FFFFFF;
}

.modal-body,
.content_container,
.landing_container,
div#menusection>div,
div.right_block>div,
.tooltiptext .panel-body,
#shortened_search_result>div:nth-child(2),
.m_sidebar_container {
  scrollbar-width: thin;
}

/* Webkit - Chrome, Safari, Edge */
scrollbar-track {
  width: 6px;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px #fff;
  -webkit-border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: var(--light-gray-color);
  -webkit-box-shadow: inset 0 0 6px var(--light-gray-color);
  -webkit-border-radius: 5px;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: var(--light-gray-color);
}

/*#endregion DEFAULTS*/

/*#region LAYOUT - top level container site layout */

/*******************************************************************************
     This section contains styles to define the overall site layouts and
     main containers for the site and provides a map to the various regions
     in this file [REGION] indicates the region name. The app creates different structures
     when in LANDING mode or CONTENT mode.
 
     The element strcuture when in CONTENT modes is as follows:
 
     body
         > app-root > home
             > .inner_page
                 > header (#desktop or #ipad) - [HEADER]
                 > navigation-component - [NAVBAR]
                 > section.content_block
                     > .left_block - [LEFTNAV]
                     > .center_block - [CONTENTBLOCK]
                     > .right_block -[RIGHTNAV]
                 > config-component
                 > help-component
             > .h_sidebar_container
             > .p_sidebar_container - one for each widget
             > .mobile-search
             > #sharePopup
             > app-leftmenures-component
 
     The element strcuture when in LANDING  modes is as follows:
 
     body
         > app-root > home
             > app-index
                 > header [HEADER]
                 > navigation-component - [NAVBAR]
                 > .landing_container - [LANDING] appears only on landing page
                 > footer-component - appears only on landing page
                 > config-component
                 > help-component
                 > .h_sidebar_container
                 > .p_sidebar_container
                 > app-leftmenures-component
 
  *******************************************************************************/

body,
html {
  height: 100vh;
  overflow: hidden;
  min-width: 320px;
}

section.content_block {
  overflow: hidden;
  display: flex;
  background-color: var(--content-bg-color);
  height: 100%;
  box-sizing: border-box;
}

section.content_block>.move_left {
  padding: 0;
}

section.content_block>.move_left {
  padding: 0;
}

section.content_block>.center_block {
  height: 100%;
  overflow: hidden;
  float: left;
  margin: 0;
  padding: 0;
  transition: all 0.4s ease-in-out;
  position: relative;
  flex: 1;
  border-left: 1px solid var(--light-gray-color);
  border-right: 1px solid var(--light-gray-color);
}

html[dir="rtl"] section.content_block > .center_block {
    float: right;
}

section.content_block>.center_block>.center_content {
  height: 100%;
}

.close {
  opacity: 1;
}

.panel,
.panel-group .panel {
  border-radius: 0;
}

.panel-default>.panel-heading {
  border-color: var(--primary-color);
  border-width: 1px;
  position: relative;
}

.collapse.in>.panel-body {
  overflow-y: auto;
  transition: all 0.4s ease-in-out;
}

.filtersec .collapse.in {
  height: 72vh;
}

.cursor {
  cursor: pointer;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.content_container .error {
  color: red;
  font-size: 16pt;
  border: 1px solid rgba(201, 11, 11, 0.2)
}

.input-group-addon {
  cursor: pointer;
}

.inner-panel {
  margin-bottom: 0px;
  width: 100%;
  overflow-y: hidden;
}

.panel-default.inner-panel>.panel-heading>.panel-actions {
  float: right;
}

html[dir="rtl"] .panel-default.inner-panel>.panel-heading>.panel-actions {
  float: left;
}

.panel-default.inner-panel>.panel-heading>.panel-title {
  float: left;
}

html[dir="rtl"] .panel-default.inner-panel>.panel-heading>.panel-title {
  float: right;
}

.inner_page_footer {
  height: 40px;
}

.section.content_block>.left_block {
  min-width: 20%;
}

.section.content_block>.center_block>.center_content>.content_container {
  min-width: 60% !important;
}

section.content_block>.center_block>.center_content>.content_container {
  min-width: 60% !important;
}

section.content_block>.center_block {
  min-width: 32% !important;
}

section.content_block>.left_block {
  min-width: 20%;
}

section.content_block>.right_block {
  min-width: 20%;
}

/*#endregion LAYOUT */

/*#region HEADER - Located at the top of the  */
/*******************************************************************************
     This section contains styles to define the header area. there are 2 headers
     The first for desktop devices, the second for mobile. They switch automatically
     based on the width of the screen.
 
     The section element strcuture is as follows:
 
     header#desktop > div.container-fluid > div.row
         > logo-component > div
         > div#desktop
         > div#ipad-menu
             > ul.top_icons
                 > li
     header#ipad >  div.container-fluid > div.row
         > logo-component > div
         > div > ul.m_top_icons
             > li.m_top_menu
             > li.m_top_search
             > li.m_top_lanf
             > li.m_top_ellipses
                 > ul.mob_menu_right
                     > li
  *******************************************************************************/

/* DESKTOP - these apply with the browser is wide enough for desktop mode */

/* base defaults for the header container  */
header#desktop>div.container-fluid>div.row {
  padding: 10px 0px 10px 0px;
  background-color: var(--background-color);
}

/* container for menu icons */
header#desktop div#ipad-menu {
  padding: 0 10px 0 0;
  margin: 0;
  float: right;
}

html[dir="rtl"] header#desktop div#ipad-menu {
    float: left;
    padding: 0 0 0 10px;
}

/* link around icons*/
header#desktop.inner_top_bar .top_icons>li>a {
  padding: 5px 10px 5px 10px;
  font-size: 18px;
  min-height: 35px;
  max-height: 35px;
  min-width: 45px;
  text-align: center;
  border: 1px solid transparent;
}

/* hide search button */
.top_icons .hidden-lg {
  display: none;
}

/* language drop down*/
header#desktop a#langDp {
  vertical-align: middle;
  line-height: 25px;
}

/* hide select language heading */
.langiuageBoxCss li:nth-child(1),
.langiuageBoxCss li:nth-child(2) {
  display: none;
}

/* selected language */
.langiuageBoxCss .selectedLanguage a {
  color: var(--primary-color) !important;
  font-weight: bold;
  text-decoration: none
}

/* color embedded SVG icons */
header#desktop .top_icons .top_icons_menu {
  fill: var(--primary-color);
  width: 25px;
}

/* hover over the icons */
header#desktop.inner_top_bar .top_icons>li>a:hover {
  background-color: var(--background-color);
  border: 1px solid var(--light-gray-color);
  border-radius: var(--border-radius-small);
  box-shadow: 1px 1px 3px var(--shadow-color);
}

/* container for search */
header#desktop div#desktop {
  padding: 0;
}

/* search control */
header#desktop .top_search_block {
  width: 100%;
}

/* search box */
/* in the main page */
html[dir="rtl"] #searchBox.form-control:first-child { 
  border-top-left-radius: 0; 
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px; 
  border-bottom-right-radius: 4px;
  border-left: none;
}

/* in the banner */
.top_search_block>form>.input-group>.form-control {
  height: 34px;
  border-top-left-radius: var(--border-radius-small);
  border-bottom-left-radius: var(--border-radius-small);
}

html[dir="rtl"] .top_search_block>form>.input-group>.form-control {
  border-top-left-radius: initial;
  border-bottom-left-radius: initial;
  border-left: none;
}

html[dir="rtl"] .top_search_block>form>.input-group>.form-control {
  border-top-right-radius: var(--border-radius-small);
  border-bottom-right-radius: var(--border-radius-small);
}

/* search button */
/* in the main page */
html[dir="rtl"] #searchBoxIcon.input-group-addon:last-child { 
  border-top-left-radius: 4px; 
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0; 
  border-bottom-right-radius: 0;
}

/* in the banner */
html[dir="rtl"] .input-group-addon:last-child {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: var(--light-gray-color);
  border-top-left-radius: var(--border-radius-small); 
  border-bottom-left-radius: var(--border-radius-small);
}


/* in the banner */
.top_search_block>form>.input-group>.input-group-addon {
  background-color: var(--control-bg-color);
  color: var(--primary-color);
  padding: 2px 5px 2px 5px;
  border-top-right-radius: var(--border-radius-small);
  border-bottom-right-radius: var(--border-radius-small);
  fill: var(--primary-color);
}

html[dir="rtl"] .top_search_block>form>.input-group>.input-group-addon {
  border-top-right-radius: initial;
  border-bottom-right-radius: initial;
}

/* hover over search button*/
.top_search_block>form>.input-group>.input-group-addon:hover {
  background-color: var(--primary-color);
  fill: #fff;
}

/* MOBILE - these apply with the browser is narrow enough for Mobile mode */

/* base defaults for the header container  */
header#ipad>div.container-fluid>div.row {
  padding: 0;
  margin: 0;
}

header#ipad>div.container-fluid {
  padding: 0;
}

/* container for logo */
header#ipad logo-component {
  max-width: 200px;
  min-width: 150px;
  width: 25%;
  float: left;
}

html[dir="rtl"] header#ipad logo-component {
  float: right;
}

/* logo */
header#ipad .inner_logo {
  padding: 2px;
}

/* container for menu elements */

.bg_orange {
  background-color: var(--primary-color);
}

header#ipad>div>div>div {
  width: inherit;
  max-width: calc(100% - 150px);
  min-width: calc(100% - 200px);
  float: right;
  max-height: 40px;
  min-height: 40px;
}

html[dir="rtl"] header#ipad>div>div>div {
    float: left;
}

/* container for icons items */
header#ipad ul.m_top_icons {
  list-style: none;
  margin: 0;
  padding: 5px 0;
  text-align: end;
  max-height: 40px;
}

html[dir="rtl"] header#ipad ul.m_top_icons {
    float: left;
}

/* individual list items */
header#ipad .m_top_icons>li {
  padding: 0;
  display: inline-block;
  vertical-align: bottom;
  height: 40px;
}

/* links around the icons */
header#ipad .m_top_icons>li>a {
  padding: 5px 5px 3px 5px;
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
  color: white !important;
}

/* re-colouring and re-szing the icons themselves */
header#ipad .m_top_icons>li>a>svg {
  height: 20px !important;
  width: 20px !important;
  fill: #fff !important;
}

/* language drop-down item */
header#ipad li.m_top_lang>a {
  padding-bottom: 4px;
  line-height: 20px;
  height: 30px;
}

/* ellipses (3-dots) item */
header#ipad li.m_top_ellipses>a {
  line-height: 20px;
  height: 30px;
  width: 30px;
  text-align: center;
}

/* ellipses (3-dots) dropdown menu */
#ipad .mob_menu_right>li>a {}

/* drop-down menu */
#ipad .mob_menu_right {
  top: 40px;
  right: 5px;
  font-size: 14px;
  box-shadow: 1px 1px 3px var(--shadow-color);
  border-radius: var(--border-radius-small);
}

/* drop-dwon menu item */
#ipad .mob_menu_right>li>a {
  cursor: pointer;
  line-height: 25px;
  padding: 5px;
  vertical-align: middle;
}

/* drop-dwon menu item icon */
#ipad .mob_menu_right>li a>img {
  padding-right: 5px;
}

/* hover over the icons */
header#ipad.inner_top_bar .m_top_icons>li>a:hover {
  background-color: var(--light-gray-color);
  border-radius: var(--border-radius-small);
}

/*#endregion HEADER */

/*#region LANDING - The first page displayed  */
/*******************************************************************************
     This section contains styles to define the landing page
     It is divided into a number of sections for Title and Search,
     Content Rotator, Promoted Content, and the Footer.
 
     The section element strcuture is as follows:
 
     div.landing_container
         > section > div > div > div > div.mainpage_block jumbotron
         > section.testimonials_section
         > section.content_root_section
     footer-component > footer.footer inner_page_footer
 
  *******************************************************************************/

.landing_container {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100vh - 60px);
  width: 100%;
}

.landing_bg {
  background-image: url(../images/landing_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

/* sets the left navigation menu to be hidden by default */
.landing_left_block.start {
  width: 0px !important;
}

.landing_left_block.start .panel-footer {
  display: none;
}

.landing_left_block {
  position: absolute;
  height: 100%;
  width: 0;
  opacity: 0;
  z-index: 5000;
  background-color: var(--background-color);
  transition: all 0.4s ease-in-out;
}

/* Title and Search bar section */
.mainpage_block.jumbotron {
  background-color: transparent !important;
  padding: 0 15% 0 17%;
  margin: 20px 0 20px 0;
}

/* Site title - comes from the Book Web Title property of the Book */
.mainpage_block.jumbotron>h1 {
  margin: 50px 0 0 0;
  color: var(--title-color);
  font-weight: 600;
  font-size: 28px;
  text-shadow: -1px -1px 0 var(--title-outline-color), 1px -1px 0 var(--title-outline-color), -1px 1px 0 var(--title-outline-color), 1px 1px 0 var(--title-outline-color);
}

/* Site sub-title - comes from the Book Web Super Title property of the Book */
.mainpage_block.jumbotron>p {
  margin: 40px 0 0 0;
  color: var(--title-color);
  font-size: 24px;
  font-weight: 500;
  text-shadow: -1px -1px 0 var(--title-outline-color), 1px -1px 0 var(--title-outline-color), -1px 1px 0 var(--title-outline-color), 1px 1px 0 var(--title-outline-color);

}

/* search control container */
.mainpage_block>.search_block {
  margin: 20px 0;
}

/* seacrh control */
.search_block>form>.input-group {
  width: 100%;
}

.mainpage_block>.search_block>form>.input-group>.form-control {
  height: 50px;
  padding: 0 20px;
  font-size: 16px;
}

/* seacrh button */
.mainpage_block>.search_block>form>.input-group>.input-group-addon {
  background-color: var(--control-bg-color);
  border: 1px solid var(--light-gray-color);
  border-left: none;
  fill: var(--primary-color);
}

/* seacrh button hover */
.mainpage_block>.search_block>form>.input-group>.input-group-addon:hover {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  fill: #fff;
}

html[dir="rtl"] .mainpage_block>.search_block>form>.input-group>.input-group-addon {
  background-color: var(--control-bg-color);
  border: 1px solid var(--light-gray-color);
  fill: var(--primary-color);
}

html[dir="rtl"] .mainpage_block>.search_block>form>.input-group>.input-group-addon:hover {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  fill: #fff;
}

/* rotator and promoted content containers */
.container {
  width: auto;
}

/* rotator section main container - all the rotator items and the control buttons */
section.testimonials_section {
  background-color: var(--landing-bg-color);
  padding: 15px;
  align-content: center;
}

/* container for all the rotator items*/
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0 5px 0 5px;
}

/* container around each rotator item */
.testimonials_item .col-md-4 {
  padding: 0 10px 0 10px;
}

/* rotator items */
.testimonials_header {
  background-color: var(--content-bg-color);
  border-radius: var(--border-radius-large);
  max-height: 350px;
  overflow: hidden;
  height: 250px;
  border: 1px solid var(--light-gray-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  margin: 5px 5px 5px 5px;
  line-height: normal;
  word-spacing: normal;
}

/* hover over rotator items */
.testimonials_header:hover {
  box-shadow: 1px 1px 3px var(--primary-light-color);
  cursor: pointer;
}

/* Web Heading from [LandingPageRotatorItems] topics, always H3 regardless of TOC level in book */
.testimonials_header h3 {
  margin: 0;
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  background-color: var(--panel-head-bg-color);
  color: var(--panel-head-text-color);
}

/* Body content from [LandingPageRotatorItems] individual topics divs have id="l_{topic id}" */
.testimonials_header p>div {
  font-size: 14px;
  padding: 10px;
}

/* override content styles to centre text in this box */
.testimonials_header p>div>p,
.testimonials_header p>div>ul {
  text-align: center !important;
}

/* make the max heigh of images to ensure they fit in  */
.testimonials_header p>div img {
  max-height: 150px;
}

/* rotator comment not used - so turnned off by default */
.testimonials_cnt {
  display: none !important;
}

/* common for rotator buttons */
.testimonials_control {
  background: none !important;
  background-color: var(--control-bg-color) !important;
  max-width: 40px !important;
  max-height: 40px !important;
  top: 40%;
  opacity: 1;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 1px 3px var(--shadow-color);
}

/* hover over rotator buttons */
.testimonials_control:hover {
  box-shadow: 1px 1px 3px var(--shadow-color);
}

/* common for rotator button text */
.testimonials_control>span {
  text-shadow: none;
  color: var(--primary-color);
  font-size: 24px;
  line-height: 38px;
  vertical-align: middle;
}

/* left rotator button */
.testimonials_control.left {
  left: -20px !important;
}

/* right rotator button */
.testimonials_control.right {
  right: -20px !important;
}

/* Promoted content section main container */
section.content_root_section {
  background-color: var(--landing-bg-color);
  padding-bottom: 30px;
}

/* Promoted content title and content container */
.landing_content_box_wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
}

/* Body content from [LandingPageContent] topic in Book, divs has id="l_{topic id}" */
.landing_content_title {
  color: var(--text-color);
  width: 100%;
  font-size: 18px;
  line-height: normal;
  word-spacing: normal;
  text-align: center;
  padding: 0 15px 10px 15px;
}

.landing_content_title>div>p,
.landing_content_title>div>ul {
  text-align: center !important;
}

/* Body content from [LandingPageContentItems] individual topics divs have id="l_{topic id}" */
.landing_content_box {
  background-color: var(--content-bg-color);
  border-radius: var(--border-radius-large);
  padding: 0;
  text-align: start;
  font-size: 14px;
  margin: 10px;
  width: 350px;
  max-height: 280px;
  border: 1px solid var(--light-gray-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
}

/* hover over Promoted content items */
.landing_content_box:hover {
  box-shadow: 1px 1px 3px var(--primary-light-color);
  cursor: pointer;
}

/* Web Heading from [LandingPageContentItems] topics, always H3 regardless of TOC level in book */
.landing_content_box h3 {
  margin: 0;
  padding: 10px;
  font-size: 16px;
  font-weight: 600;
  background-color: var(--panel-head-bg-color);
  color: var(--panel-head-text-color);
  text-align: center;

}

/* Body content from [LandingPageRotatorItems] individual topics divs have id="l_{topic id}" */
.landing_content_box p>div {
  padding: 10px;
  font-size: 14px;
  overflow: hidden;
  max-height: 220px;
  line-height: normal;
  word-spacing: normal;
}

/* footer section container - aligned to the bottom of the window */
.footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 6000;
}

/* contaner for the top links */
.footer_links {
  text-align: center;
  width: 100%;
  color: var(--footer-text-color);
}

/* footer links */
.footer_links a {
  color: var(--footer-text-color);
  text-decoration: none;
  margin: 0 10px;
  font-size: 13px;
}

/* hover ovr footer links */
.footer_links a:hover {
  text-decoration: underline;
}

/*#endregion LANDING */

/*#region NAVBAR - Located on the top below the header */
/*******************************************************************************
 *   This section contains styles to define the top menu / navigation bar
 *   The section element strcuture is as follows:
 
     nav.navbar.navbar-default > div.container
         > div.navbar-header
         > div#navigation-root
         > ul.nav.navbar-nav
             > li.dropDownChild
                 > a
                     > a
                     > span
                 > ul.dropdown-menu
                     > li
  *******************************************************************************/


/* target IE11 specifically to workaround overflow issue with menu items*/
@media all and (-ms-high-contrast:none) {
  .inner_page {
    position: absolute;
    width: 100vw;
  }
}


/* removed extra padding around containers that house the navbar */
.inner_page>.navbar-default>.container-fluid,
.navbar-default>div {
  padding: 0;
}

nav.navbar-default {
  border-radius: 0px;
  background-color: var(--primary-color);
  margin: 0;
  border: 0;
  z-index: 9;
  min-height: 40px;
  max-width: 100vw;
}

ul.navbar-nav {
  max-width: 100vw;
  max-height: 40px;
  display: flex;
  flex-flow: row nowrap;
}

/* navbar main container */

#navigation-root {
  padding: 0;
  width: auto;
}

/* top level menu item container */
.navbar-default .navbar-nav>li>a {
  margin: 5px 3px 5px 3px;
  padding: 5px 8px 5px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #FFFFFF !important;
  font-size: 15px;
  font-weight: 600;
}

/* top level menu item text */
div#navigation-root>ul.nav.navbar-nav>li.dropDownChild>a a {
  color: #FFFFFF !important;
}

/* drop-down chevron - hidden by default */
div#navigation-root>ul.nav.navbar-nav>li.dropDownChild>a>span {
  display: none;
}

/* top level menu item text */
div#navigation-root>ul.nav.navbar-nav>li.dropDownChild.open>a {
  background-color: var(--primary-light-color);
  border-radius: var(--border-radius-small);
}

div#navigation-root>ul.nav.navbar-nav>li.dropDownChild.open>a:hover {
  box-shadow: 1px 1px 3px var(--shadow-color) inset;
}

div#navigation-root>ul.nav.navbar-nav>li.dropDownChild.open>a>a:hover {
  border-bottom: none;
}

/* hover over top level menu item text */
div#navigation-root>ul.nav.navbar-nav>li.dropDownChild>a>a:hover {
  border-bottom: 1px solid white;
}

/* drop-down menu */
ul.dropdown-menu {
  border: 1px solid var(--light-gray-color);
  border-bottom-left-radius: var(--border-radius-small);
  border-bottom-right-radius: var(--border-radius-small);
  background-color: var(--control-bg-color);
  padding: 5px;
  transition: all 0.4s ease-in-out;
  z-index: 100;
  max-height: 500px;
}

/* drop-down menu item*/
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a {
  padding: 5px 10px 5px 10px;
  cursor: pointer;
}

/* hover over drop-down menu item*/
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
  background-color: var(--light-gray-color);
  border-radius: var(--border-radius-small);
}

/*#endregion NAVBAR */

/*#region LEFTNAV - Located on the far left */

/*******************************************************************************
 *   This section contains styles to define all the TOC, Index, and Glossary
 *   The section element strcuture is as follows:
 
     div#accordian3 > div.panel-default > div#menusection
         > div.panel-body
             > div > div#tree1
             > div#index1 > div#indexList
             > div#glossary1 > div#glossaryList
         > div.panelfooter
     div#left_block_collapse
  *******************************************************************************/

/* Panel Container - this contains the Heading and Body of each Panel */

/* section container that expands/colapses hiding or showing #accordian3 */
section.content_block>.left_block {
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  transition: all 0.4s ease-in-out;
  position: relative;
  background-color: var(--background-color);
}

html[dir="rtl"] section.content_block > .left_block {
  float: right;
}

section.content_block>.left_block.resize-right-hover {
  transition: none;
}

section.content_block>.left_block>div {
  height: 100%;
}

#accordion3 {
  margin: 0;
  padding: 0px 0;
  height: 100%;
}

#accordion3>.panel-default {
  padding: 10px 0px;
  margin: 0;
  border: 0;
  background-color: none;
  box-shadow: none;
  overflow-y: hidden;
  overflow-x: auto;
  height: 100%;
  background-color: var(--background-color);

}

#menusection {
  background-color: var(--background-color);
}

/* main panel containing the TOC, Index, and Glossary content*/
#menusection>.panel-body {
  padding: 0 0px;
  margin: 0;
  overflow: hidden;
  height: calc(100vh - 115px) !important;
}

.header_navigation #menusection>.panel-body {
  height: calc(100vh - 150px) !important;
}

.has_footer #menusection>.panel-body {
  height: calc(100vh - 150px) !important;
}

.header_navigation .has_footer #menusection>.panel-body {
  height: calc(100vh - 190px) !important;
}


/* main TOC container */
#tree1 {
  padding: 3px 10px 10px 10px;
}

/* main TOC tree*/
ul.jqtree-tree {
  color: var(--text-color);
  margin: 0;
}

/* group contaner for sub-level */
ul.jqtree-tree ul.jqtree_common {
  margin-left: 20px;
}

/* conatiner for each list element - contains icons and text */
ul.jqtree-tree .jqtree-element {
  border: 1px solid transparent;
  line-height: 1;
  letter-spacing: normal;
  word-spacing: normal;
  padding: 3px 1px 3px 5px;
  margin: -3px 0;
  white-space: nowrap;
  box-sizing: border-box;
}

/* container for selected items - item in context */
ul.jqtree-tree li.jqtree-selected>.jqtree-element {
  background-color: none !important;
  background: none !important;
  border-radius: var(--border-radius-small);
  z-index: 8;
  text-shadow: none;
}

/* text for selected item */
ul.jqtree-tree li.jqtree-selected>.jqtree-element>.jqtree-title {
  color: var(--primary-color) !important;
  outline: none;
  font-weight: 600;
}

/* hover over list items */
ul.jqtree-tree .jqtree-element:hover {
  border: 1px solid var(--light-gray-color);
  border-radius: var(--border-radius-small);
  box-shadow: 1px 1px 3px var(--shadow-color);
  z-index: 10;
}

/* container for open/close icon */
ul.jqtree-tree .jqtree-toggler.jqtree-toggler-left {
  color: transparent;
  max-width: 15px;
  overflow: hidden;
  display: inline-block;
  line-height: 18px;
  vertical-align: middle;
  margin-right: 5px;
}

/* list items with children */
ul.jqtree-tree li.jqtree-folder {
  margin: 0;
}

/* open/close icon */
ul.jqtree-tree .jqtree-toggler::before {
  content: var(--toc-open);
  font-family: FontAwesome;
  color: var(--medium-gray-color);
  font-size: 16px;
  font-weight: normal;
}

/* swap icon when closed */
ul.jqtree-tree .jqtree-toggler.jqtree-closed::before {
  content: var(--toc-closed);
}

/* hover over icon */
ul.jqtree-tree .jqtree-toggler:hover::before {
  color: var(--text-color);
}

/* text of items */
ul.jqtree-tree span.jqtree-title {
  font-size: 14px;
  margin: 0px;
  white-space: nowrap;
  overflow: hidden;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}

#glossaryList button:hover,
#glossaryList button:focus,
#indexList button:hover,
#indexList button:focus {
  outline: none;
}

/* index and glossary main containers */
#glossary1,
#index1 {
  height: auto;
  min-height: 100%;
  padding-left: 2px;
}

#glossaryList,
#indexList {
  margin: 0px;
  width: 35px;
  position: absolute;
  float: left;
  height: calc(100% - 60px);
}

html[dir="rtl"] #glossaryList, html[dir="rtl"] #indexList {
    float: right;
}

/* containers for index and glossary filter lists */
#glossaryList .overviewWrp,
#indexList .overviewWrp {
  position: absolute;
  width: 35px;
  top: 22px;
  bottom: 23px;
  overflow: hidden;
}

/* filter list buttons */
.buttonGlossary-up,
.buttonGlossary-down {
  position: absolute;
  background-color: var(--button-bg-color);
  padding: 3px 4px;
  min-width: 24px;
  border: 1px solid var(--light-gray-color);
  border-radius: var(--border-radius-small);
  font-size: 14px;
  color: var(--gray-color);
}

/* filter list Up button */
.buttonGlossary-up {
  top: 0px;
  margin: 0 2px 3px 2px;
}

/*filter list down button */
.buttonGlossary-down {
  bottom: 0px;
  top: inherit;
  margin: 0px 2px 0px 2px;
}

/* container for alphabet headings */
#glossaryList .overview,
#indexList .overview {
  margin: 2px 0px;
  width: 100%;
  padding: 0px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

/* alphabet list items */
#glossaryList li,
#indexList li {
  display: block;
  width: 25px;
  text-align: center;
  margin: 0 2px;
  padding: 0;
  border-radius: var(--border-radius-small);
  border: 1px solid transparent;
}

/* alphabet list item text and links */
#glossaryList li a,
#indexList li a {
  display: inline-block;
  color: var(--text-color);
  font-weight: 600;
  padding-bottom: 2px;
}

/* disabled alphabet heading - those with no items */
#glossaryList li.disabled a,
#indexList li.disabled a {
  color: var(--light-gray-color);
}

/* hover over alphabet headings and up/down buttons */
#indexList li:hover,
#glossaryList li:hover,
.buttonGlossary-up:hover,
.buttonGlossary-down:hover {
  border: 1px solid var(--light-gray-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  color: var(--text-color);
}

/* selected alphabet heading */
#glossaryList li.active,
#indexList li.active {
  background: var(--primary-light-color);
  border-radius: var(--border-radius-small);
  border: 1px solid var(--primary-light-color);
}

/* main container for index and glossary terms */
#glossary1 #accordion,
#index1 #accordion {
  width: calc(100% - 30px);
  float: right;
  margin-top: -2px;
}

html[dir="rtl"] #glossary1 #accordion, html[dir="rtl"] #index1 #accordion {
    float: left;
}

/* container for indivudal terms */
#glossary1 #accordion .panel,
#index1 #accordion .panel {
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  background: none;
}

#glossary1 #accordion .panel-heading,
#index1 #accordion .panel-heading {
  background: none;
  border: none;
  padding: 0px 5px 0px 0px;
  margin-top: 0;
}

/* link on individual items */
#glossary1 #accordion h4 a,
#index1 #accordion h4 a {
  font-size: 14px;
  line-height: 1.3;
  font-weight: normal;
  padding: 5px 5px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  margin-top: 2px;
}

/* active or open glossary term */
#glossary1 #accordion h4 a.active {
  font-weight: 600;
  color: var(--heading-text-color);
  border: 1px solid var(--light-gray-color);
  background-color: var(--heading-bg-color);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 1px 0px 3px var(--light-gray-color);
}

#glossary1 #accordion .panel-collapse .panel-heading {
  display: none;
}

/* glossary definition container */
#glossary1 #accordion .panel-collapse .panel-body {
  padding: 0 5px;
  margin: 0 5px 3px 0;
  border: 1px solid var(--light-gray-color);
  color: var(--text-color);
  background-color: var(--content-bg-color);
  border-bottom-left-radius: var(--border-radius-small);
  border-bottom-right-radius: var(--border-radius-small);
  max-width: 100%;
  box-shadow: 1px 1px 3px var(--shadow-color);
}

#index1 #accordion .panel-heading a.active {
  font-weight: 600;
}


#glossary1 #accordion .panel-heading a.active {
  font-weight: 600;
  color: var(--dark-gray-color);
}

#glossary1 #accordion a,
#index1 #accordion a {
  display: inline-block;
  width: 100%;
  color: var(--text-color);
  border: 1px solid var(--content-bg-color);
  padding-bottom: 2px;
}

#glossary1 #accordion h4 a:hover,
#index1 #accordion h4 a:hover {
  border: 1px solid var(--light-gray-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  color: var(--text-color);
}

#menusection .panel-collapse.collapse.in,
#glossary1 #accordion .panel-collapse.collapse.in,
#index1 #accordion .panel-collapse.collapse.in {
  height: 100%;
}

#accordion3>.panel-default>.panel-collapse>.panel-body {
  border: 0;
  overflow-y: scroll;
}

div:hover>h1>.dropdown,
div:hover>h2>.dropdown,
div:hover>h3>.dropdown,
div:hover>h4>.dropdown,
div:hover>h5>.dropdown {
  display: flex;
}

/* footer panel containing the TOC, Index, and Glossary buttons */
#menusection>div.panel-footer {
  background-color: var(--background-color) !important;
  position: absolute;
  width: 100% !important;
  padding: 5px 3px 5px 3px;
  border-top: 1px solid var(--light-gray-color);
  border-left: none;
  border-radius: 0;
}

/* normal button */
#menusection>div.panel-footer .menu_bot_btn {
  width: calc(33.3333% - 5px);
  border: 1px solid var(--light-gray-color);
  border-radius: var(--border-radius-small);
  background-color: var(--button-bg-color);
  color: inherit;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
  padding: 6px 5px;
  margin: 0 2px 0 2px;
  box-shadow: none;
  font-weight: 600;
}

html[dir="rtl"] #menusection > div.panel-footer .menu_bot_btn {
    float: right;
}

/* hover over normal and active button */
#menusection>div.panel-footer .menu_bot_btn:hover,
#menusection>div.panel-footer .menu_bot_btn.active:hover {
  border: 1px solid var(--active-btn-bg-color);
  background-color: var(--active-btn-bg-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  color: var(--active-btn-text-color);
}

/* active/selected button */
#menusection>div.panel-footer .menu_bot_btn.active {
  border: 1px solid var(--active-btn-bg-color);
  background-color: var(--active-btn-bg-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  color: var(--active-btn-text-color);
}

/* button on left to colllapes right nav Panel*/
#left_block_collapse {
  z-index: 8;
  cursor: pointer;
  height: 24px;
  width: 24px;
  border: 1px solid transparent;
  border-radius: 15px;
  right: -18px;
  position: absolute;
  top: 30px;
  overflow: hidden;
  float: left;
  background: white;
  box-shadow: 1px 1px 3px var(--shadow-color);
  line-height: 14px;
}

html[dir="rtl"] #left_block_collapse {
    left: -18px;
    right: inherit;
}

/* hide text content of button */
#left_block_collapse>p {
  color: transparent;
  margin: 0;
  padding: 0;
  max-width: 25px;
  text-align: center;
}

/* hide original icons */
#left_block_collapse>p>span {
  display: none;
}

/* icon before current block*/
#left_block_collapse>p::before {
  content: var(--left-pane-open);
  font-family: FontAwesome;
  color: var(--dark-gray-color);
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
  padding: 0 0 0 7px;
}

html[dir="rtl"] #left_block_collapse>p::before {
  content: var(--left-pane-closed);
  padding: 0 4px 0 7px;
}

/* swap button icons when collpased */
.move_left #left_block_collapse>p::before {
  content: var(--left-pane-closed);
  padding: 0 0 0 10px;
}

html[dir="rtl"] .move_left #left_block_collapse>p::before {
  content: var(--left-pane-open);
  padding: 0 7px 0 4px;
}

/* hover over button */
#left_block_collapse:hover {
  background-color: var(--primary-light-color);
  border: 1px solid var(--primary-light-color);
}

/*#endregion LEFTNAV*/

/*#region CONTENTBLOCK - this section has all the content publihsed from Author-it */

/*******************************************************************************
 *   This section contains styles to define the container that the content from
     Author-it is added. The style to define the content itself are found in
     contentstyles.css
 
     The structure of this section is:
 
     div.center_block > div#center_content
         > ol.breadcrumb > li
         > div#content_container
             > div#{topic id} class="{topic teamplate}
                 > author-it generated content
 
  *******************************************************************************/

/* content section container */
section.content_block>.center_block>.center_content>.content_container {
  width: 100%;
  overflow: hidden;
  display: block;
  padding: 0px 20px 10px 20px;
  user-select: text;
}

div[data-aitid] {
  user-select: text;
}

/* breadcrumbs container */
ol.breadcrumb {
  padding: 10px 15px 10px 15px;
  background-color: none !important;
  background: none !important;
  border-bottom: 1px solid var(--light-gray-color);
  margin-bottom: 15px;
  max-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* breadcrumbs separator */
.breadcrumbSeparator {
  padding: 0 2px 0 2px;
} 

.breadcrumbSeparator::after {
  content: var(--breadcrumbs-separator);
  font-family: FontAwesome;
  color: var(--dark-gray-color);
  font-weight: bold;
}

html[dir="rtl"] .breadcrumbSeparator::after {
  content: var(--related-menu-closed);
  font-family: FontAwesome;
  color: var(--dark-gray-color);
  font-weight: bold;
}


/* breadcrumbs item */
.breadcrumb>li>a {
  color: var(--text-color);
  padding: 2px 4px 2px 4px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* breadcrumbs active item */
.breadcrumb>.active a {
  color: var(--primary-color);
  font-weight: 600;
  text-shadow: none;
}

/* hover over breadcrumbs item */
.breadcrumb>li>a:hover {
  padding: 2px 3px 2px 3px;
  border: 1px solid var(--light-gray-color);
  border-radius: var(--border-radius-small);
  box-shadow: 1px 1px 3px var(--shadow-color);
}

/* container for the topic context menu*/
.right-box-menu {
  display: flex;
  align-items: center;
  user-select: none;
  display: flex;
  background-color: var(--control-bg-color);
  align-items: center;
  position: relative;
  top: -5px;
  right: -5px;
  float: right;
  clear: both;
  padding: 5px 5px 5px 5px;
  border: 1px solid var(--light-gray-color);
  border-radius: var(--border-radius-small);
  box-shadow: 1px 1px 3px var(--shadow-color);
  z-index: 10;
  margin-bottom: -10px;
}

.dropdown.pull-right.thisRatebox.right-box-menu.open > ul.dropdown-menu.topic_right_icons {
  overflow-y: inherit;
}

html[dir="rtl"] .dropdown.pull-right.thisRatebox.right-box-menu.open > ul.dropdown-menu.topic_right_icons {
  margin-right: -175px;
}

html[dir="rtl"] .dropdown.pull-right.thisRatebox.right-box-menu.open > ul.dropdown-menu.topic_right_icons::before {
  left: 20px;
  right: auto;
}

/* ellipsis button*/
.thisRatebox>a {
  font-size: 10px;
  padding: 2px 3px 2px 3px;
  min-width: 20px;
  max-height: 25px;
}

.thisRatebox>a img {
  opacity: 0.5;
}

/* hover over ellipsis, expand, and related group headings*/
.thisRatebox>a:hover,
.related_header:hover,
p.group_header:hover {
  background-color: var(--primary-light-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  border-radius: var(--border-radius-small);
}

/* expand/collpase related groups heading */
.related_header {
  color: transparent;
  height: 25px;
  width: 20px;
  padding: 0;
  text-align: center;
  overflow: hidden;
}

/* expand/collaps button */
div.related_menu>div.related_header::before {
  content: var(--related-menu-closed);
  font-family: FontAwesome;
  color: var(--gray-color);
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  display: inline-block;
  vertical-align: top;
  height: 25px;
  width: 20px;
}

/* swap expand with collpase icon */
div.related_menu.open>div.related_header::before {
  content: var(--related-menu-open);
}

/* container for the related group headings */
.related_menu {
  display: flex;
  align-items: center;
  font-size: 16px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-weight: initial;
}

/* When related group menu is visible */
.related_menu.open .dropdown.group_menu {
  display: flex;
  align-items: center;
}

/* container for each related group */
div .group_menu {
  color: var(--gray-color);
  display: block;
  padding: 0;
  margin-right: -2px;
}

/* related group headings */
p.group_header {
  margin: 0;
  padding: 2px 0px 2px 3px;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  overflow: hidden;
  max-width: calc(100% - 5px);
  max-height: 25px;
  min-height: 25px;
  line-height: 20px;
  vertical-align: top;
  /*border: 1px solid blue;*/
  white-space: nowrap;
}

/* drop-down menu */
.topic_right_icons {
  padding: 5px;
  border-radius: var(--border-radius-small);
  right: -2px !important;
  top: 42px;
  left: initial;
  bottom: initial;
  font-size: 14px;
  box-shadow: 1px 1px 3px var(--shadow-color);
}

/* drop-down menu when clicked from related group headings*/
.group_menu>.topic_right_icons {
  right: 5px !important;
  top: 37px;
}

html[dir="rtl"] .group_menu>.topic_right_icons {
  margin-right: -175px;
}

/* add up arrow to drop-down menu */
.topic_right_icons::before {
  content: '';
  right: 10px;
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(../images/arrow_top.png);
  background-repeat: no-repeat;
  top: -9px;
}

/* if text is too long for menu item*/
.topic_right_icons>li>a {
  text-overflow: ellipsis;
  overflow: hidden;
}

/* hover over drop-down menu item */
.topic_right_icons>li>a:hover {
  background-color: var(--light-gray-color);
}

/* drop-dwon menu item */
.topic_right_icons>li {
  cursor: pointer;
}

/* hide drop-down and related groups menu by default */
div>h1>.dropdown,
div>h2>.dropdown,
div>h3>.dropdown,
div>h4>.dropdown,
div>h5>.dropdown,
.dropdown.group_menu {
  display: none;
}

/* when drop-down menus are open */
div>h1>.dropdown.open,
div>h2>.dropdown.open,
div>h3>.dropdown.open,
div>h4>.dropdown.open,
div>h5>.dropdown.open,
div>h1>.dropdown.related_menu_opened,
div>h2>.dropdown.related_menu_opened,
div>h3>.dropdown.related_menu_opened,
div>h4>.dropdown.related_menu_opened,
div>h5>.dropdown.related_menu_opened {
  display: flex;
}

/* defualts for links in the content section */
.content_container a:hover {
  cursor: pointer;
  text-shadow: 1px 1px 3px var(--light-gray-color);
}

/* links over glossary terms */
.content_block span[data-glossaryitemid] {
  color: var(--primary-color);
  cursor: pointer;
}

/* icon after glossary terms */
.content_block span[data-glossaryitemid]::after {
  content: var(--glossary-link-icon);
  font-family: FontAwesome;
  padding-left: 3px;
}

/* hover over glossary terms */
.content_block span[data-glossaryitemid]:hover {
  text-shadow: 1px 1px 3px var(--light-gray-color);
}

/* external links */
a[href^="http"] {}

/* icon after external links */
a[href^="http"]::after {
  content: var(--external-link-icon);
  font-family: FontAwesome;
  padding-left: 3px;
}

/* icon after expand inline */
a[href^="#expandinline"]::after {
  content: var(--expand-inline-closed);
  font-family: FontAwesome;
  padding-left: 3px;
  font-weight: 600;
}

/* swap icon when expanded inline */
a[href^="#expandinline"][aria-expanded="true"]::after {
  content: var(--expand-inline-open);
}

/* icons after expanding block */
a[href^="#expandblock"]::after {
  content: var(--expand-block-closed);
  font-family: FontAwesome;
  padding-left: 3px;
  font-weight: 600;
}

/* swap icon when expanded block */
a[href^="#expandblock"][aria-expanded="true"]::after {
  content: var(--expand-block-open);
}

/* icon after popup on hover  */
a[data-toggle="popover"]::after {
  content: var(--popup-link-icon);
  font-family: FontAwesome;
  padding-left: 2px;
  display: inline-block;
  position: relative;
  top: -5px;
}

/* container for glossary terms */
#tooltip {
  float: left;
  position: absolute;
  width: 300px;
}

html[dir="rtl"] #tooltip {
    float: right;
}

/* main glossary ter popup box */
.tooltip_box {
  position: absolute;
  background-color: var(--content-bg-color);
  border: 1px solid var(--light-gray-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  border-radius: var(--border-radius-small);
  padding: 0;
  z-index: 5000;
  max-width: 300px;
  margin-top: 5px;
}

/* adjustment of position when popup is above glossary links*/
#tooltip div[class*="Bottom"] {
  margin-top: 40px;
}

/* position of arrow when on bottom of popup*/
.bottomTooltip:after,
.leftBottomTooltip:after,
.centerBottomTooltip:after,
.rightBottomTooltip:after {
  content: "";
  bottom: -9px;
  position: absolute;
  top: initial;
  background-image: url(../images/arrow_top.png);
  background-repeat: no-repeat;
  transform: rotate(-180deg);
  height: 20px;
  width: 20px;
}

.bottomTooltip:after {}

.leftBottomTooltip:after {
  left: 5px;
}

.centerBottomTooltip:after {
  right: 150px;
}

.rightBottomTooltip:after {
  right: 5px;
}

/* position of arrow when on Top of popup*/
.rightTopTooltip:before,
.centerTopTooltip:before,
.leftTopTooltip:before {
  content: '';
  position: absolute;
  bottom: initial;
  width: 20px;
  height: 20px;
  background-image: url(../images/arrow_top_grey.png);
  background-repeat: no-repeat;
  top: -9px;
}

.rightTopTooltip:before {
  right: 5px;
}

.centerTopTooltip:before {
  right: 150px;
}

.leftTopTooltip:before {
  left: 5px;
}

/* container for close button - not heading text*/
.tooltip_box>.tooltip_heading {
  padding: 0;
  margin: 0;
  text-align: end;
}

/* container for glossary term popup close button */
.tooltipTitle span {
  position: absolute;
  right: 10px;
  z-index: 999;
  top: 5px;
}

html[dir="rtl"] .tooltipTitle span {
  position: relative;
  right: -10px;
  height: 0px;
}

/* glossary term popup close button*/
#tooltipCloseBut {
  opacity: 0.7;
}

/* hover over glossary term popup close button*/
#tooltipCloseBut:hover {
  opacity: 0.3;
}

/* container for glossary term popup body */
.tooltiptext {
  margin: 0;
  overflow: hidden;
}

/* container for glossary term Author-it topic */
.tooltiptext .panel-default {
  padding: 0;
  margin: 0;
  height: auto !important;
  border: none;
}

/* glossary term heading */
.tooltiptext .panel-heading {
  background-color: var(--heading-bg-color);
  color: var(--heading-text-color);
  border: none;
  padding: 10px 15px;
  border-radius: 0;
  font-size: 14px;
  text-shadow: none;
  font-weight: 600;
  min-width: 298px;
}

/* glossary term body */
.tooltiptext .panel-body {
  border: none;
  border-color: #FFFFFF;
  padding: 5px 15px;
  overflow-y: auto;
  max-height: 300px;
}

/* container for popup on hover or click */
.popover {
  border: 1px solid var(--light-gray-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  border-radius: var(--border-radius-small);
  padding: 0;
  margin: 0;
}

/* title for popup on hover or click */
.popover-title {
  background-color: var(--heading-bg-color);
  color: var(--heading-text-color);
  border: none;
  padding: 10px 15px;
  border-radius: 0;
  text-shadow: none;
}

.popover.bottom>.arrow:after {
  border-bottom-color: inherit;
}

.popover.bottom>.arrow {
  border-bottom-color: inherit;
}

html[dir="rtl"] .popover.bottom>.arrow:after { 
  top: 1px;
  content: " ";
  border-top-width: 0;
  height: 1px;
  margin-right: -10px;
}

html[dir="rtl"] .popover.bottom>.arrow { 
  margin-left: -11px;
}

html[dir="rtl"] .popover.top>.arrow:after {
  margin-right: -10px;
}

/* container for popup conent on hover or click */
.popover-content {
  padding: 5px 15px;
}

/* text in expanding inline links*/
.text-info {
  color: inherit;
}

/* text when expanded in expanding inline links*/
.text-info.collapse.in {
  display: inline;
}

/* contaning for expanding blocks */
div[id^="expandblock"] .well {
  border: 1px solid var(--light-gray-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  background-color: inherit;
  border-radius: var(--border-radius-small);
  padding: 0 10px;
  margin: 5px 0;
}

/*#endregion CONTENTBLOCK */

/*#region RIGHTNAV - Located on the far right */

/*******************************************************************************
 *   This section contains styles to define all the widget panels
 *   The contaniner of all elements in the section is #accordion2
  *******************************************************************************/
/* main section contaning the right side */
section.content_block>div.right_block {
  padding: 0;
  width: 20%;
  height: 100%;
  float: right;
  transition: all 0.4s ease-in-out;
  position: relative;
  background-color: var(--background-color);
}

html[dir="rtl"] section.content_block>div.right_block {
    float: left;
}

section.content_block>.right_block.resize-left-hover {
  transition: none;
}

.right_block a {
  color: var(--text-color);
}

/* several nested divs, top padding here prevents padding above scrollbar */
section.content_block>.right_block>div {
  padding-top: 5px;
}

/* Panel Container - this contains the Heading and Body of each Panel */
#accordion2>.panel-default {
  background-color: var(--widget-bg-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  border: 1px solid var(--light-gray-color);
  border-radius: var(--border-radius-small);
  margin: 5px 10px 0 10px;
}

/* when the mouse hovers over the panel */
#accordion2>.panel-default:hover {
  border: 1px solid var(--active-btn-bg-color);
}

/* Panel Heading - visible by default and must be clicked to make the Panel Body visible also contains the title*/
#accordion2>.panel-default>.panel-heading {
  background: none;
  border: none;
  padding: 0;
}

/* panel title defaults */
#accordion2>.panel-default>.panel-heading>.panel-title {
  margin: 0;
  padding: 0;
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
}

/* Panel title when the widget is collapsed */
#accordion2>.panel-default>.panel-heading>.panel-title>a.collapsed {
  background-color: var(--widget-head-bg-color);
  color: var(--widget-head-text-color);
  width: 100%;
  display: inline-block;
  max-height: 40px;
  height: 40px;
  position: relative;
}

/* open/close icons for panels */
a>.acc_expand:before {
  content: var(--widget-closed);
  color: var(--gray-color);
}

/* swap icons when closed */
a.collapsed>.acc_expand:before {
  content: var(--widget-open);
}

/* hover over open/close icon */
a>.acc_expand:hover {
  opacity: 0.5;
}

/* Hover over collapsed panel title  */
#accordion2>.panel-default>.panel-heading>.panel-title>a.collapsed:hover {
  background-color: var(--active-btn-bg-color);
  color: var(--active-btn-text-color);
}

/* Expand/collpase icon on the right of the panel title*/
#accordion2>.panel-default>.panel-heading>.panel-title>a>.acc_expand {
  position: absolute;
  right: 10px;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}

/*Panel title when panel is expanded */
#accordion2>.panel-default>.panel-heading>.panel-title>a {
  color: var(--active-btn-text-color);
  background-color: var(--active-btn-bg-color);
  width: 100%;
  display: block;
  padding: 7px 25px 7px 10px;
  max-height: 40px;
  word-break: break-all;
  text-overflow: ellipsis;
  line-height: 25px;
  vertical-align: middle;
}

/* Panel Body - hidden by default, heading must be clicked to make the Panel Body visible */
#accordion2>.panel-default>.panel-collapse>.panel-body {
  border: 0;
  padding: 10px;
  overflow-x: hidden;
}

/* collapses right section */
.move_right {
  margin-right: -20%;
}

html[dir="rtl"] .move_right {
  margin-left: -20%;
  margin-right: inherit;
}

/* Widget - What's in this section */
#whatssection {}

/* Widget - Resources  */
.resources_list {}

/* Widget - Recently updated topics */

/* List item for each recent topic */
#recently li.media {}

/* forces the date and content divs to be inline */
.media-list>li.media div {
  display: inline;
  vertical-align: bottom;
}

/* link on the date that points to the recent topic*/
.media-list>li.media>div>a {
  font-weight: 600;
}

.media-list>li.media {
  padding: 2px 3px 2px 3px;
  border: 1px solid transparent;
  line-height: 1.3;
  margin: 2px 0;
}

/* hover on the link*/
.media-list>li.media:hover {
  padding: 2px 3px 2px 3px;
  border: 1px solid var(--light-gray-color);
  border-radius: var(--border-radius-small);
  box-shadow: 1px 1px 3px var(--shadow-color);
}

/* add a dash before the title of the recent topic */
.media-list>li.media>div.media-body::before {
  content: ' - ';
}

/* Widget -Most Recent Searches */

/* Clear History button */
#mostrecent a.pull-right,
.sidebar_content a.pull-right {
  border: 1px solid var(--secondary-color);
  border-radius: var(--border-radius-small);
  background-color: var(--secondary-color);
  color: white !important;
  font-size: 12px;
  padding: 0 2px 0 2px;
  line-height: normal;
  margin: -5px;
}

/* Clear History button hover */
#mostrecent a.pull-right:hover,
.sidebar_content a.pull-right:hover {
  background-color: var(--secondary-light-color);
  color: var(--secondary-color) !important;
}

.resources_list li {
  padding-bottom: 5px;
  line-height: normal;
  margin: 5px;
}

/* link to the search */
.resources_list li>a {
  padding: 2px 3px 2px 3px;
  border: 1px solid transparent;
  font-weight: 600;
  margin-left: -3px;
}

/* hover on the link */
.resources_list li>a:hover {
  padding: 2px 3px 2px 3px;
  border: 1px solid var(--light-gray-color);
  border-radius: var(--border-radius-small);
  box-shadow: 1px 1px 3px var(--shadow-color);
  text-decoration: none;
}

/* Widget - May Favorite Pages */

#addToFav li a {
  padding: 10px 5px;
  vertical-align: middle;
}

/* Disqus Widget */

#disqus {
  min-height: 500px;
}

/* hover on the link*/
#addToFav li>a:hover {}

/* trash icon on right*/
#addToFav li>i {
  padding-top: 1px;
}

/* button on right to expand/colllape Widgets panel*/
#right_block_collapse {
  z-index: 8;
  cursor: pointer;
  height: 24px;
  width: 24px;
  border: 1px solid transparent;
  border-radius: 15px;
  left: -20px;
  position: absolute;
  top: 30px;
  overflow: hidden;
  float: left;
  background: white;
  box-shadow: 1px 1px 3px var(--shadow-color);
  line-height: 14px;
}

html[dir="rtl"] #right_block_collapse {
  right: -18px;
  left: inherit;
}

/* hide text content of button */
#right_block_collapse>p {
  color: transparent;
  margin: 0;
  padding: 0;
  max-width: 25px;
  text-align: center;
}

html[dir="rtl"] #right_block_collapse>p {
  padding: 0;
}

/* hide original icons */
#right_block_collapse>p>span {
  display: none;
}

/* icon before current block*/
#right_block_collapse>p::before {
  content: var(--right-pane-open);
  font-family: FontAwesome;
  color: var(--dark-gray-color);
  font-size: 18px;
  line-height: 22px;
  font-weight: 600;
  padding: 0 0 0 9px;
}

html[dir="rtl"] #right_block_collapse>p::before {
  content: var(--right-pane-closed);
  padding: 0 2px 0 0;
}

/* swap button icons when collpased */
.move_right #right_block_collapse>p::before {
  content: var(--right-pane-closed);
  padding: 0 0 0 7px;
}

html[dir="rtl"] .move_right #right_block_collapse>p::before {
  content: var(--right-pane-open);
  padding: 0 0 0 5px;
}

/* hover over button */
#right_block_collapse:hover {
  background-color: var(--active-btn-bg-color);
  border: 1px solid var(--active-btn-bg-color);
  color: var(--active-btn-text-color);
}

/*#endregion RIGHTNAV*/

/*#region FORMS - contains styles for forms and controls */
/*******************************************************************************
     This section contains all styles for forms and controls used in the application
 
 
     Basic structure of forms is:
 
     .modal
         > .modal-content
             > .modal-header
                 > .modal-title
             > .modal-body
             > .modal-footer
 
 
  *******************************************************************************/

/* main container for all modal forms */
.modal-content {
  background-color: var(--form-bg-color);
  padding: 0;
  border: 1px solid var(--light-gray-color);
  border-radius: var(--border-radius-large);
}

/* header section of form */
.modal-header {
  background-color: var(--heading-bg-color);
  border: 0;
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 600;
}

/* title of form */
.modal-title {
  color: var(--heading-text-color);
}

/* body section of form */
.modal-body {
  padding: 10px 15px;
  max-height: 70vh;
  overflow: auto;
}

/* footer section of form */
.modal-footer {
  padding: 10px 15px;
  border-top: 1px solid var(--light-gray-color);
}

/* sub-section headings */
.modal-body h4,
.sidebar_content h4 {
  padding: 0;
  margin: 5px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-color);
}

/* config items list container */
.config_menu {
  padding: 0;
  margin: 10px 0;
  font-size: 14px;
  color: var(--text-color);
}

/* config items */
.config_menu li {
  margin: 10px 0;
}

/* check box slider control styles */
.checkbox-slider--b-flat {
  position: relative;
  margin: 0;
}

.checkbox-slider--b-flat input {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 0%;
  margin: 0 0;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

.checkbox-slider--b-flat input+span {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-slider--b-flat input+span:before {
  position: absolute;
  left: 0px;
  display: inline-block;
}

.checkbox-slider--b-flat input+span>h4 {
  display: inline;
}

.checkbox-slider--b-flat input+span {
  padding-left: 40px;
}

.checkbox-slider--b-flat input+span:before {
  content: "";
  height: 20px;
  width: 40px;
  background: rgba(100, 100, 100, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
  transition: background 0.2s ease-out;
}

.checkbox-slider--b-flat input+span:after {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0px;
  top: 0;
  display: block;
  background-color: var(--control-bg-color);
  transition: margin-left 0.1s ease-in-out;
  text-align: center;
  font-weight: bold;
  content: "";
}

.checkbox-slider--b-flat input:checked+span:after {
  margin-left: 20px;
  content: "";
}

.checkbox-slider--b-flat input:checked+span:before {
  transition: background 0.2s ease-in;
}

.checkbox-slider--b-flat input+span {
  padding-left: 20px;
}

.checkbox-slider--b-flat input+span:before {
  border-radius: 20px;
  width: 40px;
}

.checkbox-slider--b-flat input+span:after {
  background-color: var(--control-bg-color);
  content: "";
  width: 20px;
  border: solid transparent 2px;
  background-clip: padding-box;
  border-radius: 20px;
}

.checkbox-slider--b-flat input:not(:checked)+span:after {
  -webkit-animation: popOut ease-in 0.3s normal;
  animation: popOut ease-in 0.3s normal;
}

.checkbox-slider--b-flat input:checked+span:after {
  content: "";
  margin-left: 20px;
  border: solid transparent 2px;
  background-clip: padding-box;
  -webkit-animation: popIn ease-in 0.3s normal;
  animation: popIn ease-in 0.3s normal;
}

.checkbox-slider--b-flat input:checked+span:before {
  background: var(--primary-color);
}

.checkbox-slider--b-flat.checkbox-slider-md input+span:before {
  border-radius: 30px;
}

.checkbox-slider--b-flat.checkbox-slider-md input+span:after {
  border-radius: 30px;
}

.checkbox-slider--b-flat.checkbox-slider-lg input+span:before {
  border-radius: 40px;
}

.checkbox-slider--b-flat.checkbox-slider-lg input+span:after {
  border-radius: 40px;
}

.checkbox-slider--b-flat input+span:before {
  box-shadow: none;
}

/* container for search results*/
#shortened_search_result {
  position: fixed;
  height: 100vh;
  right: 0;
  width: 40%;
  z-index: 50000;
  background-color: var(--form-bg-color);
  border: 1px solid var(--light-gray-color);
  display: none;
}

html[dir="rtl"] #shortened_search_result {
  left: 0;
  right: inherit;
}

html[dir="rtl"] #search_result_label_space {
  padding-right: 10px;
}

.cancel_search {
  float: right;
  margin: 0 10px;
}

html[dir="rtl"] .cancel_search {
  float: left;
}

/* visible search results */
#shortened_search_result.show {
  display: block;
}

/* header for search results */
#shortened_search_result>div:nth-child(1),
#shortened_search_result>div h3 {
  padding: 0 !important;
  margin: 0;
}

/* title for search results */
#shortened_search_result>div>h2 {
  padding: 10px 15px;
  margin: 0;
  background-color: var(--heading-bg-color);
  color: var(--heading-text-color);
  border-bottom: 1px solid var(--light-gray-color);
  font-size: 16px;
  font-weight: 600;
}

/* submit button inside heading */
#shortened_search_result>div .submit_btn {
  margin: 5px 10px !important;
}

/* page counter inside heading */
#shortened_search_result>div #search_page_counter {
  margin-top: 12px;
}

/* close button inside heading */
#shortened_search_result>div img {
  padding: 15px 5px;
  line-height: 15px;
}

/* hover over close button */
#shortened_search_result>div img:hover {
  opacity: .5;
}

/* search results pane */
#shortened_search_result>div:nth-child(2) {
  padding: 0 10px !important;
  overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100% - 55px);
}

/* heading/link of search results */
#shortened_search_result>div td a {
  font-size: 16px;
  font-weight: 600;
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: var(--border-radius-small);
  margin: 0 0 5px -5px;
  display: inline-block;
  color: var(--text-color);
}

/* hover over heading/link of search results */
#shortened_search_result>div td a:hover {
  border: 1px solid var(--light-gray-color);
  box-shadow: 1px 1px 3px var(--shadow-color);
  color: var(--text-color)
}

/* body text of search results */
#shortened_search_result>div td {
  font-size: 14px;
  padding: 10px 5px 0 5px;

}

/* progressbar container */
.progress {
  border-radius: 2px;
  height: 15px;
  margin: 10px 0 0 0;
  padding: 0;
  box-shadow: 1px 1px 3px var(--shadow-color) inset;
}

/* progressbar  bar*/
.progress .progress-bar {
  background-color: var(--primary-light-color);
}


/* primary button */
.btn-primary {
  border: 1px solid var(--button-bg-color);
  background-color: var(--button-bg-color);
  border-radius: var(--border-radius-small);
  color: var(--button-text-color);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px;
}

/* primary button when hover, active or has focus */
.btn-primary:hover .btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary.focus:active,
.btn-primary:active:focus,
.btn-primary:active {
  border: 1px solid var(--active-btn-bg-color);
  background-color: var(--active-btn-bg-color);
  box-shadow: 1px 1px 3px var(--light-gray-color);
  color: var(--active-btn-text-color);
}

/* Submint button */
.submit_btn,
.res-searchbtn {
  border: 1px solid var(--submit-btn-bg-color);
  background-color: var(--submit-btn-bg-color);
  border-radius: var(--border-radius-small);
  color: var(--submit-btn-text-color);
  font-weight: 600;
  font-size: 14px;
  padding: 6px 10px;
}

/* hover over submit button */
.submit_btn:hover,
.submit_btn:focus,
.submit_btn:active,
.res-searchbtn:hover {
  border: 1px solid var(--active-btn-bg-color);
  background-color: var(--active-btn-bg-color);
  box-shadow: 1px 1px 3px var(--light-gray-color);
  color: var(--active-btn-text-color);
}

/* share button*/
.share_social>li {
  width: 24%;
  margin: 0 auto;
  padding: 15px;
}

.share_social>li>a {
  font-size: 13px;
  color: #666;
}

.share_social>li>a>i {
  font-size: 24px;
}

/* grey overlay that dims the rest of the app when sidebar is visible */
.sidebar_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .8);
  z-index: 9;
  display: none;
}

/* makes sidebar overlay visible */
.sidebar_overlay.show {
  display: block;
}

/* headings for sidebar */
.sidebar_title {
  background-color: var(--heading-bg-color);
  color: var(--heading-text-color);
  font-size: 16px;
  margin: 0;
  padding: 10px 15px;
}

/* hover over close button */
.sidebar_title>a>img:hover {
  opacity: .5;
}

/* menu or navigation sidebar container */
.m_sidebar_container {
  width: 320px;
  position: fixed;
  top: 0;
  left: -320px;
  height: 100%;
  display: block;
  background-color: var(--background-color);
  z-index: 10;
  transition: all 0.4s ease-in-out;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 5px;
}

/* makes menu sidebar visible */
.m_sidebar_container.in {
  left: 0;
  transition: all 0.4s ease-in-out;
}

#left-res-tree {
  font-size: 13px
}

#left-res-tree .jqtree-element {
  padding: 10px 5px;
}

/* sidebar content container */
.sidebar_content {
  padding: 15px;
  flex-grow: 1;
  overflow: auto;
  box-sizing: border-box;
}

/* seacrh sidebar container*/
.mobile-search {
  width: 50%;
  position: fixed;
  top: 0;
  right: -50%;
  height: 100%;
  display: block;
  background-color: var(--background-color);
  z-index: 10;
  transition: all 0.4s ease-in-out;
  overflow: auto;
}

/* make seacrh sidebar visible */
.mobile-search.in {
  right: 0;
  transition: all 0.4s ease-in-out;
}

/* search sidebar box */
.mobile-search .searchBox {
  font-size: 16px;
  /* required to stop iOS zooming in */
  margin: 20px 0px;
}

/* search sidebar button */
.mobile-search .res-searchbtn {
  margin: 10px 0px;
}

html[dir="rtl"] #configPopupLabel {
  font-size: 20px;
}

/* configuration menu sidebar container */
.c_sidebar_container {
  width: 320px;
  position: fixed;
  top: 0;
  right: -320px;
  height: 100%;
  display: block;
  background-color: var(--form-bg-color);
  z-index: 10;
  transition: all 0.4s ease-in-out;
  overflow: auto;
}

/* makes configuration sidebar visible */
.c_sidebar_container.in {
  right: 0;
  transition: all 0.4s ease-in-out;
}

/* help sidebar container */
.h_sidebar_container {
  width: 500px;
  position: fixed;
  top: 0;
  right: -500px;
  height: 100%;
  display: block;
  background-color: var(--background-color);
  z-index: 10;
  transition: all 0.4s ease-in-out;
  overflow: auto;
}

/* makes help sidebar visible */
.h_sidebar_container.in {
  right: 0;
  transition: all 0.4s ease-in-out;
}

/* widgets sidebar container */
.p_sidebar_container {
  width: 500px;
  position: fixed;
  top: 0;
  right: -500px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  z-index: 10;
  transition: all 0.4s ease-in-out;
}

/* makes widget sidebar container visible */
.p_sidebar_container.in {
  right: 0;
  transition: all 0.4s ease-in-out;
}

/* links inside widget sidebar */
.p_sidebar_container a {
  color: var(--text-color);
}

/* widget styles are defined in the RIGHTNAV region, only overrides for sidebars defined here*/

/* recently updated pages override */
.sidebar_content .media-list>li.media {
  margin: 10px 0;
}

/* resource list item overrides */
.sidebar_content .resources_list li {
  padding-bottom: 10px;
  line-height: normal;
  margin: 10px 5px;
}

/* resource list link overrides */
.sidebar_content .resources_list li>a {
  padding: 10px 5px;
  margin-left: -5px;
}

/* hover over resource list link overrides */
.sidebar_content .resources_list li>a:hover {
  padding: 10px 5px;
}

/*#endregion FORMS */

/*#region RESPONSIVE - Adjustments for screen size and types */

/*******************************************************************************
     This section contains rules for responsive design. Various parts of the UX
     Are shown or hidden, resized, spacing adjusted, or font sizes changed.
 
     The following major elements/regions are affected:
 
         HEADER - swaped between Desktop and iPad headers
         NAVBAR - turned on/off
         LANDING - search, rotators, and promoted content allways shwon
             Search - Fonts/spacing of title and search resized
             Rotator - Number of items and width adjusted
             Footer - turned on/off
         CONTENT - always shown, height/width adjusted
         LEFTNAV - turned on/off, width adjusted
         RIGHTNAV - turned on/off, width adjusted
         FORMS - forms and sidebar widths adjusted
 
     Changes will occur at specific width break points (BP) based on screen width.
     Height is not explicitly considered but generally reduced was width reduces.
 
     The following widths are considered:
         --- BP0 - min size 320px ---
         320px - iPhone 5/SE
         360px - Galaxy S5-S9+
         375px - iPhone 6/7/8/X/XS
         414px - iPhone 6/7/8 Plus/XR/XS Max, Galaxy Note 9
         640px - VGA
         --- BP1 - 320-640px ---
         768px - iPad, iPad Mini,
         800px - SVGA, Kindle Fire HDX
         --- BP2 - 641-800px ---
         834px - iPad Pro 10.5in
         1024px - XVGA, iPad Pro 12.9in
         --- BP3 - 801-1024 ---
         1280px - SXGA (and above)
         --- BP4 - 1280px and above ---
 

     Bootstrap default breakpoints are also used for responsive design
         (xs) Extra small devices (phones)
         --- less than 768px ---
         
         (sm) Small devices (tablets)
         --- 768px and up ---
         
         (md) Medium devices (desktops)
         --- 992px and up ---
 
         (lg) Large devices (large desktops)
         --- 1200px and up ---
 
 
  *******************************************************************************/

footer:not(.has_footer) {
  display: none;
}

/* HEADER adjustments */

/* Custom adjustment for extra small screens 320px - 350px wide */
@media (max-width: 350px) {

  /* Header icons */
  header#ipad>div>div>div {
    padding-left: 4px;
    padding-right: 4px;
  }

  header#ipad li.m_top_lang>a {
    font-size: 14px;
  }
}

/* BP3 and over - adjustment for screen over 800px wide */
@media (min-width: 801px) {

  /* hide Desktop HEADER */
  #desktop {
    display: none;
  }

  /* show iPad HEADER */
  #ipad {
    display: block;
  }

  /* hide NAVBAR */
  .navbar {
    display: none
  }
}

/* BP1 and BP2 - adjustments for screens upto 800px wide */
@media (max-width: 800px) {

  /* hide Desktop HEADER */
  #desktop {
    display: none;
  }

  /* show iPad HEADER */
  #ipad {
    display: block;
  }

  /* hide NAVBAR */
  .navbar {
    display: none
  }
}

/* BP4 and over  - screens over 1024px wide */
@media (min-width: 1025px) {

  /* show Desktop HEADER */
  #desktop {
    display: block;
  }

  /* hide iPad HEADER */
  #ipad {
    display: none;
  }

  /* hide NAVBAR */
  .navbar {
    display: block;
  }
}

/* LANDING page adjustments */

/* BP1 and BP2 - for screens upto 800px wide */
@media (max-width: 800px) {

  /* hide left TOC */
  .landing_left_block {
    display: none !important;
  }

  /* searchbox container*/
  .mainpage_block.jumbotron {
    margin: 10px;
    padding-top: 0;
  }

  /* heading and sub-heading */
  .mainpage_block.jumbotron>h1,
  .mainpage_block.jumbotron>p {
    margin-top: 20px;
    line-height: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  /* font sizes for heading and sub-heading*/
  .mainpage_block.jumbotron>h1 {
    font-size: 24px;
  }

  .mainpage_block.jumbotron>p {
    font-size: 20px;
  }

  /* height for main landing page container */
  .landing_container {
    height: calc(100vh - 80px);
  }

  /* rotator container */
  .carousel-inner {
    width: 100%;
    margin: 0 auto;
  }

  /* show footer */
  footer.has_footer {
    display: block;
  }
}

/* BP1 - adjustments  for screens upto 640px wide */
@media (max-width: 640px) {

  /* searchbox container*/
  .mainpage_block.jumbotron {
    margin: 0;
    padding-top: 0;
  }

  /* hide footer on mobile screen*/
  footer,
  footer.has_footer {
    display: none;
  }

  /* font sizes for heading and sub-heading*/
  .mainpage_block.jumbotron>h1 {
    font-size: 20px;
  }

  .mainpage_block.jumbotron>p {
    font-size: 18px;
  }

  /*height for main landing page container*/
  .landing_container {
    height: calc(100vh - 40px);
  }
}

/* CONTENT page adjustments */

/* BP4 - for screens above 1024px  */
@media (min-width: 1025px) {

  /* set content height */
  .content_container {
    height: calc(100vh - 110px) !important;
  }

  .header_navigation .content_container {
    height: calc(100vh - 150px) !important;
  }

  /* set content height with footer*/
  .content_container.has_footer {
    height: calc(100vh - 150px) !important;
  }

  .header_navigation .content_container.has_footer {
    height: calc(100vh - 190px) !important;
  }


  /* show  and resize RIGHTNAV*/
  section.content_block>.right_block {
    display: block;
    width: 20%;
    height: calc(100vh - 95px) !important;
  }

  .move_right,
  .move_left {
    margin-right: -20%;
  }

  /* show and resize  LEFTNAV*/
  section.content_block>.left_block {
    display: block;
    width: 20%;
    height: calc(100vh - 60px) !important;
  }

  .header_navigation section.content_block>.left_block {
    height: calc(100vh - 95px) !important;
  }

  .header_navigation section.content_block>.left_block.has_footer {
    height: calc(100vh - 135px) !important;
  }
}

/* BP1, BP2, BP3 - for screens upto 1024px wide */
@media (max-width: 1024px) {

  /* set content height */
  .content_container {
    height: calc(100vh - 100px) !important;
  }

  .header_navigation .content_container {
    height: calc(100vh - 135px) !important;
  }

  .header_navigation .content_container.has_footer {
    height: calc(100vh - 175px) !important;
  }

  /* show  and resize RIGHTNAV*/
  section.content_block>.right_block {
    display: block;
    width: 30% !important;
    height: calc(100vh - 80px) !important;
  }

  .right_block.move_right {
    margin-right: -30%;
  }

  /* show and resize  LEFTNAV*/
  section.content_block>.left_block {
    display: none !important;
    width: 30% !important;
    height: calc(100vh - 95px);
  }

  .left_block.move_left {
    margin-left: -30%;
  }
}

/* BP1 and BP2 - for screens upto 800px wide */
@media(max-width: 800px) {
  .header_navigation .content_container.has_footer {
    height: calc(100vh - 135px) !important;
  }
}

/* BP2 - for screens upto 800px wide */
@media (min-width: 641px) and (max-width: 800px) {

  /* set content height */
  .content_container {
    height: calc(100vh - 95px) !important;
  }

  .content_container.has_footer {
    height: calc(100vh - 135px) !important;
  }

  /* show  and resize RIGHTNAV*/
  section.content_block>.right_block {
    display: block;
    width: 30% !important;
    height: calc(100vh - 40px) !important;
  }

  .right_block.move_right {
    margin-right: -30%;
  }

  /* hide and resize  LEFTNAV*/
  section.content_block>.left_block {
    display: none !important;
    width: 30% !important;
  }

  .left_block.move_left {
    margin-right: -30%;
    padding: 0 !important;
  }

  .landing_container {
    height: calc(100vh - 40px);
  }

  .landing_container.has_footer {
    height: calc(100vh - 95px);
  }

  .header_navigation .landing_container.has_footer {
    height: calc(100vh - 80px);
  }

}

/* BP1 - adjustments  for screens upto 640px wide */
@media screen and (max-width: 640px) {

  /* hide  RIGHTNAV*/
  section.content_block>.right_block {
    display: none;
  }

  .content_container.has_footer {
    height: calc(100vh - 100px) !important;
  }

  .header_navigation .content_container.has_footer {
    height: calc(100vh - 95px) !important;
  }
}

/* FORMS and panels adjustments */

@media (min-width: 1025px) {

  .landing_container {
    height: calc(100vh - 55px);
  }

  .header_navigation .landing_container,
  .landing_container.has_footer {
    height: calc(100vh - 95px);
  }

  .header_navigation .landing_container.has_footer {
    height: calc(100vh - 135px);
  }
}

@media (min-width: 801px) and (max-width: 1024px) {

  /* search form sidebar */
  .mobile-search {
    width: 50%;
    right: -50%;
  }

  /* search results sidebar */
  #shortened_search_result {
    width: 50%;
  }

  /* sidebar hide left/right */
  .move_right,
  .move_left {
    margin-right: -50%;
  }

  /* widget, config, help sidebar */
  .p_sidebar_container,
  .c_sidebar_container,
  .h_sidebar_container {
    width: 50% !important;
    right: -50%;
  }

  /* share page popup */
  #sharePopup>.modal-dialog {
    width: 70%;
    height: auto;
  }

  .landing_container {
    height: calc(100vh - 40px);
  }

  .header_navigation .landing_container {
    height: calc(100vh - 80px);
  }

  .landing_container.has_footer {
    height: calc(100vh - 95px);
  }

  .header_navigation .landing_container.has_footer {
    height: calc(100vh - 120px);
  }

}

@media (max-width: 640px) {

  /* search form sidebar */
  .mobile-search {
    width: 80%;
    right: -80%;
  }

  /* search results sidebar */
  #shortened_search_result {
    width: 80%;
  }

  /* sidebar hide left/right */
  .move_right,
  .move_left {
    margin-right: -80%;
  }

  /* widget, config, help sidebar */
  .p_sidebar_container,
  .c_sidebar_container,
  .h_sidebar_container {
    width: 80% !important;
    right: -80%;
  }

  /* share page popup */
  #sharePopup>.modal-dialog {
    width: 80%;
    height: auto;
  }

  .landing_container {
    height: calc(100vh - 40px);
  }
}

/*#endregion RESPONSIVE */

.pl-1 {
  padding-left: 15px;
}

p.pl-1 {
  padding-left: 20px;
  color: #0f0f0f;
}

.pl-2 {
  padding-left: 40px;
}

.pl-3 {
  padding-left: 60px;
}

.pl-4 {
  padding-left: 80px;
}

/* sub menu class */
.submenu+ul.child {
  position: absolute;
  top: .8em;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
  z-index: 10000;
}

.rights {
  float: right;
}

html[dir="rtl"] .rights {
  float: left;
}

@media (min-width:767px) and (max-width:991px) {
  .main-hidden-sm {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .navbar-nav, .navbar-nav > li {
    float: unset;
  }
}

@media (min-width: 992px) {
  html[dir="rtl"] .col-md-1, html[dir="rtl"] .col-md-2, html[dir="rtl"] .col-md-3, html[dir="rtl"] .col-md-4, html[dir="rtl"] .col-md-5, html[dir="rtl"] .col-md-6,
  html[dir="rtl"] .col-md-7, html[dir="rtl"] .col-md-8, html[dir="rtl"] .col-md-9, html[dir="rtl"] .col-md-10, html[dir="rtl"] .col-md-11, html[dir="rtl"] .col-md-12 {
      float: right;
  }
}

html[dir="rtl"] .pull-right {
    float: left !important;
}

.dropdown-menu {
	text-align: start;
	left: unset;
}

html[dir="rtl"] .dropdown-menu-right {
    left: 0;
    right: auto;
}

.nav {
	padding-right: 0;
}

ul.dropdown-menu {
	overflow-y: scroll;
}

ul.jqtree-tree ul.jqtree_common {
    margin-right: 20px;
}

html[dir="rtl"] .close {
    float: left;
}

html[dir="rtl"] .caret {
  margin-left: 0;
}