.sidebar{
        /* position: absolute; */
        /* top: 0;         */
        /* width: 20rem; */
        z-index: 1000;        
        /* left: 0px; */
        /* height: 100vh; */
        overflow-y: auto;
        overflow-x: hidden;
        background-color: rgb(255,255,255);
/* removing padding helps scroll formatting*/
    /*        padding: 0.25rem;        */ 
        display: none;
        left:1rem;
        /* padding: .25rem; */
        order: 2;
        width: 21.5rem; /* match to floatContainer, plotting.js requires rem value */
        flex: 2 1 auto; /* grow shrink auto*/
        box-sizing: border-box;
}
@media (max-width: 720px) {
        .sidebar{
                width: 95%;
        }
}
.closeButton{
        position: relative;
        font-size: 1rem;
        cursor:pointer;        
	color:var(--accent-color);
	font-weight: 700; 
        text-align: end;
        padding: 0.5rem 1rem 0 0;
}
.expandable {
        display: -webkit-box;
        line-clamp: 3;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        padding-bottom: 0.14em !important; /* prevent top of line 4 from showing */
         overflow-wrap: break-word; 
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
}
#herdPanel{
        flex: 2 1 auto; 
        order: 3;
        background-color: var(--light-beige-color);

  /* fix scroll */
        display: flex;
        flex-direction: column;
}
#herdPanel.hpMax{
        display: flex;
}
#herdPanel.hpClosed{
        display: none;
        /* height: 0; */
        /* overflow: hidden */
}
#herdPanelContent{
        /* fix scroll */
        display: flex;
        flex-direction: column;
        flex:1 1 auto;
        height: 100%;
        /* overflow: hidden; */
        

}
#sidebarFixedTop, #sidebarFixedTopCorr {
        position: sticky;
        display: flex;
        top: 0;
        z-index: 10;
        /* font-size: 1.25rem;        
        font-weight: bold; */
        padding:.75rem;
        /* background-color: #515050; */
        
        background-color: var(--accent-color);
        color:white;

        /* fix scroll */
        flex: 0 0 auto;
}
#sidebarTitle, #sidebarTitleCorr{
        font-size: 1.25rem;
        margin-left:0.25rem;
        font-weight: bold;
        margin-right: 1.5rem

}
#sidebarScrollSection{
        /* fix scroll */
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
}

#sidebarFooter{
        display: flex;
        position: fixed;
        bottom: 0px;
        width: 21.5rem;
        padding-bottom: 1.5rem;
        text-align: center;
        z-index: 1000; /* place over plotDescription */
        justify-content: space-evenly;
        /* height: auto; */

        /* fix scroll */
        flex: 0 0 auto;
}
#closeSideBarButton{
        position: absolute;
        top: 0.5rem;
        right: 1rem;
        font-size: 1rem;
        font-weight: bold;
        cursor:pointer;
        color: white;
}
#adminPanel {
        flex: 1 1 auto; /* adjusted on the fly */
        order: 2;

        /* fix scroll */
        display: flex;
        flex-direction: column;
}
#adminPanel.apMax{
        display: flex;
}
#adminPanel.apMin{
        display: flex;
}
#adminPanel.apClosed{
        display: none;
}
#adminPanelContent{
        padding: 0 1rem;
        line-height: normal;

        /* fix scroll */
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        height: 100%;
}
#adminPanelTitle{
        position: sticky;
        top: 0;
        font-size: 1.1rem;        
        font-weight: bold;
        padding:1rem;
        background-color: var(--accent-color);
        color:white;
        margin: 0 -1rem auto; /*account for adminPanelContent padding */

        /* fix scroll */
        flex: 0 0 auto;
}
#adminPanelScrollContent{
        /* padding: 1rem 0; */
        margin-right: -1rem; /* visually shift scroll bar into the padding zone */
        padding-right: 1rem; /* keep text/content aligned */
        padding-top: 1rem;
        padding-bottom: 1rem;

        /* fix scroll */
        flex: 1 1 auto;
        overflow-y: auto;
}
.closeadminPanel::before{
        content: 'x'
}
.closeadminPanel, #closeCorridorSidebar{
        position: absolute;
        top: .3rem;
        right: .1rem;
        color:white;
        font-size: 1rem;
        font-weight: bold;
        cursor:pointer;
        z-index: 10000;
        margin: .25rem .5rem;
        padding: 0rem .25rem; /*top right bottom left*/
}
#adminCollapseButton{
        position: absolute;
        top: 1.9rem;
        right: .01rem;
        font-size: 1rem;
        color: white ;
        /* justify-items: right; */
        margin: .15rem .5rem;
        padding: .5rem .25rem;
}
#shareStateButton{
        padding: .35rem .3rem;
        font-size: 0.68rem;
        border: 0px;
        cursor: pointer;
}
.dropdownContent{
        padding-left: .8rem;
}
.dropdownTitle{
        font-weight: bold;
        cursor: pointer;
}
.isDropped{
        display: block;
}
.notDropped{
        display: none;
}
.sidebarHerdItem{
        cursor: pointer;
}
.sidebarHerdItem:hover{
        text-shadow: 0px 0px 1.75px darkgray;
}

.downloadHerdsButton{
        padding: .15rem 0.3rem;
        font-size: 0.68rem;
        border: 0px;
        /* background-color: var(--lighter-accent-color); */
}
.downloadHerdsButtonHeader{
        /* padding: .25rem;  */
        padding: .22rem .4rem;
        font-size: 0.68rem;
        border: 0px;
        /* background-color: var(--lighter-accent-color); */
}


