#menuTemplate {
    display: none !important;
}

.FILTER {
    display: none;
}

/*
class to default historic mortality geography options as hidden
}*/
.hiddenoption {
    display: none;
}

/*
DO show menu options if the year classes match
*/
.D_2019_2023 .F2019_2023,
.D_2018_2022 .F2018_2022,
.D_2017_2021 .F2017_2021,
.D_2016_2020 .F2016_2020,
.D_2015_2019 .F2015_2019,
.D_2014_2018 .F2014_2018,
.D_2013_2017 .F2013_2017,
.D_2012_2016 .F2012_2016,
.D_2010_2014 .F2010_2014,
.D_2010_2019 .F2010_2019,
.D_2000_2009 .F2000_2009,
.D_2005_2009 .F2005_2009,
.D_2000_2004 .F2000_2004,
.D_1990_1999 .F1990_1999,
.D_1980_1989 .F1980_1989,
.D_1970_1979 .F1970_1979,
.D_2017 .F2017,
.D_2023 .F2020,
.D_2020 .Fdy2020,
.D_2020 .F2020,
.D_2021 .Fdy2021,
.D_2022 .F2022,
.D_2022 .Fdy2022,
.D_2023 .F2023,
.D_2023 .Fdy2023,
.D_2024 .F2024,
.D_2024 .Fdy2024 {
    display: list-item;
}

/*
DON'T show menu options if the geo classes DON'T match
*/
.State_M .F_County,
.State_M .F_SEA,
.State_M .F_HSA,
.County_M .F_State,
.County_M .F_SEA,
.County_M .F_HSA,
.SEA_M .F_State,
.SEA_M .F_County,
.SEA_M .F_HSA,
.HSA_M .F_State,
.HSA_M .F_County,
.HSA_M .F_SEA {
    display: none;
}

.left-panel-container nav {
    width: 250px;
    background-color: #1d282d;
    overflow-y: auto;
    overflow-x: hidden;
    margin-right: 15px;
    /*add margin for toggle control*/
    opacity: 1;
    transition: opacity .5s ease-out, margin .25s ease-out, width .25s ease-out;
    margin-left: 0;
    min-height: 171px !important;
    max-height: 600px;
}

.left-panel-container nav .right-side > .right-side-menu {
    max-height: 567px;
}

/*need different menu max heights for different screensizes*/
@media only screen and (max-height: 1000px) {

    .left-panel-container nav,
    .left-panel-container nav .right-side > .right-side-menu,
    .drawer-tab {
        max-height: 650px;
    }

    .showheader .left-panel-container nav,
    .showheader .left-panel-container nav .right-side > .right-side-menu,
    .showheader .drawer-tab {
        max-height: 577px;
    }
}

@media only screen and (max-height: 900px) {

    .left-panel-container nav,
    .left-panel-container nav .right-side > .right-side-menu,
    .drawer-tab {
        max-height: 600px;
    }

    .showheader .left-panel-container nav,
    .showheader .left-panel-container nav .right-side > .right-side-menu,
    .showheader .drawer-tab {
        max-height: 477px;
    }
}

@media only screen and (max-height: 800px) {

    .left-panel-container nav,
    .left-panel-container nav .right-side > .right-side-menu,
    .drawer-tab {
        max-height: 500px;
    }

    .showheader .left-panel-container nav,
    .showheader .left-panel-container nav .right-side > .right-side-menu,
    .showheader .drawer-tab {
        max-height: 377px;
    }
}

@media only screen and (max-height: 700px) {

    .left-panel-container nav,
    .left-panel-container nav .right-side > .right-side-menu,
    .drawer-tab {
        max-height: 400px;
    }

    .showheader .left-panel-container nav,
    .showheader .left-panel-container nav .right-side > .right-side-menu,
    .showheader .drawer-tab {
        max-height: 277px;
    }
}

/*restrict menu height when tiling maps*/
.tilecontent .left-panel-container nav,
.tilecontent .left-panel-container nav .right-side > .right-side-menu,
.tilecontent .drawer-tab {
    max-height: 400px;
}

.tilecontent.showheader .left-panel-container nav,
.tilecontent .showheader .left-panel-container nav .right-side > .right-side-menu,
.tilecontent .showheader .drawer-tab {
    max-height: 277px;
}

.left-panel-container nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.left-panel-container nav ul li {
    margin: 0;
    padding: 0;
}

