/* IN CONJUNCTION WITH BOOTSTRAP 5.3.0 */

html { 
    height: 100%; 
    margin: 0;
    padding: 0;
    width: 100vw;

}
body {
    font-size: 1em; /* 16px */
    width: 100vw;
    overflow-x: hidden; /* get rid of extra scrollbars */
    /*overflow-y: hidden;*/
    background-color: #ebeae7;
    display: inline-block;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"
}

.wrapper {
    box-sizing: border-box;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}



/* Font Awesome initalization*/
.icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* ===== MAIN ===== */

.mainContent {
    position: fixed;
    width: 100%;
    overflow: auto;
    top: 206px;
    bottom: 110px;
    padding: 1.5em 2em;
}

.mainContent h1 {
    text-align: center;
    font-size: 2rem;
    color: #00395e;
}

.mainContent h2 {
    color: #00395e;
    font-weight: bold;  
    padding-bottom: 0.5em; 
    font-size: 1.5rem;
}

.mainContent h3 {
    color: #00395e;
    font-weight: bold;  
    padding-top: 1em;
    padding-bottom: 0.5em; 
    font-size: 1.25rem;
    text-transform:uppercase;
}

.mainContent h4 {
    
    font-weight: bold;  
    padding-top: 1em;
    padding-bottom: 0.5em; 
    font-size: 1.25rem;
}

.mainContent img {
  
    margin-bottom: 3em;
    max-width: 75%;
    height: auto;
}

.row {
    margin-top: 0;

}

#home{
    height: 100%;
    vertical-align: middle;
    text-align:center;
}

#home p{
    text-align: left;
}

/*=============== MEDIA ================ */


/* =========== FONT FORMATTING =========== */
.underline {
    text-decoration:underline;
}
.italics {
    font-style: italic;
}

.bold {
    font-weight: bold;
}

.emphasis {
    font-style: italic;
    font-weight: bold;
}

/* subcolor: Dark blue background banner, white font for emphasis but not a header*/
.subcolor { 
    background-color: #00395e;
    color: #FFF;
    padding: 1em;
    font-size: 1rem;
    font-weight: 500;
    display: block;
    width: 100%;
}

/* circle: Draw a solid red circle around a letter */
.circle {
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background: #fc4242;
    color: #FFF;
    text-align: center;
}

ul.fa-ul {
    list-style-type: none;
    /*margin-left: var(--fa-li-margin,2.5em);*/
    margin-left: 0;
    padding-left: 0;
    position: inherit;
}

 ul.fa-ul > li {
        position: inherit;
        padding-bottom: 1em;
    }


.tab {
    margin-left: 2em;
}

a.btt {
    font-size: .66em;
    float: right;
    color: yellow;
    text-decoration: none;
    background-color: #00395e;
    border-radius: 10px; /* Rounded corners */
    padding-top: .25rem;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 4px;
}

/* fileInfo: For document information ie. Filename, Last updated, etc. */
.fileInfo {
    font-size: .75rem;
    font-style: italic;
}

.fileInfo ul {
    list-style-type: none;
}

/* figcaption: Caption below an image, left aligned, matching image margin */
figcaption {
    font-style: italic;
    padding: 2px;
    margin: 0em 0 3em 0;
    padding-left: 3em;
}

 /* ======== FONT AWESOME ICONS ============*/
 /* question icon: solid circle background with question mark */
.question-icon::before {
    font: var(--fa-font-solid);
    content: "\f059";
    font-family: "Font Awesome 5 Free";
    background-image: none;
    transform: none;
    padding-right: 1em;
    font-size: large;
}

/* alert icon: solid triangle background with exclamation mark*/
.alert-icon::before {
    font: var(--fa-font-solid);
    content: "\f071";
    font-family: "Font Awesome 5 Free";
    padding-right: 1em;
    font-size: large;
}

/* info icon: solid circle background with letter i */
.info-icon::before {
    font: var(--fa-font-solid);
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    padding-right: 1em;
    font-size: large;
}

.siteNav i {
    font-size: 22px;
}

/* ============ HEADER & NAV =============== */

