html,
body {
    height: 100%;
    width: 99.9999%;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    background: #F8F8F8;
    font-size: 12px;
}

.hidden {
    display: none!important;
}

.noselect, .noselectall>*{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#main {
    height: 100%;
    background-color: #e0e0e0;
}

#blocker {
    z-index: 10000;
    opacity: 0.9;
    background: #aaaaaa;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.draghandler {
    background-color: #e0e0e0;
    border: 2px solid #e0e0e0;
    color: #003b5a;
    text-align: center;
    padding: 1em;
    border-radius: 8px;
    z-index: 10001;
}

.draghandler:hover,
.draghandler.hover {
    background-color: #bad8ea;
    border: 2px solid #bad8ea;
    box-shadow: 0 1px 4px #0064A8;
}

.draghandler.selected {
    border: 2px solid #0064A8;
}

.headerBar {
    width: 100%;
    height: 36px;
    /*background: #0064A8;*/
    font-weight: bold;
    overflow: hidden;
    background: #0064A8;
    border-bottom: 4px solid #FDE016;
}

.headerBar h3 {
    color: #FFFFFF;
    font-size: 16px;
    margin: 12px 0 10px 10px;
    display: block;
    float: left;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------
--------------Header Bar----------------
--------------------------------------*/

#header {
    height: 46px;
    width: 100%;
    margin: 0;
    /*background: #0064A8;*/
    /*border-top: 4px solid #003B5A;*/
    /*border-bottom: 4px solid #FDE016;*/
    background: #0064A8;
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(#003B5A, #0064A8);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#003B5A, #0064A8);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#003B5A, #0064A8);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient( #003B5A, #0064A8);
    /* Standard syntax (must be last) */
    border-bottom: 4px solid #FDE016;
}

.site_logo {
    float: left;
    /*width: 250px;*/
    padding: 8px 0 0 16px;
}

.site_logo a h2 {
    margin: 0;
    font-size: 24px;
    line-height: 14px;
    font-weight: 400;
    color: #fff;
    min-height: 40px;
    padding-left: 36px;
}

.site_logo a h2 span {
    font-size: 12px;
    line-height: 12px;
    font-weight: 500;
    color: #fff;
}

.site_title h1 {
    width: calc(100% - 550px);
    float: left;
    margin: 0;
    padding-top: 12px;
    color: #FFFFFF;
    text-align: center;
}

.ui-progressbar .ui-progressbar-value {
    background: #0064A8;
}

/*--------------------------------------
----------Sidebar Navigation------------
--------------------------------------*/

#sidebar {
    float: left;
    height: calc(100vh - 60px);
    margin: 5px;
    margin-right: 0px;
}

#sidebar .section {
    width: 235px;
    box-sizing: border-box;
    border: 1px solid #9BA0AF;
    background: #FFFFFF;
}

#sidebar .titleBar {
    /*replaced with ui-dialog-titlebar in jquery-ui.css*/
    height: 30px;
    background-color: #0064A8;
    border-bottom: 4px solid #FDE016;
    box-sizing: border-box;
    font-size: 1.5em;
    font-weight: bold;
    padding-top: 3px;
    color: white;
}

#sidebar .blocker {
    float: left;
    height: 100%;
    width: 30px;
    background-color: #0064A8;
    border-right: 4px solid #FDE016;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bold;
    padding-top: 3px;
    color: white;
}

#sidebar tr.corresponding td {
    background: #FDE016;
}

#sidebar tr {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.sidebarHeader * {
    cursor: pointer;
}

/*--------------------------------------
--------------Photo Panel---------------
--------------------------------------*/

#photosPanel {
    float: right;
    height: calc(100% - 60px);
    margin: 5px;
    margin-left: 0px;
}

#photosPanel .section {
    width: 235px;
    box-sizing: border-box;
    border: 1px solid #9BA0AF;
    background: #FFFFFF;
}