.left-panel-container nav ul li a {
    padding: 0.5em 1em;
    display: block;
    border-bottom: 1px solid #85b4ca;
    background-color: #29596f;
    color: #ffffff;
    text-decoration: none;
}

a.MMtrunk {
    font-size: 1.3em;
    padding: 0.2em 1em;
}

.left-panel-container nav ul li a:hover {
    background-color: #2d4956;
    color: #ffffff;
    outline: 2px outset #96969630;
    outline-offset: -2px;
    background: radial-gradient(#294451, #1d282d);
}

.left-panel-container nav ul ul a {
    padding-left: 5px;
    white-space: pre-line;
    background: #213d49;
    /*different background for unselected branches*/
}

.left-panel-container nav > ul li ul {
    display: none;
}

.left-panel-container {
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    /*top: calc(100px + 50px + 25px);*/
    z-index: 5;
    left: 0;
    padding: 0;
	width:auto;
}

.left-panel-container .drawer-tab {
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: auto;
    z-index: 4;
    transition: .15s height ease-out;
    min-height: 82px;
}

.left-panel-container .drawer-tab .toggle {
    background-color: white;
    width: 3px;
    height: 100%;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    margin-left: -15px;
}

.left-panel-container .drawer-tab img {
    height: 80px;
    width: 15px;
    transition: width .25s ease;
}

.drawer-tab a.collapsing img {
    width: 15px;
}

.drawer-tab a.collapsed img {
    width: 30px;
}

.left-panel-main {
    min-height: 171px;
}

.drawer-tab a {
    position: relative;
}

.infoTip {
    background: white;
    border: 1px gray solid;
    border-radius: 2px;
    box-shadow: 2px 2px 3px black;
    display: block;
    height: auto;
    overflow: hidden;
    opacity: 1;
    padding: 2px;
    position: absolute;
    text-align: center;
    transition: width .5s ease .5s;
}

.drawer-tab span.collapseTip {
    opacity: 0;
    position: absolute;
    background: white;
    width: 0;
    height: 0;
    left: 15px;
    top: 50%;
    border-radius: 2px;
    transition: width .5s ease .5s;
    text-align: center;
    overflow: hidden;
}

.drawer-tab a.collapsing span.collapseTip {
    opacity: 1;
}

.drawer-tab a.collapsed span.collapseTip {
    display: block;
    width: 100px;
    opacity: 1;
    padding: 2px;
    border: 1px gray solid;
    height: auto;
    box-shadow: 2px 2px 3px black;
}

/*hover left side appearance*/
/*~~~~~ RIGHT SIDE MENU ~~~~~*/
.left-panel-container nav.right-menu-expanded {
    width: 250px;
    margin-right: 265px;
    height: 100%;
    background: #66666645;
}

.left-panel-container nav.right-menu-expanded ul {
    width: 250px;
}

.left-panel-container nav .right-side > .right-side-menu {
    display: block !important;
    width: 0 !important;
    min-width: unset !important;
    position: absolute !important;
    left: 250px !important;
    /*transitioning width makes the line wrap animate; need to set child li min-width*/
    transition: .25s ease-out width, left .25s ease-out;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /*max-height: 400px; make this max height property take effect before media properties can override*/
    /*min-height:200px;*/
    background: #1d282d;
    border: none;
    z-index: 4;
}

.left-panel-container nav.collapsing .right-side > .right-side-menu {
    left: 111px !important;
}

.left-panel-container nav .right-side > .right-side-menu > li {
    margin-left: 0;
}

.left-panel-container nav .right-side > .right-side-menu li {
    display: none;
}

.left-panel-container nav .right-side > .right-side-menu.show {
    width: 250px !important;
    border: none !important;
    z-index: 5;
}

.left-panel-container nav .right-side > .right-side-menu.show li {
    display: block;
    background: transparent;
    /*setting this width so when the container animates with, the text doesn't wrap*/
    min-width: 250px;
}

.left-panel-container nav .right-side > .right-side-menu.show a {
    padding: 1em;
    background-color: #1d282d;
    border-bottom: 1px solid #364f5a;
    white-space: pre-line;
}

.left-panel-container nav .right-side > .right-side-menu.show a:hover {
    background-color: #384247;
    outline: 2px outset #96969630;
    outline-offset: -2px;
}

.left-panel-container nav .right-side > .right-side-menu.show a.MMleaf {
    /*leaf color when not selected*/
    background-color: #29596f;
}

.left-panel-container nav .right-side > .right-side-menu.show a.MMleaf:hover {
    background-color: #587e8c;
    background-color: #296581e0;
    outline: 2px outset #96969630;
    outline-offset: -2px;
}

.left-panel-container nav .right-side > .right-side-menu.show ul a {
    border-bottom: 1px solid #364f5a;
}

.left-panel-container nav .right-side > .right-side-menu.show ul ul a {
    padding: 1em 0.5em 1em 5em;
}

.left-panel-container nav .right-side .right-side-menu .dropdown-item:hover,
.left-panel-container nav .right-side .right-side-menu .dropdown-item.active,
.left-panel-container nav .right-side .right-side-menu .dropdown-item:active {
    background-color: #1e2123;
}

/*~~~~~~~~~~~~~~~~~~~~~~Bootstrap Overrides~~~~~~~~~~~~~~~~~~~~~~*/
/*Dropdowns*/
.MM .dropdown {
    position: static !important;
    border: 0px black solid;
}

.MM .dropdown-menu.show {
    background: #1e2123;
    position: static !important;
    transform: none !important;
    width: 100% !important;
    border: none;
    float: none !important;
    will-change: left !important;
    /*extra space for submenu to match left padding in children*/
    padding-bottom: 10px;
}

.MM .dropdown-menu > li {
    margin-left: 0;
}

.MM .dropdown-menu.show > li {
    margin-left: 10px;
    transition: margin .25s ease-out;
}

.MM .dropdown-item.active,
.dropdown-item:active {
    background-color: #2d4956;
}

.MM .dropdown-item:focus,
.dropdown-item:hover {
    background-color: #2d4956;
    color: #ffffff;
}

/*Collapse*/
.MM nav:not(.show) {
    /*can't leave display block, the menus are still keyboard accesible
    display: block !important;*/
    opacity: 0;
    margin-left: -280px;
    width: 0 !important;
}

.MM nav.right-menu-expanded:not(.show) {
    /*margin-left:-515px;*/
    margin-right: 0;
    position: relative;
}

.MM .collapsing {
    height: auto !important;

    margin-left: -140px;
    position: relative;
    margin-right: 15px !important;
}

.left-panel-container nav:not(.show) .right-side > .right-side-menu.show {
    left: -250px !important;
}

.menuRoot {
    min-width: 250px;
    max-width: 250px;
}

.MM a.MMtrunk.mSelected {
    background-color: #2d4956;
    background: linear-gradient(#2d4956, #18333f);
}

.MM .dropdown-submenu a.mSelected {
    background-color: #1d282d;
    background: linear-gradient(90deg, #294552, #1D262D);
    background: linear-gradient(90deg, #2384b1, #1D262D);
}

.MM .right-side > .right-side-menu.show a.mSelected {
    background-color: #1e2123;
    background: linear-gradient(45deg, #1e2123, #704800);
    background: linear-gradient(45deg, #1e2123, #ff7300bf);
    background: linear-gradient(163deg, #1e2123 20%, #29596f 80%, #29596f 90%);
}

.MM .right-side > .right-side-menu.show a.MMleaf.mSelected {
    background: unset;
    background-color: #204556;
}

a.mSelected {
    text-shadow: 2px 2px 2px #101619;
    font-weight: bold !important;
    border-left: 10px #28a745 solid;
}

/*undo menu offset width when on narrow screen*/
@media only screen and (max-width: 700px) {
    .left-panel-container nav .right-side > .right-side-menu {
        position: static !important;
        max-height: unset !important;
        /*don't need nested scrollbars*/
        height: auto !important;
        /*undo inlne height*/
    }

    .left-panel-container nav.right-menu-expanded {
        width: 250px;
        margin-right: 15px;
    }

    .left-panel-container {
        /*overflow-y: auto;*/
    }

    /*overflow auto on leftpanel make the tab control gone when collapsed*/
    .MM nav:not(.show) {
        margin-left: -250px;
    }
}

/*scrollbar style*/
.MM nav,
.MM ul {
    scrollbar-color: #f1f1f1 #c1c1c1;
    scrollbar-width: thin;
}

.MM ::-webkit-scrollbar {
    width: 10px;
}

.MM ::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

.MM ::-webkit-scrollbar-track-piece {
    background-color: #f1f1f1;
}

.MM ::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    background: linear-gradient(180deg, #9f9f9f, #8d8d8d 45%, #9f9f9f 55%, #c1c1c1);
}