html, body {
    background: #222 url(/img/222222.bmp) repeat !important;
    overflow:hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

body {
    line-height:0;font-size:18px;
}

label {
    cursor: default !important;
}

div, span {
    cursor: default;
}

option {
    width:50px !important;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    display:none;
    margin: 0;
}
input::-webkit-input-placeholder {
    color: #FFF;
}

input:-moz-placeholder { /* Firefox 18- */
    color: #FFF;
}

input::-moz-placeholder {  /* Firefox 19+ */
    color: #FFF;
}

input:-ms-input-placeholder {
    color: #FFF;
}

a:hover {
    text-decoration:none;
}

a {
	color: #4bc7f3;
}

.highlighted {

}
.selected {
    background: #4bc7f3;
}
.noaccess {cursor:default;}

.customPopup {background:#e9ecec !important;padding:2px !important; border-radius:0 !important;}
/*.customPopupContent {background:url(/img/444444.bmp);padding:3%;}*/
.customPopupContent {background:#222;} /* needed for most popups to render as expected */

.sidebar .action-image {
    height: 12vh;
    width: auto;
    position: absolute;
    width: 6vw;
    left: 0.5vw;
    z-index:9;
}

.sidebar .back-image {
    width: 95px;
    height: 95px;
    position: absolute;
    top: 46px;
    left: 21px;
    z-index:9;
}

.sidebar .edit-image {
    top: 16vh;
}

.history-reporting-icon {
    height:12.5vh;
    width: auto;
    position: absolute;
    width: 6vw;
}
.history-reporting-report {
    top: 15vh;
}

.history-reporting-refine {
    width: auto;
    position: absolute;
    width: 6vw;
    top: 27vh;
    left: 0.5vw;
}

.history-reporting-search {
  width: auto;
  position: absolute;
  width: 6vw;
  top: 40.5vh;
  left: 0.5vw;
}
.history-reporting-graph,
.history-reporting-report  {
  width: auto;
  position: absolute;
  width: 6vw;
  top: 54.5vh;
  left: 0.5vw;
}
.history-reporting-save {
  width: auto;
  position: absolute;
  width: 6vw;
  top: 68vh;
  left: 0.5vw;
}
.history-reporting-print {
  width: auto;
  position: absolute;
  width: 6vw;
  top: 82.5vh;
  left: 0.5vw;
}

.sidebar div a.ui-link img.save-image {
    height: 13vh;
    position: absolute;
    width: 6vw;
    top: 19vh;
    left: 0.5vw;
    z-index:999;
}

.save-image, .save-image img {
    height: 13vh;
    width: 6vw;
}

.black-box{
    border: 4px solid #000;
    padding: 20px;
}

.white-box {
    background-color: #000; /* old */
		background-color: transparent; 
    border: 4px solid #FFF; /* old */
		border: none;
}

#loadingAnimation {
    position: absolute;
    z-index: 997;
    background: url(/img/broken-ring-transparent.GIF) no-repeat;
    height: 180px;
    width: 180px;
}

.main-box {
    float: left;
    display: inline;
    position: absolute;
    width: 1870px;
    height: 910px;
    left: 30px;
    top: 50px;
}
.pageContent .main-box {
    width: 1780px;
    height: 875px;
    left: 142px;
    top: 16px;
    box-sizing: border-box;
    padding:10px;
}

.menuBarIcon {
    /* For Opera and <= IE9, we need to add unselectable="on" attribute onto each element */
    /* Check this site for more details: http://help.dottoro.com/lhwdpnva.php */
    -moz-user-select: none; /* These user-select properties are inheritable, used to prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none; /* From IE10 only */
    user-select: none; /* Not valid CSS yet, as of July 2012 */

    -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
    user-drag: none;
}

.callScreenRow {
    height: 60px;
    margin-top: 20px;
}
.call-timer {
    float: right;
    width: 2vw;
    text-align:right;
}
.multisection-container {
    height: 91vh;
}

.greybox {
    background-color: #CACACA;
}
.light-greybox {
    background-color: #E5E5E5;
}
.yellowborder-box {
    border: 1px solid #fbfd98;
		background: transparent;
}
.whiteborder-box {
    border: 1px solid #fff;
		background: transparent;
}
.sub-box {
    height: 85vh;
    background-color:#FFF;
    padding:0;
}
.sub-box-head {
    background-color : transparent;
    box-sizing:border-box;
    height:55px;
    line-height:30px;
    text-align:center;
    text-transform: uppercase;
    text-shadow: none;
    width:100%;
}
span.sub-box-head {
    display: block;
    padding: 3% 0%;
}
.sub-box [class*="span"] {
    background-color: #FFF;
}
.sub-box-content {
    height: 74.5vh;
    padding-left:1vw;
    overflow-y: auto;
    -webkit-transform: translate3d(0,0,0);
}
.sub-box .span3 {
    width: 24%;
    margin-left: 1%;
}
.sub-box table {
    width: 100%;
}
.sub-box table thead {
    border : none;
    background-color: transparent;
}
.sub-box table thead th {
    text-transform: uppercase;
    text-shadow: none;
    text-align: center;
    height: 7vh;
}
.sub-box .two-col {
    width: 49%;
    float: left;
}
.sub-box .two-col.right-col {
    width: 50.84%;
    border-left:1px solid #FFF;
}
.sub-box .four-col {
    width: 24%;
    float: left;
    margin-right:1%;
}
.sub-box .five-col {
    width: 19.5%;
    float: left;
    margin-right: 3px;
}
.jspScrollable .five-col {
    margin-right: 1%;
}
.jspScrollable .row-fluid .five-col:last-child {
    margin-right: -2.5% !important;
}
#site_setup_icons_div .sub-box-content {
    padding-left: 0;
}
.tab-pane .sub-box-content {
    height: 62vh;
}

.button-controls a img {
    height: 11vh;
    width: 5.5vw;
}

.sidebar {
    float:left;left: 2%;height:100%; margin-top: 24px;
}
.sidebar .row {
    margin-left: -2vw;
}

.sidebar div {
    width: 5vw;
}


img.side-header {
    height: 745px;
    position: absolute;
    top: 160px;
    left: 0px;
    width: 134px;
}
.jqtree-element {
    line-height: 15px;
}
.jqtree-element img.mainIcon {
    height: 35px;
    width: 35px;
    margin-right: 20px;
}
.jqtree_common a.deleteLink {
    background-color: #6adeff;
    padding-top: 4px;
    height: 45px;
    width:35px;
    position: absolute;
    right: 10;
}
.jqtree-tree .ui-droppable, .jqtree_common {
    height:auto;
    min-height:30px;
    display:inline-block;
}
.jqtree_common a.deleteLink img.actionIcon {
    height: 40px;
    width: 40px;
}
span .ui-draggable {
    height: auto;
    width: 100%;
}

.ui-draggable img, .ui-droppable img {
    height: 50px;
    width: 50px;
}

input[type="text"], input[type="text"]:focus,
input[type="password"], input[type="password"]:focus{
    outline: none; box-shadow:none;
    -ms-box-shadow:none;
}
input.wide, select.wide {
    width:150px !important;
}
input.wider, select.wider {
    width:500px !important;
}
input.full-width, select.full-width {
    width: 100% !important;
}
input.no-max-width, select.no-max-width {
    max-width: none !important;
}
ul.customdropdown li {
    cursor:pointer;
    padding: 3px 20px;
    white-space:nowrap;
}
input.digitInput {
    width: 60px !important;
}

input.underlined {
    height: auto;
    background-color: transparent !important;
    border:0 !important;
    border-bottom: 3px solid #FFF !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    color: #FFF !important;
    font-size: 3vmin;
    font-size: 3vm;
    height: 4vh !important;
    min-height: 3vh;
}
.bold {
    font-weight: bolder;
}
.row-thin {
    height: 35px !important;
    min-height: 35px;
}
.row-thin div {
    height: 35px !important;
    min-height: 35px;
}
.row-thin div input[type="text"] {
    margin-bottom: 0;
}

div.text-right,span.text-right,label.text-right {
    text-align:right;
}
div.text-center,span.text-center,label.text-center {
    text-align: center !important;
}

/*.form-signin input[type="text"],
.form-signin input[type="password"] {
    color: #ffffff;
    border: none;
    background-color: transparent;
    font-weight:bold;
    font-family: Arial;
    font-size: 3vmin;
    width: 19vw !important;
    height: 5vh;
    min-height: 3vh;
    margin: 0 auto;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.form-signin div div.input-holder {
    margin-top: 6vh;
    margin-left: auto;
    margin-right: auto;
    width: 22vw;
}

div.input-holder {
    background: url(/img/Bar%20EG.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 8vh;
    width: 20vw;
    margin: 0 auto;
}
div.input-holder input[type="text"] {
    background: none;
    border: none;
    width: 100%;
}    */
input[type="text"], input[type="password"] {
    border: 2px solid #999; background: transparent; color: #e9ecec;
}
input[type="text"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder {
    color: #666;
}

input[type="text"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder {
    color: #666;
}
.form-actions{
    background-color: #333333;
    margin: 15px auto;
    border: 2px solid #333333;
    padding: 0px 1%;
}

.form-actions a {
    margin-right: -5%;
}

.form-actions img, .form-actions a {
    width : 120px;
    height : 120px;
}

#login-form-container {
    margin-top: 3%;
}

img.loginHeaderImage {
    width: 30.5vw;
    height: 12vh;
}

/*New Class: centered text in header*/
.nav.nav-center {
    display: inline-block;
    left: 0;
    right: 0;
    margin: 0;
    float: none;
    font-size: 2em;
}

/* Formatting header*/
#header {
    text-align: center;
    background: transparent;
    cursor:default;
    margin-top: 30px;
    margin-left:auto;
    margin-right:auto;
    width: 1920px;
    position:absolute;
    z-index:999;
}
#header .shiftName,
#header .shiftName label {
    margin: 0px;
    padding: 0px;
    position: absolute;
    left: 1635px;
    top: 49px;
    width: 185px;
    height: 33px;
    text-align: left;
    z-index: 10;
}