.TMBbanner {
    background: #00395e url("../Resources/Images/header-bluepx-bk5.png") repeat;
    color: #FFF;
    text-align: center;
    display: flex;
    align-items: center;
    width: 100%;
    height: 142px;
}

.TMBbanner .logo {
    align-content: flex-start;
    margin: 2em;
}

.TMBbanner h1 {
    font-size: 2em;
    width: 100%;
    margin: 0 0 0 -2em; /* Negate the banner image margin so it's centered */
    
}

.TMBbanner h2 {
    font-size: 1.5em;
    color: #ffd800;
    width: 100%;
    margin: 0 0 0 -2em; /* Negate the banner image margin so it's centered */
    font-weight: bold;
}

.siteNav {
    background: #00395e;
    overflow: hidden;

}

.siteNav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.siteNav a:hover {
    background-color: #ffc93b;
    color: #000;
}

.siteNav a.active {
    background-color: #3d7599;

}

.siteNav .icon {
    display: none;
}
nav a:not(:last-child), nav a:not(:nth-last-child(2)) {
    border-right: 1px solid #FFF;
}
/* ============= SECTION NAV ============ */
/* Left side column menu buttons */
.side {
    flex: 20%; /* Set the width of the sidebar */
    background-color: #ebeae7; /* Grey background color */
    padding: 20px; /* Some padding */
}
.row {
    display: flex;
    flex-wrap: wrap;
}
.main {
    flex: 80%; /* Set the width of the main content */
    background-color: #ebeae7;
    /*border: 1px solid #3d7599;*/
    padding: 20px; /* Some padding */
    overflow-y: auto;
}


.sectionNav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

.sectionNav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

.sectionNav li a:hover {
  background-color: #555;
  color: white;
}

.sectionNav .active {
  background-color: #3d7599;
  color: white;
}


/* ============ FOOTER ============ */

.footer {
    background-color: #00395e;
    font-size: smaller;
    color: #FFF;
    text-align: center;
    padding: .5em 0;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    /*height: 100px;*/
    flex-shrink: 0;
    /*position: sticky;*/
    /*position: -webkit-sticky;*/
}

.footer p {
    padding-top: .5em;
}
.footer h3 {
    font-size: initial;
}

.footer ul {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #00395e;
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

.footer li {
    float:left;
    border-right: 1px solid #bbb;
    padding: 0 1em;
}

.footer li:last-child {
    border-right: none;
}

.footer li a {
    display: inline;
    color: white;
    text-align: center;
    text-decoration: none;
}
.footer li a:hover {
    color: #ffc93b;
}


/*============ LINK LISTINGS =============*/
/* style inputs and link buttons as seen on Teamviewer.aspx */
.listlinks {
    width: 50%;
    padding: 12px;
    border-radius: 4px;
    margin: 5px 0;
    margin-bottom: 1rem;
    opacity: 0.85;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 17px;
    line-height: 20px;
    text-decoration: none;
    background-color: #00395e;
    color: #FFF;
    border: 2px solid #00395e;
}

.btn:hover {
  background-color: #FFF;
  border: 2px solid #3d7599;
}

.listlinks i {
    margin-right: 20px;
    font-size: xx-large;
}

a:hover,a:focus{
    text-decoration: none;
    outline: none;
}



/*============ ACCORDION =============*/

/* Up arrow */
.accordion-button:not(.collapsed)::after {
  font: var(--fa-font-solid);
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  background-image: none;
  transform: none;
  color: #FFF;
  padding: 0 1em;
}

/* Down arrow */
.accordion-button.collapsed::after {
  font: var(--fa-font-solid);
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  background-image: none;
  transform: none;
  color: #FFF;
  padding: 0 1em;
}

/* Question mark */
.accordion-button:before{
  font: var(--fa -font-solid);
  content: "\f059";
  font-family: "Font Awesome 5 Free";
  background-image: none;
  transform: none;
  color: #FFF;
  padding-right:1em;
}

.right-align {
  width: 100%;
  margin: 0;
  text-align: right;
}

.accordion {
    width: 100%;
    /*padding: 12px;*/
    border-radius: 4px;
    margin: 5px 0;
    position: inherit;
    font-size: 17px;
    line-height: 20px;
    text-decoration: none; /* remove underline from anchors */
    color: #FFF;
}

.accordion-header {
    margin-bottom: -11px;
    position: inherit;
}
.accordion-header h2 {
    margin-bottom: 0;
    padding-bottom: 0;
}

.accordion-button {
    background-color: #00395e;
    color: #FFF;
    font-weight: 500;
    position: inherit;
}
    .accordion-button:not(.collapsed) {
        background-color: #00395e;
        color: #FFF;
        position: inherit;
    }


.accordion:last-child:before{ display: none; }
.accordion-heading {
    padding: 0;
    border: none;
    border-radius: 0;
    /*position: relative;*/
    position: inherit;
}
.accordion-item {
    border: none;
    background-color: #ebeae7;

}
.accordion-title a {
    display: block;
    padding: 10px 30px 10px 60px;
    margin: 0;
    background: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #1d3557;
    border-radius: 0;
    /*position: relative;*/
    position: inherit;
}

.accordion-button a.collapsed:after{
    color: #FFF;
}

.accordion-body{
    background: #fff;
    border-top: none;
    /*font-size: 15px;*/
    line-height: 28px;
    /*letter-spacing: 1px;*/
}

    .accordion-body a,
    .accordion-body a:hover {
        color: #00395e;
    }


/* Remove the curved edges of first and last bar */
.accordion-item:first-of-type .accordion-button,
.accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 0;
    position: inherit;
}