#photosPanel .titleBar {
    /*replaced with ui-dialog-titlebar in jquery-ui.css*/
    height: 30px;
    background-color: #0064A8;
    border-bottom: 4px solid #FDE016;
    box-sizing: border-box;
    font-size: 1.5em;
    font-weight: bold;
    padding-top: 3px;
    color: white;
}

#photosPanel .blocker {
    float: left;
    height: 100%;
    width: 30px;
    background-color: #0064A8;
    border-right: 4px solid #FDE016;
    box-sizing: border-box;
    font-size: 18px;
    font-weight: bold;
    padding-top: 3px;
    color: white;
}

#photosPanel tr.corresponding td {
    background: #FDE016;
}

#photosPanel tr {
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.openLogoSelectDialog {
    position: relative;
}

.openLogoSelectDialog img, .openLogoSelectDialog .placeholder{
    max-width: 95%;
    max-height: 95%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}

.sidebarHeader * {
    cursor: pointer;
}

/*Custom Font-Awesome Size & Color*/

.addIcon {
    float: right;
}

.fa-lgr {
    font-size: 1.666em;
}

.hvrDrk {
    color: #0064A8;
}

.hvrDrk:hover {
    color: #003B5A;
}

.hvrLht:hover {
    color: #FDE016;
}

.filterOn {
    color: #FDE016;
}
.filterOff {
    color: #FFFFFF;
}


.smallLoadingCircle {
    float: right;
    display: none;
    border: 4px solid #c0c0c0;
    border-radius: 50%;
    border-top: 4px solid #003b5a;
    width: 10px;
    height: 10px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.accordionLabel {
    display: inline-block;
    color: red;
    float: right;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 100px);
    float: right;
    font-size: 1em;
    margin-top: 4px;
    margin-right: 2px;
    margin-left: -10px
}

.ui-accordion td {
    padding: 1em!important;
}

/*** custom css only popup use for hiding columns***/

.columnSelectorWrapper {
    position: relative;
    /*margin: 10px 0;*/
    display: inline-block;
}

.columnSelector,
.columnSelectorDAT {
    display: none;
}

.columnSelectorButton {
    cursor: pointer;
    margin-left: 5px;
    background: #1b75bb;
    border: none;
    border-radius: 5px;
    color: white;
    border-radius: 5px;
    padding: 5px;
}

#colSelect1:checked+label {
    background: #5797d7;
    border-color: #555;
}

#colSelect1:checked~#columnSelector {
    display: block;
}

.columnSelector {
    z-index: 10001;
    width: fit-content;
    position: absolute;
    /*top: 30px;*/
    right: 5px;
    padding: 10px;
    background: #fff;
    border: #99bfe6 1px solid;
    border-radius: 5px;
}

.columnSelector label {
    display: block;
}

.columnSelector input {
    margin-right: 5px;
}

.columnSelector .disabled {
    color: #ddd;
}

.columnSelectorWrapperDAT {
    position: relative;
    margin: 10px 0;
    display: inline-block;
}

.columnSelectorButtonDAT {
    cursor: pointer;
    margin-left: 5px;
    background: #1b75bb;
    border: none;
    border-radius: 5px;
    color: white;
    border-radius: 5px;
    padding: 5px;
}

#colSelect1DAT:checked+label {
    background: #5797d7;
    border-color: #555;
}

#colSelect1DAT:checked~#columnSelectorDAT {
    display: block;
}

.columnSelectorDAT {
    width: 120px;
    position: absolute;
    top: 30px;
    padding: 10px;
    background: #fff;
    border: #99bfe6 1px solid;
    border-radius: 5px;
}

.columnSelectorDAT label {
    display: block;
}

.columnSelectorDAT input {
    margin-right: 5px;
}

.columnSelectorDAT .disabled {
    color: #ddd;
}


/*#pointfilterbtn {*/

/*	background-color: #e6e6e6;*/

/*	border: 1px solid #d3d3d3;*/

/*	color: #555555;*/

/*	font-size: 12px;*/

/*	border: none;*/

/*	border-radius: 5px;*/

