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

.bfd-container {
  background-color: var(--color-ti-primary-white);
  box-shadow: 5px 5px 40px 0 var(--color-ti-shadow-grey);
  height: 92%;
  width: 100%;
}

.bfd-auto-read {
  width: 28%;
}

.bfd-clear-all {
  width: 18%;
}

.bfd-grey-container {
  border: 0.5px dashed var(--color-ti-text-grey);
  border-radius: 6px;
  background-color: var(--color-ti-bg-grey-03);
}

.bfd-left {
  height: calc(100% - 6%);
  width: 65%;
}

.bfd-main {
  height: 100%;
  min-height: 650px;
  min-width: 1100px;
  width: 100%;
}

.bfd-mode {
  max-width: 250px;
  width: 32%;
}

.bfd-right {
  margin-top: 3%;
  height: calc(100% - 6% - 5%);
  width: calc(100% - 65% - 4%);
}

.black-font {
  color: var(--color-ti-primary-black);
  font-size: 13px;
}

.border-right {
  border-right: 0.9px dashed var(--color-ti-text-grey);
  height: 60%;
}

.bfd-status {
  width: 22%;
}

.border-bottom {
  border-bottom: 0.9px dashed var(--color-ti-text-grey);
  margin-top: 1px;
}

.change-mode:hover {
  transform: scale(1.1);
}

.clear-all:hover {
  transform: scale(1.05);
}

.clear-icon {
  height: 22px;
  width: 30px;
}

.clear-icon.grey-icon:hover {
  color: var(--color-ti-primary-black) !important;
  transform: scale(1.2);
}

.clear-icon.grey-icon {
  color: var(--color-ti-secondary-grey-dark);
}

.common-page-container.breadcrumb-mrg {
  margin-top: 45px;
  height: calc(100% - 45px - 50px);
}

.faults-block {
  height: calc(100% - 75px - 7%);
  width: 95%;
}

.fault-desc {
  color: var(--color-ti-secondary-grey);
  font-weight: 500;
  line-height: 18px;
  width: 90%;
}

.fault-name {
  width: 90px;
}

.fault-row {
  height: calc(100% / 8);
  width: 100%;
}

.fault-row.element:hover {
  background-color: var(--color-ti-bg-grey-04);
}

.fault-row.selected {
  background-color: rgba(204, 0, 0, 0.1);
}

.fault-status {
  background-color: var(--color-ti-bg-grey-04);
  border-radius: 17.1px;
  height: 34.2px;
  line-height: 34.2px;
  min-width: 105px;
}

.fault-tab {
  border-radius: 13px;
  font-size: 11px;
  font-weight: 500;
  height: 27px;
  line-height: 25px;
  width: 75px;
}

.fault-tab.faulty {
  border: 2px solid var(--color-ti-indicator-red);
  color: var(--color-ti-indicator-red);
}

.fault-tab.normal {
  border: 2px solid var(--color-ti-indicator-green);
  color: var(--color-ti-indicator-green);
}

.faults-table {
  border-spacing: 0;
  height: 100%;
  width: 100%;
}

.header-block {
  height: 75px;
  width: 95%;
}

.header-row {
  height: 10%;
  font-size: 13px;
}

.indicator-circle {
  border-radius: 5px;
  height: 11px;
  margin-bottom: 1px;
  width: 11px;
}

.indicator-circle.small {
  height: 8px;
  width: 8px;
}

.indicator-circle.faulty {
  background-color: var(--color-ti-indicator-red);
}

.indicator-circle.normal {
  background-color: var(--color-ti-indicator-green);
}

.mrg-5 {
  margin-right: 5px;
}

.mode-icon {
  height: 20px;
  width: 30px;
}

.pad-left-2 {
  padding-left: 2%;
}

.pad-right-2 {
  padding-right: 2%;
}

.page-title {
  border-left: 3px solid var(--color-ti-primary-red);
  font-size: 27px;
  font-weight: 300;
  height: 35px;
  margin-left: 2%;
  padding-left: 15px;
  text-transform: capitalize;
  display: flex;
  align-items: center;
}

td {
  border-top: 1px solid rgba(218, 218, 218, 0.3);
}

@media only screen and (max-width: 1200px) {
  .tiny-font {
    font-size: 11px;
  }
}

@media only screen and (min-width: 1201px) {
  .tiny-font {
    font-size: 12px;
  }
}

.device-mode {
  border-radius: 4px;
  color: var(--color-ti-primary-white);
  height: 35px;
  font-size: 13px;
  line-height: 35px;
  padding: 6px;
  text-align: center;
  width: 142px;
}

.device-mode.listen-theme {
  background-color: rgba(28, 153, 196, 0.6);
  color: var(--color-ti-primary-white);
}

.device-mode.normal-theme {
  background-color: var(--color-ti-indicator-green);
  color: var(--color-ti-primary-white);
}

.device-mode.sleep-theme {
  background-color: rgba(51, 51, 51, 0.9);
  color: var(--color-ti-primary-white);
}

.device-mode.standby-theme {
  background-color: rgba(2, 104, 140, 0.8);
  color: var(--color-ti-primary-white);
}

.instruction-text {
  color: var(--color-ti-secondary-grey);
  font-size: 24px;
  text-align: center;
}

.bus-warn-msg {
  background-color: var(--color-ti-bg-yellow);
  color: var(--color-ti-primary-red-dark);
  font-family: Roboto;
  font-size: 12px;
  font-weight: 300;
  line-height: 17px;
  margin-left: 5px;
  padding: 5px;
  text-transform: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info-round {
  height: 16px;
  width: 16px;
  margin-right: 5px;
}