/* Last edited by Mike Levey  2023-07-06  13:42             */

/*               TABLE OF CONTENTS                          */
/* 1) Variable definitions                                  */
/* 2) Portal (main page) settings                           */
/* 3) Body page general settings                            */
/* 4) Admonition settings                                   */
/* 5) List and Procedure settings                           */
/* 6) Table Settings                                        */
/* 7) Responsive web settings                               */


/* 1) Variable definitions                                  */
:root {

    --body-font-size:              16px;
    --admonition_fontsize:         1em;               /* sets the font to 100% of the topic body font size */    
    --h2_fontsize:                 30px;
    --h3_fontsize:                 25px;
    --h3admonition_fontsize:       1.2em;
    --h4_fontsize:                 22px;
    --h5_fontsize:                 17px;
    --h6_fontsize:                 var(--body-font-size);

    --bullet_disc:                 '\2022';            /* also try '\25CF' */
    --bullet_square:               '\25AA';            /* also try '\00B7'  */
    --bullet_circle:               '\2092';            /* also try '\25E6' */
    --bullet_whitesquare:          '\25AB';
    --bullet_level1:               '\2022';            /* closed bullet symbol */
    --bullet_level2:               '\26AC';            /* medium small white circle : use code \2219 for a square bullet */
    --commandline_font:            Consolas;
    --external-link-icon:          '\f08e';
    --itemizedlist_fontsize:       var(--body-font-size);
    --orderedlist_fontsize:        var(--body-font-size);

    --body-font-color:             rgb(51 51 51);
    --heading_color:               #1D3567;
    --h3_label_color:              var(--heading_color);
    --hljs-var-color:              inherit;  
    --hljs-built_in-color:         inherit; 
    --portal-search-field-color:   #EEEEEE;         /* sets the background color of the search field on the main page */

/* Admonition colors */
    --admonition_color_std:       #F5F5F5;
    --caution_bkgcolor:           #FFE0D0;   			     /* was #E7D3CD */
    --caution_sidecolor:          #F16521;			          /* was #E7D3CD */
    --caution_iconcolor:          #F16521; 			     /* was #b57965 */
    --danger_bkgcolor:            var(--admonition_color_std);   /* was #ffd5d2 */
    --danger_sidecolor:           var(--admonition_color_std);   /* was #ffd5d2 */
    --danger_iconcolor:           #ff0000;
    --important_bkgcolor:         #FEF3CE;   			     /* was #FFECB3 */
    --important_sidecolor:        #FED141;   			     /* was #FFECB3 */
    --important_iconcolor:        #FED141; 			     /* was #ce9a00 */
    --note_bkgcolor:              #D4E8FF;   			     /* was #c1d6ec */
    --note_sidecolor:             #305886;  			     /* was #c1d6ec */
    --note_iconcolor:             #305886; 			     /* was #1e90ff */
    --tip_bkgcolor:               #E8EDFF;   			     /* was #e4d2e4 */
    --tip_sidecolor:              #223176;   			     /* was #e4d2e4 */
    --tip_iconcolor:              #223176; 			     /* was #aa72aa */
    --warning_bkgcolor:           var(--admonition_color_std);   /* was #FFD69C */
    --warning_sidecolor:          var(--admonition_color_std);   /* was #FFB74D */
    --warning_iconcolor:          #e97700;

/* Admonition icons   */
    --caution_icon:                '\f040';  /* was '\f12a' */
    --danger_icon:                 '\f071';
    --important_icon:              '\f040';  /* was '\f12a' */
    --note_icon:                   '\f040';  /* was '\f129' */
    --notice_icon:                 '\f050';
    --tip_icon:                    '\f040';  /* was '\f0eb' */
    --warning_icon:                '\f071';

/* Sidebar color and search (for TOC)   */

    --sidebar_color:                 rgb(250 250 250);
    --placeholder_searchword_color:    transparent;
    --active_item_color:             rgba(0 0 0 / 80%);

/* Search bar settings              */
    --placeholder_searchword_color:  gray;

/* List alignment and spacing settings */
    --numbered_list1_indent:            -1.4em;
    --numbered_list2_indent:            -1.8em;
    --procedure_list1_indent:           -1em;
    --procedure_list2_indent:            1em;
    --bullet_list1_indent:              -1.9em;
    --bullet_list2_indent:              -1.9em; 
    --bullet_follows_numlist_indent:    -0.6em;
    --bullet_follows_procedure_indent:  -0.5em;
    --bullet_follows_procfancy_indent:   1em;
    --pre_margin_bottom:                 1em;     /* set space after codetext when not in a table */
    --pre_margin_bottom_table:           0em;     /* set space after codetext when inside a table */

 /* Insert external link symbol on hrefs  */
a[href^="http"]::after,
a[href^="https://"]::after {
    /* adds the little icon after the link to indicate it is an external link */
    font-size:                          0.65em;
    content:                            var(--external-link-icon);
    font-family:                        FontAwesome;
    display:                            inline-block;
    opacity:                            0.8;
    transform:                          translateY(-3px);
    padding-left:                       3px;
    color:                            #3361bb;
    text-underline-position:            below;
}   

 /* Table settings                  */
    --table-list-spacer:                 0em;   
}

