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

.control-box {
  box-sizing: border-box;
  height: calc(calc(100% / 2) - 4%);
  margin: 0% 2% 4% 2%;
}

.control-desc {
  margin: 2% 0%;
}

.control-left {
  height: 80%;
  margin-left: 3%;
  width: calc(60% - 3%);
}

.control-name {
  height: 25px;
  margin-bottom: 1%;
  line-height: 0px !important;
}

.control-right {
  background-color: var(--color-ti-bg-grey-04);
  border: 0.5px dashed var(--color-ti-secondary-grey);
  border-radius: 4.8px;
  box-sizing: border-box;
  height: 80%;
  margin: 0% 3% 0% 10%;
  min-width: 230px;
  width: calc(100% - 60% - 13%);
}

.controls-section {
  height: calc(100% - 15% - 2%);
  width: 100%;
}

.custom-text-style {
  color: var(--color-ti-primary-black);
  font-size: 12px;
  letter-spacing: 0;
  line-height: 23.6px;
}

.desc-box {
  height: 15%;
  margin: 2% 20% 0% 2%;
}

.dev-prot-container {
  height: calc(100% - 20% - 2%);
  padding: 0% 3% 3% 3%;
  width: 100%;
}

.font-w-300 {
  font-weight: 300;
}

.h-30 {
  height: 30px;
  border-radius: 15px;
}

.h-100-pcnt {
  height: 100%;
}

.header-container {
  height: 20%;
  width: 100%;
}

.header-text {
  color: var(--color-ti-primary-black);
  font-size: 35px;
  letter-spacing: 0;
  line-height: 55px;
  opacity: 0.25;
}

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

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

.page-content {
  background-color: var(--color-ti-primary-white);
  box-shadow: 5px 5px 30px 0 var(--color-ti-bg-grey-dark);
  height: 96%;
  width: calc(100% - 30%);
}

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

.selection-tab {
  border-bottom: 0.5px solid var(--color-ti-primary-red);
  height: 26%;
  min-height: 45px;
  padding: 0 40px;
  width: 100%;
}

.swe-example {
  margin: 0% 2%;
}

.swe-example-txt {
  width: 80%;
}

.tiny-font {
  font-size: 10px;
}

.title-container {
  height: 45%;
  width: 92%;
}

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

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

.widget-container {
  background-color: var(--color-ti-bg-grey-03);
  border: 0.5px dashed var(--color-ti-secondary-grey);
  border-radius: 4px;
  height: 100%;
  width: 100%;
}

/** Paper elements custom styling **/

paper-button.fsm {
  width: 150px;
}

paper-button.swe {
  width: 320px;
}

paper-button.tab-option {
  background-color: transparent;
  color: var(--color-ti-text-grey-dark);
  font-size: 12px;
  font-weight: bold;
  height: calc(100% - 0.5px);
  margin: 0;
  text-transform: uppercase;
}

paper-button.tab-option.selected {
  background-color: rgba(204, 0, 0, 0.12);
  color: var(--color-ti-primary-red);
  pointer-events: none;
}

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