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

.main-container {
  height: calc(100% - 45px);
  margin-top: 45px;
  min-height: 650px;
  min-width: 1200px;
  position: relative;
  user-select: none;
  width: 100%;
}

.partial-networking-container {
  background-color: var(--color-ti-primary-white);
  box-shadow: 5px 5px 30px 0 var(--color-ti-bg-grey-dark);
  height: 86%;
  padding: 3% 3% 1.5% 3.5%;
  position: relative;
}

.pn-content {
  height: 96%;
  width: calc(100% - 29%);
  padding-left: 15px;
}

.pn-title {
  font-size: 40px;
  color: var(--color-ti-indicator-grey);
  font-weight: 500;
  margin-left: 25px;
}

.progess-bar-title {
  color: var(--color-ti-text-grey-dark);
  font-size: 14px;
  font-weight: bold;
}

.top-section {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

#pn-reset-btn {
  min-width: 173px;
  height: 40px;
  border: 2px solid var(--color-ti-primary-red);
  font-size: 11.5px;
}

#pn-next-btn {
  min-width: 105px;
  height: 38px;
  font-size: 11.5px;
  margin-right: 20px;
  padding: 0px 27px;
}

ti-progress-bar {
  position: relative;
  top: -3%;
}

.content-container {
  position: relative;
  height: 75%;
}

.stepwise-procedure {
  height: 89%;
  position: absolute;
  width: 100%;
  bottom: 0px;
}

ti-widget-select-mode {
  display: flex;
  align-items: center;
  width: 74%;
  min-width: initial;
}

.hex-value {
  font-size: 35px;
  color: var(--color-ti-border-grey-dark);
  font-weight: bolder;
  height: 37%;
}
.enter-btn {
  font-size: 11px !important;
  font-weight: 500;
}

.custom-tile-align3 {
  padding: 25px 25px 20px 25px;
  width: 43%;
  min-height: 289px;
  height: 79%;
}

/* ti-widget-bits-configuration */

ti-widget-bits-configuration {
  display: flex;
  flex-direction: column;
}

.bit-style {
  background-color: transparent;
  color: var(--color-ti-text-grey-dark);
  font-size: 30px;
  position: absolute;
  top: 0px;
  left: 0px;
}

.bit-style:hover {
  transform: scale(1.3);
}

.indicators-controls {
  margin-left: 1%;
  color: var(--color-ti-text-grey-dark);
  font-size: 12px;
  margin-right: 20px;
  height: 35px;
  margin-bottom: 3%;
}

.indicators-controls * {
  margin-right: 20px;
}

.bit-index {
  position: relative;
  color: var(--color-ti-text-grey);
  font-size: 12px;
  border: 0.66px dotted var(--color-ti-secondary-grey);
  border-radius: 3px;
  background-color: var(--color-ti-bg-grey-02);
  padding: 4px;
  margin: 1.1%;
}

.mask-bit {
  background-color: #ffbf2b;
  box-shadow: 0 0 0 3px #ffedc2;
}

.bit-container {
  height: 61.66px;
  width: 61.66px;
  font-weight: bold;
}

.hex-display {
  color: var(--color-ti-text-grey);
}

.mask-color {
  background-color: var(--color-ti-secondary-yellow);
  box-shadow: 0 0 0 3px var(--color-ti-bg-yellow);
}

.mask-color.sizing {
  height: 10px;
  width: 31px;
  border-radius: 0.7px;
  margin-right: 10px;
}

.color-indication {
  font-size: 11px;
  color: var(--color-ti-text-grey);
}

.no-pointer-event {
  pointer-events: none;
}

.info-icon {
  width: 19px;
  height: 19px;
}

.info-icon.white {
  margin-right: 0px;
  color: var(--color-ti-white);
}

.info-txt {
  font-size: 12px;
  color: var(--color-ti-text-grey-dark);
  font-weight: 300;
}

.info-txt.white {
  font-size: 12px;
  margin-right: 0px;
  color: var(--color-ti-white);
}

.info-txt.white::first-letter {
  text-transform: uppercase;
}

.info-container {
  height: 38px;
  width: 331px;
  border-radius: 6px;
  padding: 15px;
  background-color: var(--color-ti-bg-grey-02);
}

.info-container.blue {
  background-color: var(--color-ti-primary-blue);
  width: 250px;
}

.footer {
  display: flex;
  justify-content: space-between;
}

.footer-size {
  margin-bottom: 10px;
  height: 38px;
}

.bits-list {
  min-width: 792px;
  width: 100%;
}

.main-container {
  min-height: 670px !important;
}

.disabled {
  opacity: 0.1 !important;
}

.hex-prefix {
  height: 35px;
  border-radius: 3px;
  border: none;
  background-color: var(--color-ti-bg-grey-02);
  font-weight: bold;
  color: var(--color-ti-text-grey-dark);
  padding-left: 12px;
  margin-right: 0px !important;
}
/* ti-widget-bits-configuration */

/*ti-widget-sw-configuation*/
ti-widget-sw-configuration {
  display: flex;
  color: var(--color-ti-text-grey-dark);
}

.control-sections {
  width: 50%;
  padding: 0% 1%;
}
.control-block1 {
  display: flex;
  justify-content: space-between;
  background-color: var(--color-ti-bg-grey-03);
  border: 0.5px dashed var(--color-ti-secondary-grey);
  border-radius: 4px;
  height: 21%;
  padding: 10px 20px;
}

.config-title {
  font-size: 12px;
  font-weight: bold;
}
.config-desc {
  font-size: 11px;
  font-weight: lighter;
}

.ml-25 {
  margin-left: 25px;
}

.ml-8 {
  margin-left: 8px;
}
.w-94 {
  width: 94px;
  background-color: var(--color-ti-bg-grey-04) !important;
  font-size: 12px;
}

.large-toggle {
  width: 160px;
  height: 30px;
  position: relative;
  top: -8px;
}

.toggle-txt {
  position: absolute;
  width: 160px;
  font-size: 10px;
  font-weight: bold;
}

.white {
  color: var(--color-ti-primary-white);
  font-weight: 500;
}

.h-30 {
  height: 30px;
  border-radius: 15px;
}
.pd-20-20 {
  padding: 10px 20px;
  height: 50%;
}
.can-data-byte {
  height: 47%;
}

.can-data-byte {
  height: 47%;
  padding: 0px !important;
  overflow: hidden;
}

.can-data-content {
  height: 50%;
  border-radius: 4px;
}

.block-heading {
  font-size: 10px;
  width: 84px;
}

.indices {
  background-color: var(--color-ti-bg-grey-02);
  height: 50%;
  padding: 0px 8px;
}

.index {
  font-size: 10px;
  width: 20px;
  height: 20px;
  background-color: var(--color-ti-border-grey);
  border-radius: 50%;
  margin-right: 5px;
  margin-left: 5px;
}

.bytes {
  background-color: var(--color-ti-bg-grey-dark);
  height: 50%;
  padding: 0px 8px;
}

paper-input ::shadow input[type="number"]::-webkit-inner-spin-button,
paper-input ::shadow input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}
/*ti-widget-sw-configuation*/

.hide-btn {
  visibility: hidden;
}