/*	cursor: pointer;*/

/*	display: block;*/

/*}*/

#pointfiltermenu table #duedatefilter tr td {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

#pointfiltermenu table tbody tr td input[type="number"] {
    width: 45px;
}


/*ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary */

#columnSelectorOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
}

#columnSelectorOverlayDAT {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
}

/*--------------------------------------
---------------Field Sets---------------
--------------------------------------*/

.input-block {
    margin: 1em;
}

.section-title {
    font-size: 1.7em;
    font-weight: bold;
    margin: 1em 0em 0.5em 0.5em;
}

.inputuserbutton {
    padding: 0.2em;
    font-size: .9em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 0;
    background: #f6f6f6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
}

.inputuser {
    padding: 0.5em;
    font-size: 1.3em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.3);
    /*width: calc(100% - 1.5em);*/
    border-radius: 0;
    background: #f6f6f6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    /*vertical-align: baseline;*/
}

td .inputuser {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    border: none;
    background: none;
    box-shadow: none;
}

td select.inputuser:focus {
    outline: none;
}

.inputuser.dirtySave {
    background-color: MistyRose!important
}

.inputuser.full-spectrum {
    padding: 0.375em;
    width: auto;
}

select[disabled] {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

#reportToolDialog .inputuser.full-spectrum {
    padding: 0.375em;
    width: 100%;
}

#reportToolDialog .inputuser.full-spectrum .sp-dd {
    display: none;
}

#reportToolDialog .inputuser.full-spectrum .sp-preview {
    float: right;
}

/*.inputuser.ui-selectmenu-button {*/

/*    width: calc(100% - 2em);*/

/*}*/

.input-block .section-title {
    border-top-left-radius: .4em;
    border-top-right-radius: .4em;
}

.input-block .inputuser:active,
.input-block .inputuser:focus {
    /*background-color: rgba(0, 255, 255, 0.2);*/
    /*background-color: #999;*/
}

.input-block .inputuser input {
    border: 0;
    width: 70%;
    padding-left: 0.4em;
    background-color: rgba(0, 0, 0, 0.0);
}

.input-block .inputuser button {
    border: 0;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    line-height: 1.3em;
    background-color: rgba(0, 0, 0, 0.0);
}

.input-block .inputuser input:active,
.input-block .inputuser input:focus {
    background-color: rgba(0, 255, 255, 0.0);
}

.input-block .inputuser button:active,
.input-block .inputuser button:focus {
    background-color: rgba(0, 255, 255, 0.0);
    border: 0;
}

.feedbackSpan {
    float: right;
    color: rgba(84, 84, 84, .65);
    display: none;
    font-size: 0.8em;
    padding-top: 0.3em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.jquery-input {
    padding: 0.5em;
    margin: 0em 1em 0em 1em;
    font-size: 1.3em;
    background: #f6f6f6;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    width: calc(100% - 2em);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
}

.number-input {
    padding: 0.4em 1em;
    font-size: 1em;
    background: #f6f6f6;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    width: 75px;
}

.ui-selectmenu-button.ui-button {
    margin: 0;
    width: 100%;
    border-radius: 0;
}

.ui-selectmenu-text {
    font-size: 1.3em;
    padding: 0.12em;
}

.ui-selectmenu-button.ui-button.ui-state-disabled {
    opacity: 1;
}

.ui-selectmenu-button.ui-button.ui-state-disabled .ui-selectmenu-icon {
    display: none;
}

.ui-widget-content {
    border: 0px;
    background: #ffffff;
    color: #333333;
}

.typeahead__field input {
    font-size: 1.7em;
}

.typeahead__list {
    width: calc(100% - 2em);
    margin: -1px 1em 0 1em;
}

.panelTitleBar span {
    font-size: 2em;
    font-weight: bold;
    padding-left: 1em;
}

#userNamePlaceholder.hideBack .backButton {
    display: none;
}

#userNamePlaceholder span {
    font-size: 2em;
    font-weight: bold;
}

