/* function is not supported yet */
#swFunctionMenu .func[data-funcid="callSensor"] {
  display: none;
  pointer-events: none;
}
.btn-generic-info {
  position: absolute;
  padding: 0 !important;
  margin: 0 !important;
  left: 12px;
  right: 28px;
  bottom: 8px;
  top: 8px;
  text-align: center;
  color: #8a8787;
  display: -ms-flexbox;
  display: flex;
}
.btn-generic-info span {
  margin-left: unset !important;
  padding: unset !important;
  text-align: left;
  font-size: 13px;
}
.btn-generic-info span:nth-child(2) {
  margin-top: auto !important;
  text-align: right;
}
.sw-extra-fill .sw-extra .sw-fill {
  fill: #bbbbbb;
}
.sw-led {
  fill: lightgray;
  stroke: lightgray;
}
/* body */
body.empty #group-switch-recourcelinks > .topic-row * {
  pointer-events: none;
  opacity: 0;
  transition: all 0.1s ease;
}
body.empty #group-switch-recourcelinks .empty-info {
  position: initial;
  margin: auto 32px;
  -ms-flex-align: end;
      align-items: flex-end;
}
body#switch-editor-body {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
body#switch-editor-body *:focus {
  outline: none;
}
body#switch-editor-body input:not(#inputRenameSensor) {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  border-radius: 0;
  font-size: 1em;
}
body#switch-editor-body input:not(#inputRenameSensor)[type='radio']:checked,
body#switch-editor-body input:not(#inputRenameSensor)[type='radio']:not(:checked) {
  background: transparent;
  position: relative;
  padding: 0;
}
body#switch-editor-body input:not(#inputRenameSensor)[type='radio']:checked::before,
body#switch-editor-body input:not(#inputRenameSensor)[type='radio']:not(:checked)::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 15px;
  position: relative;
  top: 2px;
  border: 1px solid #bbb;
  background: white;
  margin-right: 1em;
  box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
}
body#switch-editor-body input:not(#inputRenameSensor)[type=radio]:checked::before,
body#switch-editor-body input:not(#inputRenameSensor)[type=radio]:not(:checked)::before {
  border-radius: 100%;
}
body#switch-editor-body input:not(#inputRenameSensor)[type='radio']:checked::before {
  background: #6f6c6a;
  box-shadow: inset 0.3px 0.3px 0px 2.9px white;
  transition: all 0.2s ease;
}
body#switch-editor-body .subfunc:hover > input[type='radio']:not(:checked)::before {
  background: #6f6c6a;
  box-shadow: inset 0 0 0 2px white;
  transition: all 0.2s ease;
}
#group-switch-recourcelinks {
  position: relative;
  bottom: unset;
  top: unset;
}
.ikea-info {
  display: none;
}
/* for wiz pages */
.wiz-page {
  display: none;
}
#switchEditorModal > div > div > div.modal-body > div {
  width: 100%;
}
#switchEditorModal .modal-body {
  -ms-flex-pack: start;
      justify-content: flex-start;
  min-height: 440px;
}
#switchEditorModal .modal-body .sw-extra-generic {
  margin: auto;
}
#switchEditorModal .modal-body .sw-extra-generic .active-target {
  background-color: rgba(85, 98, 107, 0.6);
}
#switchEditorModal .modal-body[data-wizpage="page0"] {
  overflow-y: auto;
}
#switchEditorModal .modal-body[data-wizpage="page0"] .page0 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
}
#switchEditorModal .modal-body[data-wizpage="pageGroupMode"] .pageGroupMode {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
}
#switchEditorModal .modal-body[data-wizpage="pageGroupMode"] .pageGroupMode .product a {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
}
#switchEditorModal .modal-body[data-wizpage="pageGroupMode"] .pageGroupMode .product a small {
  opacity: 0.8;
}
#switchEditorModal .modal-body[data-wizpage="pageGroupMode"] .pageGroupMode .product svg {
  -ms-transform: scale(0.8);
      transform: scale(0.8);
}
#switchEditorModal .modal-body[data-wizpage="pageGroupMode"] .pageGroupMode .product.active-mode {
  background-color: #d3d3d324;
  border-radius: 5px;
  border-bottom: solid 0.3px #c17e39;
}
#switchEditorModal .modal-body[data-wizpage="pageGroupModeInfo"] .pageGroupModeInfo {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
}
#switchEditorModal .modal-body[data-wizpage="page1"] .page1 {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: center;
      align-items: center;
}
#switchEditorModal .modal-body[data-wizpage="page1"] .page1 svg {
  margin: auto;
}
#switchEditorModal .modal-body[data-wizpage="page2"] .page2 {
  display: -ms-flexbox;
  display: flex;
}
#switchEditorModal .modal-body[data-wizpage="page2"] .page2 svg {
  max-width: 200px;
  max-height: 240px;
}
#switchEditorModal .modal-body .ikea-info {
  display: block;
  max-width: 230px;
  font-style: italic;
  color: #919191;
  font-size: small;
  padding: 4px 20px;
  text-indent: -50px;
  margin-left: 50px;
}
/* for modal switchlist */
a[type="button"] svg {
  min-width: 16px;
}
.modal-switch {
  color: #333333;
  background-color: #dcdcdc;
  cursor: default;
  border-radius: 4px;
  margin: 8px 8px;
  padding: 8px 8px;
  min-width: 210px;
  height: 64px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  border: 2px solid transparent;
}
.modal-switch .item-name {
  white-space: nowrap;
}
.modal-switch .item-icon.generated-sw-svg {
  height: 38px;
  width: 38px;
}
.modal-switch.active-switch {
  background-color: #abb8c1;
}
/* for switch svg */
.sw-extra {
  visibility: visible;
}
.sw-extra-hide {
  visibility: hidden;
}
#switchList .sw-extra-hide {
  visibility: visible;
}
.svg-0 > g {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 50% 50%;
      grid-template-columns: 50% 50%;
}
.svg-0 .sw-target {
  background-color: white;
  fill: rgba(255, 255, 255, 0.1);
  transition: all 0.2s ease-out;
  display: block;
}
.svg-0 .sw-target.unavailable,
.svg-0 .sw-target.no-event {
  fill: #ffffff;
  pointer-events: none;
}
.svg-0 .sw-corner {
  opacity: 0;
}
.active-target {
  fill: rgba(85, 98, 107, 0.6) !important;
  background-color: #55626b;
}
body {
  --btn-1000: 0;
  --btn-2000: 0;
  --btn-3000: 0;
  --btn-4000: 0;
  --btn-5000: 0;
  --btn-6000: 0;
  --btn-7000: 0;
  --btn-8000: 0;
  --btn-1001: 0;
  --btn-1002: 0;
  --btn-1004: 0;
  --btn-1005: 0;
  --btn-1006: 0;
  --btn-1007: 0;
  --btn-1010: 0;
  --btn-1: 0;
  --btn-2: 0;
  --btn-3: 0;
  --btn-4: 0;
  --btn-5: 0;
  --btn-6: 0;
  --btn-7: 0;
  --btn-8: 0;
}
[data-btn] {
  display: none;
}
#resourcelinkListmainSwitch svg [data-btn] {
  fill: var(--ic-fill);
}
#resourcelinkListmainSwitch svg [data-btn="1000"] {
  opacity: var(--btn-1000);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="2000"] {
  opacity: var(--btn-2000);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="3000"] {
  opacity: var(--btn-3000);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="4000"] {
  opacity: var(--btn-4000);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="5000"] {
  opacity: var(--btn-5000);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="6000"] {
  opacity: var(--btn-6000);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="7000"] {
  opacity: var(--btn-7000);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="8000"] {
  opacity: var(--btn-8000);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="1001"] {
  opacity: var(--btn-1001);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="1002"] {
  opacity: var(--btn-1002);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="1004"] {
  opacity: var(--btn-1004);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="1005"] {
  opacity: var(--btn-1005);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="1006"] {
  opacity: var(--btn-1006);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="1007"] {
  opacity: var(--btn-1007);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="1010"] {
  opacity: var(--btn-1010);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="1"] {
  opacity: var(--btn-1);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="2"] {
  opacity: var(--btn-2);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="3"] {
  opacity: var(--btn-3);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="4"] {
  opacity: var(--btn-4);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="5"] {
  opacity: var(--btn-5);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="6"] {
  opacity: var(--btn-6);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="7"] {
  opacity: var(--btn-7);
  display: inherit;
}
#resourcelinkListmainSwitch svg [data-btn="8"] {
  opacity: var(--btn-8);
  display: inherit;
}
#resourcelinkListmainSwitch .item-name-rl {
  margin: 0;
  -ms-flex: unset;
      flex: unset;
  padding: 0;
}
#resourcelinkListmainSwitch .item-info-rl {
  font-size: 80%;
  color: #8a8787;
}
#resourcelinkListmainSwitch .resourcelink.tap-icons-none svg .tap-icons-none {
  display: none;
}
/* for function list */
#swFunctionMenu {
  box-shadow: inset 0px 0px 0px 1px #dcdbdb;
  width: 274px;
  z-index: 3;
  border-radius: 4px;
}
#swFunctionMenu .func {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  opacity: 1;
}
#swFunctionMenu .active-func {
  background-color: #f8f8f8;
  box-shadow: inset 8px 0px 0px 0px #dddddd;
  transition: all 100ms ease-out;
}
#swFunctionMenu .active-func svg {
  --ic-fill: #f5e2b8;
  --ic-frame: #f5e2b8;
  --ic-line: #ecb663;
}
#swFunctionMenu .active-func:after,
#swFunctionMenu .active-func:before {
  content: '';
  display: block;
  position: absolute;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
}
#swFunctionMenu .active-func:after {
  top: 10px;
  border-color: transparent transparent transparent #f8f8f8;
  border-width: 10px;
}
#swFunctionMenu .active-func:before {
  top: 9px;
  border-color: transparent transparent transparent #ddd;
  border-width: 11px;
}
/* for subfunction list */
#swSubFunctionMenu {
  width: 52%;
  padding: 0;
  margin-left: -2px;
}
#swSubFunctionMenu .subfunc:not(.sub-additional-func),
#swSubFunctionMenu .selector {
  display: -ms-flexbox;
  display: flex;
  padding: 8px 20px;
  margin: 0;
}
#swSubFunctionMenu select {
  display: block;
}
#swSubFunctionMenu .selector {
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: baseline;
      align-items: baseline;
}
#swSubFunctionMenu .selector span {
  font-weight: bold;
  font-size: 90%;
}
#swSubFunctionMenu .selector select {
  padding: 8px 16px;
  width: 100%;
}
#swSubFunctionMenu nav.call-scene-options .sub-function-header,
#swSubFunctionMenu .sub-additional-func {
  display: none;
}
#swSubFunctionMenu .light-chain-options {
  padding-bottom: 20px;
}
#swSubFunctionMenu .sub-function-header,
#swSubFunctionMenu .item-info-func {
  padding: 8px 20px;
}
#swSubFunctionMenu .sub-function-header {
  font-size: 80%;
  color: #8a8787;
  margin: 0px;
  padding-bottom: 0px;
}
#swSubFunctionMenu nav {
  -ms-flex-direction: column;
      flex-direction: column;
}
#swSubFunctionMenu[data-sub=""] {
  visibility: hidden;
}
#swSubFunctionMenu[data-sub]:not[data-sub=""] {
  visibility: visible;
}
#swSubFunctionMenu nav {
  display: none;
}
#swSubFunctionMenu[data-sub="onOffOptions"] .on-off-options {
  display: -ms-flexbox;
  display: flex;
}
#swSubFunctionMenu[data-sub="callScene"] .call-scene-options {
  display: -ms-flexbox;
  display: flex;
}
#swSubFunctionMenu[data-sub="callSensor"] .call-sensor-options {
  display: -ms-flexbox;
  display: flex;
}
#swSubFunctionMenu[data-sub="effect"] .effect-options {
  display: -ms-flexbox;
  display: flex;
}
#swSubFunctionMenu[data-sub="dimming"] .dimming-options {
  display: -ms-flexbox;
  display: flex;
}
#swSubFunctionMenu[data-sub="colorTemp"] .color-temp-options {
  display: -ms-flexbox;
  display: flex;
}
/* for resourcelink list */
.active-resourcelink {
  background-color: #6a858c6e;
}
#resourcelinkListmainSwitch .resourcelink .item-name i {
  display: none;
}
#resourcelinkListmainSwitch .resourcelink.active-row {
  animation: liInteractive 0.8s;
  animation-timing-function: ease-out;
}
@keyframes liInteractive {
  10% {
    background-color: rgba(85, 98, 107, 0.6);
  }
  100% {
    background-color: none;
  }
}
/* for scene list */
.scene-list,
.effect-list {
  border: 1px solid #dddddd;
  min-height: 100px;
  max-height: 160px;
  margin: 8px 20px;
  margin-top: 0;
  -ms-flex-direction: column;
      flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  list-style-type: none;
  padding: 0px;
  width: 84%;
  border-radius: 4px;
  background-color: #f8f8f8;
}
.scene-list .scene,
.effect-list .light-chain-effect {
  background-color: #f8f8f8;
  border: none;
}
.empty-scene-list-info,
.gesture-info {
  width: 68%;
  margin-top: 20px;
  z-index: 3;
  display: none;
  pointer-events: none;
}
.call-scene-options.empty-scenelist,
.effect-options.gesture-list-info {
  pointer-events: none;
}
.call-scene-options.empty-scenelist .empty-scene-list-info,
.effect-options.gesture-list-info .empty-scene-list-info,
.call-scene-options.empty-scenelist .gesture-info,
.effect-options.gesture-list-info .gesture-info {
  display: -ms-flexbox;
  display: flex;
}
.call-scene-options.empty-scenelist p,
.effect-options.gesture-list-info p,
.call-scene-options.empty-scenelist ul,
.effect-options.gesture-list-info ul {
  opacity: 0;
}
#swSubFunctionMenu .empty-scene-list-info,
#swSubFunctionMenu .gesture-info {
  margin: 20px auto;
}
.scene.active-subfunc,
.light-chain-effect.active-subfunc {
  background-color: #dad7d7a8 !important;
}
/* for pushDimm and colorTemp Optins */
.no-dim,
.dim {
  display: none;
  pointer-events: none;
}
.no-dim.show,
.dim.show {
  display: -ms-flexbox;
  display: flex;
  pointer-events: unset;
}
/* for edit Resourcelink btn */
#deleteResourcelinkBtn {
  opacity: 0;
  pointer-events: none;
}
#deleteResourcelinkBtn.enable {
  opacity: 1;
  pointer-events: unset;
}
/* for navigation */
.topic-col {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 134px;
}
.nav-head {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-pack: start;
      justify-content: flex-start;
  width: 100%;
  -ms-flex-align: center;
      align-items: center;
  cursor: pointer;
}
.nav-head :nth-child(2) {
  width: 30px;
  height: 30px;
}
#navigation svg {
  --ic-line: #efefee;
  --sw-line: #efefee;
  --li-state-line: #efefee;
  --sw-state-line: #efefee;
  --li-fill: none;
  --li-state: none;
  --li-body: none;
}
#newSwitchResourcelink-btn {
  width: 75%;
  background-color: #848180;
  color: white;
  margin-bottom: 10px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
}
#newSwitchResourcelink-btn svg {
  --ic-line: #efefee;
}
#newSwitchResourcelink-btn:hover {
  background-color: #b9b6b5;
}
.active-item > svg.item-icon {
  --ic-line: #6f6c6a !important;
}
.main-head h1 {
  padding-left: 32px;
}
@media (min-width: 1200px) {
  .main-head h1 {
    padding-left: 54px;
  }
}
.main-head .item-icon {
  -ms-transform: scale(0.7);
      transform: scale(0.7);
}
.main-content {
  margin-top: 20px;
  height: 400px;
}
#main-selected-rlfunction {
  -ms-flex: auto;
      flex: auto;
  margin-left: 40px;
  margin-right: 40px;
  opacity: 0;
  margin-bottom: 78px;
  max-width: 20em;
}
#main-selected-rlfunction select {
  display: block;
}
#main-selected-rlfunction .selector span {
  font-weight: bold;
  font-size: 90%;
}
#main-selected-rlfunction.show {
  opacity: 1;
}
#main-selected-rlfunction .main-list {
  background: none;
}
#main-selected-rlfunction .subfunc.active-subfunc {
  pointer-events: none;
}
#hdr-main-selected-rlfunction {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  margin-bottom: 16px;
  font-size: 125%;
  padding-top: 0.6em;
}
#hdr-main-selected-rlfunction svg {
  margin-right: 10px;
}
#selected-rl-func-list {
  padding-left: 40px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 90%;
}
#selected-rl-func-list::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
#selected-rl-func-list .light-chain-options {
  margin-top: 16px;
}
@media (min-width: 1200px) {
  #selected-rl-func-list .scene-list,
  #selected-rl-func-list .effect-list {
    max-height: 24vw;
  }
}
#selected-rl-func-list nav {
  -ms-flex-direction: column;
      flex-direction: column;
  display: none;
}
#selected-rl-func-list nav .subfunc {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
}
#selected-rl-func-list .selector {
  display: -ms-flexbox;
  display: flex;
  padding: 8px 20px;
  margin: 0;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex-align: baseline;
      align-items: baseline;
}
#selected-rl-func-list .selector span {
  font-weight: bold;
  font-size: 90%;
}
#selected-rl-func-list .selector select {
  padding: 8px 16px;
  width: 100%;
}
#selected-rl-func-list .additional-func-div {
  display: none;
}
#selected-rl-func-list .additional-func-div.show {
  display: block;
}
#selected-rl-func-list .sub-function-header,
#selected-rl-func-list .item-info-func {
  font-size: 80%;
  color: #8a8787;
  margin: 8px 0px;
}
#selected-rl-func-list .sub-additional-func label {
  margin-bottom: 0px;
  font-weight: normal;
}
#selected-rl-func-list[data-sub="onOffOptions"] .on-off-options {
  display: -ms-flexbox;
  display: flex;
}
#selected-rl-func-list[data-sub="callScene"] .call-scene-options {
  display: -ms-flexbox;
  display: flex;
}
#selected-rl-func-list[data-sub="callSensor"] .call-sensor-options {
  display: -ms-flexbox;
  display: flex;
}
#selected-rl-func-list[data-sub="effect"] .effect-options {
  display: -ms-flexbox;
  display: flex;
}
#selected-rl-func-list[data-sub="dimming"] .dimming-options {
  display: -ms-flexbox;
  display: flex;
}
#selected-rl-func-list[data-sub="colorTemp"] .color-temp-options {
  display: -ms-flexbox;
  display: flex;
}
#selected-rl-func-list[data-sub="groupMode"] .group-mode {
  display: -ms-flexbox;
  display: flex;
}
#selected-rl-func-list .group-mode svg {
  width: 70%;
  height: auto;
  margin: auto;
  margin-top: 30px;
}
/* change box to save or dismiss changed recourcelink settings */
#changedBox {
  opacity: 0;
  color: white;
  background-color: hsl(15, 2%, 51%);
  margin: 8px 0;
  padding: 16px 8px;
  transition: opacity 0.4s ease-out 600ms;
}
#changedBox .box-out {
  transition: opacity 0.25s ease-in 50ms;
}
#changedBox .btn {
  background-color: #706c6a;
  margin: 4px 8px;
}
#changedBox .btn:hover {
  color: white;
  background-color: #b9b6b5;
}
#changedBox p {
  margin-left: 9px;
}
body.resourcelink-changed #changedBox {
  opacity: 1;
}
#switchList {
  transition: transform 120ms ease-out 400ms;
  -ms-transform: translateY(-130px);
      transform: translateY(-130px);
}
#switchList .up-anim {
  transition: transform 120ms ease-in 300ms;
}
body.resourcelink-changed #switchList {
  -ms-transform: translateY(0);
      transform: translateY(0);
}
