body {
    /*padding-top: 70px;*/
    padding-bottom: 20px;
    width: 100%;
}


@media (max-width: 767px) {
    .top-menu {
        top: 6px;
        right: 52px;
        width: 100%;
    }

        .top-menu > .navbar-nav > li {
            float: none !important;
        }
}

@media (min-width: 768px) {
    .top-menu {
        margin-right: -15px;
    }

    .top-auth-menu {
        margin-left: auto;
    }

    .floatLeft {
        float: left;
    }
}

.floatLeft1 {
    float: left;
}

.transparentFont {
    color: transparent;
}

.fontWhite {
    color: white;
}

.fontBold {
    font-weight: bold;
}

/*Override the card-header class in bootstrap to show the title panels in gridviews bold*/
.card-header {
    font-weight: bold;
}

.alignCenter {
    text-align: center;
}

.alignLeft {
    text-align:left;
}

.alignRight {
    text-align:right;
}

.paddingZero {
    padding: 0px;
}

.paddingIconButton {
    padding-left:6px;
    padding-right:6px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.paddingTopZero {
    padding-top: 0px !important;
}
.paddingBottomZero {
    padding-bottom: 0px !important;
}
.marginZero {
    margin: 0px;
}

.marginBottomZero {
    margin-bottom:0px !important;
}
.marginTopZero {
    margin-top: 0px !important;
}


.image {
    margin:0 !important;
}

.marginTopTen {
    margin-top: 10px;
}

.marginBottomTen {
    margin-bottom: 10px;
}
.marginBottomZero {
    margin-bottom: 0px;
}

.focusedRow a:link {
    font-weight: bolder;
    color: white !important;
}

input[type=checkbox] {
    width: 18px;
    height: 18px;
}

.verticalAlignMiddle {
    vertical-align: middle;
}

.verticalAlignBottom {
    vertical-align: bottom;
}

.approvalsLabel {
    font-weight: bold;
}

.paddingTopTen {
    padding-top: 10px;
}
.paddingTopFive {
    padding-top: 5px;
}
.paddingBottomTen {
    padding-bottom: 10px;
}

.paddingLeftTen {
    padding-left: 10px;
}

.paddingRightZero {
    padding-right: 0px;
}

.paddingRightFive {
    padding-right:5px;
}

.resubmitButton {
    background-color: darkred;
}

.purchasingPageRowSize {
    font-size: small;
}

.schedulerPageRowSize {
    font-size: small !important;
}

.workOrderLabels {
    font-weight: 300;
    font-size: 1.0em;
}

.todayCellHeader {
    font-weight: bolder;
    background-color: lightyellow;
}

.legendButtons {
    border: none;
    border-color: transparent !important;
    color: black !important;
    font-weight: 450;
}

.timecardFooter {
    font-size: medium;
    font-weight: bold;
    background-color: darkgrey;
}

/*USED TO make sure the website date and time wrap accordingly on the requisition page.*/
.buttonWordWrap {
    white-space: normal;
}

/*makes a bigger button text on the HR Main page*/
.biggerButton {
    font-size: x-large;
}

/*FOR THE SCADA PORTION*/
.piechartLabelSize {
    font-weight: bold;
    font-size: 24px !important;
}

.piechartLabelSizeSmall {
    font-weight: bold;
    font-size: 18px !important;
}

.wellLabel {
    font-weight: bold;
    font-size: 2.0em !important;
}


.pieChartLabelRect {
    fill: none;
    transform: translate(49,64) !important;
}

.wellContainer {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

    .wellcontainer span {
        text-transform: uppercase;
        display: block;
    }


/*OVERRIDE THE JUMBOTRON CSS FOUND IN THE BOOTSTRAP FRAMEWORK*/
@media (min-width:576px) {
    .jumbotron {
        padding: .5rem .5rem;
    }
}

@media (min-width:700px) {
    .navbar-image {
        display: inline-block;
    }
}

/*FOR THE NAVBAR "WEBER BASIN WATER EMPLOYEE PORTAL Label*/ /*ONLY HIDE BETWEEN 1024 and 900 px because the navbar collapse is not quite there at this point and causes a new line to form  GP*/
@media (max-width:1024px) {
    @media (min-width:900px) {
        @media (orientation: landscape) {
            .navbar-image {
                display: none;
            }
        }
    }
}


@media only screen and (max-width: 991ppx) {
    #bootstrapNavBarMenu {
        display: none;
    }

    #fullWidthMenuContainer {
        display: inline-block;
    }
}


