/* echo mobile styles */
@media screen and (max-width: 960px) {
    /*use smaller logo when mobile secondary nav is applied, which occurs when desktop secondary nav no longer fits*/

    #header {
        min-height: 100px;
    }
    #header h1 a {
        background: url(../../../../../../../app/img/logo-smallest.png) 0 0
            no-repeat;
        height: 47px;
        position: absolute;
        width: 120px;
        display: block;
        margin: 20px 5px 0 45px;
    }
}

@media screen and (max-width: 860px) {
    /* DFR mobile styles - summary 3 columns do not fit at this width*/
    .dfrContainer .details .left {
        width: 100%;
    }
    .dfrContainer .details .right {
        width: 100%;
    }
    .dfrContainer .stickyNavBar,
    .dfrContainer .customizeReport {
        display: none;
    }
}

@media screen and (min-width: 416px) and (max-width: 880px) {
    /*Results mobile styles - 2 column layout no longer fits at this width*/
    #results-left {
        float: none;
        width: 100%;
    }
    #results-right {
        width: 100%;
        float: none;
    }
    .pagination {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 880px) {
    /*Search mobile styles - 2 column layout no longer fits at this width*/
    #mainInner {
        width: 100%;
    }
    #scene {
        overflow: hidden;
        width: 123px;
    }
    #scene img {
        max-width: 403px;
    }
    #col-large {
        float: none;
        margin-bottom: 10px;
        width: 100%;
    }
    #col-small {
        float: none;
        width: 100%;
    }
    #col-small .tools {
        width: 100%;
    }
    #col-small #selections {
        width: 100%;
    }

    .pane .formRow {
        padding: 5px 0 5px 20px;
    }
    .formRow a.addMore {
        margin: 0 30px 0 0;
    }
    .pane .formRow.text label,
    .pane .formRow.select label {
        display: block;
        margin: 0 0 5px 0;
        width: 100%;
    }
    .pane .formRow a {
        clear: left;
        display: inline-block;
        float: left;
    }
    .pane .formRow a.addMore {
        clear: none;
        float: right;
    }
    .formRow.text input,
    .formRow.select select,
    .formRow.select select.multipleWide,
    .formRow textarea {
        width: 95%;
        margin-right: 10px;
    }
    .formRow input {
        margin: 0 0 5px 0;
    }

    /*div.leftcol {
		float:none;
		width:90%;
	}
	div.leftcol select.select{width:90%;}
	div.rightcol select.select{width:90%;}
	div.rightcol {
		float:none;
		width:90%;
	}* /*enf case judicial/administrative columns*/

    /* End Search mobile styles*/

    /*styles for fieldsets - need to override EPA template fieldset styles*/
    fieldset.radiogroup {
        border: 0;
        margin: 0;
        padding: 0;
        top: 5px !important;
        background-color: transparent;
        color: #151515;
    }

    input[type="radio"] {
        vertical-align: middle;
    }
    .highcharts-container text.highcharts-title > tspan {
        font-size: 12px !important;
    }
    g.highcharts-legend-item text,
    g.highcharts-legend-item text tspan {
        font-size: 10px !important;
    }
}

@media screen and (max-width: 640px) {
    /*Search mobile styles*/
    #columns .leftCol,
    #columns .rightCol,
    #columns .middleCol,
    #columns .center,
    #columns .right {
        float: none;
        margin: 0 2%;
        width: 98%;
    }
    /*mobile styles for radio button groups and sliders on facility and enf case search forms*/
    .slider-container,
    .daterange-container,
    .radiogroupIndent,
    ul.radioselect,
    .indent {
        margin-left: 10px !important;
        clear: both;
    }
    .indent {
        margin-left: 0px !important;
        clear: both;
    }
    fieldset ul.radioselect {
        display: block;
    }
    fieldset.radiogroup legend {
        display: block;
    }
    .formRow > fieldset.radiogroup > legend {
        width: auto !important; /*100%*/
    }
}

