html{
    height: 100%;
}
body {
    margin: 0px;
    font-family: sans-serif !important; /*Overwrite bootstrap*/
    line-height: 1 !important; /*Overwrite bootstrap*/
    height: 100%;
    display: flex;
    flex-direction: column;
}
h1, h2, h3, h4 { /*Overwrite bootstrap*/
    font-weight: bold !important;
    line-height: 1 !important;
    font-size: revert !important;
}
input, select, textarea {
    font-size: inherit;
}
textarea {
    width: 50%;
}
label { /*Overwrite bootstrap*/
    margin-bottom: 0 !important;
}
input[type=submit],
input[type=button] {
    border-radius: 5px;
    border: 1px solid #196433;
    cursor: pointer;
}
    input[type=submit]:hover,
    input[type=submit]:focus,
    input[type=button]:hover,
    input[type=button]:focus {
        background-color: #196433;
        border: 1px solid white;
        color: white !important;
    }

input[type="checkbox"],
input[type="radio"] {
    width: 1em;
    height: 1em;
}

.flex-flow {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

    .flex-flow > * {
        flex: 0 1 auto;
    }

.flex-gap-1 {
    gap: 1em;
}

.flex-align-bottom {
    align-items: baseline;
}

.ecology-logo {
    flex: 0 0 25%;
    max-width: 260px;
    min-width: 260px;
}

.LinkButton{
    color: #00F !important;
}
    .LinkButton:hover,
    .LinkButton:focus {
        border-radius: 5px;
        background-color: #196433;
        color: white !important;
        padding:2px;
        margin:-2px;
    }
#mainContent{
    flex: 1 0 auto;
}
#divMain {
    width: 100%;
}
.DivMargin {
    margin-left: 10px;
    margin-right: 10px;
}
.skipNav
{
    padding: 6px;
    position:absolute;
    top:-40px;
    left:0px;
    color:#7194B6;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
    border-bottom-right-radius:8px;
    background:transparent;
    -webkit-transition:top 1s ease-out, background 1s linear;
    transition: top 1s ease-out, background 1s linear;
    z-index:100;
}
    .skipNav:focus {
        position: absolute;
        left: 0px;
        top: 0px;
        background: #FFFFFF;
        outline: 0;
        -webkit-transition: top .1s ease-in, background .5s linear;
        transition: top .1s ease-in, background .5s linear;
    }

header {
    background-color: #728DAA;
    color: white;
}
#EcologyLogoImg {
    width: 13em;
    height: 4em;
}

/*top navigation on _Layout.cshtml */
.navbar {
    background-color: #44688f;
    width: 100%;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
    padding: 0;
    margin: 0;
}

.navbar-nav a {
    display: inline;
    text-decoration: none;
    margin-right: 2.36572%;
    font-size: 1.5em;
}
    .navbar-nav a {
        color: white !important;
        text-decoration: none;
        white-space: nowrap;
        padding-top: 5px;
        padding-bottom: 0px;
        display: inline-block;
        border: none;
    }
        .navbar-nav a:hover,
        .navbar-nav a:focus {
            text-decoration: underline;
            color: #44688f !important;
            background-color: white;
            border-radius: 5px;
        }
.navbar-toggler {
    border-color: white !important;
}

.app-title{
    font-size:1.5em !important;
}
.app-td-title
{
    height: 57px;
    background-color: #45759A;
    width: 100%; 
    white-space: nowrap;
}
.banner {
    border-collapse: collapse;
    border: none;
    background-color: #45759A;
    height:57px;
    width:100%;
}
.app-td-banner-left
{
	height: 57px; 
	border: 0; 
	white-space: nowrap; 
	background-color: #45759A
}
.app-td-banner-right
{
	height: 57px; 
	border: 0; 
	white-space: nowrap; 
	background-color: #45759A
}
.test {
    font-size: .65em;
}

.footer {
    background-color: #44688f;
    color: white;
    text-align: left;
    padding: 10px;
    padding-bottom: 20px;
    width: auto;
    flex-shrink: 0;
    height: fit-content !important;
}
    .footer ul {
        padding-right: 0px;
        padding-left: 0px;
    }

    .footer li {
        display: inline;
        font-size: 1.2em;
        white-space: nowrap;
    }

    .footer a{
        margin-right: 1.5em;
        color: white;
        padding: 2px;
        text-decoration: none;
    }
        .footer a:hover,
        .footer a:focus {
            color: #44688f;
            background-color: white;
            border-radius: 5px;
        }