@media screen and (max-width: 991ppx) {
    #bootstrapNavBarMenu {
        display: flex;
    }

    #fullWidthMenuContainer {
        display: none;
    }
}

/*#bootstrapNavBarMenu {
    display: none !important;
}*/

.second-row {
    flex-grow: 1;
    border: none;
    margin: 0;
    padding: 0;
}

/*Override the bootstrap button colors for manager approve*/
/*Approval button, but hasn't been pressed yet.*/
.btn-approve {
    color: #5a6268;
    background-color: #fff;
    border-color: #6c757d;
}

    .btn-approve:hover {
        color: #fff;
        font-weight: bold;
        background-color: #16ca77;
        border-color: #545b62;
    }

    .btn-approve.focus, .btn-approve:focus {
        box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
    }

    .btn-approve.disabled, .btn-approve:disabled {
        color: #5a6268;
        background-color: #fff;
        border-color: #6c757d;
    }

    .btn-approve:not(:disabled):not(.disabled).active, .btn-approve:not(:disabled):not(.disabled):active, .show > .btn-approve.dropdown-toggle {
        color: #fff;
        background-color: #545b62;
        border-color: #4e555b;
    }

        .btn-approve:not(:disabled):not(.disabled).active:focus, .btn-approve:not(:disabled):not(.disabled):active:focus, .show > .btn-approve.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
        }

/*Approve button has been pressed*/
.btn-approved {
    color: #fff;
    background-color: #16ca77;
    border-color: #6c757d;
}

    .btn-approved:hover {
        color: #fff;
        font-weight: bold;
        background-color: #16ca77;
        border-color: #545b62;
    }

    .btn-approved.focus, .btn-approved:focus {
        box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
    }

    .btn-approved.disabled, .btn-approved:disabled {
        color: #fff;
        background-color: #16ca77;
        border-color: #6c757d;
    }

    .btn-approved:not(:disabled):not(.disabled).active, .btn-approved:not(:disabled):not(.disabled):active, .show > .btn-approved.dropdown-toggle {
        color: #fff;
        background-color: #545b62;
        border-color: #4e555b;
    }

        .btn-approved:not(:disabled):not(.disabled).active:focus, .btn-approved:not(:disabled):not(.disabled):active:focus, .show > .btn-approved.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
        }

/*Deny button, but hasn't been pressed yet.*/
.btn-deny {
    color: #5a6268;
    background-color: #fff;
    border-color: #6c757d;
}

    .btn-deny:hover {
        color: #fff;
        font-weight: bold;
        background-color: #fc1212;
        border-color: #545b62;
    }

    .btn-deny.focus, .btn-deny:focus {
        box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
    }

    .btn-deny.disabled, .btn-deny:disabled {
        color: #5a6268;
        background-color: #fff;
        border-color: #6c757d;
    }

/*Maybe button, currently used on employment applications*/
.btn-maybe {
    color: #5a6268;
    background-color: #fff;
    border-color: #6c757d;
}

    .btn-maybe:hover {
        color: #fff;
        font-weight: bold;
        background-color: #ff9933;
        border-color: #545b62;
    }

    .btn-maybe.focus, .btn-maybe:focus {
        box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
    }

    .btn-maybe.disabled, .btn-maybe:disabled {
        color: #5a6268;
        background-color: #fff;
        border-color: #6c757d;
    }