#shareHerdButton{
        position: absolute;
        bottom: -2.5rem;
        right: 1rem;
        font-size: 1rem;
        font-weight: bold;
        cursor:pointer;
        color: white;
        background-color: var(--mediumLight-accent-color);
        padding: 0.25rem;
        border-radius: 5px;
        border: 0.3px solid white;
        transition: background-color 0.1s ease;
}

#shareHerdButton:hover{
        background-color: var(--darker-accent-color)
}



.sidebarSubTitle{
        font-size: 1.1rem;
        font-weight: 500;
        margin-left:0.5rem;
        display: flex;
        align-items: center;

}
.sidebarContent{
        font-size: .8rem;
        padding: 0rem 1rem 0rem 1.25rem; /* note padding bottom for exandable prevents partial's from displaying */
        margin-bottom: 0.5rem;
        line-height: normal;
}

#sidebarImage, #sidebarImageCorr{
        /* background-color: var(--light-beige-color); */
        display: flex;
        flex-direction: column;
        width: 100% /* text-align: center; */;
        justify-content: center;

}
.sidebarSpeciesImage{
        /* margin-left: 4rem; */
        max-height: 25vh;
        padding:0.75rem;
        flex-grow: 1;
        /* height:calc(100% - 1.5rem); */
        width: auto;
        align-self: center;
        min-height: 0;
}
#herdState{
        background-color: var(--accent-color);
        color: var(--light-beige-color);
        font-size: 1.4rem;    
        font-weight: bold;
        padding: .1rem .5rem;
        margin: 0;
}

.herdCount{
        text-transform: uppercase;
        font-size:.75rem;
        font-weight: 400;
}

#timeline{
        padding: 0.2rem .1rem 0 .1rem;
}

#migInfoI{
        padding: .1rem;
}
.useBox{
     width:0.5rem;
     height:0.5rem;
     display:inline-block;
     border-radius: 0.25rem;
}

.useBox.VeryHighUse{
        background-color: var(--VeryHighUse);        
}
.useBox.HighUse{
        background-color: var(--HighUse);        
}
.useBox.MediumUse{
        background-color: var(--MediumUse);        
}
.useBox.LowUse{
        background-color: var(--LowUse);        
}
.useBox.OneIndividual{
        background-color: var(--OneIndividual);        
}
.useBox.WinterRange{
        background-color: var(--WinterRange);        
}
.useBox.AnnualRange40{
        background-color: var(--AnnualRange40);
}
.useBox.AnnualRange50{
        background-color: var(--AnnualRange50);        
}
.useBox.AnnualRange99{
        background-color: var(--AnnualRange99);        
}
.useBox.Stopover{
        background-color: var(--Stopover);        
}
.useBox.CorridorFootprint{
        background-color: var(--Footprint);        
}

#factSheetButton {
        float: left;
        margin-left: 0.5rem;
        font-size: .75rem;
        width: calc(45% - .5rem);
        /* z-index: 100001; */
}   
#gisButton {
        float: right;
        margin-right: 0.5rem;
        margin-left: 0.4rem;
        font-size: .75rem;
        width: calc(50% - .5rem);
        /* z-index: 100001; */
}

@media (max-width: 720px) {
        #sidebarFooter{
                width: 95%;
                flex-direction:row-reverse;
        }
        #factSheetButton {
                width: 2rem;
                margin-right:0.5rem;
                font-size: 0.5rem;
                padding: 10px;
        }
        #gisButton{
                display:none;
        }
}

.partnerLogo{
        max-height:3rem;
/*        margin:5px 10px 5px 0px;*/
        margin:5px;
        max-width: 45%
}

/* extra space for buttons below logos */
#partnerLogos{
        margin-bottom: 4rem;
}

#landManagementPiePlotHolder{
        position: relative;
        display: none;
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
        background: transparent !important;
}

#landManagementPiePlot{
        background: transparent !important;
        position: relative;
        display: block;
        margin-left: 1rem !important;
        padding-left: 0 !important;
        width: auto;
        max-width: 100%;
}

#plotDescription{
        font-size: .75rem;
        position: relative;
        z-index: 1;
        text-align: left;
        width: 100%;
        margin-top: 0.2rem;
}

.federalOutlineLegend{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1.25rem;
    align-self: flex-start;
}
.federalOutlineBox{
    width:0.75rem;
    height: 0.75rem;
    border:3px solid #575757;
    display: inline-block;
}
.federalOutlineLabel{
    font-size: 0.75rem;
    font-weight: bold;
    display: inline-block;
    color:#575757;

}

/* PARENT/CHILD NAVIGATION STYLES */
.corridorNavigation {
    margin: 0.2rem 0 0 1.3rem;
    font-size: 0.9rem;
    line-height: 1.3rem;
}

.parentCorridorButton, .childCorridorButton {
    background: none;
    color: var(--accent-color);
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant: small-caps;
    text-decoration: underline;
    transition: color 0.2s ease;
    display: inline;
}

.parentCorridorButton:hover, .childCorridorButton:hover {
    color: var(--darker-accent-color);
    text-decoration: underline;
}

.parentCorridorButton:active, .childCorridorButton:active {
    color: var(--darker-accent-color);
}

.childCorridorButton {
    font-size: 0.75rem;
}

/* Remove icon styling as we're using text VIEW button now */