/* End of variable definitions      */

/* 2) Portal (main page) settings                           */
      /* Primary color for links, buttons, portal header, titles  */

a,
.text-primary,
.btn-primary .badge,
.btn-link,
.pagination > li > a,
.pagination > li > span,
.nav-site-sidebar .active > a,
.portal-single-publication .publication-icon i,
.portal-single-publication .publication-icon .fa,
.publication-contents a:hover,
.publication-contents h4 a,
.titlepage h1.title,
.titlepage h2.title,
.titlepage h3.title {
    color:                          var(--heading_color);
}

.bg-primary,
.btn-primary,
.publications-condensed .portal-single-publication a,
.toolbar,
.tool-search-form .search-field,
.pager li > a:hover,
.pager li > span:hover,
.colored-top .site-sidebar-header {
    background-color:               rgb(44, 43, 68);
}

.btn-primary,
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
.colored-top .site-sidebar-header {
    border-color:                   #2c2b44;
}

/* Hover primary color */
a:hover,
a:focus,
a.text-primary:hover,
a.text-primary:focus,
.btn-link:hover,
.btn-link:focus,
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color:                          #293278;
}

a.bg-primary:hover,
a.bg-primary:focus,
.btn-primary:hover,
.portal-header .portal-search button:hover {
    background-color:               #293278;
}

.btn-primary:hover,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open >.dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
    background-color:               #293278;
    border-color:                   #305886;
}

.nav-site-sidebar li a:focus {
    background-color:               transparent;
}

/* Secondary color - For portal search button, publication count */
.portal-header .portal-search button {
    background-color:               #3C3C3C;
}

.publication-contents h4 span {
    background-color:               #3C3C3C;
}

.publication-contents h4 span {
    background-color:               var(--heading_color);
}

h5.featured-content-label {
    color:                          var(--h5_portal-color);
}

.publication-icon {
    background-color:               var(--publication_icon_color) !important;
}

a {
    color:                         #3361bb;
    /* .underline-on-hover: hover text-decoration: underline; */
}

/* Other colors */
.portal-footer {
    background:                     #3C3C3C;
    color:                          #3C3C3C;
}

/* 3) Body page general settings                            */

/* set the color of the program code variables              */
.hljs-template-variable,
.hljs-variable              {
    color:                          var(--hljs-var-color) !important;
}

.hljs-built_in  {
    color:                          var(--hljs-built_in-color) !important;
}

ul.pager {
    /* position the Prev and Next buttons at the lower right of screen */
    width:                          150px;
    margin-left:                    75%;
}

.copyright {
    float:                          right;   /* default is left  */
}

.tool-search {
    margin-top:                     20px;
}

.search-field {
    background-color:               rgb(250 250 250) !important;
    color:                          var(--body-font-color);
    height:                         30px !important;
    overflow:                       scroll;
    margin-top:                     20px;
    border:                         2px solid darkgray!important;
}

.search {
    color:                         black;
}

.search,
.tool-search-form .search-field {
    background-color:               rgb(250 250 250) !important;
    color:                          var(--body-font-color);
    height:                         30px;
    overflow:                       scroll;
    margin-top:                     20px;
    width:                          65vw;
}

.tool-search-form .search-field::placeholder {
    color:                          var(--placeholder_searchword_color);
  }


.titlepage {
    padding-top:                    40px;
  }

