:host {
  background-color: #fff;
  left: 0 !important;
  right: 0 !important;
  overflow: auto;
  top: 0 !important;
  width: 100%;
  height: calc(100% - 16px);
}

:host::after {
  content: "";
  clear: both;
  display: table;
}

.arrow-bottom {
  border-color: transparent transparent transparent #555555;
  border-style: solid;
  border-width: 5px;
  content: "";
  left: -11px;
  position: absolute;
  top: 1px;
}

.arrow-bottom-tilted {
  border-color: transparent transparent transparent #555555;
  border-style: solid;
  border-width: 5px;
  content: "";
  left: -11px;
  position: absolute;
  transform: rotate(45deg);
  top: 6px;
}

.bdr-btm {
  border-bottom: 1px solid #E6E6E6;
}

.bdr-rds-4 {
  border-radius: 4px !important;
}

.bg-transparent {
  background: transparent !important;
}

.button-1 {
  align-items: center;
  background-color: #02688C;
  border: 1px solid #02688C;
  border-radius: 3px;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  font-family: Roboto;
  font-size: 11px;
  height: 23px;
  justify-content: center;
  line-height: 13px;
  padding: 1px 10px;
  transition: .1s;
  -webkit-transition: .1s;
}

.button-1.disabled {
  background: #FFF;
  border: 1px solid #CCC;
  color: #CCC;
  cursor: not-allowed;
}

.button-1.unchanged {
  cursor: not-allowed;
  font-size: 10px !important;
  opacity: 0.5;
  pointer-events: none;
}

.button-1:active {
  font-size: 10px;
}

.btn-1 {
  align-items: center;
  background-color: #02688c;
  border: 1px solid #02688C;
  border-radius: 3px;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  font-family: Roboto;
  font-size: 12px;
  height: 33px;
  padding: 0 12px;
  transition: .1s;
  -webkit-transition: .1s;
  width: 130px;
}

.btn-1>img {
  margin-right: 10px;
}

.btn-1.active {
  background-color: #FFF;
  border: 1px solid #02688C;
  color: #02688C;
}