/*------------------------------
--------Main Menu Bar-----------
------------------------------*/

@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700);
#cssmenu {
    /*background: #0064A8;*/
    margin: 5px;
    width: calc(100% - 56px);
    /*width: 100%;*/
    float: right;
    padding: 0;
    line-height: 1;
    display: block;
    position: relative;
    font-family: Arial, 'Helvetica Neue Std';
    /*-webkit-border-radius: 5px;*/
    /*-moz-border-radius: 5px;*/
    /*border-radius: 5px;*/
    /*border-bottom: 4px solid #FDE016;*/
}

#cssmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    border: 1px solid #0064A8;
}

#cssmenu ul:after,
#cssmenu:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}

#cssmenu ul li {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
}

#cssmenu ul li a {
    text-decoration: none;
    display: block;
    margin: 0;
    -webkit-transition: color .4s ease;
    -moz-transition: color .4s ease;
    -ms-transition: color .4s ease;
    -o-transition: color .4s ease;
    transition: color .4s ease;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#cssmenu ul li ul {
    position: absolute;
    left: -9999px;
    top: auto;
}

#cssmenu ul li ul li {
    max-height: 0;
    position: absolute;
    -webkit-transition: max-height 0.4s ease-out;
    -moz-transition: max-height 0.4s ease-out;
    -ms-transition: max-height 0.4s ease-out;
    -o-transition: max-height 0.4s ease-out;
    transition: max-height 0.4s ease-out;
    background: #ffffff;
    /*background: #0064A8;*/
}

#cssmenu ul li ul li.has-sub:after {
    display: block;
    position: absolute;
    content: "";
    height: 10px;
    width: 10px;
    border-radius: 5px;
    background: #000000;
    z-index: 1;
    top: 13px;
    right: 15px;
}

#cssmenu.align-right ul li ul li.has-sub:after {
    right: auto;
    left: 15px;
}

#cssmenu ul li ul li.has-sub:before {
    display: block;
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    border: 3px solid transparent;
    border-left-color: #ffffff;
    z-index: 2;
    top: 15px;
    right: 15px;
}

#cssmenu.align-right ul li ul li.has-sub:before {
    right: auto;
    left: 15px;
    border-left-color: transparent;
    border-right-color: #ffffff;
}

#cssmenu ul li ul li a {
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    color: #000000;
    letter-spacing: 0;
    display: block;
    width: 170px;
    padding: 10px 10px 10px 10px;
}

#cssmenu ul li ul li.radioset-vertical-test {
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    color: #000000;
    letter-spacing: 0;
    display: block;
    width: 200px;
    height: 250px!important;
    padding: 10px 10px 10px 10px;
}

#cssmenu ul li ul li:hover>a,
#cssmenu ul li ul li.active>a {
    color: #4cb6ea;
}

#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
    background: #4cb6ea;
}

#cssmenu ul li ul li:hover>ul {
    left: 100%;
    top: 0;
}

#cssmenu ul li ul li:hover>ul>li {
    max-height: 72px;
    position: relative;
}

#cssmenu ul li ul li:hover>ul>li.ignore-hw {
    /*Used to fit Control Groups inside the menu item - CJA*/
    max-height: 100%;
    position: relative;
}

#cssmenu>ul>li {
    float: left;
}

#cssmenu.align-center>ul>li {
    float: none;
    display: inline-block;
}

#cssmenu.align-center>ul {
    text-align: center;
}

#cssmenu.align-center ul ul {
    text-align: left;
}

#cssmenu.align-right>ul {
    float: right;
}

#cssmenu.align-right>ul>li:hover>ul {
    left: auto;
    right: 0;
}

#cssmenu.align-right ul ul li:hover>ul {
    right: 100%;
    left: auto;
}

#cssmenu.align-right ul ul li a {
    text-align: right;
}

#cssmenu>ul>li:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    z-index: 0;
    background: #ffffff;
    /*Stop main menu bar from using transition -CJA*/
    /*-webkit-transition: height .2s;*/
    /*-moz-transition: height .2s;*/
    /*-ms-transition: height .2s;*/
    /*-o-transition: height .2s;*/
    /*transition: height .2s;*/
}