a[href^="http"]::after,
a[href^="https://"]::after {
    /* adds the little icon after the link to indicate it is an external link */
    font-size:                      0.65em;
    content:                        var(--external-link-icon);
    font-family:                    FontAwesome;
    display:                        inline-block;
    opacity:                        0.8;
    transform:                      translateY(-2px);
    padding-left:                   3px;
    color:                         #3361bb !important;
    text-underline-position:        below;
}

.pager a[href^="http"]::after,
.pager a[href^="https://"]::after {
    display: none;
}

.toc.nav.nav-site-sidebar {   /* move TOC down to accommodate wider banner */
    margin-top:                     22px;
    
} 

.site-body .h1,
.site-body .h2,
.site-body .h3,
.site-body .h4,
.site-body .h5,
.site-body .h6,
.site-body  h1,
.site-body  h2,
.site-body  h3,
.site-body  h4,
.site-body  h5,
.site-body  h6 {
    color:                              var(--heading_color);
}

/* 4) Admonition settings                                   */


.caution::before,
.important::before,
.note::before,
.tip::before         {
    display:                        inline-block;
    font-family:                    FontAwesome;
    font-size:                      20px;
    font-weight:                    300;
    position:                       absolute;
    left:                           20px;
    top:                            22px;
}

.caution::before {
    content:                        var(--caution_icon);
    color:                          var(--caution_iconcolor);
}

.important::before {
    content:                        var(--important_icon);
    color:                          var(--important_iconcolor);
}

.note::before {
    content:                        var(--note_icon);
    color:                          var(--note_iconcolor);
}

.tip::before {
    content:                        var(--tip_icon);
    color:                          var(--tip_iconcolor)
}

.caution {
    border-left-color:              var(--caution_sidecolor);
    background-color:               var(--caution_bkgcolor);
}


.important {
    background-color:               var(--important_bkgcolor);
    border-left-color:              var(--important_sidecolor);
}

.note {
    background-color:               var(--note_bkgcolor);
    border-left-color:              var(--note_sidecolor);
}

.tip {
    background-color:               var(--tip_bkgcolor);
    border-left-color:              var(--tip_sidecolor);
}

/* 5) List and Procedure settings                           */

    /* style Lists  */

ol.orderedlist {
    margin-left:                    var(--numbered_list1_indent);       /* move list over to the left, allowing space for double digits to be aligned with margin */
}

ol ol.orderedlist {                                                     /* align level 2 lists with text of level 1 list */
    margin-left:                    var(--numbered_list2_indent);
}

.itemizedlist{
    Padding-left: 20pt;  
    }

#topic-content ul.itemizedlist li.listitem {
    list-style-type:                disc !important;
}

ul.itemizedlist li li.listitem {
    list-style-type:                square !important;
}

ul.itemizedlist li li li.listitem {
    list-style-type:                circle !important;
}

ul.itemizedlist li.listitem::marker {
    color:                          rgba(51 51 51 / 80%);
}

#topic-content ul.itemizedlist {
    margin-left:                    var(--bullet_list1_indent) !important;  /* align bullet with margin */
}

#topic-content ul ul.itemizedlist {
    margin-left:                    var(--bullet_list2_indent) !important;
}

#topic-content div.orderedlist + div > ul.itemizedlist {
    margin-left:                    var(--bullet_follows_numlist_indent) !important;
}

#topic-content ul.itemizedlist ul.itemizedlist {
    margin-left:                    -2em;
}

ul li:not(:last-child) div.itemizedlist:has(ul)    {  /* insert space after sublist and last list item, unless sublist is last child */
    margin-bottom:                 0.5em;
}

    /* style Procedures:  Regular has no colored numbering */

.procedure > li {
    margin-left:                    var(--procedure_list1_indent);
}

.procedure > li::before {
    display:                        none;
}

