:root {
  --color-bg-light: #e8f0f7;
  --color-element-light: white;
  --color-element-alt-light: #ffffff;
  --color-element-highlight-light: #bfc5da;
  --color-light-on-light: #efd18f;
  --color-button-light: #a7b8c1;
  --color-active-btn-light: #ededed;
  --color-button-selected-light: #55626b;
  --color-button-highlight-light: #b0b0b0;
  --color-text-light: #3e4e52;
  --color-text-selected-light: #eeeeee;
  --color-text-disabled-light: #acacac;
  --color-text-alt-light: #969696;
  --color-text-danger-light: #eeeeee;
  --color-text-highlight-light: #e6bc63;
  --color-danger-light: #d85656;
  --color-header-light: #55626b;
  --color-header-text-light: #f5f5f5;
  --color-footer-light: white;
  --color-navbar-bg-light: #2f3e49;
  --color-navbar-bg-highlight-light: #3a4f60;
  --color-navbar-button-light: #3e4c57;
  --color-navbar-text-light: #e8f0f7;
  --color-dashboard-button-light: #d2d9e0;
  --color-dashboard-button-highlight-light: #b0b0b0;
  --color-settings-selected-menu-light: #c17e39;
  --color-time-slice-light: #b3c4cd;
  --color-time-slice-hover-light: #d4dde5;
  --color-text-table-details-light: #3e4e52;
  --color-device-box-header-light: #baa48d;
  --color-device-box-body-light: #f4f5f4;
  --color-device-toggle-light: white;
  --color-button-top-light: #55626b;
  --color-button-top-highlight-light: #a7b8c1;
  --color-bg-dark: #6f6969;
  --color-element-dark: #848180;
  --color-element-alt-dark: white;
  --color-element-highlight-dark: #b9b6b5;
  --color-light-on-dark: #f5e2b8;
  --color-button-dark: #848180;
  --color-active-btn-dark: #72706f;
  --color-button-selected-dark: #b9b6b5;
  --color-button-highlight-dark: #b9b6b5;
  --color-text-dark: #e1e1e1;
  --color-text-selected-dark: #292929;
  --color-text-disabled-dark: #bababa;
  --color-text-alt-dark: #292929;
  --color-text-danger-dark: #e1e1e1;
  --color-text-highlight-dark: #e6bc63;
  --color-danger-dark: #d85656;
  --color-header-dark: #55626b;
  --color-header-text-dark: #f5f5f5;
  --color-footer-dark: #9f9a98;
  --color-navbar-bg-dark: #4d4d4d;
  --color-navbar-bg-highlight-dark: #5b5b5b;
  --color-navbar-button-dark: #848180;
  --color-navbar-text-dark: #e8f0f7;
  --color-dashboard-button-dark: #7a7675;
  --color-dashboard-button-highlight-dark: #928f8f;
  --color-settings-selected-menu-dark: #b28352;
  --color-time-slice-dark: #9f9a98;
  --color-time-slice-hover-dark: #848180;
  --color-text-table-details-dark: #e1e1e1;
  --color-device-box-header-dark: #baa48d;
  --color-device-box-body-dark: #4d4d4d;
  --color-device-toggle-dark: #848180;
  --color-button-top-dark: #6f6969;
  --color-button-top-highlight-dark: #b9b6b5;
  --color-bg-slate: #0b1120;
  --color-element-slate: #1e293a;
  --color-element-alt-slate: #334155;
  --color-element-highlight-slate: #1fa6e7;
  --color-light-on-slate: #f5e2b8;
  --color-button-slate: #1e293a;
  --color-active-btn-slate: #1fa6e7;
  --color-button-selected-slate: #1fa6e7;
  --color-button-highlight-slate: #1fa6e7;
  --color-text-slate: #c7d1dd;
  --color-text-selected-slate: #c7d1dd;
  --color-text-disabled-slate: #acacac;
  --color-text-alt-slate: #1fa6e7;
  --color-text-danger-slate: #c7d1dd;
  --color-text-highlight-slate: #1fa6e7;
  --color-danger-slate: #d85656;
  --color-header-slate: #1fa6e7;
  --color-header-text-slate: #f5f5f5;
  --color-footer-slate: #334155;
  --color-navbar-bg-slate: #1e293a;
  --color-navbar-bg-highlight-slate: #293953;
  --color-navbar-button-slate: #1fa6e7;
  --color-navbar-text-slate: #c7d1dd;
  --color-dashboard-button-slate: #1fa6e7;
  --color-dashboard-button-highlight-slate: #334155;
  --color-settings-selected-menu-slate: #1fa6e7;
  --color-time-slice-slate: #334155;
  --color-time-slice-hover-slate: #1e293a;
  --color-text-table-details-slate: #1fa6e7;
  --color-device-box-header-slate: #1fa6e7;
  --color-device-box-body-slate: #1e293a;
  --color-device-toggle-slate: #0b1120;
  --color-button-top-slate: #1fa6e7;
  --color-button-top-highlight-slate: #334155;
  --color-bg-contrast: #000000;
  --color-element-contrast: #ffffff;
  --color-element-alt-contrast: #ffffff;
  --color-element-highlight-contrast: #00ff00;
  --color-light-on-contrast: #f5e2b8;
  --color-button-contrast: #00ff00;
  --color-active-btn-contrast: #00ff00;
  --color-button-selected-contrast: #00ff00;
  --color-button-highlight-contrast: #00ff00;
  --color-text-contrast: #000000;
  --color-text-selected-contrast: #ffffff;
  --color-text-disabled-contrast: #3e4e52;
  --color-text-alt-contrast: #000000;
  --color-text-danger-contrast: #ff0000;
  --color-text-highlight-contrast: #00ff00;
  --color-danger-contrast: #b92121;
  --color-header-contrast: #ffffff;
  --color-header-text-contrast: #000000;
  --color-footer-contrast: #000000;
  --color-dashboard-button-contrast: #00ff00;
  --color-dashboard-button-highlight-contrast: #00ffff;
  --color-settings-selected-menu-contrast: #00ff00;
  --color-navbar-bg-contrast: #000000;
  --color-navbar-bg-highlight-contrast: #000000;
  --color-navbar-button-contrast: #1fa6e7;
  --color-navbar-text-contrast: #c7d1dd;
  --color-time-slice-contrast: #334155;
  --color-time-slice-hover-contrast: #1e293a;
  --color-text-table-details-contrast: #1fa6e7;
  --color-button-top-contrast: #1fa6e7;
  --color-button-top-highlight-contrast: #0b1120;
  --color-bg: var(--color-bg-light);
  --color-element: var(--color-element-light);
  --color-element-alt: var(--color-element-alt-light);
  --color-element-highlight: var(--color-element-highlight-light);
  --color-light-on: var(--color-light-on-light);
  --color-button: var(--color-button-light);
  --color-active-btn: var(--color-active-btn-light);
  --color-button-selected: var(--color-button-selected-light);
  --color-button-highlight: var(--color-button-highlight-light);
  --color-text: var(--color-text-light);
  --color-text-selected: var(--color-text-selected-light);
  --color-text-disabled: var(--color-text-disabled-light);
  --color-text-alt: var(--color-text-alt-light);
  --color-text-danger: var(--color-text-danger-light);
  --color-text-highlight: var(--color-text-highlight-light);
  --color-danger: var(--color-danger-light);
  --color-header: var(--color-header-light);
  --color-header-text: var(--color-header-text-contrast);
  --color-footer: var(--color-footer-light);
  --color-dashboard-button: var(--color-dashboard-button-light);
  --color-dashboard-button-highlight: var(--color-dashboard-button-highlight-light);
  --color-settings-selected-menu: var(--color-settings-selected-menu-light);
  --color-navbar-bg: var(--color-navbar-bg-light);
  --color-navbar-bg-highlight: var(--color-navbar-bg-highlight-light);
  --color-navbar-button: var(--color-navbar-button-light);
  --color-navbar-text: var(--color-navbar-text-light);
  --color-time-slice: var(--color-time-slice-light);
  --color-time-slice-hover: var(--color-time-slice-hover-light);
  --color-device-box-header: var(--color-device-box-header);
  --color-device-box-body: var(--color-device-box-body);
  --color-device-toggle: var(--color-device-toggle-light);
}
.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;
  background-color: var(--color-bg);
}
.body-content .main-head {
  padding-right: 12px;
}
.body-content .main-head h1 {
  color: var(--color-text-alt);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
.body-content .main-head h1 small {
  margin-top: 4px;
  color: var(--color-text-alt);
}
.body-content .main-content {
  color: var(--color-text);
  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 var(--color-text-alt) !important;
  background-color: var(--color-text-alt) !important;
}
.body-content .main-content #apiRequestSelect span .checkmark {
  position: absolute;
  height: 13px;
  width: 13px;
  background-color: var(--color-element) !important;
  border: 0.5px solid var(--color-text-alt) !important;
  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 var(--color-text-alt);
  background-color: var(--color-text-alt);
}
.body-content .main-content #apiRequestOptions #optionCheckboxes #clipSensorsSpan .checkmark,
.body-content .main-content #apiRequestOptions #optionCheckboxes #switchGroupsSpan .checkmark {
  position: absolute;
  height: 13px;
  width: 13px;
  background-color: var(--color-element);
  border: 0.5px solid var(--color-text-alt);
  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;
}
.body-content .dropdown-select-btn,
.body-content .dropdown-select-content {
  color: var(--color-text);
  background-color: var(--color-button) !important;
}
@media (max-width: 1199px) {
  h1 {
    padding-left: 32px !important;
  }
}
@media (max-width: 899px) {
  #apiResponse {
    width: unset !important;
  }
}
@media (max-height: 420px) and (min-width: 430px) {
  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: 430px), (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;
  }
}