.ui-tabs-vertical { width: 100%;/*55em; */}
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 24em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em -2px; overflow:hidden;}
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 25em;}

/* Fix autocomplete in dialog */
ul.ui-autocomplete {
    z-index: 1100;
}


body {
    font-family:"Arial";
}

#content {
    background-color:#c8ccdc;
}

#workrequest-index,
#workorder-index {
    background-color:white;
}

#users-index {
    background-color:white;
}

#header {
    padding:5px;
    height:60px;
    overflow:hidden;
    color:white;
    font-weight:bold;
    background-image: linear-gradient(#8590ad,#034171);
    /*border: 3px solid green; */
    position: relative;
}

#header h1{
    display:block;
    color:white;
    margin: 0;
    margin-left:65px;      
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

div.ui-dialog-titlebar {
    background:#034171;
    color:white;
}

.custom-combobox {
    position: relative;
    display: inline-block;
}

.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}

.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
    width:400px;
}

.ui-autocomplete-category {
    font-weight:bold !important;
    background-color:transparent !important;
    border:transparent !important;
    color:black !important;
}

.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}
  /* IE 6 doesn't support max-height
   * we use height instead, but this forces the menu to always be this tall
   */
* html .ui-autocomplete {
    height: 3100px;
}


th {
    background:#034171;
    color:white;
    
}


#GDSThumbnail {
    float:left;
    height:50px;
}

.image-cropper {
  width: 50px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  float:right;
}

.image-cropper img {
  display: inline;
  margin: 0 auto;
  width: 50px;
  height: 50px;
  background-size:cover;
  background-position:center;
}

#menu {
    height:40px;
    background:#034171;
    color:white;
    text-align:left;
    padding:5px;
    padding-top:5px;
    padding-bottom:5px;
}

#menu a {
    color:white;
    text-decoration: underline solid transparent;
}

#menu a:hover {
    color:white;
    text-decoration: underline solid white;
}

#menu ul {
    float:right;
}
#menu ul li {
    display:inline-block;
    margin-left:10px;
    margin-right:10px;
}

#footer {
    border-top: 2px solid #034171;
    margin-top:3px;
    padding-top:3px;
    font-size:smaller;
}

#footer a {
    color:#034171;
    text-decoration: underline solid #034171;
}

td.priority {
    text-align:center;
}

.priority span {
    display:inline-block;
    text-align:center;
    width:80px;
    padding:2px;
    padding-left:5px;
    padding-right:5px;
    color:white;
    border-radius: 3px;
}

span.priority span{
    background-color:grey;
}

td.priority span {
    color:white;
}

.priority span.LOW {
    background-color:rgb(1, 200, 140);
}

.priority span.MEDIUM {
    background-color:rgb(255, 170, 43);
}

.priority span.HIGH {
    background-color:rgb(255, 56, 53);

}

.dueDate span {
    display:inline-block;
    text-align:center;
    width:80px;
    padding:2px;
    padding-left:5px;
    padding-right:5px;
    border-radius: 3px;
}

.dueDate span.overdue {
    color:white;
    background-color:rgb(255, 56, 53);

}

.link {
    cursor: pointer;
    color: #034171;
    text-decoration: underline solid #034171;
}


td.onlineStatus {
    text-align:center;
}

.onlineStatus span {
    display:inline-block;
    text-align:center;
    width:220px;
    padding:2px;
    padding-left:5px;
    padding-right:5px;
    color:white;
    border-radius: 3px;
}

span.onlineStatus span{
    background-color:grey;
}

td.onlineStatus span {
    color:white;
}

.onlineStatus span.Online {
    background-color:rgb(1, 200, 140);
}

.onlineStatus span.Offline {
    background-color:rgb(255, 56, 53);
}

.onlineStatus span.Never {
    background-color:rgb(100, 100, 100);
}


label {
    font-weight:bold;
}


#workorder-new,
#workorder-edit,
#workorder-view,
#workrequest-new,
#workrequest-edit,
#workrequest-view,
#user-new,
#user-edit,
#user-delete
{
    margin: auto;
    padding-left:10px;
    padding-right:10px;
    max-width: 900px;
    overflow:hidden;
}