/* Formatting header text*/
#header > ul > li {
    color: #FFFFFF;
    float: none;
}

.footer-icon {
    margin: 0;
    padding: 0;
    position: absolute;
    top:925px;
    width:230px;height:160px;
    text-align: left;
    z-index: 9;
}


.footer-icon a img {
    height: 160px;
    width: 230px;
}

#jclock_date {
    margin: 0px;
    padding: 0px;
    position: absolute;
    left: 30px;
    top: 20px;
    width: 185px;
    height: 33px;
    text-align: left;
    z-index: 9;
    font-size: 29px;
}

#jclock_time {
    margin: 0px;
    padding: 0px;
    position: absolute;
    left: 800px;
    top: 15px;
    width: 395px;
    height: 72px;
    text-align: left;
    z-index: 11;
    font-size: 60px;
}
#header #shiftName {
    top: 20px;
    right: 20px;
    height: 33px;
    width: 385px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    text-align: right;
    z-index: 9;
    font-size: 29px;
}

.checkbox {
    width: 1vw;
    height: 2.5vh;
    cursor:pointer;
    background-color: rgb(102, 102, 102);
}
.customCheckbox, .boxedCheckbox
{
    display:inline-block; cursor:pointer;
}
.boxedCheck {
    margin-left: 1px;
    margin-top: -5px;
}
.boxedCheckbox {height:30px;width:30px;}
.boxedCheckBg {height:30px;width:30px;margin:1px;margin-bottom:-23px;background:url(/img/02_background_lighter%20grey.bmp)}
.blackCheckbox .boxedCheckBg {
	background: transparent;
	border: 1px solid #e9ecec;
	border-radius: 2px;
}