/*These link styles are default HTML - needed to overwrite common.css styles*/
.foot{
    padding:2px;
}
A:link.foot {
    font-size: 100%;
    color:black;
}
A:visited.foot {
    font-size: 100%;
    color: #551A8B;
}
A:hover.foot {
    font-size: 100%;
    color: #0000EE;
}

.SearchTextBox {
    overflow: auto;
    font-family: sans-serif;
    font-size: inherit;
    resize: none;
}
.ErrorTitle {
    color: darkred;
    font-size: 2em;
    font-weight: bold;
}

.ErrorDescription {
    color: darkred;
}
.HelpCursor
{
    cursor:help;
}
.SearchLabel
{
    text-align: right;
    font-weight: bold;
}
.SearchInput
{
    text-align: left;
    vertical-align: top;
}

/*Allow the calendar date-pickers to resize appropriately and coordinate colors to the page*/
.Calendar {
    width: 15em;
}

    .Calendar .ajax__calendar_container {
        width: auto !important;
        background-color: white;
        border: 1px solid black;
        font-size: inherit;
        z-index: 900;
    }

        .Calendar .ajax__calendar_container table {
            font-size: inherit;
            width: 100%;
        }

        .Calendar .ajax__calendar_container td {
            font-size: inherit;
            padding: 0px 3px;
        }

    .Calendar .ajax__calendar_header {
        height: auto;
    }

    .Calendar .ajax__calendar_body,
    .Calendar .ajax__calendar_days,
    .Calendar .ajax__calendar_months,
    .Calendar .ajax__calendar_years {
        width: 100%;
        height: 8em;
        text-align: center;
    }

    .Calendar .ajax__calendar_title,
    .Calendar .ajax__calendar_dayname,
    .Calendar .ajax__calendar_day,
    .Calendar .ajax__calendar_month,
    .Calendar .ajax__calendar_year {
        font-size: inherit;
        width: inherit;
        height: max-content;
    }

        .Calendar .ajax__calendar_day:hover,
        .Calendar .ajax__calendar_today:hover {
            background-color: #2CB55C;
            border-radius: 5px;
        }

    .Calendar .ajax__calendar_active {
        background-color: #196433;
        border-radius: 5px;
        color: white;
    }

.ReleasePageBr
{
    padding-left: 130px;
}
.HoriztonalScroll
{
    overflow-x: auto;
}
.TableCentered
{
    margin: 0 auto;
}
caption {
    background-color: #196433;
    color: white !important;
    caption-side: top !important;
    text-align: center !important;
    font-size: 1.75em;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}
.ViewListingButtons {
    margin: auto;
    padding: 5px 0px;
}
.ViewMainContent {
    margin: auto;
    border: solid 3px #154873;
    border-radius: 10px;
}
.Cat3s {
    border: 1px solid #154873;
    font-size: 1.1em;
    margin: 15px auto;
    width: 50%;
}
#viewListingHeader {
    font-weight: bold;
    padding-bottom: 3px;
    background-image: url('../images/viewlistingheader.png');
    border-radius: 8px 8px 0px 0px;
}

.imgTmdlDiv {
    background-image: url("../images/InfoGreen.png");
    width: 22px;
    height: 18px;
    background-repeat: no-repeat;
    display: inline-block;
    margin-bottom: -5px;
    background-size: 22px;
}
.imgTmdlLink:hover .imgTmdlDiv,
.imgTmdlLink:focus .imgTmdlDiv {
    background-image: url("../images/InfoWhite.png");
}

