/*
 * Dropdown autocomplete
 */
#symbol-autocomplete-wrapper {
  display: none;
  position: absolute;
  top: 15px;
  z-index: 1;
}
.symbol-prefefined {
  margin-left: 10px;
  border: 1px solid #C3C3C3;
  padding: 0.2em 0.3em;
  text-decoration: none;
  background: #F8F8F8;
}
.symbol-search-dropdown {
  z-index: 50;
  width: 500px;
  background: #fff;
  list-style: none;
  position: absolute;
  top: 2em;
  left: 0;
  overflow: hidden;
  text-align: left;
  border-radius: 0.28571429rem;
  border: 1px solid rgba(34, 36, 38, 0.15);
  display: none;
}

.symbol-search-dropdown-item {
  padding: 5px 10px;
}

.symbol-search-dropdown-item .symbol-exchange {
  float: right;
  font-size: 0.9em;
  color: #555555;
}

.symbol-search-dropdown-item .symbol-type {
  margin-left: 5px;
  font-size: 0.9em;
  color: #6435C9;
}

.symbol-search-dropdown-item:hover {
  background-color: #F1F1F1;
  cursor: pointer;
}

/*
 * Charts
 */
#pymnts-chart-wrapper {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: .2em;
}
.highcharts-button {
  cursor: pointer !important;
}


/* Table */
.sortable-table {
  width: 100%;
  background: #ffffff;
  margin: 1em 0em;
  border: 1px solid #d0d0d0;
  box-shadow: none;
  border-radius: 0.25rem;
  color: rgba(0, 0, 0, 0.8);
  border-collapse: separate;
  border-spacing: 0px;
}

.sortable-table thead th {
  cursor: pointer;
  white-space: nowrap;
  border-left: 1px solid #d0d0d0;
  color: rgba(0, 0, 0, 0.8);
  background: #f0f0f0;
  text-align: left;
  padding: 0.7em 0.8em !important;
  vertical-align: middle;
  font-style: normal;
  font-weight: bold;
  text-transform: none;
  border-bottom: 1px solid #d4d4d5;
}

.sortable-table thead th:after {
  display: inline-block;
  content: '';
  width: 1em;
  height: 1em;
  opacity: 0.8;
  margin: 0em 0em 0em 0.5em;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
}

.sortable-table thead th.ascending:after {
  content: '\25B2';
}

.sortable-table thead th.descending:after {
  content: '\25BC';
}

.sortable-table thead th:first-child {
  border-radius: 0.25rem 0em 0em 0em;
}

.sortable-table tr td {
  border-top: 1px solid #d4d4d5;
}

.sortable-table tr:first-child td {
  border-top: none;
}

.sortable-table td:first-child {
  border-left: none;
}

.sortable-table tr td {
  border-top: 1px solid #d4d4d5;
  padding: 0.7em 0.8em !important;
  text-align: left;
  vertical-align: middle;
  transition: all 0.2s ease;
  border-left: 1px solid #d4d4d5;
}
.sortable-table .change {
  font-weight: bold;
}
.sortable-table th.center,
.sortable-table td.center {
  text-align: center;
}
.sortable-table td {
  white-space: nowrap;
}

/*
 * other
 */
.ui-icon-close {
  cursor: pointer;
}
#table-tabs {
  overflow-x: scroll;
}
#table-tabs ul li {
  margin-left: 0 !important;
}
.date-column {
  min-width: 75px;
}
.performers-button {
  margin-left: 10px;
}
.performers-period {
  background: #f7f7f7;
  padding: 3px 5px;
  text-decoration: none;
  font-size: 12px;
}
a.performers-period {
  color: #444 !important;
}
.performers-period.active {
  background: #e7f0f9;
  font-weight: bold;
}
.performers-period:hover {
  background: #e7e7e7;
}
.performers-period-buttons {
  margin-bottom: 25px;
}
.change-up {
  color: darkgreen;
}
.change-down {
  color: red;
}
/*
 *
 */
.summary-table .index-table-head-row {
  padding: 10px 0;
}
.summary-table .index-table-head-row span {
  padding-right: 10px;
}
.summary-table .index-value {
  font-size: 18px;
  font-weight: bold;
}
.summary-table .index-property-value {
  font-weight: bold;
  text-align: right;
}
.summary-table td {
  border-bottom: 1px solid #bbb;
  padding: 10px 15px 10px 0 !important;
}
.summary-table.hidden {
  display: none;
}
.index-data-button {
  margin-right: 10px;
}
.index-data-button.active {
  text-decoration: underline;
  font-weight: bold;
}
.summary-links {
  margin-bottom: 10px;
}
.ui-tabs .ui-tabs-panel {
  padding: 1em 0.5em;
}
#index-summary {
  background: #E4E4E4;
  bottom: 20px;
  padding: 10px;
}
#ui-datepicker-div {
  z-index: 10 !important;
  font-size: 12px !important;
}

@media screen and (max-width: 500px) {
  #index-summary {
    background: #fff;
  }
}