:host {
  background-color: var(--color-ti-primary-white);
  border-radius: 13px;
  bottom: 28px;
  box-shadow: 7px 7px 133px 0 var(--color-ti-bg-grey);
  display: block;
  max-height: 0px;
  max-width: min(90%, 800px);
  opacity: 0;
  overflow: hidden;
  padding: 10px 20px;
  position: absolute;
  right: 8px;
  transition: all 0.5s ease;
  width: 100%;
  --paper-checkbox-unchecked-background-color: #ffffff;
  --paper-checkbox-checked-color: #329b46;
  --paper-toggle-button-checked-bar-color: #329b46;
  --paper-toggle-button-checked-button-color: white;
  --paper-radio-button-label-color: #555555;
  --paper-radio-button-unchecked-color: #dfe1e5;
  --paper-radio-button-unchecked-background-color: white;
  --paper-radio-button-checked-color: #329b46;
}

:host([active]) {
  max-height: 700px;
  opacity: 1;
  z-index: 2;
}

.pmbus-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 600px;
}

.close-icon {
  color: var(--color-ti-secondary-grey-dark);
  cursor: pointer;
  height: 18px;
  width: 18px;
}

.card-container {
  background-color: var(--color-ti-bg-grey-02);
  border: 1px solid var(--color-ti-bg-grey);
  border-radius: 5px;
  height: 250px;
}

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

.command-outputs-body {
  height: 180px;
  display: block;
  overflow: auto;
  scroll-behavior: smooth;
  border-bottom: 1px solid var(--color-ti-bg-grey);
}

.command-outputs {
  border-collapse: collapse;
  color: var(--color-ti-secondary-grey-dark);
  font-size: 11px;
  width: 100%;
}

.command-outputs-controls {
  font-size: 9px;
  font-weight: 700;
  padding: 0px 15px;
  color: var(--color-ti-secondary-blue-light);
}

.command-outputs-controls .button {
  cursor: pointer;
}

.command-outputs-controls .icon {
  height: 12px;
  width: 20px;
}

.command-outputs th {
  background-color: var(--color-ti-bg-grey);
  padding-left: 20px;
}

.command-outputs .col_time,
.command-outputs .col_type {
  width: 100px;
}

.command-outputs thead th:first-child {
  min-width: 165px;
  padding-left: 20px;
}

.command-outputs thead th:last-child {
  min-width: 80px;
}

.command-outputs td {
  font-family: "Courier New", Courier, monospace;
}

.command-outputs th,
.command-outputs td {
  padding: 10px 0px;
}

.command-outputs th,
.command-outputs td {
  padding-left: 22px;
  word-break: break-word;
}

.custom-command-title {
  color: var(--color-ti-secondary-grey-dark);
  font-size: 11px;
  padding: 15px 0px;
}

.custom-command {
  display: flex;
  gap: 7px;
  justify-content: space-between;
  padding: 5px 20px 0px 20px;
}

.custom-command .item {
  padding: 10px 0px 0px 0px;
}

.custom-command label {
  color: var(--color-ti-text-grey-dark);
  font-size: 9px;
  font-weight: bold;
}

.custom-command input {
  border: 1px solid var(--color-ti-border-grey);
  border-radius: 3px;
  color: var(--color-ti-secondary-grey);
  font-size: 11px;
  font-weight: bold;
  height: 29px;
  outline: unset;
  padding: 10px;
  width: 89px;
}

.custom-command .input-prepend {
  border: 1px solid var(--color-ti-border-grey);
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  color: var(--color-ti-secondary-grey);
  font-size: 11px;
  font-weight: bold;
  height: 29px;
  padding: 0 5px;
}

.radio-inputs paper-radio-button {
  padding: 0px !important;
  color: var(--color-ti-text-grey-dark);
  font-size: 9px;
  font-weight: bold;
}

.radio-inputs paper-radio-button ::shadow #radioLabel.paper-radio-button {
  margin-left: 5px;
}

.radio-btn {
  display: flex;
  flex-direction: row;
  gap: 10px;
  color: var(--color-ti-secondary-grey);
  font-size: 11px;
  font-weight: bold;
}

.custom-command input::placeholder {
  color: var(--color-ti-secondary-grey);
  opacity: 0.5;
}

.custom-command .btn {
  font-size: 9px;
  font-weight: bold;
  height: 22px;
  margin-top: 10px;
  min-width: unset;
  outline: unset;
  width: 80px;
}

.custom-command-exe-info {
  color: var(--color-ti-indicator-green);
  gap: 10px;
  height: 40px;
  opacity: 0;
  overflow: hidden;
  padding: 2px 8px;
  transition: all 0.5s ease;
}

.custom-command-exe-info.red {
  color: var(--color-ti-indicator-red);
}

.custom-command-exe-info::before {
  background-color: var(--color-ti-indicator-green);
  border-radius: 5px;
}

.custom-command-exe-info.red::before {
  background-color: var(--color-ti-indicator-red);
}

.custom-command-exe-info.show-msg {
  opacity: 1;
}

.custom-command-exe-info .msg {
  font-size: 12px;
  font-weight: bold;
  line-height: 20px;
}

.custom-command-exe-info iron-icon {
  display: none;
}

.custom-command-exe-info.red .error {
  display: block;
}

.custom-command-exe-info.green .success {
  display: block;
}

.logging-indicator {
  padding: 5px 15px;
}

.logging-indicator::before {
  border-radius: 14px;
}

.logging-indicator span {
  font-size: 9px;
  font-weight: bold;
}

.logging-indicator iron-icon {
  margin-right: 4px;
  width: 8px;
}

.enable-logging {
  color: var(--color-ti-secondary-grey-dark);
}

.enable-logging .checkbox {
  --paper-checkbox-checked-color: var(--color-ti-secondary-green);
  height: 15px;
  width: 15px;
  margin-right: 4px;
  margin-top: 9px;
}

.enable-logging .checkbox::shadow #checkboxContainer #checkbox {
  border: 2px solid var(--color-ti-border-grey);
  border-radius: 3px;
  height: 15px;
  width: 15px;
}

.enable-logging .checkbox::shadow #checkboxContainer #checkbox.checked {
  border-color: var(--color-ti-secondary-green);
}

.enable-logging .checkbox::shadow #checkboxContainer {
  height: 15px;
  min-width: 15px;
  width: 15px;
}

.options {
  gap: 15px;
}

.command-tab-header {
  height: 30px;
  background-color: var(--color-ti-primary-white);
  border-bottom: 0.5px solid var(--color-ti-primary-red);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.command-tab-title {
  color: var(--color-ti-text-grey-dark);
  font-family: Roboto;
  font-size: 11px;
  font-weight: 600;
  width: 100px;
}

.command-tab-title.selected::before {
  background-color: var(--color-ti-indicator-red);
}

.command-tab-title.selected {
  color: var(--color-ti-primary-red);
}