/********** Copyright © 2012-2019 Epic Systems Corporation ***********
 File:    jquery-ui-epic.css
 Purpose: Modified jQuery UI styles for our needs
 Revision history:
  *jec 03/17 456698 Add custom tooltip overwrite class
  *jec 07/17 444501 Fix hyperlink color in lightboxes
  *ns  08/17 498336 Add customToolTipHTML
  *jtd 11/17 518115 Fix focus style
  *dpd 09/19 607845 Added showDialogClose to be used if dialog wants to be shown
**********************************************************************/

.ui-front {
  z-index: 10001;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  color: #000000;
  font: normal 15px "Segoe UI", Arial, Helvetica, sans-serif;
  background: #fff;
}

.ui-widget-header {
  color: #000000;
  font: normal 15px "Segoe UI", Arial, Helvetica, sans-serif;
  background: #fff;
}

.ui-button.ui-state-focus {
  background: #FFFFFF!important;
}

.ui-tooltip {
  max-width: 500px;
}

/* Use our fonts for all jQuery widgets */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button, .ui-tooltip-content, .ui-tooltip, .ui-selectmenu-button {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.ui-widget-overlay {
  opacity: .5;
  filter: Alpha(Opacity=50);
  background-image: none;
}

/***** Dialog *****/

/* Hide the X close button in the top right */
.ui-dialog-titlebar-close {
  display: none;
}

.showDialogClose, .showDialogClose:hover, .showDialogClose:active {
  display: block;
  background-color: #00a6d3 !important;
  border: 0px;
}

.ui-dialog, .ui-dialog-titlebar {
  border-color: #808080;
}

.ui-dialog-titlebar {
  border: none;
  background-color: #00A6D3;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
}

.ui-dialog .ui-dialog-buttonpane {
  margin-top: 0;
}

.ui-dialog {
  border-width: 1px;
}

.ui-dialog, .ui-dialog-content, .ui-dialog .ui-dialog-content {
  padding: 0px;
  margin: 0px;
}

/* Serves as a temporary backdrop before content is overlaid. This should never be seen. */
.ui-dialog .ui-dialog-content {
  background-color: #FFFFFF;
}

/* This removes rounded corners on the inner divs. We want this to mesh with the outer container and without this there are rounded white spots in the middle of the titlebar. */
.ui-dialog .ui-corner-all, .ui-dialog-content .formatterTable {
  border-radius: 0px;
}

/* Keeps autocomplete entries looking normal */
.ui-dialog li {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}
.ui-autocomplete.ui-widget-content {
  background: #ffffff;
}
.ui-autocomplete .ui-menu-item {
  border: 1px solid transparent;
  margin: 2px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-autocomplete .ui-state-focus {
  border: 1px solid #999999;
  font-weight: normal;
  color: #212121;
  border-radius: 4px;
}
.ui-autocomplete.ui-menu .ui-menu-item {
  padding: 0;
}
.ui-autocomplete.ui-menu .ui-menu-item .ui-menu-item-wrapper {
  padding: 3px 6px 3px 6px;
}

/* This should match the hyperlink color in epicweb_ie.css */
.ui-widget-content a {
  color: rgb(2,171,192);
}

/***** /Dialog *****/

/***** SelectMenu *****/

.ui-selectmenu-menu .ui-widget-content {
  background: #ffffff;
}
.ui-selectmenu-menu .ui-menu-item  {
  font-size: 13px;
}
.ui-selectmenu-menu .ui-state-focus {
  font-weight: normal;
  color: #212121;
  border: 1px solid #999999;
}
.ui-selectmenu-button {
  cursor: pointer;
  color: #000000;
  text-align: center;
  padding: 0px 0px;
  border-radius: 2px;
  background-color: #F5F4ED!important;
  background: url("../img/ButtonGradient.png") repeat-x #F5F4ED;
  border: 1px solid #808080;
}
.ui-selectmenu-button span.ui-selectmenu-text {
  padding: 2px;
  padding-left: 5px;
  font-size: 13px;
}
.ui-icon-triangle-1-s {
  background-image: url("../img/down-arrow.gif")!important;
  background-position: 4px 9px;
}

.ui-selectmenu-button span.ui-selectmenu-text {
  text-align: left;
  display: block;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-menu .ui-menu-item {
  position: relative;
  margin: 0;
  padding: 3px 1em 3px .4em;
  cursor: pointer;  
}

.ui-menu-icons .ui-menu-item-wrapper {
  padding: 0px;
}

.ui-menu-icons .ui-menu-item {
  padding-left: 2em;  
}

.ui-menu-item .ui-icon.ui-state-active {
  background-color: transparent;
  border: 0px solid transparent;
}

.ui-selectmenu-button.ui-button {
  margin-right: 0px;
}

/***** /SelectMenu *****/

/********* HOVER STATES USED IN CHART SEARCH *********/
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border: 1px solid transparent;
  background: rgba(0,166,211,0.07);
  font-weight: normal;
  color: #00A6D3;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
  color: #00A6D3;
  text-decoration: none;
}
.customToolTipText, .customToolTipHTML {
  font-size: 12px;
  word-wrap: break-word;
  text-align: justify;
}

.customToolTipHTML {
  max-height: 480px !important;
  overflow-y: auto;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {	
  background: rgba(0,166,211,0.07);
  color: #00A6D3;
  border: 1px solid transparent;
}