:host {
  font-family: Roboto;
  height: 100%;
}

:host ::content .header-text {
  fill: var(--color-ti-primary-blue);
  font-weight: bold;
  text-transform: uppercase;
  font-family: Roboto, sans-serif;
}

:host ::content .seqTitle,
:host ::content .seqDevice,
:host ::content .seqDelay,
:host ::content .seqName {
  font-size: 12px;
  font-family: Roboto, sans-serif;
}

.header-text {
  color: var(--color-ti-primary-blue);
  font-weight: bold;
  text-transform: uppercase;
  font-family: Roboto, sans-serif;
}

.preview-container {
  min-width: 850px;
  overflow: auto;
  width: 100%;
}

.seqRect {
  height: 100px;
  width: 200px;
  fill: var(--color-ti-shadow-blue);
}

.sequence-view {
  max-height: 450px;
  min-width: 800px;
  overflow-y: auto;
}

.seq-svg-container {
  overflow: auto;
  width: 1100px;
}

.btn {
  background-color: var(--color-ti-primary-red);
  color: var(--color-ti-white);
}

.sequence-list-ctr {
  width: 100%;
}

.timing-diagram,
.wait-cond-display {
  height: 100%;
  width: 40%;
  display: flex;
  padding: 0;
  cursor: pointer;
}

.timing-diagram-header {
  width: 40%;
  text-align: center;
}

.timing-diagram .start,
.timing-diagram .transition {
  height: 100%;
  width: 30%;
}

.timing-diagram .end {
  flex-grow: 3;
  height: 100%;
}

.timing-diagram .transition-group {
  display: flex;
  width: 65px;
  /* hold it as static width */
}

.timing-diagram .gpio-transition {
  display: flex;
}

.timing-diagram .gpio-transition .transition {
  margin: 0;
}

/* .timing-diagram .gpio-transition .transition {
  border-bottom: none;
} */

.timing-diagram .gpio-transition .start-extension {
  margin: 0 -2px;
}

.timing-diagram .gpio-transition .end-extension {
  margin: 0;
}

.timing-diagram .start-extension,
.timing-diagram .end-extension {
  height: 100%;
  margin: 0 -2px;
}

.timing-diagram .start-extension {
  width: 20px;
}

.timing-diagram .end-extension {
  flex-basis: 20%;
  flex-grow: 3;
}

.timing-diagram .transition {
  margin: 0 -4px;
  width: 40px;
}

.timing-diagram .low {
  border-bottom: 1px solid var(--color-ti-border-grey-02);
}

.timing-diagram .raising-edge {
  border-bottom: 1px solid var(--color-ti-border-grey-02);
  transform: rotateZ(-45deg) translateY(-50%);
  transform-origin: center;
}

.timing-diagram .falling-edge {
  border-bottom: 1px solid var(--color-ti-border-grey-02);
  transform: rotateZ(45deg) translateY(-50%);
  transform-origin: center;
}

.timing-diagram .raising-edge.unknown {
  border-bottom: 1px dashed var(--color-ti-border-grey-02);
}

.timing-diagram .falling-edge.unknown {
  border-bottom: 1px dashed var(--color-ti-border-grey-02);
}

.transition.falling-edge.unknown:before {
  position: absolute;
  content: "";
  width: 48px;
  height: 10px;
  transform: rotate(-45deg);
  transform-origin: center;
  top: 34px;
  left: 0px;
  border-bottom: 1px dashed #c0c0c0;
}
.transition.falling-edge.unknown.aft:after {
  position: absolute;
  content: "";
  width: 30px;
  height: 10px;
  transform: rotate(45deg);
  transform-origin: center;
  top: 33px;
  left: 0px;
  border-bottom: 1px dashed #c0c0c0;
}

.timing-diagram .linear-edge {
  border-right: 1px solid var(--color-ti-border-grey-02);
  width: 1px !important;
}

.timing-diagram .linear-edge.unknown {
  border-right: 1px dashed var(--color-ti-border-grey-02);
}

.transition.raising-edge.unknown:before {
  position: absolute;
  content: "";
  width: 48px;
  height: 10px;
  transform: rotate(45deg);
  transform-origin: center;
  top: 1px;
  left: 0px;
  border-bottom: 1px dashed #c0c0c0;
}

.transition.raising-edge.unknown.aft:after {
  position: absolute;
  content: "";
  width: 30px;
  height: 10px;
  transform: rotate(45deg);
  transform-origin: center;
  top: 33px;
  left: 0px;
  border-bottom: 1px dashed #c0c0c0;
}

.timing-diagram .high {
  border-top: 1px solid var(--color-ti-border-grey-02);
}