/*This set of classes are intentionally small to make various combinations as needed*/
.Width100 {
    width: 100%;
}
.Height22 {
    height: 22px;
}
.FloatLeft {
    float: left;
}
.FloatRight {
    float: right;
}
.DivClearBoth {
    clear: both;
}
.MarginNone {
    margin: 0px;
}
.MarginTop20px {
    margin-top: 20px;
}
.MarginBottom15px {
    margin-bottom: 15px;
}
.MarginBottom2px {
    margin-bottom: 2px;
}
.MarginLeft10pct {
    margin-left: 10%;
}
.MarginRight2em{
    margin-right: 2em;
}
.BoldNoSize{
    font-weight: bold;
}
.ColorDarkRed {
    color: darkred;
}
.ColorWhite {
    color: white;
}
.BackgroundWhite {
    background-color: White;
}
.BackgroundGreen {
    background-color: #196433;
}
.BackgroundLightGreen {
    background-color: #218745;
}
.DisplayBlock {
    display: block;
}
.DisplayInline {
    display: inline;
}
.DisplayNone {
    display: none;
}
.AlignCenter {
    text-align: center;
}
.AlignLeft {
    text-align: left;
}
.AlignRight {
    text-align: right;
}
.VAlignTop {
    vertical-align: top;
}
.VAlignMiddle {
    vertical-align: middle;
}
.VAlignBottom {
    vertical-align: bottom;
}
.PaddingTop_3em{
    padding-top: .3em;
}
.PaddingTop20{
    padding-top: 20px;
}
.PaddingTopBottom2Sides7 {
    padding: 2px 7px;
}
.PaddingLeft10Right10 {
    padding: 0px 10px;
}
.PaddingLeft5px {
    padding-left: 5px;
}
.PaddingLeft5pct {
    padding-left: 5%;
}
.TablePadding0Spacing0 {
    padding: 0px;
    border-spacing: 0px;
}
.TablePadding1Spacing0 {
    padding: 1px;
    border-spacing: 0px;
}

.DivComment {
    border-radius: 10px;
    padding: 10px;
}
    .DivComment input {
        width: 25em;
        max-width: 100%;
    }
    .DivComment select,
    .DivComment input[type=submit] {
        width: fit-content;
        max-width: 100%;
    }

.SearchDiv {
    padding: 3px;
    text-align: center;
    margin: auto;
}
.SearchTableHeader {
    text-align: center;
    font-weight: bold;
    font-size: 14pt;
    background-color: #196433;
    color: #FFFFFF;
}
.SectionBorder {
    border: 2px solid #196433;
}
.WelcomeBorderBackground {
    border: 1px solid #196433;
    background-color: #FFFF00;
}
.TableSubHeader {
    background-color: #196433;
    color: White;
    font-weight: bold;
    text-align: center;
}
#HelpItemHeader {
    border-bottom: solid 2px #196433;
    color: #196433;
    font-size: 1.2em;
}
#HelpItemText {
    border-style: none none none solid;
    border-width: thin;
    border-color: #196433;
    text-align: left;
    vertical-align: top;
    padding: 5px;
}
.HelpItemSubHeader {
    width: 150px;
    padding-left: 10px;
}
.HelpItemColorBlue {
    color: #0000EE;
    padding: 2px;
}
    .HelpItemColorBlue:hover,
    .HelpItemColorBlue:focus {
        border-radius: 5px;
        background-color: #196433;
        color: white !important;
    }
.HelpItemColorGreen {
    border-radius: 5px;
    background-color: #196433;
    color: white !important;
    padding: 2px;
}
.HelpButton {
    width: 3em;
    height: 3.5em;
}
.BorderTopGreen {
    border-top-style: solid;
    border-top-width: thin;
    border-top-color: #196433;
}
.SedimentColor {
    color: #993300;
}
.Label {
    text-align: right;
    vertical-align: middle;
    font-weight: bold;
    white-space: nowrap;
}
.Value {
    text-align: left;
    vertical-align: top;
}
.dropdown{
    border:1px solid black;
}
.DDL110px {
    width:110px !important;
    display: flex;
}

/*
    Control style of 1998 & 1996 radio buttons
    !important is necessary to overwrite bootstrap
*/
fieldset {
    border: 1px solid black !important;
    border-radius: 8px;
    padding: 0px 5px !important;
}
legend {
    padding: 3px 5px !important;
    font-size: 1.2em !important;
    background-color: #196433 !important;
    color: white !important;
    text-align: left !important;
    width: max-content !important;
    border-radius: 8px;
}
.Radio:hover,
.Radio:focus {
    box-shadow: 0 0 4px #196433;
}

