.historical-quotes-wrapper {
  min-width: 1280px;
}

.historical-quotes-container {
  width: 1200px;
  padding-top: 44px;
  padding-bottom: 75px;
}

.historical-quotes-header {
  height: 50px;
  font-size: 36px;
  
  font-weight: 600;
  color: #333333;
  line-height: 50px;
  margin-bottom: 32px;
}

.historical-quotes-tabs {
  display: flex;
  border-bottom: 1px solid #F7F7F7;
  margin-bottom: 24px;
}

.historical-quotes-tabs > li {
  height: 22px;
  font-size: 16px;
  
  font-weight: 600;
  color: #333333;
  line-height: 22px;
  padding-bottom: 4px;
  margin-right: 40px;
  cursor: pointer;
}

.activeTab {
  border-bottom: 3px solid var(--brandColor);
}

.historical-quotes-content, 
.historical-quotes-api {
  width: 100%;
  background: #FFFFFF;
  box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  box-sizing: border-box;
  padding-top: 40px;
  padding-left: 40px;
  padding-bottom: 40px;
  padding-right: 40px;
  display: flex;
}
.historical-quotes-content {
  /* height: 514px; */
  margin-bottom: 16px;
}
/* .historical-quotes-api {
  height: 576px;
} */
.historical-quotes-content .data-title {
  height: 30px;
  font-size: 22px;
  
  font-weight: 500;
  color: #333333;
  line-height: 30px;
  margin-bottom: 24px;
}
.historical-quotes-content .data-select,  
.historical-quotes-content .data-file {
  margin-bottom: 24px;
}
.historical-quotes-content .select-title {
  height: 20px;
  font-size: 14px;
  
  font-weight: 500;
  color: #333333;
  line-height: 20px;
  margin-bottom: 8px;
}
.historical-quotes-content .return-description {
  width: 680px;
  background: #FAFAFA;
  border-radius: 8px;
  box-sizing: border-box;
  padding-top: 24px;
  padding-left: 24px;
  padding-right: 24px;
}
.historical-quotes-content .description-title {
  height: 25px;
  font-size: 18px;
  
  font-weight: 500;
  color: #333333;
  line-height: 25px;
  margin-bottom: 32px;
}
.historical-quotes-content .description-title {
  height: 25px;
  font-size: 18px;
  
  font-weight: 500;
  color: #333333;
  line-height: 25px;
  margin-bottom: 32px;
}
.historical-quotes-content  .where-title {
  margin-bottom: 8px;
  height: 21px;
  font-size: 16px;
  
  font-weight: 500;
  color: #333333;
  line-height: 21px;
}

.historical-quotes-api .api-title {
  height: 30px;
  font-size: 22px;
  
  font-weight: 500;
  color: #333333;
  line-height: 30px;
  margin-bottom: 32px;
}
.historical-quotes-api .api-mb40 {
  margin-bottom: 40px;
}
.historical-quotes-api .api-mb8 {
  margin-bottom: 8px;
}
.historical-quotes-api .api-link {
  height: 40px;
  background: #F7F7F7;
  border-radius: 4px;
  font-size: 14px;
  
  font-weight: 500;
  color: #333333;
  line-height: 20px;
  margin-bottom: 40px;
}
.api-example-title {
  height: 21px;
  font-size: 18px;
  
  font-weight: 500;
  color: #333333;
  line-height: 21px;
  margin-bottom: 8px;
}
.description-example-text, .description-where {
  white-space: pre-wrap;
}
.description-example-text {
  background: #fff;
  padding: 16px;
  font-size: 12px;
  
  font-weight: 500;
  line-height: 20px;
  color: #333333;
  border-radius: 4px;
  border: 1px solid #E6E6E6;
  margin-bottom: 24px;
}
.description-example-text span {
  color: #999999;
}
.apiExampleBox {
  /* height: 98px; */
  border-radius: 4px;
  border: 1px solid #F0F0F0;  
  margin-bottom: 24px;
  padding-left: 16px;
}
.examplehasPoint li {
  list-style-type: none;
}
.examplehasPoint {
  padding-left: 32px!important;
}
.examplehasPoint li::before {
  margin-left: -20px;
  margin-right: 20px;
  display: inline-block;
  box-sizing: border-box;
  width: 0;
  font-size: 1.5em;
  transform: scale(1.25);
  color: #3370ff;
  content: "\2022";
  position: relative;
  left: 1px;
  top: 3px;
}
.return-description .description-where code {
  background: #f2f2f2;
  border: 1px solid #dee0e3;
  height: 20px;
  border-radius: 4px;
}
.examplehasPoint code {
  background: #f7f7f7;
  border: 1px solid #dee0e3;
  height: 20px;
  border-radius: 4px;
}
.historical-quotes-api .api-link  {
  padding-left: 16px;
}
.historical-quotes-api .api-link, 
.api-example-content {
  box-sizing: border-box;
  padding-right: 16px;
  font-size: 14px;
  
  font-weight: 500;
  color: #333333;
  line-height: 22px;
}

.menuDisplay {
  display: none
}
.historical-select-option {
  position: relative;
  display: flex;
}
.historical-select-option-menu {
  width: 120px;
  height: 276px;
  background: #FFFFFF;
  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  box-sizing: border-box;
}
.historical-select-option-menu li {
  height: 42px;
  padding-left: 16px;
  cursor: default;
  font-size: 14px;
  
  font-weight: 500;
  color: #333333;
  line-height: 18px;
}
.historical-select-option-menu li:hover {
  background: #FAFAFA;
}

