/* Only display masthead background images on larger screens. */
@media (max-width:1200px) and (min-width:991px) { 
   
    .mdgov-homePanel, .mdgov-navBar {
        background-color: #204a76 !important;
    }

    .card-title {
        font-size: 20px !important;
    }
}
    @media (min-width: 992px) {

        /*
        1. Edit the .mdgov-masthead rule's background-image to your own default site-wide image.
        2. Use the .mdgov-fixed .mdgov-mastead rule to override your default if using a combination of fluid and fixed width layouts.
        3. Use masthead modifier classes "--tall, --full. REMOVE or COMMENT any not in use.
    */



        /* Default site-wide masthead. */
        .mdgov-masthead {
            background-image: url("../img/masthead-bg-fluid-1920x250.jpg");
        }

        .mdgov-homePanel {
            background-color: transparent !important;
        }

        .mdgov-table-tr-heading {
            color: #FFF;
            padding-bottom: 20px;
            padding-left: 10px
        }

        .mdgov-table-td-heading {
            background: #ccc;
            padding: 0px 10px;
            border-bottom: 2px solid #d3d3d3;
            font-weight: 700;
        }

        .mdgov-table-td-gray {
            background: #CCC;
            padding-bottom: 20px;
            padding-left: 10px;
            color: #000;
            font-weight: 800
        }

        .mdgov-table-td-gray-light {
            background: #e9ecef;
            padding-bottom: 20px;
            padding-left: 10px;
            border-bottom: 2px solid #d3d3d3;
            font-size: 15px;
            color: #000;
        }

        .btn-light {
            color: #ffffff !important;
            border-color: #f5a801 !important;
            font-weight: 600;
        }


        /* Default site-wide fixed layout masthead. */
        .mdgov-fixed .mdgov-masthead {
            background-image: url("../img/masthead-bg-fixed-1200x250.jpg");
        }

        /* Tall fluid-width masthead. */
        .mdgov-masthead.mdgov-masthead--tall {
            background-image: url("../img/masthead-bg-tall-fluid-1920x500.jpg");
        }

        /* Tall fixed-width masthead. */
        .mdgov-fixed .mdgov-masthead.mdgov-masthead--tall {
            background-image: url("../img/masthead-bg-tall-fixed-1200x500.jpg");
        }

        /* Full-height, fluid-width masthead. */
        .mdgov-masthead.mdgov-masthead--full {
            background-image: url("../img/masthead-bg-full-fluid-1920x1020.jpg");
            overflow: hidden;
        }

        /* 
        Full-height, marketing masthead. Background set to none in order to let
        the background image slideshow define images. If not using slideshow, specify your marketing
        background image here.
    */
        .mdgov-masthead.mdgov-masthead--marketing {
            background-image: none;
        }

        /* 
        For displaying angled card background effect.
        Note that background color is specified as the primary brand in the core CSS already.
    */
        .mdgov-masthead.mdgov-masthead--full:before {
            content: "";
            backface-visibility: hidden;
            transform: skew(0deg,-3deg);
            height: 50%;
            width: 100vw;
            position: absolute;
            z-index: 0;
            transform-origin: bottom left;
            left: 0;
            bottom: -110px;
        }

        /* Full-height, fixed-width masthead. */
        .mdgov-fixed .mdgov-masthead.mdgov-masthead--full {
            background-image: url("../img/masthead-bg-full-fixed-1200x1020.jpg");
            background-size: auto;
            background-position: top center;
        }

        .mdgov-masthead--angled {
            background-image: url('../img/masthead-bg-angled.jpg');
        }

        /* Full-screen background example. 
    .mdgov-outerWrap {
        background-color: transparent;
    }
    body {
        background-image: url(../img/masthead-bg-full-fluid-1920x1020.jpg);
    }
    */
    }

    /*
    All styles below support the template demo site only. All styles below are OPTIONAL and may be removed as needed.
*/

    .input-validation-error {
        border-color: #ff0000 !important;
    }

    input[type="color"] {
        width: 100%;
        max-width: 400px;
    }

    /* MVC Form Validation */
    .field-validation-error {
        position: relative;
        left: 0;
        top: 0.5rem;
        background-color: #ff0024;
        color: #ffffff;
        padding: 0.5rem;
        display: inline-block;
        width: 100%;
        line-height: 1;
        font-size: 14px;
        margin-bottom: 0.5rem;
    }

        .field-validation-error:after {
            content: " ";
            position: absolute;
            height: 0;
            width: 0;
            bottom: 100%;
            left: 2rem;
            border: solid transparent;
            pointer-events: none;
            border-color: rgba(255, 255, 0, 0);
            border-bottom-color: #ff0024;
            border-width: 0.5rem;
            margin-left: -0.5rem;
        }

    .validation-summary-errors ul {
        padding-left: 1.5rem;
        margin-top: 0.5rem;
    }

    .space {
        height: 60px;
        width: 100%
    }

    /* Online Services Widget Container */
    .svc_filterForm {
        background-color: #e9ecef;
        padding: 1rem 1rem 0 1rem;
        margin-bottom: 1rem;
    }

    @media (min-width: 768px) {

        .field-validation-error {
            width: auto;
        }

        .col-md-22 {
            margin: 10px 0;
        }

       
    }