#workrequests-table_wrapper .dt-buttons,
#workorders-table_wrapper .dt-buttons {
    padding-right:10px;
}

#workrequests-table_wrapper .dt-buttons > label,
#workorders-table_wrapper .dt-buttons > label {
    color:rgb(51, 51, 51);
}

#workrequests-table,
#workorders-table {
    padding-top:5px;
}

.link-edit,
.link-view
 {
    cursor: pointer;
    color: #034171;
    text-decoration: underline solid #034171;   
}

#workorder-view {
    width:780px;
}
#work-order-dialog {
    overflow-x: hidden;
    overflow-y: auton;
}

.workorder-details h2 {
    color:#034171;
    border-bottom: 2px solid #034171;
    margin-top:0;
}

.workorder-details h3 {
    color:#034171;
    text-decoration:underline solid #034171;
}

.labelvalue {
    display:inline-block;
    width:360px;
    overflow:hidden;
    vertical-align: text-top;
    border-bottom: 1px dotted #034171;
    margin-left:10px;
    margin-right:10px;
    margin-bottom:10px;
    padding:0;
}

.labelvalue.widevalue {
    border-bottom: none;

}


.labelvalue span{
    display:inline-block;
    margin-top:0;
    padding-top:0;
    overflow:hidden;
    vertical-align: text-top;

}

.labelvalue .label{
    width:120px;
    color:#034171;
    margin:0;
}

.labelvalue .value{
    margin:0;
    display:inline-block;
    float: none;
    overflow: hidden;
}

.labelvalue .notes{
    font-style: italic;
    font-size:smaller;
    text-align:right;
}

.labelvalue.wideproperty{
    width:745px;

}

.labelvalue.wideproperty .label{
    overflow:hidden;
    border-bottom: 0px dotted red;
    width:200px;
}

.labelvalue.wideproperty .label{
    overflow:hidden;
    width:200px;
}

.labelvalue.widevalue .label{
    width:100%;
    border-bottom: 1px dotted #034171;
}

.labelvalue.widevalue .value{
    width:100%;
    border-bottom: 1px dotted #034171;
}

.labelvalue.wideproperty.widevalue .label{
    /*display:block;*/
    overflow:hidden;
    border-bottom: 1px dotted #034171;
    width:100%;
}


/* User Login Dialog && first connection */
#user-first input,
#user-first select,
#user-first textarea,
#user-login input,
#user-login select,
#user-login textarea {
    width:350px;
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box;
}

#user-first label,
#user-login label {
    font-weight:bold;
}

#map {
    width: 100%;
    height: 600px;
}

.overlayTitle {
    font-weight:bold;
    font-size:large;
    margin-left:5px;
    margin-right:5px;
}
#overlayOptions {
    margin:5px;
    padding:0;
    list-style-type:none;
}

.leaflet-bar.leaflet-control {
    background-color:white;
}

#overlayOptions ul {
    list-style-type:none;
}


#overlayOptions label.checkbox {
  display: block;
  position: relative;
  padding-left: 31px;
  margin-bottom: 12px;
  cursor: pointer;
/*  font-size: 22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
#overlayOptions input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 21px; /* was 25 */
  width: 21px; /* was 25 */
  background-color: #eee;
  border-radius: 5px;
/*  border:1px solid green;*/
}

/* On mouse-over, add a grey background color */
#overlayOptions label.checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

#overlayOptions input:disabled ~ .checkmark {
  background-color: #eee  !important;
}

/* Create the checkmark/indicator (hidden when not checked) */
#overlayOptions .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
#overlayOptions input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
#overlayOptions label.checkbox .checkmark:after {
  left: 7px; /* was 9 */
  top: 4px; /* was 5 */
  width: 4px; /*was 5 */
  height: 8px; /*was 10 */
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.flyTo{
    cursor: pointer;
}

tr.completed{
  color: grey;
}

#workorder-new,
#workorder-view {
  background-color:white;
}

@media print
{
    .no-print,
    #menu,
    #menu *
    {
        display: none !important;
    }
}

#workorder-view > h1 {
  color:#034171;
}