/*Approve button has been pressed*/
.btn-maybed {
    color: #fff;
    background-color: #ff9933;
    border-color: #6c757d;
}

    .btn-maybed:hover {
        color: #fff;
        font-weight: bold;
        background-color: #ff9933;
        border-color: #545b62;
    }

    .btn-maybed.focus, .btn-maybed:focus {
        box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
    }

    .btn-maybed.disabled, .btn-maybed:disabled {
        color: #fff;
        background-color: #ff9933;
        border-color: #6c757d;
    }

    .btn-maybed:not(:disabled):not(.disabled).active, .btn-maybed:not(:disabled):not(.disabled):active, .show > .btn-maybed.dropdown-toggle {
        color: #fff;
        background-color: #545b62;
        border-color: #4e555b;
    }

        .btn-maybed:not(:disabled):not(.disabled).active:focus, .btn-maybed:not(:disabled):not(.disabled):active:focus, .show > .btn-maybed.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
        }

/*.btn-deny:not(:disabled):not(.disabled).active, .btn-deny:not(:disabled):not(.disabled):active, .show > .btn-deny.dropdown-toggle {
        color: #fff;
        background-color: #545b62;
        border-color: #4e555b;
    }*/

/*.btn-deny:not(:disabled):not(.disabled).active:focus, .btn-deny:not(:disabled):not(.disabled):active:focus, .show > .btn-deny.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
        }*/

/*Deny button has been pressed*/
.btn-denied {
    color: #fff;
    background-color: #fc1212;
    border-color: #6c757d;
}

    .btn-denied:hover {
        color: #fff;
        font-weight: bold;
        background-color: #fc1212;
        border-color: #545b62;
    }

    .btn-denied.focus, .btn-denied:focus {
        box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
    }

    .btn-denied.disabled, .btn-denied:disabled {
        color: #fff;
        background-color: #fc1212;
        border-color: #6c757d;
    }

/*.btn-denied:not(:disabled):not(.disabled).active, .btn-denied:not(:disabled):not(.disabled):active, .show > .btn-denied.dropdown-toggle {
        color: #fff;
        background-color: #545b62;
        border-color: #4e555b;
    }*/

/*.btn-denied:not(:disabled):not(.disabled).active:focus, .btn-denied:not(:disabled):not(.disabled):active:focus, .show > .btn-denied.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
        }*/


/*Used For Approval status Icons, empty circle, checked circle, not required*/
.btn-status {
    /*color: #5a6268;
    background-color: #fff;
    border-color: #6c757d;*/
}

    .btn-status:hover {
        /*color: #fff;
        font-weight:bold;
        background-color: #fc1212;
        border-color: #545b62;*/
    }

    .btn-status.focus, .btn-status:focus {
        /*box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);*/
    }

    .btn-status.disabled, .btn-status:disabled {
        color: #0787c8;
        background-color: transparent;
        border-color: transparent;
    }

    .btn-status:not(:disabled):not(.disabled).active, .btn-status:not(:disabled):not(.disabled):active, .show > .btn-status.dropdown-toggle {
        /*color: #fff;
        background-color: #545b62;
        border-color: #4e555b;*/
    }

        .btn-status:not(:disabled):not(.disabled).active:focus, .btn-status:not(:disabled):not(.disabled):active:focus, .show > .btn-status.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
        }

/*APPOINTMENT COLORS FOR THE SCHEDULER*/

.green {
    background-color: #7FB800 !important;
    opacity: 1 !important;
}

.orange {
    background-color: #FA7921 !important;
    opacity: 1 !important;
}

.lightSeaGreen {
    background-color: lightseagreen !important;
    opacity: 1 !important;
}

.lightSlateGray {
    background-color: lightslategray !important;
    opacity: 1 !important;
}

.violet {
    background-color: violet !important;
    opacity: 1 !important;
}

.aquamarine {
    background-color: aquamarine !important;
    opacity: 1 !important;
}

.gold {
    background-color: gold !important;
    opacity: 1 !important;
}

.blue {
    background-color: #00A6ED !important;
    opacity: 1 !important;
}

.yellow {
    background-color: yellow !important;
    opacity: 1 !important;
}

.red {
    background-color: #EF233C !important;
    opacity: 1 !important;
}

.lightBlue {
    background-color:lightblue !important;
    opacity: 1 !important;
}

.weberRiverRoom {
    background-color: #FF2400 !important;
    opacity: 1 !important;
}