@media only screen and (max-width: 992px) {
    .mdgov-homePanel, .mdgov-navBar {
        background-color: #204a76 !important;
    }
}

    @media only screen and (max-width: 768px) {

        .table-spacing tr td {
            position: relative !important;
            display: block !important;
            margin: 5px 0 0 0 !important
        }
        .table-mobile {
            width:100%
        }
        .table-mobile tr td b, .table-mobile tr td {
            font-size: 10px;
            padding: 2px;
            border-top: 0px solid #dee2e6;
        }
        .table tr td b, .table tr td {
            font-size: 14px;
            padding: 4px;
        }
        .table-color {
            padding: 16px;
            margin-bottom: 10px;
            background: #e9ecef;
            display: block;
            width: auto !important;
        }

        .col-md-22 {
            margin: 10px 0;
        }

        .timeline .panel-outline .panel-body {
            padding: 0px 0px !important;
        }

        .mdgov-homePanel, .mdgov-navBar {
            background-color: #204a76 !important;
        }

        .table-color td {
            padding: 0px;
            display: block;
        }

        .date, .speed {
            padding: 10px 0 0px 10px !important;
        }

        input.general-search {
            width: 100% !important;
            border: 1px solid;
            margin: 0px;
            height: 38px;
        }

        .navbar-expand-lg .navbar-nav .dropdown-menu {
            width: 100% !important;
            height: auto !important;
            padding: 0px 20px !important;
            line-height: 28px !important;
        }

            .navbar-expand-lg .navbar-nav .dropdown-menu li {
                line-height: 21px !important;
                margin: 10px 0 0 0;
            }
    }




    .nav-background {
        background-color: #e9ecef !important;
        margin: 0 0 20px 0
    }

    .mdgov-space {
        margin: 20px 0 0 0
    }

    .navbar-expand-lg .navbar-nav .dropdown-menu {
        width: max-content;
        height: auto;
        padding: 0 20px;
        line-height: 36px;
    }

    .dataTables_info {
        padding-top: 0;
    }

    .dataTables_paginate {
        padding-top: 0;
    }

    .css_right {
        float: right;
    }

    #example_wrapper .fg-toolbar {
        font-size: 0.8em
    }

    #theme_links span {
        float: left;
        padding: 2px 10px;
    }


    .dataTables_info {
        padding-top: 0;
    }

    .dataTables_paginate {
        padding-top: 0;
    }

    .css_right {
        float: right;
    }

    #example_wrapper .fg-toolbar {
        font-size: 0.8em
    }

    #theme_links span {
        float: left;
        padding: 2px 10px;
    }

    img {
        width: auto\9;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
        border: 0;
        -ms-interpolation-mode: bicubic;
    }

    .timeline .line {
        background: #2b639e !important;
    }

    #live-traffic-video-data .timeline .text-muted {
        color: #2b639e !important;
    }

    .dataTables_info {
        padding-top: 0;
    }

    .dataTables_paginate {
        padding-top: 0;
    }

    .css_right {
        float: right;
    }

    #example_wrapper .fg-toolbar {
        font-size: 0.8em
    }

    #theme_links span {
        float: left;
        padding: 2px 10px;
    }

    .mdgov-agency {
        font-size: 1.38rem !important;
    }

    .mdgov-agency__name {
        font-size: 20px;
        text-transform: uppercase;
    }

    .table-color {
        padding: 16px;
        margin-bottom: 10px;
        background: #e9ecef;
        display: block;
        width: 415px;
    }

        .table-color td {
            padding: 0px;
        }

            .table-color td span {
                padding: 10px;
            }

    .search-input {
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
    }

        .search-input b {
            width: auto;
            line-height: 40px;
            padding: 0 10px 0 0px;
        }

    #speed-sensor-table thead tr th, #speed-sensor-table thead tr th b, #weather-station-data-table thead tr th, #weather-station-data-table thead tr th b {
        font-weight: 600 !important;
        padding: 10px 5px !important;
        font-size: 16px !important;
    }

        #weather-station-data-table thead tr th a, #weather-station-data-table tfoot tr th a, #weather-station-data-table tfoot tr td a {
            color: #fff !important;
        }


    input.general-search {
        width: 80%;
    }

    .date, .speed {
        padding: 20px 0 !important;
    }

    .icongift {
        padding: 20px 10px 0px 0 !important;
    }

    .location-cell {
        width: 60%;
        height: 60px;
        padding: 20px 0 20px 10px !important
    }

    .table-cell-data-left {
        width: auto;
        padding: 10px 0 0px 10px !important;
        text-align: left
    }

    .table-cell-data-center {
        width: auto;
        padding: 10px 0 0px 10px !important;
        text-align: center
    }

    .sign-table-center-location, .sign-table-center-message {
    }

    .sign-table-center-location {
        width: 35%;
        text-align: left !important;
        padding: 10px 0 10px 10px !important
    }

    .sign-table-center-message {
        width: 65%;
        text-align: center;
        padding: 10px 0 10px 10px !important
    }

    .col-md-22 {
        float: left
    }

    #pageSectionNav div .active {
        background: #2a629c !important;
        color: #fff !important;
    }

    .m-top {
        margin-top: 30px
    }

   
    .breadcrumb {
        background: #2a629c;
    }

        .breadcrumb li {
            color: #fff;
            margin: 0 0 0 10px;
        }

            .breadcrumb li a i {
                color: #fff;
            }


.card-shadowed {
    height: 100% !important;
}

.x-form-item {
    width: auto !important;
}

.RSSHeading {
    text-align: left;
}

.RSSItem {
    text-align: left;
}

a {
    text-decoration: none
}

.table-mobile {
    width: 100%
}