.boxedCheckBg-disabled {height:20px;width:20px;margin:4px;margin-bottom:-28px;background:#999;}
.boxedCheckbox-disabled {cursor:default;}

.radiobutton {height:36px;width:36px;border-radius:50%;
    background-repeat: no-repeat;
}
.radiobutton-on {background:url(/img/radio-on.png);
    background-size: 24px 24px;
    background-position-y: 2px;
    background-repeat:no-repeat;
}
.radiobutton-off {background:url(/img/radio-off.png);
    background-size: 24px 24px;
    background-position-y: 2px;
    background-repeat:no-repeat;
}
.radiobutton-dot {height:16px;width:16px;margin:7px auto;background:#000;border-radius:50%;}


.pageContent {
    height: 96vh;
    margin-left:0px;
    margin-right:0px;
    padding-bottom: 2% !important;
}

/* Bootstrap Footer floats over jquerymobile page. Must make it sticky.*/
#wrap {
    height: 1080px;
    width: 1920px;
}

#footer {
    position: relative;
    margin-top: -100px; /* negative value of footer height */
    height: 100px;
    clear: both;
}

#footer, #footer-inner {
    background-image: none;
    background-color: #666666;
    border-color: #666666;
}

.footer-image {
    height: 75px;
    width: 100%;
}

button.btn-modal {
    font-size: 12px;
    line-height: 15px;
    padding: 4px 8px;
    height: 75px;
    width: 75px;
}

#adminIframePage {
    background-color: #222;
    width:1930px;
}

#adminIframe,
#techIframe {
    margin: 0px;
    padding: 0px;
    width: 1920px;
    border: 0px;
    height: inherit;
    background:url(/img/222222.bmp);
}

#adminIframePageContent, #techIframePageContent {
    padding: 0px;
    height: 925px;
    background: url(/img/222222.bmp);
    width: 1925px;
    overflow:hidden;
}