.greatSaltLakeRoom {
    background-color: #FFF833 !important;
    opacity: 1 !important;
    color: black !important;
}

.ogdenRiverRoom {
    background-color: #3399FF !important;
    opacity: 1 !important;
}

.weberAndGSL {
    background-color: #FF9933 !important;
    opacity: 1 !important;
}

.gslAndOgden {
    background-color: #00CC00 !important;
    opacity: 1 !important;
}

.allWatershedRooms {
    background-color: #a9ba9d !important;
    opacity: 1 !important;
}

.wasatchPlaza {
    background-color: #B266FF !important;
    opacity: 1 !important;
}

.prepKitchen {
    background-color: #808080 !important;
    opacity: 1 !important;
}

.chalkCreekConferenceRoom {
    background-color: #FFCD75 !important;
    opacity: 1 !important;
}

.tourAndPavillion {
    background-color: #80FF00 !important;
    opacity: 1 !important;
}

.pavillion {
    background-color: #00FFFF !important;
    opacity: 1 !important;
}

.dxsc-apt-content-layer .dxeBase {
    color: black;
}  

/*For the Parcel Info Page, allow the sections to be grouped closer together.*/
.parcelInfoGroup {
    padding-left: 7px;
    padding-right: 7px;
    margin-top: 8px;
    margin-bottom: 8px;
}

/*For the video on the home page*/
.videoContainer {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/*@media (min-width:576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px;
    }
}*/


/*
 * Sidebar
 */

.sidebar {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding: 0 0 0; /* Height of navbar */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
    position: relative;
    top: 0;
    height: calc(100vh - 48px);
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
    }
}

.sidebar .nav-link {
    font-weight: 400;
    color: #333;
}

    .sidebar .nav-link.active {
        color: #007bff;
        font-weight: bold;
    }

    .sidebar .nav-link:hover {
        color: black;
        font-weight: bold;
    }

.sidebar-heading {
    font-size: .95rem;
    text-transform: uppercase;
}

#Content_WorkOrderViewFormLayout_FloatingActionButton{
    position: fixed;
    top: 0;
}

.FixPaddingForSubdivision {
    padding: 0px !important;
    margin: 0px !important;
}

.HighlightGridViewRowBlue td {
    background-color: #007bff !important;
    color: white !important;
}

.redColor {
    color:red !important;
}

.btnMinPadding {
    padding: 1px 6px;
}

.layoutGroup {
    background-color: #16539c !important;
    color: white !important;
}