@media screen and (max-width: 625px) {
    /* DFR mobile styles*/
    .dfrContainer .details,
    .dfrContainer .details .left,
    .dfrContainer .details .right {
        clear: both;
        width: 100%;
    }
    .dfrContainer .dfrMapContainer {
        float: none;
        width: 100%;
    }
    .dfrContainer .dfrMap {
        margin: 0 0 10px 0;
    }

    g.highcharts-legend-item text,
    g.highcharts-legend-item text tspan {
        font-size: 9px !important;
    }

    .dfrContainer .dfrDataQualityAlert {
        width: 100%;
    }
    /*End DFR mobile styles*/

    /*enforcement case report (ecr) specific mobile styles - need to override some DFR mobile styles*/
    #ecr .details.ecr .right,
    #ecr .details.ecr .left {
        float: none;
        width: auto;
    }
    #ecr .details.ecr .right p {
        margin-top: -10px;
    }
    #dfrTools.ecrTools .expandSearch,
    #dfrTools.ecrTools .collapseSearch {
        display: inline;
    }
    #ecr.dfrContainer .pane2,
    #ecr.dfrContainer .pane3,
    #ecr.dfrContainer .pane4,
    #ecr.dfrContainer .pane5,
    #ecr.dfrContainer .pane6 {
        display: block;
    }

    /*pollutant air report (caapr) specific mobile styles - need to override some DFR mobile styles*/
    #dfrTools.caaprTools .expandSearch,
    #dfrTools.caaprTools .collapseSearch {
        display: inline;
    }
    #caapr.dfrContainer .pane1,
    #caapr.dfrContainer .pane3 {
        display: block;
    }
}

@media screen and (max-width: 480px) {
    #mainLinks {
        display: block;
        float: left;
        margin-top: 50px;
    }
    .dfrContainer .details .left,
    .dfrContainer .details .right {
        float: none;
        width: 100%;
    }
}

@media screen and (max-width: 465px) {
    /*#mainInner{width:100%;}*/
    #searchForm h2 a {
        line-height: normal;
        padding-bottom: 8px;
        padding-top: 8px;
    }
    /*.formRow input{margin:0 0 5px 0;}*/
    #col-large .tools a {
        float: none;
    }
}

