/* Custom CSS file for Help and Manual by iLabs */

div#top_header {
    height: 40px;
    display: flex;
    align-content: space-between;
    align-items: center;
}

div#hmpagebody {
   top: 88px;
}


ul.topnav {
    height: 50px;
    padding-bottom: 2px;
    align-items: flex-end;
    display: flex;
}

p.topictitle {
    font-size: 2rem;
    font-weight: bold;
    padding-left: 2px;

}

p.topicfooter {
    width: auto;
        padding-bottom: 5px;
}

div#top_logo {
    height: 40px;
}

div#topicbox {
    top: 6rem;
}

div#navwrapper {
    top: 6.3rem;
}

div#headerwrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* background-color: #F5F5F5;
    border-top: thin solid #dadada;   */
}

div.topicheaderbox {
    background-color:#fffff;
    position: sticky;
    width: 99%;
    margin-top: 39px;
    border: none;
    border-bottom: 1px solid #c5c5c5
    
}


div#headerbox_wrapper {
/*top: 3rem; */
}

div#headerbox {
/*height:3rem; */
}

div.topicfooter {
           display: flex;
           width: 100%;
}

.xpllightbox > div:first-child {
    width: 50% !important;
}


#hm_pageheader {
    margin-top: 5px;
}

a#headerlogo {
    /* font-family: 'Titillium Web', sans-serif;
    height: 65px !important;
    /*margin-top: 29px; */
}

ul.topnav>li>a {
    font-weight: 400;
}

div#hmpagebody_scroller ul {
    /* This makes the list bullet visible by indenting the list*/
    padding-left: 2.5rem;
    overflow: hidden;
}

div#hmpagebody_scroller ol {
    /* This makes the ordered list bullet visible by indenting the list*/
    padding-left: 2.5rem;
    overflow: hidden;
}

.Boxes td {
    background-color: #FAFAFA;
}

.ImageTable a {
    width: auto !important;
    height: auto !important;
}

.ImageTable img {
    width: 100% !important;
    height: auto !important;
}

tr:nth-child(odd) .ImageTable {
    background-color: #FFFFFF;
    /*background-color: #95faa2;*/
}

tr:nth-child(even) .ImageTable {
    background-color: #FFFFFF;
    /*background-color: #7cdd89;*/
}


/*Response break */

@media screen and (max-width: 960px) {
    h1.page_header {
        float: none;
        width: auto;
    }
    .Boxes table {
        border: 0;
    }
    .Boxes tr {
        display: block;
    }
    .Boxes td {
        display: block;
        font-size: .8em;
        text-align: right;
        margin-bottom: 10px;
    }
    .Boxes td:last-child {
        margin-bottom: 0px;
    }
    td.ImageTable {
        display: flex;
        flex-direction: column;
        padding: 10px !important;
    }
    .ImageTable div {
        width: 100% !important;
        margin: 0px !important;
    }
}
@media only screen and (max-width: 600px) {
 /* a#headerlogo  {
    font-family: 'Titillium Web', sans-serif;
    height: 25px !important;
    width: 55px !important;
    margin-top: 11px;     
}       
*/                 
h1.page_header {
margin:0px
}

h1.page_header img {
width:0px
}
p.topicfooter {
   
    padding-bottom: 3px;

}
div#topicbox {
    top: 0px;
}

div.topicheaderbox {
         width: 100%;
}

div.topicheaderbox {

 top: 45px;
 z-index:10
}



}