.sw-fill {
  fill: #757a80;
}
.ic-line {
  stroke: #757a80;
}
.lg-line,
.lg-fill {
  fill: #757a80;
  stroke: unset;
}
.body-content {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
.body-content .main-head {
  padding-right: 12px;
}
.body-content .main-head h1 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
.body-content .main-head h1 small {
  margin-top: 4px;
}
.body-content .main-content {
  padding-right: 12px;
  display: -ms-grid;
  display: grid;
  grid-row-gap: 8px;
  -ms-grid-rows: (min-content)[3] auto;
      grid-template-rows: repeat(3, min-content) auto;
}
.body-content .main-content #apiRequestSelect {
  display: -ms-grid;
  display: grid;
  grid-gap: 8px 16px;
  -ms-flex-align: center;
      align-items: center;
  -ms-grid-columns: (max-content)[4];
      grid-template-columns: repeat(4, max-content);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.body-content .main-content #apiRequestSelect span {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  position: relative;
}
.body-content .main-content #apiRequestSelect span label {
  font-weight: unset;
  margin-left: 4px;
  margin-bottom: unset;
  cursor: pointer;
}
.body-content .main-content #apiRequestSelect span input {
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.body-content .main-content #apiRequestSelect span input:checked ~ .checkmark {
  box-shadow: inset 0 0 0 2px #f5f5f5;
  background-color: #78787b;
}
.body-content .main-content #apiRequestSelect span .checkmark {
  position: absolute;
  height: 13px;
  width: 13px;
  background-color: #f5f5f5;
  border: 0.5px solid #78787b;
  border-radius: 50px;
  z-index: -1;
}
.body-content .main-content #apiRequestOptions {
  /* property name | duration | timing function | delay */
  transition: opacity 0.2s ease 0.3s;
}
.body-content .main-content #apiRequestOptions .dropdown-select {
  width: 410px;
}
.body-content .main-content #apiRequestOptions .dropdown-select .option {
  display: -ms-grid;
  display: grid;
  grid-gap: 0px 12px;
  -ms-grid-columns: auto max-content;
      grid-template-columns: auto max-content;
  max-width: 95vw;
}
.body-content .main-content #apiRequestOptions .dropdown-select .option span:nth-Child(3) {
  font-size: 12px;
  color: light-gray;
  max-width: 400px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.body-content .main-content #apiRequestOptions .dropdown-select .option[data-deviceid="all"] {
  border-bottom: 1px solid #c1c1c1;
}
.body-content .main-content #apiRequestOptions .dropdown-select i {
  font-size: 90%;
  opacity: 0.5;
}
.body-content .main-content #apiRequestOptions #optionCheckboxes {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  grid-gap: 12px;
  margin-top: 8px;
  min-height: 16px;
}
.body-content .main-content #apiRequestOptions #optionCheckboxes #clipSensorsSpan,
.body-content .main-content #apiRequestOptions #optionCheckboxes #switchGroupsSpan {
  display: none;
}
.body-content .main-content #apiRequestOptions #optionCheckboxes #clipSensorsSpan.active,
.body-content .main-content #apiRequestOptions #optionCheckboxes #switchGroupsSpan.active {
  display: -ms-flexbox;
  display: flex;
}
.body-content .main-content #apiRequestOptions #optionCheckboxes #clipSensorsSpan label,
.body-content .main-content #apiRequestOptions #optionCheckboxes #switchGroupsSpan label {
  font-weight: unset;
  font-size: small;
  line-height: normal;
  margin: 0;
  margin-left: 6px;
  cursor: pointer;
}
.body-content .main-content #apiRequestOptions #optionCheckboxes #clipSensorsSpan input,
.body-content .main-content #apiRequestOptions #optionCheckboxes #switchGroupsSpan input {
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.body-content .main-content #apiRequestOptions #optionCheckboxes #clipSensorsSpan input:checked ~ .checkmark,
.body-content .main-content #apiRequestOptions #optionCheckboxes #switchGroupsSpan input:checked ~ .checkmark {
  box-shadow: inset 0 0 0 2px #f5f5f5;
  background-color: #78787b;
}
.body-content .main-content #apiRequestOptions #optionCheckboxes #clipSensorsSpan .checkmark,
.body-content .main-content #apiRequestOptions #optionCheckboxes #switchGroupsSpan .checkmark {
  position: absolute;
  height: 13px;
  width: 13px;
  background-color: #f5f5f5;
  border: 0.5px solid #78787b;
  z-index: -1;
}
.body-content .main-content #apiRequestOptions .clip-sensor,
.body-content .main-content #apiRequestOptions .switch-group {
  display: none !important;
}
.body-content .main-content #apiRequestOptions.clip-sensor .clip-sensor,
.body-content .main-content #apiRequestOptions.switch-group .switch-group {
  display: inline;
}
.body-content .main-content #apiRequestOptions ~ #apiResponse {
  margin-top: 14px;
  transition: margin ease 0.2s;
}
.body-content .main-content #apiRequestOptions.unvisible {
  z-index: -10;
  opacity: 0;
  transition: opacity ease 0.2s;
}
.body-content .main-content #apiRequestOptions.unvisible ~ #apiResponse {
  z-index: unset;
  margin-top: -70px;
  transition: margin 0.2s ease 0.2s;
}
.body-content .main-content #apiResponse {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: min-content min-content auto;
      grid-template-rows: min-content min-content auto;
  -ms-grid-columns: auto;
      grid-template-columns: auto;
  width: 650px;
}
.body-content .main-content #apiResponse #apiResponseHeader {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  color: #787878;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 0;
  /* &.copy { #apiResponseCopy { display: flex; } }
                &.reload { #apiResponseReload { display: flex; } }
                &.clear { #apiResponseClear { display: flex; } } */
}
.body-content .main-content #apiResponse #apiResponseHeader input {
  -ms-flex: 1;
      flex: 1;
  padding: 2px 8px;
  border: none;
}
.body-content .main-content #apiResponse #apiResponseHeader .tab {
  padding: 4px 8px;
  border-left: 1px solid #cccccc;
  cursor: pointer;
  color: black;
  font-size: 15px;
}
.body-content .main-content #apiResponse #apiResponseHeader .tab.active-tab {
  background-color: #f1f1f1;
  padding-bottom: 5px;
  margin-bottom: -1px;
  z-index: 10;
}
.body-content .main-content #apiResponse #apiResponseHeader #apiResponseReload {
  height: 28px;
}
.body-content .main-content #apiResponse #apiResponseHeader #apiResponseReload svg {
  height: 100%;
  width: auto;
  padding: 4px;
}
.body-content .main-content #apiResponse #apiResponseHeader #apiResponseReload.active .lg-fill {
  fill: #c17e39;
}
.body-content .main-content #apiResponse input {
  color: #787878;
  background-color: #f5f5f5;
  border: 1px solid #cccccc;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 4px;
}
.body-content .main-content #apiResponse input:focus {
  outline: none;
}
.body-content .main-content #apiResponse #apiResponseOptions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: end;
      justify-content: flex-end;
  -ms-flex-align: center;
      align-items: center;
  height: 38px;
  margin-right: 12px;
  padding-top: 12px;
  z-index: 1;
}
.body-content .main-content #apiResponse #apiResponseOptions span {
  width: 32px;
  height: 32px;
  margin: 0 4px;
}
.body-content .main-content #apiResponse #apiResponseOptions span svg {
  height: 100%;
  width: auto;
  padding: 4px;
}
.body-content .main-content #apiResponse #apiResponseOptions span.active .ic-line,
.body-content .main-content #apiResponse #apiResponseOptions span.active .lg-line {
  stroke: #c17e39;
}
.body-content .main-content #apiResponse pre {
  padding: 5px;
  position: relative;
  border-radius: 0 0 4px 4px;
  background-color: #f1f1f1;
  overflow: auto;
  margin-top: -38px;
}
.body-content .main-content #apiResponse pre code {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  white-space: unset;
  font-size: 80%;
  padding: 4px;
}
.body-content .main-content #apiResponse pre code .code-key {
  font-weight: bold;
  color: #505050;
}
.body-content .main-content #apiResponse pre code .code-string {
  color: #88022f;
}
.body-content .main-content #apiResponse pre code .code-number {
  color: #0404ad;
}
.body-content .main-content #apiResponse pre code .code-boolean {
  color: #0404ad;
}
.body-content .main-content #apiResponse pre code .code-null {
  color: #0404ad;
}
.body-content .main-content #apiResponse pre.copied {
  border: 1px solid #f1f1f1;
  background-color: #9dc6eaad;
}
@media (max-width: 1199px) {
  h1 {
    padding-left: 32px !important;
  }
}
@media (max-width: 899px) {
  #apiResponse {
    width: unset !important;
  }
}
@media (max-height: 420px) and (min-width: 416px) {
  html {
    -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
    -ms-transform-origin: left top;
        transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
  html .sidenav {
    -ms-transform: translate(-100%) !important;
        transform: translate(-100%) !important;
  }
}
@media (max-width: 416px), (max-height: 420px) {
  h1 {
    padding-left: 0px !important;
  }
  .main-head,
  .main-content {
    padding: 0px 8px 8px 8px !important;
  }
  .main-head {
    min-height: unset;
  }
  .main-head h1 {
    margin-left: unset !important;
  }
  .main-content #apiRequestOptions .dropdown-select {
    width: 100% !important;
  }
  #apiRequestSelect {
    -ms-grid-columns: (max-content)[3] !important;
        grid-template-columns: repeat(3, max-content) !important;
  }
  .tab[data-type="events"] {
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
  }
}