#cssmenu>ul>li.has-sub>a {
    padding-right: 40px;
}

#cssmenu>ul>li.has-sub>a:after {
    display: block;
    content: "";
    background: #ffffff;
    height: 12px;
    width: 12px;
    position: absolute;
    border-radius: 13px;
    right: 14px;
    top: 16px;
}

#cssmenu>ul>li.has-sub>a:before {
    display: block;
    content: "";
    border: 4px solid transparent;
    border-top-color: #4cb6ea;
    z-index: 2;
    height: 0;
    width: 0;
    position: absolute;
    right: 16px;
    top: 21px;
}

#cssmenu>ul>li>a {
    color: #ffffff;
    padding: 10px 15px;
    font-weight: 700;
    letter-spacing: 1px;
    /*text-transform: uppercase;*/
    font-size: 14px;
    z-index: 2;
    position: relative;
}

#cssmenu>ul>li:hover:after,
#cssmenu>ul>li.active:after {
    height: 100%;
}

#cssmenu>ul>li:hover>a,
#cssmenu>ul>li.active>a {
    color: #000000;
}

#cssmenu>ul>li:hover>a:after,
#cssmenu>ul>li.active>a:after {
    background: #000000;
}

#cssmenu>ul>li:hover>a:before,
#cssmenu>ul>li.active>a:before {
    border-top-color: #ffffff;
}

#cssmenu>ul>li:hover>ul {
    z-index: 100;
    left: 0;
}

#cssmenu>ul>li:hover>ul>li {
    max-height: 72px;
    position: relative;
}

#cssmenu #menu-button {
    display: none;
}

#cssmenu>ul>li>a {
    display: block;
}

#cssmenu>ul>li {
    width: auto;
}

#cssmenu>ul>li>ul {
    width: 170px;
    display: block;
}

#cssmenu>ul>li>ul>li {
    width: 170px;
    display: block;
}

@media all and (max-width: 800px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
    #cssmenu>ul {
        max-height: 0;
        overflow: scroll;
        -webkit-transition: max-height 0.35s ease-out;
        -moz-transition: max-height 0.35s ease-out;
        -ms-transition: max-height 0.35s ease-out;
        -o-transition: max-height 0.35s ease-out;
        transition: max-height 0.35s ease-out;
    }
    #cssmenu>ul>li>ul {
        width: 100%;
        display: block;
    }
    #cssmenu.align-right ul li a {
        text-align: left;
    }
    #cssmenu>ul>li>ul>li {
        width: 100%;
        display: block;
    }
    #cssmenu.align-right ul ul li a {
        text-align: left;
    }
    #cssmenu>ul>li>ul>li>a {
        width: 100%;
        display: block;
    }
    #cssmenu ul li ul li a {
        width: 100%;
    }
    #cssmenu.align-center>ul {
        text-align: left;
    }
    #cssmenu.align-center>ul>li {
        display: block;
    }
    #cssmenu>ul.open {
        max-height: 1000px;
        border-top: 1px solid rgba(110, 110, 110, 0.25);
    }
    #cssmenu ul {
        width: 100%;
    }
    #cssmenu ul>li {
        float: none;
        width: 100%;
    }
    #cssmenu ul li a {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding: 12px 20px;
    }
    #cssmenu ul>li:after {
        display: none;
    }
    #cssmenu ul li.has-sub>a:after,
    #cssmenu ul li.has-sub>a:before,
    #cssmenu ul li ul li.has-sub:after,
    #cssmenu ul li ul li.has-sub:before {
        display: none;
    }
    #cssmenu ul li ul,
    #cssmenu ul li ul li ul,
    #cssmenu ul li ul li:hover>ul,
    #cssmenu.align-right ul li ul,
    #cssmenu.align-right ul li ul li ul,
    #cssmenu.align-right ul li ul li:hover>ul {
        left: 0;
        position: relative;
        right: auto;
    }
    #cssmenu ul li ul li,
    #cssmenu ul li:hover>ul>li {
        max-height: 999px;
        position: relative;
        background: none;
    }
    #cssmenu ul li ul li a {
        padding: 8px 20px 8px 35px;
        color: #ffffff;
    }
    #cssmenu ul li ul ul li a {
        padding: 8px 20px 8px 50px;
    }
    #cssmenu ul li ul li:hover>a {
        color: #000000;
    }
    #cssmenu #menu-button {
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding: 15px 20px;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 14px;
        letter-spacing: 1px;
        color: #ffffff;
        cursor: pointer;
    }
    #cssmenu #menu-button:after {
        display: block;
        content: '';
        position: absolute;
        height: 3px;
        width: 22px;
        border-top: 2px solid #ffffff;
        border-bottom: 2px solid #ffffff;
        right: 20px;
        top: 16px;
    }
    #cssmenu #menu-button:before {
        display: block;
        content: '';
        position: absolute;
        height: 3px;
        width: 22px;
        border-top: 2px solid #ffffff;
        right: 20px;
        top: 26px;
    }
}