.ExportSectionBorder {
    border-top: none;
    border: 3px solid #196433;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.ExportHeader {
    background-color: #196433;
    color: #FFFFFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-top: -.5em;
}
.ExportWaitMessage {
    font-weight: bold;
    color: darkgreen;
}
.printOnlyDisplay { /*Only display this while printing*/
    display: none;
}
.ULPaddingTop li{
    padding-top: .5em;
}

/*Simulate a double column table layout without using tables*/
.AlignInputs {
    display: grid;
    grid-template-columns: minmax(100px, 50%) minmax(100px, 1fr);
    grid-column-gap: .5em;
    grid-row-gap: .5em;
    text-align: left;
    padding: 5px;
}
    .AlignInputs label{
        text-align: right;
    }
        .AlignInputs label:after{
            content: ":";
        }
    .AlignInputs textarea{
        width: 100%;
    }
    .AlignInputs .AIDiv {
        text-align: right;
        margin-top: auto;
        margin-bottom: auto;
    }

/*Simulate a quadruple column table layout without using tables*/
.ExportAlignBoxes{
    display: grid;
    grid-template-columns: max-content max-content max-content max-content;
    grid-column-gap: 10em;
    grid-row-gap: .2em;
    text-align: left;
    padding-left: 5%;
}

/*These classes are used on ViewListing for the multi-level BasisWqaa table*/
.ExpandDiv {
    width: 20px;
    height: 20px;
    background-image: url("../images/DownGreen.png");
    background-repeat: no-repeat;
    background-size: 20px;
}

.ExpandLink:hover .ExpandDiv,
.ExpandLink:focus .ExpandDiv {
    background-image: url("../images/DownWhite.png");
    background-color: #218745;
}

.CollapseDiv {
    width: 20px;
    height: 20px;
    background-image: url("../images/UpGreen.png");
    background-repeat: no-repeat;
    background-size: 20px;
}

.CollapseLink:hover .CollapseDiv,
.CollapseLink:focus .CollapseDiv {
    background-image: url("../images/UpWhite.png");
    background-color: #218745;
}

.InnerGrid table {
    margin: 5px 5px 5px 21px;
}

.InnerGrid th,
.InnerGrid td {
    padding: 3px 7px;
}

.DeterminesCategoryYear {
    font-weight: bold;
    background-color: #ffff73 !important;
}

.Paging {
    font-size: 1.25em;
}

    .Paging span {
        font-weight: bold;
        font-size: 1.5em;
    }

    .Paging a:hover,
    .Paging a:focus {
        background-color: #154873;
        color: white;
        border-radius: 5px;
        padding: 2px 4px;
        margin-right: -4px;
        margin-left: -4px;
    }

/*
    These Category classes are set in Category.GetCategoryCssClass()
*/
.Category1 {
    background-color: #00D600;
}
.Category2 {
    background-color: #FFFF73;
}
.Category3 {
    background-color: #DEDEDE;
}
.Category4A {
    background-color: #FF7A00;
}
.Category4B {
    background-color: #CD892B;
}
.Category4C {
    background-color: #E366FF;
}
.Category5 {
    background-color: #FF7070;
}

.HelpPopupButton {
    background-image: url("../images/InfoGreen.png");
    background-repeat: no-repeat;
    background-color: #FFF;
    background-size: 1.2em;
    cursor: help;
    border: none;
    width: 1.5em;
    height: 1.4em;
    vertical-align: bottom;
    border: 2px solid #FFF;
    border-radius: 10px;
}

    .HelpPopupButton:focus,
    .HelpPopupButton:hover {
        background-image: url("../images/InfoWhite.png");
        border: 2px solid #196433;
    }

.HelpPopupButtonBackgroundGreen {
    border: 2px solid #196433;
    width: 1.4em;
    height: 1.2em;
}

    .HelpPopupButtonBackgroundGreen:focus,
    .HelpPopupButtonBackgroundGreen:hover {
        border: 2px solid #FFF;
        background-image: url("../images/InfoWhite.png");
    }

@media(min-width: 576px) {
    .modal-dialog {
        max-width: 75% !important;
    }
}