.main-section {

}

#techContent, #adminContent {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 0;
    padding-bottom: 0;
}
#techHome, #adminHome {background:url(/img/222222.bmp);}
#adminIframe body, #techIframe body {background:url(/img/222222.bmp);}
.menu-items {
    position:absolute;width:1680px;float:left;left:230px;
}
.menu-logo {
    height: 91vh;
    width: 8.5vw;
    max-width:none;
    position:absolute;
    top:3vh;
    left:0.5vw;
}

.home-link {
    height: 183px !important;
    width: 285px !important;
    margin-bottom: 100px;
}
.home-link a img {
     height: 183px;
     width: 230px;
     margin-top: 50px;
 }

#scalableChart .kineticjs-content canvas {
    width: 90vw;
    height: 80vh;
}
form {
    margin: 0 !important;
}
a.actionLink {font-size:16px;text-transform:none;font-style:italic;font-weight:normal;}
.form-inline a.actionLink img,
a.actionLink img {
    width: 115px;
    height: 142px;
}
a.actionLink img.medium {
    height: 15vh;
    width: 7vw;
}
a.actionLink img.wide {
    height: 6.5vh;
    width: 7vw;
}
a.actionLink-mini img, img.mini {
    height: 5vh;
    width: 2vw;
}

td select, select.small {
    width: 8vw;
    height: 4vh;
}


/* custom dialog styles */

#customDialog, #customAlert, #customWarning {
    color: #FFF;
    max-width:1600px;
    white-space: nowrap;
    min-width: 370px !important;
    width: auto;
    height: auto;
    box-shadow: 0 0 0 3px #e9ecec, 0 0 0 5px #4bc7f3 !important;
    position: absolute;
    top: 309px;
    left: 22%;
    z-index: 17999;
    opacity: 1;
    display: block;
    background: #222;
}

.popup-dark{top:7% !important;}
#customDialog-inner, #customAlert-inner {
  background: #222;
  padding: 20px;
  position: relative;
}

#customWarning .customDialogMessage {font-size:24px;font-weight:normal;line-height:28px;}
#customWarning h1 {font-weight:bold;margin-top: -5px;}
#customWarning .action-links {width: auto; margin: 0px auto; text-align: center; font-style: italic;margin-top: 50px;}
#customWarning-inner {background: #222; padding:0 100px 20px;position:relative}
#customDialog .popup-content select {
    max-width: 100%;
}
#customDialog .popup-close, #customWarning-inner .popup-close, .popup-close-icon {
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  font-size: 36px;
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  line-height: 22px;
  margin: 0 !important;
}

#customDialog .popup-content input,
.customDialog input {
    margin: 0;
}
.customDialog, .customWarning {
    background-color: #222;
    width: 42vw;
    height: 35vh;
    padding: 1vh 0.5vw;
}
.customDialog-main, .customWarning-main {
    background-color: #222;
    width: 30vw;
    height:27vh;
    float:left;
    padding: 15px;
    color: #ccc;
    font-weight: bold;
}
.customDialog-main .row-fluid, .customWarning-main .row-fluid {
    margin-bottom:4vh;
}
.customDialog-main .row-fluid .value {
    color: #007eff;
    margin-left: 2vw;
}
.customDialog-buttons {
    float:right;
    width: 6vw;
}
.customDialog-buttons img {
    width: 115px;
    height: 118px;
}
.customDialog-main .row-fluid .bootstrap-select {
    width: 220px;
}
.customDialog-main .row-fluid .bootstrap-select.btn-group {
    margin-bottom:0 !important;
}
#customDialog .customDialogMessage {
    line-height:30px;
}
.customDialogMessage {
    color: #e9ecec;
    font-size: 22px;
    font-weight:normal;
    text-align: center;
    text-transform:none;
    width: 100%;
    min-height: 40px;
    height: auto;
    line-height: 40px;
    margin-bottom: 50px;
    padding-top: 20px;
}
.customdialog-bg, .customWarning-bg, .customalert-bg {background:#222;opacity:0.85;}
.ui-popup-screen.in ~ .customdialog-bg, .ui-popup-screen.in ~ .customWarning-bg, .ui-popup-screen.in ~ .customalert-bg {opacity: 0.4 !important}
.customDialogActionLink {cursor: pointer;margin: 0px 15px 10px;display: inline-block;font-style:italic;font-size:16px;}
.sub-box-content div.odd, .sub-box table tbody tr.odd, tr.odd {
    background-color: transparent;
}
.sub-box-content div.even, .sub-box table tbody tr.even, tr.even {
    background-color: transparent;
}

.sub-box-content div.odd [class*="span"],
.sub-box-content div.even [class*="span"] {
    background: transparent;
}
.sub-box-content .four-col {
    width:23%;
    padding-left:1%;
}

.popup-dark-themed,
.popup .header {
  background: #222222 !important;
  color: #e9ecec !important;
}

.ui-popup-container .header {
    width:100%;
    text-align:center;
    margin-top:2vh;
}
.ui-popup select,
.popup-content select {
    width: 4vw;
    height:4vh;
}
.ui-popup label,
.popup-content label,
.ui-popup label.standard-label,
.ui-popup label.medium-label,
.ui-popup label.large-label,
.popup-content label.standard-label,
.popup-content label.medium-label,
.popup-content label.large-label,
.modal label.standard-label,
.modal label.medium-label,
.modal label.large-label,
#customDialog label.standard-label,
#customDialog label.medium-label,
#customDialog label.large-label,
#customWarning label.standard-label,
#customWarning label.medium-label,
#customWarning label.large-label {
    line-height:2.5vh;
    margin-bottom:0;
    display:inline-block;
}
.ui-popup label.standard-label,
.popup-content label.standard-label,
.modal label.standard-label,
#customDialog label.standard-label {
    width:5.5vw;
}
.ui-popup label.medium-label,
.popup-content label.medium-label,
.modal label.medium-label,
#customDialog label.medium-label {
    width:10vw;
    max-height: 6vh;
    line-height: 2vh;
    text-overflow: ellipsis;
    overflow: hidden;
}
.ui-popup label.large-label,
.popup-content label.large-label,
.modal label.large-label,
#customDialog label.large-label {
    width:15vw;
    margin-right:0.5vw;
}
.ui-popup-screen.in {
    opacity:0.85 !important;
    background:#222;
}