#cssmenu input[type="radio"] {
    left: -999em;
    position: absolute;
}

/*----------------Font Awesome Checkbox-----------------*/

.fancy-checkbox input[type="checkbox"],
.fancy-checkbox .checked {
    display: none;
}

.fancy-checkbox input[type="checkbox"]:checked~.checked {
    display: inline-block;
}

.fancy-checkbox input[type="checkbox"]:checked~.unchecked {
    display: none;
}

.header-wrapper {
    background: orange;
}

.sticky-header {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    position: static;
    top: -100px;
    padding: 10px;
}

.sticky-header.sticky {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}

#pdfReportDiv .ui-tabs .ui-tabs-nav {
    display: flex;
}

#pdfReportDiv .ui-tabs .ui-tabs-nav li {
    flex: 1;
    display: flex;
    /* If placed in a small width sidebar or something like that disabling nowrap will fix the overflow issue */
    white-space: normal;
}

#pdfReportDiv .ui-tabs .ui-tabs-nav li a {
    flex: 1;
    /* If you want to align tab titles center */
    text-align: center;
}

/*Mapbox CSS*/

.mapboxgl-popup {
    width: 50%;
    word-break: break-word
}

.mapboxgl-popup .tablesorter_blue {
    table-layout: fixed;
}

.subClick,
.photoClick,
.maintClick {
    cursor: pointer;
}

#loader {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #eeeeee;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

#loaderIcon {
    color: #0064A8;
    position: absolute;
    font-size: 200px;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width: 200px;
    text-align: center;
}

.wcFrameCenter.wcPanelBackground {
    overflow: hidden /* Hide the scrollbar for when the loader is too large for the panel to prevent flicker - CJU 10/14/2019 */
}

.userInput {
    padding: 0.5em;
    font-size: 1.3em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.3);
    /*width: calc(100% - 1.5em);*/
    border-radius: 0;
    background: #f6f6f6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
}

.userInput.full-spectrum {
    padding: 0.375em;
    width: auto;
}

.userInput input {
    background: #f6f6f6;
    padding: 0;
    border: 0;
}

.inputBlock input {
    font-size: 1.3em;
}

.dygraph-label.dygraph-title {
    text-align: left;
    font-size: 0.75em;
    padding: 0.5em 0em 0em 2em;
    font-weight: normal;
}

.error {
    color: red;
}

fieldset {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #F6F6F6;
border: 1px solid #ccc;
padding: 1% 0%;
padding-right:0px;
margin: 0px 10px 10px 10px;
}


fieldset label {
display: block;
float: left;
width: 175px;
height: 25px;
line-height: 25px;
text-shadow: 0 1px 0 #fff;
font-weight: bold;
padding-left: 10px;
margin: -5px 0px 5px 0;
margin-left:0px;
text-transform: uppercase;
}

