:host {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: auto;
}
:host::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
:host::-webkit-scrollbar-track {
  background: #CCC;
  border-radius: 10px;
}
:host::-webkit-scrollbar-thumb {
  background: #FFF;
  border-radius: 10px;
  box-shadow: inset 0px 0px 1px 1px #DDD;
}

.cmd-seq-cont {
  position: relative;
  width: 100%;
  height: calc(100% - 45px);
}

/* Edit popup */

.cmd-seq-edit-wrapper, .cmd-seq-file-load-warning-wrapper {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 10;
}

.cmd-seq-edit-cont {
  width: 900px;
  height: calc(100% - 300px);
  min-height: 350px;
  padding: 40px;
  background-color: #FFF;
}

.cmd-seq-edit-title{
  min-width: 100px;
}

.cmd-seq-edit-sec {
  width: 100%;
  height: calc(100% - 80px);
  padding: 10px;
}
.cmd-seq-edit-sec::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.cmd-seq-edit-sec::-webkit-scrollbar-track {
  background: #CCC;
  border-radius: 10px;
}
.cmd-seq-edit-sec::-webkit-scrollbar-thumb {
  background: #FFF;
  border-radius: 10px;
  box-shadow: inset 0px 0px 1px 1px #DDD;
}
.button-container {
  margin-bottom: 5px;
}
.cmd-seq-edit-sec-table-cont {
  flex: 1;
  box-shadow: 0px 0px 2px 0px #999;
  overflow: auto;
  scroll-behavior: smooth;
}
.cmd-seq-edit-sec-table-cont::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.cmd-seq-edit-sec-table-cont::-webkit-scrollbar-track {
  background: #CCC;
  border-radius: 10px;
}
.cmd-seq-edit-sec-table-cont::-webkit-scrollbar-thumb {
  background: #FFF;
  border-radius: 10px;
  box-shadow: inset 0px 0px 1px 1px #DDD;
}

.cmd-seq-edit-table {
  width: 100%;
  border-collapse: collapse;
}

.cmd-seq-edit-header {
  height: 50px;
}

.cmd-seq-edit-header-cell {
  color: #229cc6;
  font-size: 16px;
  text-align: center;
  border: none;
}
.cmd-seq-edit-header-cell.type {
  min-width: 80px;
}
.cmd-seq-edit-header-cell.dev-addr {
  min-width: 90px;
}
.cmd-seq-edit-header-cell.reg-addr {
  min-width: 90px;
}
.cmd-seq-edit-header-cell.length {
  min-width: 80px;
}
.cmd-seq-edit-header-cell.data {
  min-width: 80px;
}

.cmd-seq-edit-body {
  height: 34px;
}
.cmd-seq-edit-body.highlight {
  background-color: #36F !important;
}
.cmd-seq-edit-body:nth-child(odd) {
  background-color: #EEE;
}

.cmd-seq-edit-body-cell {
  text-align: center;
  white-space: nowrap;
}
.cmd-seq-edit-body-cell.data {
  padding-left: 20px;
  text-align: left;
}

.cmd-seq-edit-sec-inputs {
  flex: 1;
  padding-left: 20px;
}

.cmd-seq-edit {
  width: 100%;
  margin-bottom: 15px;
  color: #666;
}

.cmd-seq-edit-value {
  margin-left: 30px;
}

.cmd-seq-edit-input {
  height: 33px;
  padding: 0px 5px;
  border: 1px solid #CCC;
  border-radius: 3px;
}

.cmd-seq-edit-input {
  width: 200px;
}
.cmd-seq-edit-input:disabled {
  cursor: no-drop;
}
.cmd-seq-edit-input.invalid {
  border: 1px solid #D00;
  box-shadow: 0px 0px 10px 1px #D00;
}