div.procedure.fancy {
    margin-left:                    0px;
  }

  ol.procedure {
    margin-left:                    -0.4em;
  }
  /* Targeting ul as well, because for one-step procedures, it becomes a ul */  
  ol.procedure.fancy, 
  ul.procedure.fancy {
    margin:                         0;
    padding:                        0;
    list-style-type:                none;
    margin-left:                    56px;
  }
  .procedure.fancy > li:first-child {
    counter-reset:                  step-counter;
  }
  .procedure.fancy > li {
    counter-increment:              step-counter;
    margin-bottom:                  10px;
    min-height:                     1em;
  }
  .procedure.fancy > li::before {
      float:                        left;
      margin-left:                  -40px;
      width:                        24px;
      padding-left:                 0px;
      height:                       24px;
      line-height:                  24px;
      -webkit-border-radius:        13px;
      -moz-border-radius:           13px;
      border-radius:                13px;
      -moz-background-clip:         padding;
      -webkit-background-clip:      padding-box;
      background-clip:              padding-box;
      color:                      #FFFFFF;
      background-color:           #D5502A !important;
      display:                      block;
      font-weight:                  700;
      content:                      counter(step-counter);
      font-size:                    14px;
      text-align:                   center;
  }

  ol.procedure.fancy ol {
    margin-left:                    -0.4em;
  }

  li ol.procedure {                 /* set second level procedure indent */
    margin-left:                    -0.8em;
  }

  ol.procedure.fancy ol.procedure {
    margin-left:                    -0.8em;
  }

  #topic-content .procedure + div > ul.itemizedlist {
    margin-left:                    var(--bullet_follows_procedure_indent) !important;
  }

  #topic-content .procedure.fancy + div > ul.itemizedlist {
    margin-left:                    var(--bullet_follows_procfancy_indent) !important;
  }

  ol.procedure ol.orderedlist {
    list-style-type:                lower-alpha;           /* set the numbering style for second level lists in a procedure */
  }

/* 6) Table Settings                                        */

table.informaltable {
    box-shadow:                     5px 5px 10px #ddd;
    margin-bottom:                  10px;
    max-width:                      99%;                    /* setting this < 100% enables the shadow to display on the right side */
}

table tr {
    color: var(--body-font-color);
}

tbody {
    color:                          var(--body-font-color);
    background-color:               var(--tablebodybkg_color);
}

thead {
    background-color:               var(--tableheadbkg_color);
    color:                          var(--tablehead_color);
}

td {
    vertical-align:                 top;
    /* align all elements of a table at the top vertically */
}

td ol,
td ul  {
    margin-bottom:                 -0.5em;
}

td ul ul,
td ol ul {
    margin-top:                    0;       /* set the space between first and second level lists in a table, was -1.2em */
}

.informaltable td p, 
.informaltable th p, 
.table td p, 
.table th p {
    margin:                         0;        /* reduce margin space between table para's  */
  }

td .orderedlist + p {
    margin-top:                     0.5em;    /* set the space between an ordered list followed by a para inside a table */
} 

/* End of table settings            */

/* Portal Main Page settings        */


.portal-header .portal-search .search-field {
    height:                                 50px !important;         /* sets the height of the main page search field */
    background-color:                       var(--portal-search-field-color) !important;
    margin-top:                             0;
 }

/* Updates to existing stylesheet */

/* Remove 'featured content' on portal */
.featured-content-label {
    display:                                none;
}

.featured-content {
    display:                                none;
}

.portal-footer {
    background-color:                      #ffffff;
}

.portal-footer .inner {
    border-top:                             none;
}

/* set links to underline during hover */
a.link:hover {
    text-decoration:                        underline;
}

/* change banner color */

.site-sidebar-header,
.toolbar {
    background-color:                    #2c2b44 !important;
}


/* fix breadcrumbs below the banner */

.topic-content .breadcrumb-container {
    position:                          fixed;
    z-index:                            60;
    margin-top:                         1px;
    padding-top:                        10px;
    padding-bottom:                     5px;
    background-color:                   rgb(255 255 255);
    width:                              90%;
}

li.breadcrumb-link > a {
    font-size:                         16px;
    color:                            rgba(110 110 110 / 60%) !important;    /* easily change the opacity by adjusting the percentage value */
}

li.breadcrumb-node {
    font-size:                          16px;
    color:                            rgba(110 110 110 / 100%) !important;
}

.site-sidebar-header {
    height:                             85px;
    margin-bottom:                      20px;
}

/* hide top navigation link in the body pages */

.site-body #navbar {
    visibility:                         hidden;
}


.site-sidebar .logo {
    height:                             63px;
    max-width:                          90%;
    padding:                            20px 0 0 15px;
    display:                            inline-block;
}