fieldset input[type=password] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
height: 20px;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}

fieldset input[type=text] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
height: 20px;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 5px;
background-position: 10px 6px;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}

fieldset input[type=text]:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}

fieldset input[type=date] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
height: 20px;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}

fieldset input[type=date]:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}


fieldset input[type=number] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
height: 20px;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0;
display: block;
float: left;
width: 96%;
margin: 0 10px;

}

fieldset input[type=number]:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}

fieldset select[multiple] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
height: 60px;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
/*padding-left: 10px;*/
background-position: 10px 6px;
margin: 0;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}

fieldset select:not([multiple]) {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
height: 20px;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
/*padding-left: 10px;*/
background-position: 10px 6px;
margin: 0;
display: block;
float: left;
width: 96%;
margin: 0 10px;

}

fieldset textarea {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #BBBBBB;
color: #666666;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
padding-left: 10px;
background-position: 10px 6px;
margin: 0 0.5%;
display: block;
float: left;
width: 96%;
margin: 0 10px;
}

fieldset textarea:focus {
outline: none;
border: 1px solid #77BACE;
-webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
-moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6;
}

fieldset input, select, textarea {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/*Always show up/down arrow keys for text input*/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}

/*Hide Clear button for inputs in IE*/
::-ms-clear { display: none; }


.green_dot {
  height: 20px;
  width: 20px;
  background-color: green;
  border-radius: 50%;
  display: inline-block;
}

.red_dot {
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 50%;
  display: inline-block;
}

/* The side navigation menu */
/* 2019-05-16 JTG || Used for right sidebar */
.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 10000; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: #F6F6F6; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 8px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: black;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  font-size: 36px;
  margin-left: 0px;
}

.sidenav .sidebtn {
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.bottomnav {
  height: 0; /* 0 height - change this with JavaScript */
  width: calc(100% - 245px);
  position: fixed; /* Stay in place */
  z-index: 9; /* Stay on top */
  /* top: 0;  Stay at the top */
  /*left: 0;*/
  margin-left: 245px;
  bottom: 0;
  background-color: #F6F6F6; /* Black*/
  overflow-y: hidden; /* Disable vertical scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}


/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/* copied over from index.php - CJU */
#modal { display: none; }
#modal a { background: #ccc; color: #333; font-weight: bold; padding: 3px 3px; border: none; }
#modal a:hover { background: #aaa; }

.multiAnno, .singleAnno {
    background-color: transparent;
    border: none;
}

.dygraphDefaultAnnotation {
    overflow: visible!important;
    font-size: 1.5em!important;
    margin-top: -0.5em!important;
}

.lineThickness{
    width:110px;
}

.ddChild, .ddChild ul {height:auto !important; max-height: 150px !important;}

.annotation-info {
    background: white;
    border-width: 1px;
    border-style: solid;
    padding: 4px;
    display: table;  /* shrink to fit */
    box-shadow: 0 0 4px gray;
    cursor: move;

    min-width: 120px;  /* prevents squishing at the right edge of the chart */
}
.annotation-info.editable {
    min-width: 180px;  /* prevents squishing at the right edge of the chart */
}

.dygraph-annotation-line {
    box-shadow: 0 0 4px gray;
}

div.tarea {
    border: 1px inset #ccc;
    background-color: white;
    font: small courier, monospace black;
    height:100px;
    width:100%;
}

.ui-widget-overlay.ui-front {
    opacity:.90;
}

.boxdraw {
    background: rgba(56,135,190,0.1);
    border: 2px solid #3887be;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

.marker_gl {
    /*background-image: "\f05b";*/
    border: 1.5px solid black;
    background-size: cover;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    cursor: pointer;
}

.marker_gl:before
{
    color: white;
    position: absolute;
    font-family: 'FontAwesome';
    content: "\f10c";
    font-size: 1.3em;
    top: -0.08em;
    right: 0.05em;
}

.mapboxgl-ctrl-draw-line {
    background-color: red; !important
}