/* Smoothing out the animation for accordion */
.collapse {
  visibility: hidden;
}
.collapse.show {
  visibility: visible;
  display: block;
  color: #000;


}
.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    -webkit-transition-property: height, visibility;
    -moz-transition-property: height, visibility;
    -o-transition-property: height, visibility;
    transition-property: height, visibility;
    -webkit-transition-duration: 0.35s;
    -moz-transition-duration: 0.35s;
    -o-transition-duration: 0.35s;
    transition-duration: 0.35s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
}
.collapsing.width {
    -webkit-transition-property: width, visibility;
    transition-property: width, visibility;
    -moz-transition-property: width, visibility;
    -o-transition-property: width, visibility;
    width: 0;
    height: auto;
}

.scroll {
    margin-right: 30px;
}

/* Fixed sidenav, full height */
.sidenav {
    font-size: 1rem;
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  /*padding: 6px 8px 6px 16px;*/
  padding: .5em;
  text-decoration: none;
  font-size: 1rem;
  color: #818181;
  display: flex;
  align-items: center;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
}



/* ============= TOP BUTTON ==============*/
#myBtn {
    /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 116px; /* Place the button at the bottom of the page */
    right: 4px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #00395e; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

    #myBtn:hover {
        background-color: #555; /* Add a dark-grey background on hover */
    }

/* =============== GUIDE DOC ============= */
.guidedoc h1 {
    margin-bottom: 1em;
    color: #00395e;
}

.guidedoc h2 {
    margin-top: 2.5em;
    background-color: #00395e;
    color: #FFF;
    padding: .5em;
    font-weight: initial;
}

/*.guidedoc h3 {

}

.guidedoc h4 {

}

.guidedoc h5 {

}
*/
.guidedoc img {
    max-width: 95%;
    height: auto;
    margin: 1.5em 0;
}

.guidedoc .alert { /* Stop alerts from being on top of z-index*/
    position: static;
}

.steps li {
    margin-left: 2rem;
}

.steps li {
    margin-left: 2rem;
    padding-bottom: 1rem;
}

.steps li img {
    display: flex;
    margin: 1.5em 0;
    /*margin-left: -3.5em;*/
}

.steps ::marker {
  content: "Step " counter(list-item) ":  ";
  font-weight: 700;
}

.bullets ul {
    list-style-type: disc;
    margin-left: -1em;
}

.bullets li {
    display: list-item;
    padding-bottom: .25rem;
    margin-left: .5rem;
}

.bullets ::marker {
    content: initial;
}

/* ================= TOC ==================== */


/*.toc .dropdown {

    
}*/

.toc .btn {
    font-size: 0.85rem;
    border: none;
    background-color: #f1f1f1;
    width: 300px;
    overflow:hidden;
    display: inline-flex;
    justify-content:space-between;
    align-items: center;
}