/* change TOC settings */

ul.nav-site-sidebar li a {
    color:                          var(--heading_color);
}

li.opened > a.topic-link {          /* style the active link in the TOC sidebar */
    color:                          var(--active_item_color) !important;
    font-weight:                    bold;
    font-style:                     italic;
}

li.opened > a.topic-link:has(+ul > li.opened) {  /* change style of parent link in TOC if child is open */
    /* color: blue !important; */
    font-weight:                    normal;
}

.site-sidebar {                                                         /* set the TOC background color */
    background-color:               var(--sidebar_color);
}

.nav-site-sidebar .active > a {
    color:                          var(--heading_color);
    font-weight:                    bold;
}

.site-sidebar-search {
    background-color:               #eeeeee;                          /* set the Search background color in the TOC */
}

.site-sidebar-search .search-field {
    color:                         var(--body-font-color);
}

.site-sidebar-search input::placeholder {
    color:                         var(--placeholder_searchword_color) !important;
    opacity:                        0.5; /* Firefox */
  }
  
.site-sidebar-search input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:                          var(--placeholder_searchword_color) !important;
  }
  
.site-sidebar-search input::-ms-input-placeholder { /* Microsoft Edge */
   color:                         var(--placeholder_searchword_color) !important;
  }

.site-sidebar-search input::placeholder {
    display: none; 
}

.site-sidebar-search .search-field  {
    background-image:               url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg");
    background-size:                16px;
    background-repeat:              no-repeat;
    background-position:            90% center;
}

/* Admonition settings              */

  /* Admonition background colors */

  .caution {
    background-color:                var(--caution_bkgcolor);
    border-left-color:               var(--caution_sidecolor);
 }
 
 .note {
    background-color:                var(--note_bkgcolor);
    border-left-color:               var(--note_sidecolor);
 }
  
 .important {
    background-color:                var(--important_bkgcolor);
    border-left-color:               var(--important_sidecolor);
 }
 
 .tip {
    background-color:                var(--tip_bkgcolor);
    border-left-color:               var(--tip_sidecolor);
 }
 
 .warning.danger { /* danger */
    background-color:                var(--danger_bkgcolor);
    border-left-color:               var(--danger_sidecolor);
 }
 
 .warning {
    background-color:                var(--warning_bkgcolor);
    border-left-color:               var(--warning_sidecolorr);
 }
 
    /* icon colors */
 
 .note::before {
    color:                           var(--note_iconcolor);
    content:                         var(--note_icon);
  }
 
 .tip::before {
    color:                           var(--tip_iconcolor);
    content:                         var(--tip_icon);
 }
 
 .important::before {
    color:                           var(--important_iconcolor);
    content:                         var(--important_icon);
 }
 
 .caution::before {
    color:                           var(--caution_iconcolor);
    content:                         var(--caution_icon);
 }
 
 .warning::before {
    color:                           var(--h2_color);
    content:                         var(--warning_icon);
  }
 
 .warning.danger::before {
    content:                         var(--danger_icon);
    color:                           var(--danger_iconcolor);
 }
    /* Admonition title or label */
 
.caution h3 {
    font-size:                      var(--h3admonition_fontsize);
    color:                          var(--h3_label_color);
    display:                        inherit;                          /* none = hide Caution title */
}  

.important h3 {
    font-size:                      var(--h3admonition_fontsize);
    color:                          var(--h3_label_color);
    display:                        inherit;                          /* none = hide Important title */
 }

 .note h3 {
    font-size:                       var(--h3admonition_fontsize);
    color:                           var(--h3_label_color);
    display:                         inherit;                          /* none = hide Note title */
 }
 
 .tip h3 {
    font-size:                       var(--h3admonition_fontsize);
    color:                           var(--h3_label_color);
    display:                         inherit;                          /* none = hide Tip title */
 }
 
 .warning h3 {
    font-size:                       var(--h3admonition_fontsize);
    color:                           var(--h3_label_color);
    display:                         inherit;                          /* none = hide Warning and Danger title */
 }
 
   /* Admonition body text */
 
.caution p {
   font-size:                      var(--admonition_fontsize);
   color:                          var(--h3_label_color);
} 

.important p {
   font-size:                      var(--admonition_fontsize);
   color:                          var(--h3_label_color);
}