.btn-1.transition {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-1.disabled {
  background: #FFF;
  border: 1px solid #CCC;
  color: #CCC;
  cursor: not-allowed;
  opacity: 1;
}

.btn-styl-3:active {
  font-size: 11px;
}

.btn-styl-3 {
  background-color: #fff;
  border: 1px solid #c00;
  border-radius: 5px;
  color: #c00;
  cursor: pointer;
  display: flex;
  font-family: Roboto;
  font-size: 12px;
  justify-content: center;
  outline: none;
  padding: 5px 10px;
  margin-right: 10px;
}

.confirm {
  display: flex;
  justify-content: center;
  height: 45px;
}

.config-btn {
  font-size: 12px;
  left: -123px;
  padding: 12px 20px;
  position: relative;
}

.cross-outer {
  height: 18px;
  width: 18px;
  background-color: #dd0000;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}

.cross-inner {
  color: #ffffff;
  position: absolute;
  font-size: 10px;
  font-family: Roboto;
}

.custom-hght-hvariant {
  height: calc(100% - 118px);
}

.disabled {
  cursor: not-allowed !important;
  color: rgba(128, 128, 128, 0.3) !important;
}

.disabled * {
  cursor: not-allowed !important;
  color: rgba(128, 128, 128, 0.3) !important;
}

.no-click-cntr.disabled * {
  pointer-events: none;
}

.ptr-evts-none {
  pointer-events: none;
}

ti-widget-custom-toggle-switch.read-only-widget::shadow label {
  pointer-events: none;
}

.fault {
  align-items: center;
  display: flex;
  width: 126px;
}

.fault-hdr {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

.fault-button {
  display: flex;
  justify-content: flex-end;
  margin-left: 6px;
  width: calc(100% - 140px);
}

.fault-config {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: calc(100% - 300px);
  z-index: 1000;
}
.passive-config{
  align-items: center;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: calc(100% - 300px);
  z-index: 1000;
}

.fault-config-panel {
  background-color: #FFFFFF;
  border: 1px solid #979797;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  padding: 5px 2px 25px 2px;
  width: 550px;
}
.passive-config-panel{
  background-color: #FFFFFF;
  border: 1px solid #979797;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  max-height: 92%;
  padding: 2px 1px;
  width: 720px;
}
.fault-config-panel>.header {
  align-items: center;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E6E6E6;
  display: flex;
  font-size: 18px;
  font-weight: 500;
  justify-content: space-between;
  line-height: 21px;
  height: 48px;
  padding: 0 20px 0 20px;
  width: calc(100% - 2px);
}
.passive-config-panel>.header{
  align-items: center;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E6E6E6;
  display: flex;
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 500;
  justify-content: space-between;
  line-height: 21px;
  height: 48px;
  padding: 0 20px 0 20px;
  width: calc(100% - 2px);
}

.fault-config-panel>.content {
  display: flex;
  flex-wrap: wrap;
  padding: 20px 20px 0 30px;
  width: calc(100% - 1px);
}
.passive-config-panel>.content{
  align-items: center;
  display: flex;
  flex-direction: column;
  height: calc(100% - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 20px;
  width: 100%;
}
.fault-config-panel>.info {
  align-items: center;
  color: #555555;
  display: flex;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 500;
  padding: 20px 20px 0 30px;
  width: 100%;
}
.passive-config-panel>.info{
  align-items: center;
  color: #555555;
  display: flex;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 500;
  padding: 20px 20px 0 30px;
  width: 100%;
}
.fault-config-panel>.info>img {
  margin-right: 5px;
}

.fault-config-panel>.content>.toggle {
  margin-bottom: 20px;
  width: 100%;
}

.fault-config-panel>.content>* {
  height: 60px;
  width: 50%;
}
.passive-config-panel>.content>*{
  height: 60px;
  width: 50%;
}
.passive-config-panel>.content>.img-cntr {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: unset;
  position: relative;
  width: 640px;
}
.passive-config-panel>.content>.img-cntr>img{
  height: unset;
  position: relative;
}
.passive-config-panel>.content>.img-cntr>img.table{
  margin-bottom: 50px;
  width: 100%;
}
.passive-config-panel>.content>.img-cntr>img.table.independent{
  height: 145px;
}
.passive-config-panel>.content>.img-cntr>img.blk_diag{
  width: 550px;
}
.passive-config-panel>.content>.img-cntr>img.blk_diag.hb_olp_diag{
  width: 430px;
}
.passive-config-panel>.content>.img-cntr ti-widget-custom-toggle::shadow .ctrl-hdr{
  width: 65px;
}
.passive-config-panel>.content>.img-cntr>.fault-indicator,
 .passive-config-panel>.content>.img-cntr>.toggle-ctrl,
 .passive-config-panel>.content>.img-cntr>.dropdown-ctrl,
 .passive-config-panel>.content>.img-cntr>.ctrl-title,
 .passive-config-panel>.content>.img-cntr>ti-widget-custom-toggle-switch {
  position: absolute;
}
.passive-config-panel>.content>.img-cntr>.fault-indicator {
  align-items: center;
  display: flex;
}
.passive-config-panel>.content>.img-cntr>.fault-indicator>span {
  font-size: 11px;
}
.passive-config-panel>.content>.img-cntr>.rolp_pu1 {
  bottom: 233px;
  right: 598px;
}
.passive-config-panel>.content>.img-cntr>img.table.independent.hb_olp_table~.rolp_pu1 {
  bottom: 238px;
  right: 545px;
}
.passive-config-panel>.content>.img-cntr>.rolp_pu2 {
  bottom: 233px;
  left: 594px;
}
.passive-config-panel>.content>.img-cntr>.rolp_pu2>span {
  margin-left: 4px;
}
.passive-config-panel>.content>.img-cntr>img.table.independent.hb_olp_table~.rolp_pu2 {
  display: none;
}
.passive-config-panel>.content>.img-cntr>.rolp_pd1 {
  bottom: 166px;
  right: 598px;
}
.passive-config-panel>.content>.img-cntr>img.table.independent.hb_olp_table~.rolp_pd1 {
  bottom: 170px;
  right: 545px;
}
.passive-config-panel>.content>.img-cntr>.rolp_pd2 {
  bottom: 166px;
  left: 594px;
}
.passive-config-panel>.content>.img-cntr>.rolp_pd2>span {
  margin-left: 4px;
}
.passive-config-panel>.content>.img-cntr>img.table.independent.hb_olp_table~.rolp_pd2 {
  display: none;
}
.passive-config-panel>.content>.img-cntr>.olp_cmp {
  bottom: 23px;
  left: 146px;
}
.passive-config-panel>.content>.img-cntr>img.table.independent.hb_olp_table~.olp_cmp {
  bottom: 25px;
  left: 195px;
}
.passive-config-panel>.content>.img-cntr>.olp_cmp.nfault {
  left: 158px;
  bottom: 23.5px;
}
.passive-config-panel>.content>.img-cntr>img.table.independent.hb_olp_table~.olp_cmp.nfault {
  bottom: 24.5px;
  left: 200px;
}
.passive-config-panel>.content>.img-cntr>.olp_cmp>img {
  height: 27px;
}
.passive-config-panel>.content>.img-cntr>.en_in1_diag {
  bottom: 365px;
  left: 470px;
  width: 130px;
}
.passive-config-panel>.content>.img-cntr>img.table.independent.hb_olp_table~.en_in1_diag {
  left: 310px;
}
.passive-config-panel>.content>.img-cntr>img.table.independent.hb_olp_table~.en_in1_diag>ti-widget-custom-toggle::shadow .ctrl-hdr {
  width: 45px;
}
.passive-config-panel>.content>.img-cntr>.ph_in2_diag {
  bottom: 332px;
  left: 470px;
  width: 130px;
}
.passive-config-panel>.content>.img-cntr>img.table.independent.hb_olp_table~.ph_in2_diag {
  display: none;
}
.passive-config-panel>.content>.img-cntr>.s_diag {
  bottom: 345px;
  left: 53px;
}
.passive-config-panel>.content>.img-cntr>.s_diag ti-widget-custom-select::shadow select#select{
  width: 100%;
}
.passive-config-panel>.content>.img-cntr>.ctrl-title {
  bottom: 402px;
  left: 49px;
}
.passive-config-panel>.content>.img-cntr>ti-widget-custom-toggle-switch {
  left: 49px;
  bottom: 340px;
}
.passive-config-panel>.content>.img-cntr>img.table.independent.hb_olp_table~ti-widget-custom-toggle-switch {
  left: 37px;
}
.fault-config-panel>.content > ti-widget-custom-select::shadow .main-cntr {
  width: 100%;
}

.fault-config-panel>.content > ti-widget-custom-toggle::shadow .ctrl-hdr {
  width: auto;
}

.fault-config-panel>.content .table-hdr{
  align-items: center;
  color: #555;
  display: flex;
  font-size: 15px;
  font-weight: 500;
  line-height: 21px;
  height: auto;
  margin-bottom: 5px;
}
.passive-config-panel>.content .table-hdr{
  align-items: center;
  color: #555;
  display: flex;
  font-size: 15px;
  font-weight: 500;
  line-height: 21px;
  height: auto;
  margin-bottom: 5px;
}
.fault-config-panel>.content .table-content{
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
}
.passive-config-panel>.content .table-content{
  border-bottom: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  height: auto;
  width: 100%;
}

.fault-config-panel>.content .table-content .table-row{
  border-right: 1px solid #ccc;
  display: flex;
  height: 35px;
  flex-shrink: 0;
}
.passive-config-panel>.content .table-content .table-row{
  border-right: 1px solid #ccc;
  display: flex;
  height: 35px;
  flex-shrink: 0;
}
.fault-config-panel>.content .table-content .cell{
  align-items: center;
  border-left: 1px solid #ccc;
  color: #555;
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  font-size: 12px;
  justify-content: center;
}
.passive-config-panel>.content .table-content .cell{
  align-items: center;
  border-left: 1px solid #ccc;
  color: #555;
  display: flex;
  flex-grow: 1;
  flex-basis: 0;
  font-size: 12px;
  justify-content: center;
}

.fault-config-panel>.content .table-content .cell.grow-2{
  flex-grow: 2;
}

.fault-config-panel>.content .table-content .cell.title{
  background-color: #ddd;
  color: royalblue;
  font-weight: 500;
}
.passive-config-panel>.content .table-content .cell.title{
  background-color: #ddd;
  color: royalblue;
  font-weight: 500;
}
.fault-config-panel>.content .table-content .cell.sub-title{
  background-color: #eee;
  font-weight: 500;
}
.passive-config-panel>.content .table-content .cell.sub-title{
  background-color: #eee;
  font-weight: 500;
}
.diag-run-button{
  margin: 0px auto;
  justify-content: center;
  width: 150px;
}
.fault-ctr {
  align-items: center;
  display: flex;
  height: 30px;
  justify-content: space-between;
  width: 100%;
}

.fault-ctr .olp_cmp_fault_img {
  height: 26px;
}

.fault-led {
  height: 20px;
  left: -3px;
  position: relative;
  top: -3px;
  width: 22px;
}

.fault-led-2 {
  height: 20px;
  position: relative;
  top: -5px;
  width: 26px;
}

.fault-name {
  color: #555555;
  font-family: Roboto;
  font-size: 12px;
  line-height: 14px;
  width: 250px;
}

.fault-status {
  color: #555555;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  height: 16px;
  position: relative;
  top: -1px;
  width: 33px;
}

.hght-230 {
  height: 230px;
}

.main-ctrl-vds {
  position: relative;
}

.main-ctrl-vds:hover {
  cursor: pointer;
}

.main-ctrl-vgs {
  position: relative;
}

.main-ctrl-vgs:hover {
  cursor: pointer;
}

.mode-change-panel {
  background-color: #FFFFFF;
  border: 1px solid #979797;
  border-radius: 4px;
  padding: 0 30px;
  width: 1000px;
}

.mode-change-panel>.hdr {
  align-items: center;
  color: #000;
  display: flex;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 500;
  height: 50px;
  justify-content: space-between;
  width: 100%;
}

.mode-change-panel>.hdr-2 {
  align-items: center;
  color: #000;
  display: flex;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 500;
  height: 50px;
  width: 100%;
}

.mode-change-panel .motor-state-cntr>* {
  align-items: center;
  display: flex;
  height: 20px;
}

.motor-state-cntr {
  width: 280px;
}

.mode-change-panel>.img-cntr {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5px;
}

.mode-change-panel>.img-cntr>.fet-img {
  border: 1px solid #DADADA;
  cursor: pointer;
  height: 205px;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px;
  width: 300px;
}

.mode-change-panel>.img-cntr>.fet-img.active {
  border: 3px solid #C00 !important;
  padding: 3px;
}

.mode-change-panel>.img-cntr>.fet-img:hover {
  border: 3px solid rgba(204, 0, 0, 0.5);
  padding: 3px;
}

.mode-change-panel>.img-cntr>.fet-img>img {
  width: 300px;
}

.no-click-cntr {
  position: relative;
}

.padding-left-10 {
  padding-left: 10px;
}

.popup-footer-btn {
  align-items: center;
  background-color: #63666a;
  border: 1px solid #63666a;
  border-radius: 3px;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  font-family: Roboto;
  font-size: 14px;
  margin: 0 20px;
  width: 125px;
  height: 35px;
  justify-content: center;
  line-height: 13px;
  padding: 1px 10px;
  transition: .1s;
  -webkit-transition: .1s;
}

.popup-footer-btn:active {
  font-size: 13px;
}

.popup-panel>.header {
  align-items: center;
  background-color: #FFFFFF;
  border-bottom: 1px solid #E6E6E6;
  color: #C00;
  display: flex;
  font-family: Roboto;
  font-size: 22px;
  font-weight: bold;
  justify-content: center;
  line-height: 21px;
  height: 48px;
  padding: 0 20px 0 20px;
  width: calc(100% - 2px);
}

.popup {
  align-items: center;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

.popup-position {
  position: absolute;
}

.popup-panel {
  background-color: #FFFFFF;
  border: 1px solid #979797;
  border-radius: 4px;
  height: 250px;
  width: 550px;
}

#load_connection_warning_popup .popup-panel {
  height: auto;
}

.popup-panel.caution-warning {
  height: 275px;
}

.popup-panel>.content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-family: roboto;
  font-size: 16px;
  justify-content: center;
  padding: 20px 20px 0 30px;
  width: calc(100% - 1px);
  text-align: justify;
}

.hidden-controls-content{
  height: calc(100% - 118px);
  padding: 0 !important;
}

.popup-panel.caution-warning>.content {
  font-size: 15px;
  line-height: 20px;
  padding: 20px 20px 20px 30px;
  word-spacing: 2px;
}

.popup-panel.firmware-warning>.content {
  line-height: 24px;
  padding: 20px 20px 20px 30px;
  word-spacing: 1px;
}

.popup-panel>.content>* {
  height: 60px;
  width: 50%;
}

.popup-panel>.content>img {
  height: 300px;
  margin-top: 10px;
}

.popup-panel>.content>img.ind-bd {
  width: 100%;
}

.popup-panel>.content>img.ind-bd.ind-ls-image {
  width: 84.18%;
}

.popup-panel>.footer {
  align-items: center;
  background-color: #FFFFFF;
  display: flex;
  font-size: 18px;
  justify-content: center;
  line-height: 21px;
  height: 70px;
  padding: 0 20px 0 20px;
  width: calc(100% - 2px);
}

.tranparent-click-layer {
  position: absolute;
  height: 16px;
  width: 30px;
  top: 4px;
  left: 130px;
}

.hdr-1 {
  color: #118899;
  font-family: Roboto;
  font-size: 13px;
  font-weight: 500;
  height: 13px;
  line-height: 14px;
}

.hdr-2 {
  color: #CC0000;
  font-family: Roboto;
  font-size: 13px;
  font-weight: 500;
  height: 20px;
  line-height: 14px;
}

.motor-conf {
  display: flex;
  margin-bottom: 10px;
}

.hdr-3 {
  color: #000;
  font-family: Roboto;
  font-size: 13px;
  font-weight: 500;
  height: 20px;
  line-height: 14px;
}

.hdr-3.disabled {
  color: rgba(128, 128, 128, 0.6) !important
}

.hidden-ctrl-vds {
  background: rgba(242, 244, 247, 0.85);
  bottom: 66px;
  overflow: auto;
  padding: 10px;
  position: absolute;
  right: 317px;
  visibility: hidden;
}

.hidden-ctrl-vgs {
  background: rgba(242, 244, 247, 0.85);
  bottom: 66px;
  overflow: auto;
  padding: 10px;
  position: absolute;
  right: 317px;
  visibility: hidden;
}


.img-lbl-1 {
  color: #555555;
  font-family: Roboto;
  font-size: 10px;
  line-height: 14px;
  padding: 0 10px;
  text-align: center;
}

.inpt-1 {
  height: 100%;
  width: 350px;
}

.inpt-1-1 {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 25px;
}

.inpt-1-1-1 {
  height: 100%;
  width: 50%;
}

.inpt-1-2 {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0px;
  width: 100%;
}

.inpt-1-2 .tick-outer, .inpt-1-2 .cross-outer {
  left: 67px;
  position: absolute;
  top: -2px;
}

.inpt-1-3 {
  height: 170px;
  margin-bottom: 10px;
  width: 100%;
}

.inpt-1-4 {
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

.inpt-1-3-1 {
  height: 100%;
  width: 275px;
}

.inpt-1-3-2 {
  height: 100%;
  width: 137px;
}

.inpt-2 {
  border-left: 1px solid #DADADA;
  min-width: 370px;
  padding-left: 20px;
  width: calc(100% - 350px);
}
.bridge-diagram-cont {
  position: relative;
}
.bridge-config{
  margin-top:25px;
}
.inpt-2>.hdr {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.inpt-1>.hdr {
  display: flex;
  justify-content: space-between;
  height: 20px;
  margin-bottom: 7px;
  width: 100%;
}

.inpt-2-1 {
  height: calc(100% - 20px);
  width: 100%;
}

.inpt-2-1-1 {
  align-items: center;
  display: flex;
  height: 55px;
  margin-bottom: 10px;
  width: 100%;
}

.inpt-2-1-2 {
  align-items: center;
  display: flex;
  height: 70px;
  width: 100%;
}

.inpt-2-1-2 ti-widget-custom-numberbox {
  margin-left: 15px;
  margin-top: -17px;
}

.inpt-2-1-2 ti-widget-custom-numberbox::shadow .ctrl-cnt {
  margin: unset;
  width: 120px;
}

.inpt-2-1-2 ti-widget-custom-numberbox::shadow #numberbox {
  width: 50px;
  padding-left: 6px;
}

.inpt-2-1-3 {
  align-items: center;
  display: flex;
  height: 40px;
  width: 100%;
}
.bridge-image{
  height: 370px;
  width: 80%;
  max-width: 550px;
  min-width: 400px;
}
.bridge-image.ind-ls-image{
  height: 368px;
  min-width: 336.725px;
  max-width: 463px;
  position: relative;
  top: 1.5px;
  width: 67.345%;
}
.bridge-image.ind-ls-image.hb-image{
  height: 370px;
  min-width: 360px;
  max-width: 495px;
  top: 0px;
  width: 72%;
}

.lft {
  height: 100%;
  width: calc(100% - 300px);
}

.lft-cntr {
  height: 100%;
  overflow: auto;
  padding: 20px 20px 0px 20px;
}

.lft-cntr-inpt {
  display: flex;
  flex-wrap: wrap;
  height: 420px;
  min-width: 835px;
  padding: 10px 0px;
  width: 100%;
}

.lft-cntr-otpt {
  background-color: #F7F7F7;
  border: 2px dashed #DADADA;
  border-radius: 2px;
  display: flex;
  height: 320px;
  min-width: 835px;
  padding: 10px 10px 0px 10px;
  width: 100%;
}

.lft-hdr {
  align-items: center;
  background-color: #FFFFFF;
  border: 1px solid #E6E6E6;
  box-shadow: 0 3px 9px 0 rgba(85, 85, 85, 0.08);
  color: #CC0000;
  display: flex;
  font-family: Roboto;
  font-size: 16px;
  font-weight: bold;
  height: 55px;
  line-height: 19px;
  padding: 0px 20px;
  width: 100%;
  justify-content: space-between
}

.mar-btm-5 {
  margin-bottom: 5px;
}

.mar-btm-10 {
  margin-bottom: 10px;
}

.mar-rght-30 {
  margin-right: 30px;
}

.mar-rght-5 {
  margin-right: 5px;
}

.mar-left-5 {
  margin-left: 5px;
}

.mar-left-auto {
  margin-left: auto;
}

.mode-cntr {
  border: 1px solid #DADADA;
  display: flex;
  flex-wrap: wrap;
  height: calc(100% - 20px);
  margin-right: 20px;
  padding: 7px 0;
  position: relative;
}

.mode-img-cntr {
  align-items: center;
  display: flex;
  height: calc(100% - 12px);
  justify-content: space-evenly;
  width: 100%;
}

.mode-img-1 {
  background-color: #FFFFFF;
  border: 1px solid #DADADA;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  height: 100px;
  justify-content: center;
  width: 80px;
}

.mode-img-1.active {
  background-color: rgba(50, 155, 70, 0.63);
  border: 1px solid #329B46;
  border-radius: 3px;
}


.mode-img-1>img {
  height: 44px;
  margin-top: 10px;
  width: 44px;
}

.mode-img-2 {
  align-items: center;
  background-color: #FFFFFF;
  border: 1px solid #DADADA;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  height: 100px;
  justify-content: center;
  width: 110px;
}

.mode-img-2.active {
  background-color: rgba(50, 155, 70, 0.63);
  border: 1px solid #329B46;
  border-radius: 3px;
}

.mode-img-2>img {
  height: 55px;
  width: 55px;
}

.motor-connection-edit {
  cursor: pointer;
  opacity: 0.7;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.opacity-05 {
  opacity: 0.5;
}

.otpt-1 {
  width: 475px;
}

.otpt-2 {
  width: 336px;
}

.otpt-2-1 {
  align-items: center;
  border: 1px solid rgba(2, 104, 140, 0.5);
  border-radius: 2px;
  display: flex;
  height: calc(100% - 40px);
  position: relative;
}

.otpt-2-1-1 {
  position: relative;
  width: 350px;
}

.rad {
  display: flex;
  width: 85%;
}

.rad>.hdr {
  color: #555555;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 500;
  line-height: 14px;
  margin-right: 10px;
}

.rad>.val {
  display: flex;
}

.rad>.val>.cir {
  background-color: #FFFFFF;
  border: 1px solid #98999B;
  border-radius: 50%;
  cursor: pointer;
  height: 14px;
  margin-right: 5px;
  position: relative;
  top: -1px;
  width: 14px;
}

.rad>.val>.cir.active {
  border: 4px solid #02688C;
  border-radius: 50%;
  height: 14px;
  width: 14px;

}

.rad>.val>.disp {
  color: #555555;
  font-family: Roboto;
  font-size: 11px;
  line-height: 14px;
  margin-right: 5px;
}

.red-txt {
  color: #c00;
}

.rght {
  height: 100%;
  width: 300px;
}

.rght-cntr {
  background-color: rgba(242, 244, 247, 0.85);
  height: calc(100% - 125px);
  padding-top: 20px;
  width: 100%;
}
.rght-cntr0 {
  background-color: rgba(242, 244, 247, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 80px;
  width: 100%;
  padding: 10px;
}

.rght-cntr .hdr-1 {
  margin: 0px 12px;
}

.rght-ctr-1 {
  display: flex;
  height: 125px;
  justify-content: space-between;
  padding: 15px 10px 20px 10px;
  width: 100%;
}

.rght-ctr-1>.ctr-1-1 {
  background-color: #FFFFFF;
  border: 1px solid #DADADA;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  height: 90px;
  padding: 0 8px;
  width: 135px;
}

.rght-ctr-1>.ctr-1-1>.hdr {
  align-items: center;
  color: #333333;
  display: flex;
  font-family: Roboto;
  font-size: 12px;
  height: 35px;
  justify-content: space-between;
  line-height: 15px;
  width: 100%;
}

.rght-ctr-1>.ctr-1-1>.cntr {
  display: flex;
  flex-wrap: nowrap;
}

.rght-ctr-1>.ctr-1-1>.cntr>.val {
  color: #02688C;
  font-family: Roboto;
  font-size: 28px;
  font-weight: bold;
  line-height: 47px;
}

.rght-ctr-1>.ctr-1-1>.cntr>.unit {
  color: #555555;
  font-family: Roboto;
  font-size: 16px;
  left: 3px;
  line-height: 19px;
  position: relative;
  top: 18px;
}
.firmware-version {
  display: flex;
  width: 100%;
}

.firmware-version>.hdr {
  color: #555555;
  font-family: Roboto;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
  padding: 1px 0px;
  width: 145px;
}

.firmware-version>.value {
  color: #555555;
  font-family: Roboto;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 5px;
  padding: 1px 0px;
  width: 115px;
}

.rght-ctr-2 {
  height: calc(100% - 138px);
}

.rght-ctr-2-cnt {
  height: calc(100% - 45px);
  padding: 15px 5px 0px 20px;
  overflow-y: scroll;
}

.rght-ctr-2-hdr {
  align-items: center;
  background-color: #B9E5FB;
  display: flex;
  height: 45px;
  justify-content: space-between;
  padding: 15px 13px;
  width: 100%;
}

.rght-hdr {
  align-items: center;
  background-color: #B9E5FB;
  color: #555555;
  display: flex;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 500;
  height: 45px;
  line-height: 19px;
  padding-left: 13px;
  width: 100%;
}

.route-btns-cntr {
  display: flex;
}

.flex-cntr {
  align-items: center;
  display: flex;
}

.select-cntr {
  display: flex;
  flex-wrap: wrap;
  padding-left: 28px;
}

.select-cntr>.lbl {
  color: #555555;
  font-family: Roboto;
  font-size: 12px;
  font-weight: 500;
  position: relative;
  top: 3px;
  width: 50px;
}

.select-cntr-1 {
  display: flex;
  flex-wrap: wrap;
  height: 45px !important;
}

.select-cntr-1>.lbl {
  color: #555555;
  font-family: Roboto;
  font-size: 12px;
  font-weight: 500;
  position: relative;
  top: 3px;
  width: 95px;
}

.select-cntr>.lbl.disabled {
  color: rgba(128, 128, 128, 0.4) !important;
  cursor: default !important;
  opacity: 1;
}

.select-cntr>.slct {
  position: relative;
  top: -3px;
  width: 125px;
}

.select-cntr-1>.slct {
  position: relative;
  top: -3px;
  width: 125px;
}

.slider-cntr {
  height: 100%;
  max-width: 300px;
  width: calc(100% - 150px);
  min-width: 200px;
}

.slider-cntr.rev-scale ti-widget-custom-slider::shadow ti-widget-slider#slider::shadow ti-widget-ruler#ruler::shadow #tickContainer {
  flex-direction: row-reverse;
}

.slider-cntr.pwm~.pwm_text {
  align-self: center;
  border: 1px solid #ddd;
  color: #cc0000;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 12px;
  margin-left: 20px;
  max-width: 335px;
  min-width: 200px;
  padding: 4px;
  width: 38%;
}

.warn_red_text {
  border: 1px solid #c00;
  color: #cc0000;
  flex-shrink: 0;
  font-size: 13px;
  margin-right: 10px;
  padding: 4px;
  max-width: calc(100% - 10px);
  text-align: center;
}

.tbl {
  margin-right: 10px;
}

.tbl-cntr {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 20px;
  width: 100%;
}

.tb-hdr-1 {
  background-color: #D9F1F4;
  border: 1px solid #DFDFDF;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 12px 0 rgba(1, 61, 123, 0.07);
  color: #02688C;
  display: flex;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 500;
  height: 40px;
  line-height: 14px;
  width: 220px;
}

.tb-hdr-1>* {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 44px;
}

.tb-hdr-2 {
  background-color: #D9F1F4;
  border: 1px solid #DFDFDF;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 12px 0 rgba(1, 61, 123, 0.07);
  color: #02688C;
  display: flex;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 500;
  height: 40px;
  line-height: 14px;
  width: 459px;
}

.tb-hdr-2>* {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 51px;
}

.tb-cnt-1 {
  background-color: #FFF;
  border: 1px solid #DFDFDF;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 12px 0 rgba(1, 61, 123, 0.07);
  color: #555555;
  display: flex;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 500;
  height: 40px;
  line-height: 14px;
  width: 220px;
}

.tb-cnt-1.active {
  background-color: #F3CD34;
  border-radius: 2px;
}

.tb-cnt-1>* {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 44px;
}

.tb-cnt-2 {
  background-color: #FFF;
  border: 1px solid #DFDFDF;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 0 12px 0 rgba(1, 61, 123, 0.07);
  color: #555555;
  display: flex;
  font-family: Roboto;
  font-size: 11px;
  font-weight: 500;
  height: 40px;
  line-height: 14px;
  width: 459px;
}

.tb-cnt-2.active {
  background-color: #F3CD34;
  border-radius: 2px;
}

.tb-cnt-2>* {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 51px;
}

.tbl-name {
  color: #999999;
  font-family: Roboto;
  font-size: 12px;
  font-weight: bold;
  line-height: 14px;
  margin-bottom: 5px;
}

.tick-outer {
  background-color: #4CAF50;
  border-radius: 20px;
  height: 18px;
  position: relative;
  width: 18px;
}

.tick-inner {
  border-color: #FFFFFF;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  height: 8px;
  left: 7px;
  position: absolute;
  transform: rotate(45deg);
  top: 4px;
  width: 4px;
}

.warning-outer {
  height: 18px;
  width: 18px;
  background-color: #f3cd34;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}

.warning-inner {
  color: #ffffff;
  position: absolute;
  font-size: 10px;
  font-family: Roboto;
}

.wid-75 {
  width: 75px;
}

.wid-80 {
  width: 80px;
}

.wid-100 {
  width: 100px;
}

.wid-100-per {
  width: 100% !important;
}

.wid-140 {
  width: 140px;
}

.wid-459 {
  width: 459px;
}

.wid-120 {
  width: 120px;
}

.pos_relative {
  position: relative;
}

#ti_widget_custom_toggle_direction_1 {
  margin: 4px 0px 12px 0px;
}

.inpt-1-1-1 ti-widget-custom-toggle ::shadow .lft-rght-cntr .ctrl-hdr  {
  width: 140px;
}

.hidden-key-popup{
  width: 100%;
  height: 100%;
}

.hidden-key-popup-close{
  height: 30px;
  position: absolute;
  right: 50px;
  cursor: pointer;
}

.hidden-key-popup-header{
  justify-content: space-evenly;
  align-items: center;
}

.control-label{
 height: 20px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.margin-bottom-5{
  margin-bottom: 5px;
}

.block-diagram-label{
  position: absolute;
  left: 147px;
  margin-top: 15px;
  text-align: center;
}

.visible{
  visibility: visible;
}

.hidden{
  visibility: hidden;
}