@media screen and (max-width: 415px),
    (max-width: 740px) and (orientation: landscape) {
    /*Results mobile styles - these styles are not used on mobileF version*/
    #mobileswap {
        display: block;
        clear: both;
        text-align: center;
        padding-top: 10px;
    }
    #mobileswap a {
        cursor: pointer;
    }
    #toolsMap,
    #toolsTable,
    #details {
        display: none;
    }
    .warningMsg {
        float: none;
        margin: 0 0 10px 0;
        width: 100%;
    }
    #results-left {
        float: none;
        width: 100%;
    }
    #results-right {
        width: 0%;
        float: none;
    }
    .pagination .previous,
    .pagination .next {
        background: #e7e7d6;
        border: 1px solid #999;
        width: 47%;
        text-align: center;
        height: 29px;
        color: #666;
        vertical-align: middle;
        padding: 4px 0px 0px 5px;
    }
    .pagination {
        margin: 0;
    }
    #searchMobile,
    #containerGrid table tbody tr td div[id^="violheatmap"] {
        display: block !important;
    }
    .highcharts-yaxis-labels text {
        font-size: 10px !important;
    }

    /*styles for input clear (x) button on results search form*/
    .text-input-wrapper {
        margin: 0 -5px 0 -5px;
        display: inline-block;
        height: 29px;
        width: 75%;
        background: none;
        border: 2px solid #044f95;
        float: none;
    }
    .text-input-wrapper input {
        border: none;
        background: none;
        outline: none;
        padding: 0;
        margin: 0;
        font: inherit;
    }
    .text-input-wrapper span {
        cursor: pointer;
        color: gray;
        font-weight: bold;
        float: right;
        padding-right: 5px;
        visibility: visible;
    }
    /*don't show default clear (x) in IE browser*/
    .noXButton::-ms-clear {
        width: 0;
        height: 0;
    }

    #innerGrid,
    .pagination {
        display: none;
    }
    #containerGrid {
        max-height: 100% !important;
        overflow-x: visible !important;
    } /*overrides the fixed height, removes horizontal scroll*/
    #containerGrid tbody td:first-child {
        overflow: visible !important;
    }
    .mediaSelectLabel {
        font-size: 12px;
        display: inline-block;
        margin-top: 10px;
    }

    #searchMobileForm {
        margin: 10px 0px 0px 0px;
        padding: 0px;
    }
    #searchMobileForm #myLocation,
    #searchMobileForm #newSearch {
        padding: 0px;
        margin: 0px;
    }
    #searchMobileForm img {
        vertical-align: top;
        border: 1px solid #044f95;
        padding: 0px;
        margin: 0px;
    }
    #searchMobileForm #searchTextMobile,
    #searchMobileForm #facilitySearchMobile {
        width: 75%;
        padding-left: 3px;
        margin: 0px;
    } /*height:29px;padding:3px;margin:0px;width:75%;*/
    #mobileTools ul {
        margin: 10px 0 5px 0;
        padding: 0;
        list-style-type: none;
        text-align: left;
        width: 100%;
    }
    #mobileTools ul li {
        display: inline-block;
        margin: 0 0 0 5px;
    }
    #mobileTools ul li a {
        font-size: 0.9em;
        display: inline-block;
        cursor: pointer;
    }
    #mobileTools ul li.filterResults {
        background: url("../../../../../../../app/img/filter-icon.png")
            no-repeat left center;
        padding: 0 0 0 13px;
    }
    #mobileTools ul li.mapView {
        background: url("../../../../../../../app/img/map-view-icon.png")
            no-repeat left center;
        padding: 0 0 0 11px;
    }
    #mobileTools ul li.listView {
        background: url("../../../../../../../app/img/list-view-icon.png")
            no-repeat left center;
        padding: 0 0 0 15px;
    }
    #searchMobileForm fieldset {
        border: 0;
        margin: 0;
        padding: 10 0 0 0px;
        top: 0;
        background-color: transparent;
        color: #151515;
        clear: both;
    }
    #searchMobileForm fieldset legend {
        font-family: Tahoma, Geneva, Verdana, sans-serif;
        background: none;
        border: 0;
        font-weight: normal;
        line-height: 1.5;
        color: #151515;
        text-indent: 0em;
        font-size: 12px;
        margin: 0px;
        padding: 0px;
        border-radius: 0px;
        height: auto;
        position: relative;
        top: 0px;
        left: 0px;
    }
    /*styles for radio button groups in fieldsets*/
    #searchMobileForm fieldset.radiogroup legend {
        display: inline-block;
        width: auto;
        float: left;
    }
    #searchMobileForm fieldset ul.radioselect {
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline-block;
    }
    #searchMobileForm fieldset ul.radioselect li {
        border: 1px transparent solid;
        display: inline;
        float: left;
        font-weight: normal;
        font-size: 12px;
        padding-right: 5px;
    }
    #searchMobileForm fieldset ul.radioselect li label {
        font-weight: normal;
    }
    /*results table styles*/
    table#resultsGrid thead,
    table#resultsGrid tbody tr td:not(:first-child) {
        display: none !important;
    }
    table#resultsGrid tbody tr td:first-child {
        font-size: 12px;
        font-weight: bold;
    }
    table#resultsGrid tbody tr:hover,
    table#resultsGrid tbody tr.alt:hover,
    table#resultsGrid tbody tr.active,
    table#resultsGrid tbody tr.alt.active,
    table#resultsGrid tbody tr.alt {
        background-color: transparent;
        cursor: default;
    }
    /*refine results styles*/
    #refineResults ul {
        margin: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        list-style: none;
        display: inline-block;
        font-size: 12px;
    }
    #refineResults ul li {
        line-height: 200%;
    }
    #refineResults label {
        font-weight: normal !important;
    }
    #refineResults input[type="submit"] {
        background: #044f95;
        border: 2px solid #044f95;
        align: center;
        border-radius: 0;
    }
    #refineResults .filerSearch:hover {
        text-decoration: underline;
    }

    .previous,
    .next {
        font-size: 12px;
    }

    /*End Results mobile styles*/

    /*DFR mobile styles: NOTE: other report files: ecr, air, etc. use same styles and can be affected by changes to these styles*/
    .dfrContainer .table .left,
    .dfrContainer .table .middle,
    .dfrContainer .table .right {
        width: 100%;
    }
    .dataDictionary {
        display: none;
    }
    .dfrContainer .titleMobile {
        display: block !important;
    }
    .dfrContainer .title,
    .dfrContainer .goTo {
        display: none;
    }
    .dfrContainer .pane1 h2.dfrpane a {
        background: none;
    }
    #dfrTools .expandSearch,
    #dfrTools .collapseSearch,
    .dfrContainer .pane2,
    .dfrContainer .pane3,
    .dfrContainer .pane4,
    .dfrContainer .pane5,
    .dfrContainer .pane6,
    #dfrTools .tool3,
    #dfrTools .tool6 {
        /*, #toolsMap, #toolsTable, #details*/
        display: none;
    }
    #dfrTools .tool2,
    #dfrTools .tool4,
    #dfrTools .tool5,
    #dfrTools .tool7 {
        text-indent: -999px;
        display: inline-block;
    }
    #dfrTools .tool1 {
        display: inline-block;
    }
    #dfrTools .tool2 {
        width: 23px;
    }
    #dfrTools .tool4 {
        width: 38px;
    }
    #dfrTools .tool5 {
        width: 0px;
    }
    #dfrTools .tool7 {
        width: 16px;
    }
    .highcharts-subtitle {
        font-weight: normal !important;
    }
    .esriPopupWrapper .title {
        width: 90%;
    }
    .esriPopupWrapper .titleButton.restore {
        display: none;
    }

    /*Enf & Comp Summary table styles*/
    /*convert table to 2 col list */
    #dfrSummaryTable table {
        overflow: auto;
    }
    #dfrSummaryTable table,
    #dfrSummaryTable table thead,
    #dfrSummaryTable table tbody,
    #dfrSummaryTable table th,
    #dfrSummaryTable table td,
    #dfrSummaryTable table tr {
        display: block;
    }
    #dfrSummaryTable table tr td:first-child {
        background-color: #494aa7;
        color: #fff;
    }

    /* hide table headers (position for accessibility) */
    #dfrSummaryTable table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    #dfrSummaryTable table tr {
        border: 1px solid #ccc;
    }
    #dfrSummaryTable table td {
        /*behave like a row*/
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        /*padding-left: 60%;*/
        white-space: normal;
        text-align: left;
    }
    #dfrSummaryTable table td:before {
        /*behave like a table header*/
        position: relative; /*absolute*/
        display: inline-block;
        /*top: 6px;left: 6px; -top/left values mimic padding*/
        width: 60%;
        padding-right: 10px;
        white-space: normal; /*nowrap*/
        text-align: left;
        font-weight: bold;
    }
    /*label the data*/
    #dfrSummaryTable table td:before {
        content: attr(data-title);
    }
    .dfrContainer .dfrMapContainer {
        float: none;
        width: 100%;
    }

    /*end DFR mobile styles*/
}

@media screen and (max-width: 382px) {
    /*Search form mobile styles*/
    h1.page-title {
        font-size: 150% !important;
    }
}
@media screen and (max-width: 320px) {
    /*Search form mobile styles*/
    .pane .formRow {
        padding: 5px 0 5px 15px;
    }
    .pane .formRow.text label,
    .pane .formRow.select label {
        display: block;
        margin: 0 0 5px 0;
        width: 100%;
    }
    .pane .formRow.radio p {
        display: block;
        margin: 5px 0 3px 0;
        width: 100%;
    }
    .pane .formRow a.addMore {
        margin-right: 25px;
    }
    /*Search/Results mobile styles*/
    .tools .expandSearch,
    .tools .collapseSearch {
        float: none;
        clear: both;
    }
    .highcharts-container text.highcharts-title > tspan {
        font-size: 10px !important;
    }
}