.cmd-seq-edit-btn, .cmd-seq-file-load-warning-btn {
  width: 100px;
  height: 40px;
  margin: 30px 10px 0px 10px;
  color: #FFF;
}
.cmd-seq-edit-btn.ok,  .cmd-seq-file-load-warning-btn {
  background-color: #02688C;
}
.cmd-seq-edit-ok-btn:active, .cmd-seq-file-load-warning-btn:active {
  box-shadow: 0px 0px 3px 1px #02688C;
}
.cmd-seq-edit-btn.delete {
  background-color: #D00;
}
.cmd-seq-edit-btn.delete:active {
  box-shadow: 0px 0px 3px 1px #D00;
}

/*  */

.cmd-seq-file-load-warning-cont {
  padding: 40px;
  background-color: #FFF;
}

.cmd-seq-file-load-warning-sec {
  font-size: 18px;
}

.cmd-seq-file-load-warning-icon {
  width: 40px;
  height: 40px;
  margin-right: 20px;
  color: #F90;
}

.cmd-seq-file-load-warning-btn-cont {
  justify-content: flex-end;
}

.cmd-seq-file-load-warning-btn {
  margin-left: 30px;
}

.cmd-seq-header {
  height: 60px;
  box-shadow: 0px 0px 10px 1px #CCC;
}

.cmd-seq-title {
  margin-left: 30px;
  color: #D00;
  font-size: 16px;
  font-weight: 600;
}

.cmd-seq-wrapper {
  width: 100%;
  height: calc(100% - 60px);
  overflow: auto;
}
.cmd-seq-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.cmd-seq-wrapper::-webkit-scrollbar-track {
  background: #CCC;
  border-radius: 10px;
}
.cmd-seq-wrapper::-webkit-scrollbar-thumb {
  background: #FFF;
  border-radius: 10px;
  box-shadow: inset 0px 0px 1px 1px #DDD;
}

.cmd-seq-content {
  width: 100%;
  height: 100%;
  min-height: 762px;
  padding: 30px;
}

.cmd-frame-title, .cmd-diag-title, .log-sett-title {
  margin-bottom: 30px;
  color: #666;
  font-size: 15px;
  font-weight: 600;
}

.cmd-frame-item, .cmd-diag-item, .log-sett-item {
  margin-bottom: 25px;
  color: #666;
}

.log-sett-item {
  min-height: 33px;
}

.cmd-frame-item-value, .cmd-diag-item-list, .log-sett-item-value {
  margin-left: 30px;
}

.cmd-diag-item{
  min-height: 120px;
}