.popup-content .popup-subsection {
    border-right: 2px solid #6adeff;height: 96%;
}

img.tick {
    width: 38px;
    height: 32px;
    cursor:pointer;
}

p.error, div.error, span.error {
    color:#F00;line-height:3vh;
}

.truncate-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-left {text-align:left;}

/* mapping screen styles */
#floor-map {
    height: 804px;width: 1890px; overflow:hidden;margin-left:15px;
}

li.ui-draggable-dragging, span.ui-draggable-dragging {
  list-style:none;
  background:none;
  width:auto;

}
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {cursor:default !important;}

/* helpers */

.ml0 {
	margin-left: 0px !important;
}
.ml10 {
	margin-left: 10px !important;
}
.ml20 {
	margin-left: 20px !important;
}
.ml40 {
	margin-left: 40px !important;
}
.ml60 {
	margin-left: 60px !important;
}
.mr0 {
	margin-right: 0px !important;
}
.mr20 {
	margin-right: 20px !important;
}
.mr25 {
	margin-right: 25px !important;
}
.mr40 {
	margin-right: 40px !important;
}
.mb15 {
	margin-bottom: 15px !important;
}
.nobor {
	border: none !important;
}
.txt-red {
	color: #fd9898 !important;
}
.txt-green {
	color: #a7fd98 !important;
}
.txt-grey {
	color: #8e9292 !important;
}
.txt-purple {
	color: #d17efd !important;
}
.txt-orange {
    color: #fdd198 !important;
}
.txt-yellow {
    color: #fbfd98 !important;
}
.txt-right {
	text-align: right !important;
}
.fs1 {
	font-size: 20px !important;
}
.fw-normal {
	font-weight: normal !important;
}

.x-icon {
    margin-right: -15px;
    margin-top:-5px;
    line-height: 0;
    float: right;
    font-size: 18px;
    color: #e9ecec;
    text-decoration: none;
}
.x-icon:hover {
    color: #e9ecec;
    text-decoration: none;
}

hr {
    border: 2px solid #666;
}

input[type='text']:focus, input[type='password']:focus {
  outline: none;
}
*::-moz-focus-inner {
  border: none;
}

.clickable {
  cursor: pointer;
}

div.blue-border,
form.blue-border {
  box-shadow: 0 0 0 3px #e9ecec, 0 0 0 5px #4bc7f3 !important;
}

.close {
  color: #e9ecec;
}

input.red-border {
  border: 2px solid #fd9898 !important;
  outline: none !important;
}

::-webkit-scrollbar {
     width: 16px;
 }
::-webkit-scrollbar-track {
    background-color: #fff;
}
::-webkit-scrollbar-thumb {
  background-color: #bbb;
}

a {
  outline: 0 !important;
}