:host {
  width: 100%;
  height: 100%;
}

.flex-gap-15 {
  gap: 15px;
}

.whole-cont {
  height: 100%;
  width: 100%;
}

.parameter {
  background-color: var(--color-ti-white);
  padding: 10px;
}

.parameter .label {
  color: var(--color-ti-secondary-grey);
  font-weight: bold;
  margin-right: 10px;
  padding: 0px;
}

.parameter .dropdown {
  width: 100px;
}

ti-widget-droplist::shadow #selectorList {
  border-radius: 3px;
  color: var(--color-ti-secondary-grey);
  cursor: pointer;
  outline: 0;
  padding: 5px;
  width: 80%;
  height: 28px;
}

.dropdown.disable {
  opacity: 0.5;
  pointer-events: none;
}

.parameter .btn {
  background-color: var(--color-ti-primary-red);
  border-radius: 17px;
  color: var(--color-ti-white);
  cursor: pointer;
  font-size: 11px;
  font-weight: bold;
  height: 20px;
  min-width: 100px;
  padding: 14px;
}

.parameter .btn.disabled {
  background-color: var(--color-ti-secondary-grey);
}

.icon {
  margin-right: 6px;
  width: 12px;
}

.graph-selector-cont {
  background-color: var(--color-ti-white);
  padding: 10px 0px;
}

.graph-selector {
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
}

.graph-selector .label-card {
  border-radius: 17px;
  cursor: pointer;
  font-size: 11px;
  height: 20px;
  padding: 14px;
}

.label-card.selected {
  background-color: var(--color-ti-secondary-blue-dark);
  border: 0.5px solid var(--color-ti-secondary-blue-dark);
  color: var(--color-ti-white);
}

.label-card.not-selected {
  background-color: var(--color-ti-white);
  border: 0.5px solid var(--color-ti-border-grey-02);
  color: var(--color-ti-secondary-grey);
}

.label-card.selected.disabled {
  background-color: var(--color-ti-secondary-grey);
  border: 0.5px solid var(--color-ti-secondary-grey);
}

.warning-text {
  color: var(--color-ti-indicator-red);
  font-size: 12px;
  height: 15px;
}

.graph-plot-whole-cont {
  height: 100%;
  min-height: 400px;
  width: 100%;
}

.table-cont {
  width: 30%;
  background-color: var(--color-ti-white);
  border: 1px solid var(--color-ti-bg-grey);
  border-radius: 4px;
  padding: 10px;
}

.table {
  height: 100%;
  color: var(--color-ti-secondary-grey-dark);
  font-size: 11px;
  width: 100%;
  border: 0.5px dashed var(--color-ti-text-grey);
  border-radius: 3px;
}

thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.table table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
}

.table th {
  background-color: var(--color-ti-bg-grey);
  border-bottom: 1px dashed var(--color-ti-text-grey);
}

.table thead th:first-child,
.table tr td:first-child {
  padding-left: 20px;
}

.table th,
.table td {
  padding: 10px 0px;
}

.table thead,
.table tr {
  display: flex;
  width: 100%;
}

.sample-index {
  width: 30%;
}

.raw-data {
  width: 25%;
}

.real-data {
  width: 45%;
}

.table-body {
  height: calc(100% - 35px);
  display: block;
  overflow: auto;
  scroll-behavior: smooth;
  width: 100%;
}

.highspeed-sample-buf-cont {
  background-color: var(--color-ti-white);
  border: 1px solid var(--color-ti-bg-grey);
  border-radius: 4px;
  padding: 10px;
  position: relative;
  width: 69%;
  min-width: 500px;
}

.highspeed-sample-buf-cont:hover .download-csv {
  display: flex;
}

.highspeed-sample-buf-cont .label {
  color: var(--color-ti-secondary-grey);
  font-size: 15px;
  font-weight: 500;
}

.graph-plot {
  min-height: 350px;
}