.cmd-diag-item-list{
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.cmd-diag-tip{
  display: flex;
}
.cmd-diag-info{
  margin-left: 10px;
  color: #999999;
  font-size: 14px;
}

.file-seq-input, .cmd-frame-item-input, .log-sett-item-input {
  height: 33px;
  padding: 0px 5px;
  border: 1px solid #CCC;
  border-radius: 3px;
}

.cmd-file-slot{
  position: relative;
  width: 160px;
  height: 40px;
  margin: 10px;
  padding: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background-color: #F7F7F7;
  border: 1px dashed rgba(151,151,151,0.4);
  border-radius: 4px;	
  cursor: pointer;
}
.cmd-file-slot span{
  color: #999999;
  font-size: 12px;
}

.slot-filled {
  border: 1px solid rgba(152,153,155,0.7);
  border-radius: 4px;
  background-color: #02688C;
}

.slot-filled span {
  width: calc(100% - 12px);
  color: #FFF;
  font-size: 12px;
  font-weight: 500;
  background: #02688C;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-filled .icon-clear {
  display: none;
  width: 16px;
  height: 16px;
  padding: 0px;
  padding-right: 1px;
  color: #02688c;
  font-weight: 600;
  background-color: #FFF;
  border-radius: 50%;
}
.slot-filled:hover .icon-clear {
  display: block;
}
.slot-filled .icon-clear:hover {
  color: #FFF;
  background-color: #d00;
}

.cmd-file-seq-dialog{
  padding: 20px;
}

.qf-pop-title {
  min-width: 140px;
}

.cmd-file-seq-dialog-action{
  color: #FFF!important;
  background-color: #329b46;
  height: 34px;
  margin: 10px;
}

.cmd-file-seq-dialog-cancel{
  color: #329b46;
  height: 34px;
  margin: 10px;
}

.cmd-file-seq-dialog-header{
  margin: 10px 0px 30px 0px;
  color: #D00;
  font-size: 20px;
}

.cmd-file-seq-dialog-content {
  margin-bottom: 0px;
}

.cmd-file-popup-content{
  width: 420px;
}
.cmd-file-seq-input{
  width: 250px;
}
.seq-file-path-input:read-only{
  cursor: not-allowed;
}

.cmd-diag-sec, .log-sett-sec {
  height: 100%;
  margin-bottom: 10px;
  box-shadow: 0px 0px 2px 0px #999;
  overflow: auto;
  scroll-behavior: smooth;
}
.cmd-diag-sec::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.cmd-diag-sec::-webkit-scrollbar-track {
  background: #CCC;
  border-radius: 10px;
}
.cmd-diag-sec::-webkit-scrollbar-thumb {
  background: #FFF;
  border-radius: 10px;
  box-shadow: inset 0px 0px 1px 1px #DDD;
}
.log-sett-sec::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.log-sett-sec::-webkit-scrollbar-track {
  background: #CCC;
  border-radius: 10px;
}
.log-sett-sec::-webkit-scrollbar-thumb {
  background: #FFF;
  border-radius: 10px;
  box-shadow: inset 0px 0px 1px 1px #DDD;
}

.cmd-frame-cont {
  min-width: 440px;
}

.file-seq-input{
  width: 300px;
}

.cmd-frame-item-input {
  width: 200px;
}
.cmd-frame-item-input:disabled {
  cursor: no-drop;
}
.cmd-frame-item-input.invalid {
  border: 1px solid #D00;
  box-shadow: 0px 0px 10px 1px #D00;
}

.cmd-frame-action {
  width: 300px;
  height: 34px;
  margin-top: 20px;
  color: #FFF;
  background-color: #329b46;
}
.cmd-frame-action:active {
  box-shadow: 0px 0px 3px 1px #329b46;
}

.cmd-diag-cont {
  min-width: 665px;
  padding: 0px 60px;
}

.cmd-diag-action {
  width: 200px;
  height: 34px;
  margin-bottom: 20px;
  color: #FFF;
  background-color: #02688C;
}
.cmd-diag-action:active, .slot-filled:active {
  box-shadow: 0px 0px 3px 1px #02688C;
}

.cmd-diag {
  width: 100%;
  border-collapse: collapse;
}

.cmd-diag-header {
  height: 50px;
}

.cmd-diag-header-cell {
  color: #229cc6;
  font-size: 16px;
  text-align: center;
  border: none;
}
.cmd-diag-header-cell.type {
  min-width: 100px;
}
.cmd-diag-header-cell.dev-addr {
  min-width: 100px;
}
.cmd-diag-header-cell.reg-addr {
  min-width: 100px;
}
.cmd-diag-header-cell.length {
  min-width: 100px;
}
.cmd-diag-header-cell.data {
  min-width: 100px;
}

.cmd-diag-body {
  height: 34px;
}
.cmd-diag-body.highlight {
  background-color: #36F !important;
}
.cmd-diag-body:nth-child(odd) {
  background-color: #EEE;
}

.cmd-diag-body-cell {
  text-align: center;
  white-space: nowrap;
}
.cmd-diag-body-cell.data {
  padding: 0px 20px;
  text-align: center;
  word-spacing: 10px;
}

.cmd-diag-op-cont, .log-sett-op-cont {
  min-height: 110px;
}

.cmd-diag-op, .log-sett-op {
  margin: 0px 10px;
  padding: 10px 5px;
  cursor: pointer;
}
.cmd-diag-op:active .cmd-diag-op-icon, .log-sett-op:active .log-sett-op-icon {
  box-shadow: 0px 0px 15px 1px #999;
}
.cmd-diag-op:active .cmd-diag-op-title, .log-sett-op:active .log-sett-op-title {
  text-shadow: 0px 0px 10px #666;
}
.cmd-diag-op.inactive, .log-sett-op.inactive {
  pointer-events: none;
}
.cmd-diag-op.inactive .cmd-diag-op-icon, .log-sett-op.inactive .log-sett-op-icon {
  background-color: #666;
}
.cmd-diag-op.inactive .cmd-diag-op-title, .log-sett-op.inactive .log-sett-op-title {
  color: #666;
}

.cmd-diag-op-icon, .log-sett-op-icon {
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px;
  color: #FFF;
  background-color: #D00;
  border-radius: 50%;
}

.cmd-diag-op-title, .log-sett-op-title {
  color: #333;
  font-weight: 600;
}

.cmd-diag-op-title {
  height: 34px;
}

.log-sett-cont {
  width: 100%;
  max-width: 715px;
  min-width: 530px;
}

.log-sett-item-value {
  width: calc(100% - 200px);
}

.log-sett-item-input-wrapper {
  width: 100%;
}

.log-sett-item-input {
  width: 100%;
}

.auto-log-path-wrapper {
  width: calc(100% - 45px);
}

.auto-log-path {
  flex-direction: row-reverse;
  padding: 0px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.log-sett-log-path-icon {
  min-width: 30px;
  height: 30px;
  margin-left: 15px;
  color: #02688C;
}
.add{
  margin-left: 15px;
  color: #329b46;
  cursor: pointer;
}
.remove {
  margin-left: 15px;
  color: #D00; 
  cursor: pointer;
}
.custom-seq-btn.disabled {
  background-color: #fff !important;
  color: #999 ;
}

.log-sett-log-path-icon:active {
  text-shadow: 0px 0px 1px #02688C;
}

#log-path, .hidden {
  display: none;
}

.log-sett-params-cont {
  min-height: 28px;
  margin-bottom: 40px;
}

.log-sett-param {
  margin: 5px 10px;
}

.log-sett-param-input {
  --paper-checkbox-checked-color: #02688C;
  --paper-checkbox-checked-ink-color: #02688C;
  --paper-checkbox-unchecked-color: #02688C;
  --paper-checkbox-unchecked-ink-color: #02688C;
}

#header-table{
  display: block;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: hidden;
}
#content-table{
  display: block;
  overflow: auto;
  height: calc(100% - 60px);
  padding: 0px 10px 10px 10px;

}
#content-table::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#content-table::-webkit-scrollbar-track {
  background: #CCC;
  border-radius: 10px;
}
#content-table::-webkit-scrollbar-thumb {
  background: #FFF;
  border-radius: 10px;
  box-shadow: inset 0px 0px 1px 1px #DDD;
}

.trans-log {
  border-collapse: collapse;
}

.trans-log-header {
  height: 60px;
}

.trans-log-header-cell {
  color: #229cc6;
  font-size: 16px;
  text-align: center;
  border: none;
}
.trans-log-header-cell.timestamp {
  min-width: 200px;
}
.trans-log-header-cell.cmd {
  min-width: 100px;
}
.trans-log-header-cell.dev-addr {
  min-width: 100px;
}
.trans-log-header-cell.reg-addr {
  min-width: 100px;
}
.trans-log-header-cell.length {
  min-width: 100px;
}
.trans-log-header-cell.data {
  min-width: 100px;
}

.trans-log-body {
  height: 34px;
}
.trans-log-body:nth-child(odd) {
  background-color: #EEE;
}

.trans-log-body-cell {
  text-align: center;
  white-space: nowrap;
}
.trans-log-body-cell.data {
  padding: 0px 20px;
  text-align: center;
  word-spacing: 10px;
}

.interface-text{
  margin-left: 50px;
  font-size: 15px;
  font-weight: 600;
  color: gray;
}