.activeSelectTime {
  color: var(--brandColor)!important;
  background: #FAFAFA;
}

.historical-select-option-trangle {
  font-size: 18px;
  color: #CCCCCC;
  position: absolute;
  right: 10px;
}
.secondMenuFocus {
  color: var(--brandColor);
}
.historical-quotes-content .data-file {
  width: 400px;
  height: 40px;
  background: #F7F7F7;
  border-radius: 4px;
  display: flex;
  box-sizing: border-box;
  padding-left: 16px;
}
.historical-quotes-content .multiple-data-files {
  margin-bottom: 24px;
}
.historical-quotes-content .multiple-data-files .data-file {
  margin-bottom: 0;
}
.data-csv-image {
  margin-right: 8px;
}
.historical-quotes-content .data-download {
  min-width: 88px;
  height: 40px;
  background: var(--brandColor);
  border-radius: 4px;
  position: absolute;
  right: 0;
}
html[lang="ar"] .historical-quotes-content .data-download {
  left: 0;
  right: unset;
}
.historical-quotes-content .data-download > a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 20px;
  padding: 10px 30px;
}
.historical-quotes-content .data-download.disabled {
  background:var(--color-neutral-3);
}
.historical-quotes-content .data-download.disabled > a {
  pointer-events: none;
  color: var(--color-text-4);
}
.historical-quotes-content .data-download > .data-download-button {
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--colorWhite);
  line-height: 20px;
  padding: 10px 30px;
} 
.historical-quotes-content .data-download.disabled > .data-download-button {
  pointer-events: none;
  color: var(--color-text-4);
} 
.historical-quotes-content .data-info{
  position: relative;
}
.developer-react-table th, td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-right: 10px;
  height: 40px;
}
.developer-react-table th {
  font-size: 12px;
  
  font-weight: 500;
  color: #999999;
  line-height: 15px;
}
.developer-react-table {
  border: 1px solid #E6E6E6;
  border-bottom: none;
  margin-bottom: 16px;
  border-radius: 4px;
}
.developer-table-tr {
  background: #FFFFFF;
  font-size: 12px;
  
  font-weight: 500;
  color: #333333;
  line-height: 15px;
}

.developer-table-tr td {
  color: #333333;
}

.developer-table-tr:hover td {
  color: #FFFFFF;
}

.developer-orderbooks-tip {
  display: flex;
  width: 400px;
  height: 34px;
  background: #FCEDEF;
  border-radius: 4px;
  margin-bottom: 24px;
}
.developer-warn {
  margin-right: 4px;
  margin-left: 8px;
}
.developer-orderbooks-tip span {
  height: 18px;
  font-size: 12px;
  
  font-weight: 400;
  color: var(--brandColor);
  line-height: 18px;
}
/* datepicker */
.react-datepicker__input-container {
  width: 400px;
}
.react-datepicker__input-container input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  border: 1px solid rgb(204, 204, 204);
  height: 40px;
  padding-left: 16px;
  font-size: 14px;
  
  font-weight: 500;
  color: #333333;
  line-height: 18px;
}
.react-datepicker__time-box {
  width: 100% !important;
  padding-bottom: 10px;
  padding-top: 10px;
}
.react-datepicker__time-container {
  width: 131px;
}
.react-datepicker__time-list-item {
  padding: 0 !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.react-datepicker__day-names {
  /* display: none; */
  position: absolute;
  left: 6px;
  margin-top: 6px;
  z-index: 1;
}
.react-datepicker__month {
  position: relative;
  top: 6px;
  padding-top: 10px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
  right: 131px;
}
.developer-datepicker-custom {
  display: flex;
  align-items: center;
}
.custom-input-icon {
  position: absolute;
  right: 16px;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected, 
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
  background: #FCEDEF;
  color: #333333;
  font-weight: 500;
}
/* .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover, .react-datepicker__month-text--selected:hover, .react-datepicker__month-text--in-selecting-range:hover, .react-datepicker__month-text--in-range:hover, .react-datepicker__quarter-text--selected:hover, .react-datepicker__quarter-text--in-selecting-range:hover, .react-datepicker__quarter-text--in-range:hover, .react-datepicker__year-text--selected:hover, .react-datepicker__year-text--in-selecting-range:hover, .react-datepicker__year-text--in-range:hover, */
.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--selected, .react-datepicker__year-text--in-selecting-range, .react-datepicker__year-text--in-range {
  background: var(--brandColor);
}
.react-datepicker-popper .react-datepicker__triangle {
  display: none;
}
.react-datepicker__header {
  background: #FFFFFF;
}
.react-datepicker-popper[data-placement^=bottom] {
  padding-top: 4px;
}
.react-datepicker__current-month, .react-datepicker-time__header, .react-datepicker-year-header {
  font-size: 14px;
  
  font-weight: 500;
  color: #333333;
  line-height: 18px;
}
.react-datepicker__year-read-view--selected-year {
  display: none;
}
.react-datepicker__header__dropdown {
  position: absolute;
  margin-left: 180px;
  top: -2px;
}
.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown {
  width: 80px;
}
.react-datepicker__navigation .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
  top: 4px
}
.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {
  background: var(--brandColor);
}
.classic-dark .react-datepicker__day {
  color: var(--colorWhite);
}
.classic-dark .react-datepicker__day--disabled {
  color: var(--color-text-4);
}