.note p {
   font-size:                      var(--admonition_fontsize);
   color:                          var(--h3_label_color);
  }

 .warning p {
   font-size:                      var(--admonition_fontsize);
 } 

.tip p {
   font-size:                      var(--admonition_fontsize);
   color:                          var(--h3_label_color); 
}
 
  /* position Admonition icons at the top (change to content-theme2.css in Line 497 */
.note::before, .tip::before, .warning::before, .caution::before, .important::before {
    /* top: 10px; */
}  

/* End of admonition settings       */ 

/* define program listing variable colors */

div.section-toc-title {
    font-size:                     1.3em;
    color:                         var(--heading_color);
 }

code,
kbd,
pre,
samp {
    font-family:                    Consolas, Menlo, Monaco, "Courier New", monospace;
}

pre {
    margin-bottom:                  var(--pre_margin_bottom);    /* override margin setting defined in Theme2.css */ 
}

td pre {
    margin-bottom:                  var(--pre_margin_bottom_table);    /* override margin setting defined in Theme2.css, for tables */
}

/*  define font sizes for heading elements */

.h2, h2 {
    font-size:                      var(--h2_fontsize);
  }

.h3, h3 {
    font-size:                      var(--h3_fontsize);
  } 

.h4, h4 {
   font-size:                       var(--h4_fontsize);
 }  

.h5, h5 {
   font-size:                       var(--h5_fontsize);
 }  

 .h6, h6 {
   font-size:                       var(--h6_fontsize);
 }

 h6.bridgehead {
   color:                           var(--label_color);
   font-style:                      italic;
   font-size:                       1.8rem;
   margin-bottom:                   1em;                   /* sets the spacing after the bridgehead heading */
 }

 /* Change height of body banner to match that of TOC banner */

 .toolbar {
    min-height:                     85px;
    box-shadow:                     none;
    position:                       fixed;
    left:                           10%;
    width:                          100%;
    z-index:                        20;
}


a[href^="http"]::after, a[href^="https://"]::after {
    color:                         white;
  }

a.external-top-nav-link {
    z-index:                        30;
}

/* End of Portal Main Page settings */

/* 7) Responsive web settings                               */

/* adjust position of navbar menu */


@media ( width < 768px ) {
    .topic-content .breadcrumb {    
        transform:                      translateX(-40px);
        scale:                          90%;
      }

    .toolbar-tools {
        margin-top:                     10px;
    }  
    .tool-search  {
        position:                      absolute;
        margin:                        0 -20px;
    }
    .search, 
    .tool-search-form .search-field {
        margin-top:                    -10px;
        margin-right:                  0;
        margin-bottom:                 30px;
        margin-left:                   calc(120px - 100vw);
        padding-bottom:                25px;
        min-width:                      67vw;
    }

    .form-control {
        width:                         50% !important;
    }
    .toc.nav.nav-site-sidebar {
        margin-top:                    22px;
        /* width:                         200px; */
    }
    .site-sidebar {
        max-width:                     400px;     /* sets the max width of the TOC menu on small screens */
        margin-top:                    160px;
    }
    .site-sidebar-header {
        position:                      sticky;
        margin-top:                    -120px;
        z-index:                       75;
        left:                          0;
    }
    .site-sidebar-header .logo {
        position:                      relative;
        margin:                        0;
    }
}

@media (width < 750px ) {
    .search, 
    .tool-search-form .search-field {
        margin-top:                    -10px;
        margin-right:                  0;
        margin-bottom:                 30px;
        margin-left:                   calc(120px - 100vw);
        padding-bottom:                25px;
        min-width:                      67vw;
    }
}
@media (width < 700px) {
    .titlepage {
        padding-top:                    70px;
    }
}

@media (width < 453px) {
    .titlepage {
        padding-top:                    90px;
    }
}

@media ( width < 450px ) {
    .toolbar-tools {
        margin-right:                   30px;
    }
    .topic-content .breadcrumb {    
        transform:                      translateX(-30px);
      }
}    

@media (width < 768px) {   /* on small screens, compensate for image disappearing */
    .toolbar.top-nav-on::before {
        content:                        url('image/corporate-logo.svg');
        display:                        block;
        position:                       absolute;
        padding:                        10px;
        padding-top:                    5px;
        width:                          160px;
}

}