.start.high.unknown,
.start.low.unknown,
.start-extension.high.unknown,
.start-extension.low.unknown,
.end.high.unknown,
.end.low.unknown,
.end-extension.high.unknown,
.end-extension.low.unknown {
  border-bottom: 1px dashed #c0c0c0 !important;
  border-top: 1px dashed #c0c0c0 !important;
}

.transition.high.unknown.unknown,
.transition.low.unknown.unknown {
  border-bottom: 1px dashed #c0c0c0 !important;
  border-top: 1px dashed #c0c0c0 !important;
}

.transition.high.unknown.slope:before,
.transition.low.unknown.slope:before {
  content: "";
  width: 37px;
  height: 25px;
  position: absolute;
  border-bottom: 1px solid #c0c0c0;
  transform: rotateZ(45deg) translateY(-50%);
  transform-origin: center;
}

.timing-diagram .start .unknown,
.timing-diagram .start-extension .unknown {
  border-bottom: 1px dashed #c0c0c0 !important;
  border-top: 1px dashed #c0c0c0 !important;
}

.seq-display {
  font-size: 12px;
  justify-content: space-between;
}

/* .seq-dev-reg > *,
.seq-label,
.seq-input {
  padding: 2px;
} */

.seq-dev-reg {
  overflow: hidden;
  width: 25%;
}

.seq-dev-reg .seq-cmd {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.seq-ops {
  width: 12%;
  align-items: center;
  font-size: 10px;
  justify-content: flex-end;
}

.seq-iron-icon {
  margin-left: 8px;
  cursor: pointer;
}

.seq-display .seq-input {
  width: 80px;
  height: 18px;
  text-align: center;
  background-color: var(--color-ti-shadow-blue);
  border: 0.5px solid var(--color-ti-primary-blue-02);
  color: var(--color-ti-text-grey-dark);
}

.seq-display {
  align-items: center;
  height: 30px;
  margin: 5px 0;
}

.tool ::shadow #tooltip {
  background-color: var(--color-ti-secondary-grey-dark);
  font-size: 12px;
}

.tool ::shadow #tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: var(--color-ti-secondary-grey-dark) transparent transparent
    transparent;
}

.tab-container {
  display: flex;
  justify-content: flex-end;
}

.btn {
  height: 35px;
}

paper-tabs {
  background-color: var(--color-ti-bg-grey-02);
  color: var(--color-ti-primary-black);
  height: 40px;
  padding: 0 !important;
}

paper-tab.iron-selected {
  color: var(--color-ti-primary-blue);
  font-weight: bold;
  border-bottom: 2px solid var(--color-ti-primary-blue);
}

paper-tab {
  width: 170px;
  font-weight: normal;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-ti-border-grey-dark);
}

.seq-dev {
  width: 10%;
}

.seq-dev-reg {
  width: 12%;
  overflow: hidden;
}

.disable-mouse-events {
  pointer-events: none;
}

.device-conditional-selection {
  display: flex;
  flex-direction: column;
  padding: 3px;
  width: 100%;
  background: var(--color-ti-border-grey-dark);
  margin: 5px 0;
}

.device-cond-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 65px;
  background-color: var(--color-ti-bg-grey-02);
  margin: 2px;
  padding: 5px;
}

.device-label-ctr {
  padding: 5px 2px;
}

.device-pill {
  background-color: var(--color-ti-secondary-blue-dark);
  color: var(--color-ti-white);
  font-size: 14px;
  padding: 5px;
}

.option-pill {
  border: 1px solid var(--color-ti-secondary-blue-dark);
  color: var(--color-ti-secondary-blue-dark);
  padding: 2px 8px;
  margin: 0 3px;
  cursor: pointer;
}

.cond-ctr {
  display: flex;
  padding: 10px 2px;
  color: var(--color-ti-secondary-blue-dark);
  align-items: center;
}

.cond-wrapper {
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.condition-label {
  font-weight: 500;
  font-size: 16px;
  margin-right: 2px;
}

.resource-state-ctr {
  display: flex;
  width: 10%;
}

.resource-indicator::after {
  content: "";
  height: 18px;
  width: 18px;
  display: flex;
  margin-left: 15px;
}

.resource-indicator.red::after {
  background-color: var(--color-ti-indicator-red);
}

.resource-indicator.green::after {
  background-color: var(--color-ti-secondary-green);
}

.wait-cond {
  background: var(--color-ti-selection-blue);
}

.wait-cond-display {
  align-items: center;
}

.hide-column {
  visibility: hidden;
}

.option-pill.active {
  background-color: var(--color-ti-secondary-blue-dark);
  color: var(--color-ti-white);
}

.hide-section {
  display: none;
}

.export-body-section {
  overflow: auto;
  height: 62vh;
}