.wrapText {
    text-align: left !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.dxbs-menu > ul > li ul.dxbs-dm > li > a > span {
    white-space: nowrap !important;
}

/*Navbar*/

.single-column-sub > a:hover {
    background: #b8b8b8;
}

.single-column-sub > a {
    border-radius: 5px;
}

.navbar {
    padding-top: 0;
    padding-bottom: 0;
}

.menu-container {
    width: 100%;
}

.menu-mobile {
    display: none;
    padding: 20px;
    background-color: transparent;
}

    .menu-mobile:after {
        font-size: 2.5rem;
        padding: 0;
        float: right;
        position: relative;
        top: 50%;
        padding-right: 2em;
    }


.menu > ul {
    margin: 0 auto;
    width: 100%;
    list-style: none;
    padding: 0;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .menu > ul:before, .menu > ul:after {
        content: "";
        display: table;
    }

    .menu > ul:after {
        clear: both;
    }

    .menu > ul > li:not(:first-child):not(:last-child) {
        padding-top: 1em;
        margin-left: 2px;
    }

    .menu > ul > li {
        float: left;
        padding: 0;
        margin-left: 0;
        color: #007bff;
        font-size: 1.0em;
    }

        .menu > ul > li:last-child {
            float: right;
            margin-left: auto;
        }

        .menu > ul > li > table > tbody > tr > td > button {
            color: rgba(255,255,255,.5);
            border-color: rgba(255,255,255,.1);
            border-top-color: rgba(255, 255, 255, 0.1);
            border-right-color: rgba(255, 255, 255, 0.1);
            border-bottom-color: rgba(255, 255, 255, 0.1);
            border-left-color: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            margin-right: 1.5em;
        }

        .menu > ul > li a {
            text-decoration: none;
            padding: 0.5em 0.5em;
            display: inline-block;
            color: #ffffff;
        }

        .menu > ul > li > ul > li > span {
            font-weight: bolder;
            padding: 0 1em 0 1em;
            font-size: 1.1em;
            display: block;
        }

        .menu > ul > li > a:hover {
            color: #b8b8b8;
        }

        .menu > ul > li > ul > li a:hover {
            background: #b8b8b8;
        }

        .menu > ul > li > ul {
            display: none;
            width: auto;
            min-width: 150px;
            background: #f0f0f0;
            padding: 0px;
            position: absolute;
            z-index: 99;
            left: 0;
            margin: 0;
            list-style: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-radius: 5px;
            font-weight: normal;
            border: 1px solid #343A40;
            padding: .5em;
        }

            .menu > ul > li > ul > a {
                color: #212529;
                padding: 0 1.5em 0 1.5em;
                width: 100%;
                display: block;
                padding: 4px 0px 4px 2em;
                float: left;
            }


            .menu > ul > li > ul:before, .menu > ul > li > ul:after {
                content: "";
                display: table;
            }

            .menu > ul > li > ul:after {
                clear: both;
            }

            .menu > ul > li > ul > li {
                margin-top: 0px;
                margin-bottom: 0px;
                padding-bottom: 0;
                list-style: none;
                background: none;
                float: left;
            }

                .menu > ul > li > ul > li a {
                    border-radius: 5px;
                    color: #212529;
                    padding: 0 1.5em 0 1.5em;
                    width: 100%;
                    display: block;
                    padding: 4px 0px 4px 2em;
                    float: left;
                }

                .menu > ul > li > ul > li > ul {
                    display: block;
                    padding: 0;
                    margin: 0px 0 0;
                    list-style: none;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                }

                    .menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after {
                        content: "";
                        display: table;
                    }

                    .menu > ul > li > ul > li > ul:after {
                        clear: both;
                    }

                    .menu > ul > li > ul > li > ul > li {
                        float: left;
                        width: 100%;
                        padding: 2px 0px 2px;
                        margin: 0;
                        font-size: 1em;
                    }

                        .menu > ul > li > ul > li > ul > li a {
                            border: 0;
                            border-radius: 5px;
                        }

            .menu > ul > li > ul.single-column-sub {
                width: 300px;
                left: auto;
            }

                .menu > ul > li > ul.single-column-sub > li {
                    width: 100%;
                    width: 100%;
                }

                    .menu > ul > li > ul.single-column-sub > li a {
                    }

@media only screen and (max-width: 959px) {
    .menu-container {
        width: 100%;
    }

    .single-column-sub {
        width: auto !important;
    }

    .menu-mobile {
        display: block;
    }

    .menu-dropdown-icon:before {
        display: block;
    }

    .menu > ul:not(:first-child) {
        display: none;
        height: auto;
    }

    .menu > ul > li {
        width: 100%;
        float: none;
        display: block;
    }

        .menu > ul > li:last-child {
            padding-inline-start: .5em;
        }

        .menu > ul > li:not(:first-child):not(:last-child) {
            padding-top: 0;
        }

        .menu > ul > li a {
            padding: 0.5em 0.5em;
            width: 100%;
            display: block;
            font-size: 1.2em;
        }

        .menu > ul > li > ul {
            position: relative;
            margin-left: 0em;
            margin-right: 0em;
            padding-top: 0em;
        }

            .menu > ul > li > ul > li {
                float: none;
                width: 100% !important;
                margin-top: 10px;
            }

                .menu > ul > li > ul > li > span {
                    padding-left: 1em;
                    font-size: 1.5em;
                }

                .menu > ul > li > ul > li > ul {
                    position: relative;
                }

                    .menu > ul > li > ul > li > ul > li > a {
                        float: none;
                        padding-left: 2em;
                        font-size: 1.2em;
                    }

    .menu > ul .show-on-mobile {
        display: none;
    }
}
/*Endnavbar*/