.toc .dropdown-item{
    font-size: 0.85rem;
    border: none;
    background-color: #f1f1f1;
    width: 300px;
}
 .toc .dropdown-divider {
    border-top: 1px solid #555;
    margin:0;
    width: 300px;
 }

.toc .btn-primary {
    font-size: 0.75rem;
}

.toc2 .li {
    font-size: 0.75rem;
    width: 300px;
}

#toc2_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    margin-bottom: 1em;
    padding: 20px 25px 20px 0;
    width: fit-content;
}

.toc2_title {
    font-weight: 700;
    text-align: center;
}

#toc2_container li a {
    color: #00395e;
    text-decoration: none;
}
#toc2_container li a:hover {
    color: #fc4242;
}

#toc2_container li, #toc2_container ul, #toc2_container ul li {
    list-style: outside none none;
}

/* ==== Mobile container utility class: ==== */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* xs */
@media (min-width: 475px) {
    .container {
        max-width: 475px;
        border: solid 1px red;
    }
}


/* sm */
@media (min-width: 640px) {
    .container {
        max-width: 640px;
        border: solid 1px blue;
    }

}

/* md */
@media (min-width: 768px) {
    .container {
        max-width: 768px;
        border: solid 1px green;
    }
}

/* lg */
@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
        border: solid 1px purple;
    }
}

/* xl */
@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
        border: solid 1px orange;
    }
}

/* 2xl */
@media (min-width: 1536px) {
    .container {
        max-width: 1536px;
        border: solid 1px cyan;
    }
}

/* When the screen is less than 600 pixels wide, hide all links, 
    except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
    .siteNav a:not(:first-child) {
        display: none;
    }
    nav a:not(:last-child), nav a:not(:nth-last-child(2)) {
        border: none;
    }

    .logo {
        display: none;
    }
    .siteNav a.icon {
        float: right;
        display: block;
    }

    .TMBbanner h1 {
        margin: 0; /* Negate the banner image margin so it's centered */
    }

    .TMBbanner h2 {
        margin: 0; /* Negate the banner image margin so it's centered */

    }

    .footer {
        display: flex;
        font-size: small;
        height: auto;
        position: static;
    }

    /*.footCont {
        display: flex;
    }
    .footerHeader {
        flex-shrink: 0;
    }
    .footerLinks{
        flex-shrink: 4;
    }
    .footerComment{
        flex-shrink: 0;
    }*/

    .footer li {
        float: none;
        padding: 0;
        border: none;
        
    }

    .row {
        flex-direction: column;
    }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
    .siteNav.responsive {
        position: relative;
    }

        .siteNav.responsive.sticky {
            position: fixed;
        }

        .siteNav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .siteNav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

    .mainContent {
        position: static;
    }



    .listlinks {
        width: 98%;
        padding: 12px;
        border-radius: 4px;
        margin: 5px 0;
        margin-bottom: 1rem;
        opacity: 0.85;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 17px;
        line-height: 20px;
        text-decoration: none;
        background-color: #00395e;
        color: #FFF;
        border: 2px solid #00395e;
    }

    .mainContent h2 {
        font-size: 1.25rem;
    }

    #toc2_container li, #toc2_container ul, #toc2_container ul li {
        font-size: .93em;
    }

    /* figcaption: Caption below an image, left aligned, matching image margin */
    figcaption {
        font-style: italic;
        padding: 2px;
        margin: -1.5em 0 3em 0;
        padding-left: .5em;
    }

    .steps li {
        list-style-position: inside;
        margin-left: -2rem;
    }
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row {
        flex-direction: column;
    }
}


/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}

    /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
    .sticky + .content {
        padding-top: 60px;
    }

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {
    margin: 0;
    padding: 0;
}

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body {
    height: 100%;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 180px;
}
/* must be same height as the footer */

#footer {
    position: relative;
    margin-top: -180px; /* negative value of footer height */
    height: 180px;
    clear: both;
}

/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
    content: "";
    height: 100%;
    float: left;
    width: 0;
    margin-top: -32767px; /* thank you Erik J - negate effect of float*/
}