/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

html,
body {
  width: 100vw;
  height: 100vh;
}

html {
  position: relative;
}

@media (orientation: landscape) {
  body {
    /* margin-left: 20px !important; */
    /* padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area- inset-bottom) constant(safe-area-inset-left) !important; */
  }
}

@font-face {
  font-family: Segoe Script;
  src: url(../css/fontSegoesc/segoesc.ttf);
}

@font-face {
  font-family: Manrope;
  src: url(../css/Manrope/Manrope-Regular.ttf);
}
@font-face {
  font-family: Manrope-Bold;
  src: url(../css/Manrope/Manrope-Bold.ttf);
}
@font-face {
  font-family: Manrope-Meduim;
  src: url(../css/Manrope/Manrope-Medium.ttf);
}
@font-face {
  font-family: Manrope-Light;
  src: url(../css/Manrope/Manrope-Light.ttf);
}

body {
  /* padding-top: constant(safe-area-inset-top) !important;
	padding-top: env(safe-area-inset-top)!important;
	padding-left: constant(safe-area-inset-left) !important;
	padding-right: env(safe-area-inset-right)!important;
	margin-bottom: constant(safe-area-inset-bottom)!important;
	margin-bottom: env(safe-area-inset-bottom)!important;
	margin-left: constant(safe-area-inset-left)!important;
	margin-right: env(safe-area-inset-right)!important;  */

  -webkit-touch-callout: none;
  /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;
  /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;
  /* prevent copy paste, to allow, change 'none' to 'text' */
  -ms-user-select: none;
  -moz-user-select: none;

  background-color: #e4e4e4;
  background-image: linear-gradient(top, #a7a7a7 0%, #e4e4e4 51%);
  background-image: -webkit-linear-gradient(top, #a7a7a7 0%, #e4e4e4 51%);
  background-image: -ms-linear-gradient(top, #a7a7a7 0%, #e4e4e4 51%);
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #a7a7a7),
    color-stop(0.51, #e4e4e4)
  );
  background-image: -ms-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #a7a7a7),
    color-stop(0.51, #e4e4e4)
  );
  background-attachment: fixed;
  /* font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif; */
  font-family: 'Manrope' !important;
  font-size: 12px;
  height: 100vh;
  /* margin:0px; */
  /* padding:0px; */
  width: 100vw;
  /* background-color: #000 !important; */
  background-color: #fff !important;
}

.ori-change {
  /* padding-left: 4% !important; */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width: 400px) {
  .app {
    background-position: left center;
    padding: 75px 0px 75px 170px;
    /* padding-top + padding-bottom + text area = image height */
    margin: -90px 0px 0px -198px;
    /* offset vertical: half of image height */
    /* offset horizontal: half of image width and text area width */
  }
}

h1 {
  font-size: 24px;
  font-weight: normal;
  margin: 0px;
  overflow: visible;
  padding: 0px;
  text-align: center;
}

.event {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -ms-border-radius: 4px;
  color: #ffffff;
  font-size: 12px;
  margin: 0px 30px;
  padding: 2px 0px;
}

.event.listening {
  background-color: #333333;
  display: block;
}

.event.received {
  background-color: #4b946a;
  display: none;
}

@keyframes fade {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

.blink {
  animation: fade 3000ms infinite;
  -webkit-animation: fade 3000ms infinite;
}

li.ui-btn-hover-c {
  background: inherit !important;
  /*border:1px solid #ccc;background:#eee;font-weight:700;color:#222;text-shadow:0 1px 0 #fff;background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1));background-image:-webkit-linear-gradient(#fff,#f1f1f1);background-image:-moz-linear-gradient(#fff,#f1f1f1);background-image:-ms-linear-gradient(#fff,#f1f1f1);background-image:-o-linear-gradient(#fff,#f1f1f1);background-image:linear-gradient(#fff,#f1f1f1);*/
}

div[data-role='controlgroup'].splitbutton > div {
  width: 100%;
}

.splitbutton.ui-controlgroup-horizontal .ui-btn-icon-notext .ui-btn-inner {
  width: auto;
  padding-left: 0;
  padding-right: 0;
  -webkit-border-radius: 2%;
  border-radius: 2%;
}

.ui-btn-text .ui-link-inherit {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  line-height: 175%;
  color: #020303 !important;
  /* padding: 10px 0 !important; */
}

/* .ui-btn-inner .handle {
  font-family: 'Manrope' !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 175% !important;
} */

.playground {
  border-style: solid;
  border-width: 3px;
  border-color: red;
}

.eisbaer-heating-climate,
.eisbaer-hand-automatic,
.eisbaer-fan-multiswitch {
  position: relative;
  /*overflow: hidden;*/
}

.eisbaer-heating-climate .bg-color,
.eisbaer-hand-automatic .bg-color,
.eisbaer-fan-multiswitch .bg-color {
  position: absolute;
  border-radius: 50%;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
}

.eisbaer-heating-climate .scale,
.eisbaer-hand-automatic .scale,
.eisbaer-fan-multiswitch .scale {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('../img/components/heating-climate.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.eisbaer-hand-automatic .scale {
  background-image: url('../img/components/hand-automatic.png');
}

.eisbaer-fan-multiswitch .scale {
  background-image: url('../img/components/hand-automatic.png');
}

.eisbaer-heating-climate .knob,
.eisbaer-hand-automatic .knob,
.eisbaer-fan-multiswitch .knob {
  width: 100%;
  height: 100%;
  background-image: url('../img/components/heating-climate-knob.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* looks weird
	transition: 200ms;
	transition-timing-function: cubic-bezier(.91,.8,.54,1.39);
	*/
}

.color-editor .ui-bar {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
}

#control_23_sequenceGrid .ui-bar {
  /* background: #70706f !important; */
  color: white !important;
  font-weight: 400 !important;
}

.language-selector {
  overflow: hidden;
  /*
	position: relative;
	padding: 0 0;
	width: 100px;
	height: 200px;
	margin-left: 32px;
	*/
}

.language-selector select {
  -webkit-appearance: menulist-text;
  -ms-appearance: menulist-text;
  border: 1px solid black;
  border-radius: 0;
  width: 100%;
  height: 100%;
  padding-left: 5px;
  display: block;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAFCAYAAACTphZWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFFJREFUeNpirKmp2cXAwODKgAkONjc3OyALMAFxChB/QVP4CyrOgK74ERAXo4nXA/EdbIpBYBYQ74OyLwNxHxZnwRUzQK39CMRZUGdgAIAAAwAhrA/f30ZlGQAAAABJRU5ErkJggg==');
  background-position: center right;
  background-repeat: no-repeat;
  background-color: white;
}

.language-selector .wrapper {
  position: relative;
  display: table-cell;
  /*vertical-align: middle;*/
  vertical-align: top;
}

.language-selector .prev,
.language-selector .next {
  display: block;
  /*top: 50%;*/
  top: 33%;
  margin-top: -16px;
  left: -40px;
  width: 32px;
  height: 32px;
  position: absolute;
  background: url('../img/icon_prev.png') no-repeat;
}

.language-selector .next {
  background: url('../img/icon_next.png') no-repeat;
  right: -40px;
  left: auto;
}

.language-selector img {
  cursor: pointer;
  width: 100px;
}

.language-selector .code {
  text-align: center;
}

.flip-clock-wrapper {
  margin: 0;
  white-space: nowrap;
}

.flip-clock-wrapper ul {
  float: none;
  display: inline-block;
  width: 101px;
}

.flip-clock-divider {
  float: none;
}

.flip-clock-divider * {
  display: none;
}

.flip-clock-wrapper ul li a div div.inn {
  text-shadow: none;
}

.flip-clock-wrapper ul.flip-clock-meridium {
  position: absolute !important;
  border-radius: 0;
  box-shadow: none;
  z-index: 10;
  left: 0;
  top: 0;
  height: auto;
  line-height: 100%;
  font-size: 20px !important;
  text-align: left;
}

.eisbaer-clock .cap {
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  /*background: black;*/
  position: absolute;
  border-radius: 50%;
}

.eisbaer-clock .hour-mark {
  width: 8px;
  height: 50px;
  margin-left: -4px;
  left: 50%;
  position: absolute;
  /*background: black;*/
  -webkit-transform-origin: 50% 200px 0;
  transform-origin: 50% 200px 0;
}

.eisbaer-clock .minute-mark {
  width: 4px;
  height: 25px;
  margin-left: -2px;
  top: 10px;
  left: 50%;
  position: absolute;
  /*background: black;*/
  -webkit-transform-origin: 50% 190px 0;
  transform-origin: 50% 190px 0;
}

.eisbaer-clock .digit {
  width: 100%;
  position: absolute;
  top: 50px;
  -webkit-transform-origin: 50% 150px 0;
  transform-origin: 50% 150px 0;
  /*color: black;*/
  text-align: center;
}

.eisbaer-clock .hour-hand {
  width: 14px;
  height: 110px;
  margin-left: -7px;
  top: 90px;
  left: 50%;
  position: absolute;
  /*background: black;*/
  -webkit-transform-origin: 50% 110px 0;
  transform-origin: 50% 110px 0;
}

.eisbaer-clock .minute-hand {
  width: 10px;
  height: 185px;
  margin-left: -5px;
  top: 15px;
  left: 50%;
  position: absolute;
  /*background: black;*/
  -webkit-transform-origin: 50% 185px 0;
  transform-origin: 50% 185px 0;
}

.eisbaer-clock .second-hand {
  width: 4px;
  height: 190px;
  margin-left: -2px;
  top: 10px;
  left: 50%;
  position: absolute;
  /*background: black;*/
  -webkit-transform-origin: 50% 190px 0;
  transform-origin: 50% 190px 0;
}

.eisbaer-clock .icon {
  width: 80px;
  height: 80px;
  margin-left: -40px;
  top: 55%;
  left: 50%;
  position: absolute;
  background-size: contain;
}

.circular-gauge {
  width: 400px;
  height: 400px;
  position: absolute;
  /*border: 1px dashed black;*/
  /*border-radius: 50%;*/
  /*overflow: hidden;*/
}

.circular-gauge .shadow {
  width: 100%;
  height: 100%;
  position: absolute;
}

.circular-gauge .cap {
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  position: absolute;
  border-radius: 50%;
}

.circular-gauge .range {
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
}

.circular-gauge .cover {
  border-radius: 50%;
  top: 15px;
  left: 15px;
  width: 370px;
  height: 370px;
  background: white;
  position: absolute;
  /*border: 1px solid black;*/
}

.circular-gauge .major-tick {
  top: 30px;
  width: 4px;
  height: 30px;
  margin-left: -2px;
  left: 50%;
  position: absolute;
  background: black;
  -webkit-transform-origin: 50% 170px;
  transform-origin: 50% 170px;
}

.circular-gauge .minor-tick {
  top: 35px;
  width: 2px;
  height: 20px;
  margin-left: -1px;
  left: 50%;
  position: absolute;
  background: black;
  -webkit-transform-origin: 50% 165px;
  transform-origin: 50% 165px;
}

.circular-gauge .shadow div,
.circular-gauge .scale {
  top: 8px;
  width: 6px;
  height: 12px;
  margin-left: -3px;
  left: 50%;
  position: absolute;
  background: black;
  -webkit-transform-origin: 50% 190px;
  transform-origin: 50% 190px;
  /*box-shadow: 3px -20px 4px aqua;*/
}

.circular-gauge .shadow div {
  background: none;
}

.circular-gauge .digit {
  width: 100%;
  position: absolute;
  top: 65px;
  -webkit-transform-origin: 50% 135px 0;
  transform-origin: 50% 135px 0;
  color: black;
  text-align: center;
  text-shadow: none;
}

.circular-gauge .needle {
  width: 0;
  height: 0;
  top: 190px;
  left: 150px;
  position: absolute;
  border-style: solid;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-width: 10px 0 10px 180px;
  -webkit-transform-origin: 50px 10px;
  transform-origin: 50px 10px;
  transition: 1s;
}

.circular-gauge .unit {
  position: absolute;
  bottom: 0;
  white-space: nowrap;
}

.linear-gauge {
  width: 30px;
  height: 300px;
  position: absolute;
  /*border: 1px dotted black;*/
}

.linear-gauge.vertical {
  width: 300px;
  height: 30px;
}

.linear-gauge .range {
  position: absolute;
  width: 100%;
}

.linear-gauge.vertical .range {
  position: absolute;
  height: 100%;
}

.linear-gauge .major-tick {
  width: 80%;
  height: 4px;
  left: 10%;
  margin-top: -2px;
  position: absolute;
  background: black;
}

.linear-gauge.vertical .major-tick {
  width: 4px;
  height: 80%;
  top: 10%;
  margin-left: -2px;
  margin-top: 0;
}

.linear-gauge .minor-tick {
  width: 50%;
  height: 2px;
  margin-top: -1px;
  left: 25%;
  position: absolute;
  background: black;
}

.linear-gauge.vertical .minor-tick {
  width: 2px;
  height: 50%;
  top: 25%;
  margin-left: -1px;
  margin-top: 0;
}

.linear-gauge .digit {
  width: 100%;
  position: absolute;
  left: 120%;
  color: black;
  line-height: 0;
}

.linear-gauge.vertical .digit {
  top: 120%;
  width: 100%;
  margin-left: -50%;
  text-align: center;
  line-height: normal;
}

.linear-gauge .arrow {
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  transition: 1s;
}

.linear-gauge.horizontal .arrow {
  margin: -15px 0 0 -20px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-width: 15px 0 15px 40px;
}

.linear-gauge.vertical .arrow {
  margin: -20px 0 0 -15px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  border-width: 40px 15px 0 15px;
}

.linear-gauge .unit {
  position: absolute;
  white-space: nowrap;
}

.eisbaer-smiley {
  top: 1px;
  left: 1px;
  /*width: 100%;
	height: 100%;*/
  background: url('../img/components/smiley.png') no-repeat yellow;
  background-size: 100% 100%;
  border-radius: 50%;
  position: absolute;
}

.eisbaer-smiley .eye-rim {
  top: 20%;
  left: 50%;
  margin-left: -23%;
  background: white;
  border-radius: 50%;
  width: 25%;
  height: 25%;
  position: absolute;
}

.eisbaer-smiley .eye-rim + .eye-rim {
  margin-left: -2%;
}

.eisbaer-smiley .eye {
  top: 20%;
  left: 20%;
  width: 60%;
  height: 60%;
  background: black;
  border-radius: 50%;
  position: absolute;
}

.eisbaer-smiley .mouth {
  /*width:75%;*/
  /*height: 50%;*/
  /*left: 15%;*/
  width: 50%;
  height: 50%;
  left: 25%;
  top: 55%;
  position: absolute;
}

/*.eisbaer-smiley .mouth svg {*/
/*width: 100%;*/
/*height: 100%;*/
/*}*/

.eisbaer-codelock {
  width: 100%;
  height: 100%;
  position: absolute;
}

.eisbaer-codelock .display {
  border: 1px solid #6a6a6a;
}

.eisbaer-codelock input {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  text-align: center;
  position: relative;
  z-index: 1;
}

.eisbaer-codelock table {
  width: 100%;
  border-spacing: 10px;
  position: relative;
  z-index: 2;
}

.eisbaer-codelock table td {
  width: 33%;
  vertical-align: middle;
  text-align: center;
  border: 1px solid #6a6a6a;
  border-radius: 3px;
  background: #a0a0a0;
  /*background: -webkit-linear-gradient(top,#b4b4b4 0%,#a0a0a0 100%); */
  background: -webkit-linear-gradient(top, #fbfdfd 0%, #dee3ea 50%, #cdd7e1 50%, #fbfdfd 100%);
  background: -moz-linear-gradient(top, #fbfdfd 0%, #dee3ea 50%, #cdd7e1 50%, #fbfdfd 100%);
  background: -ms-linear-gradient(top, #fbfdfd 0%, #dee3ea 50%, #cdd7e1 50%, #fbfdfd 100%);
}

.eisbaer-codelock table td.down {
  border-color: #c07540;
  /*background: -webkit-linear-gradient(top,#f6c868 0%,#ffe48a 100%);*/
  background: -webkit-linear-gradient(top, #f6ad69 0%, #ffa131 50%, #ff910b 50%, #ffc04a 100%);
  background: -moz-linear-gradient(top, #f6ad69 0%, #ffa131 50%, #ff910b 50%, #ffc04a 100%);
  background: -ms-linear-gradient(top, #f6ad69 0%, #ffa131 50%, #ff910b 50%, #ffc04a 100%);
}

.eisbaer-changeuser .button {
  /*width: 100%;*/
  /*height: 100%;*/
  /*display: block;*/
  border: 1px solid #f8f8f8;
  background: -webkit-linear-gradient(top, #fbfdfd 0%, #dee3ea 50%, #cdd7e1 50%, #fbfdfd 100%);
  background: -moz-linear-gradient(top, #fbfdfd 0%, #dee3ea 50%, #cdd7e1 50%, #fbfdfd 100%);
  background: -ms-linear-gradient(top, #fbfdfd 0%, #dee3ea 50%, #cdd7e1 50%, #fbfdfd 100%);
  vertical-align: middle;
  text-align: center !important;
  color: black;
  font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-shadow: none;

  position: absolute;
  bottom: 0;
  height: 28px;
  line-height: 28px;
}

.eisbaer-colorpicker {
  position: absolute;
}

.eisbaer-colorpicker .circle {
  /*width: 50%;*/
  /*height:50%;*/
  /*top: 25%;*/
  /*left: 25%;*/
  width: 36%;
  height: 36%;
  top: 32%;
  left: 32%;
  border-radius: 50%;
  /*background: blueviolet;*/
  background: black;
  position: absolute;
}

.eisbaer-colorpicker .circle::after {
  content: '';
  position: absolute;
  top: -15%;
  left: -15%;
  background: url('../img/spheroid.png') no-repeat center;
  /*display: block;*/
  height: 130%;
  width: 130%;
  border-radius: 50%;
  background-size: 100% 100%;
  /*background-position: -60% 170%;*/
  opacity: 0.5;
}

.eisbaer-colortable {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: absolute;
  z-index: 99999;
}

.eisbaer-colortable table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
}

.eisbaer-colortable table td {
  border: 1px solid white;
  background: black;
  width: 10px;
  height: 10px;
}

.picture_component {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

#content {
  /* background: white !important; */
}

/*
.sandwich .ui-input-text {
	height: 35px;
	border-radius: 0;
	margin:0 !important;
	padding:0 !important;
}
.sandwich .ui-btn-inner {
	padding-left: 12px !important;
	padding-right: 12px !important;
}
*/

.sandwich {
  position: relative;
  /*padding-left: 43px;
	padding-right: 43px;*/
  padding-left: 35px;
  padding-right: 35px;
}

.sandwich .ui-input-text {
  height: 35px;
  border-radius: 0;
  margin: 0 !important;
  padding: 0 !important;
  /*width: 100%;*/
  display: block;
}

#nested-list-mode .sandwich div.ui-input-text {
  width: 100%;
  height: 38px;
  background: white !important;
}

#nested-list-mode .ui-field-contain .ui-controlgroup-controls {
  width: 100%;
  border: 1.5px solid #dadada;
}

#nested-list-mode .ui-controlgroup.sandwich {
  width: 40% !important;
  box-sizing: content-box;
  display: inline-block;
}

.sandwich .ui-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.sandwich .ui-controlgroup-controls {
  display: block;
}

.sandwich .ui-btn-inner {
  /*
	padding-left: 12px !important;
	padding-right: 12px !important;
	*/
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.sandwich .ui-btn:first-child {
  left: 0;
  right: auto;
}

#bottom_bar {
  display: none;
  position: fixed;
  bottom: -50px;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  height: 65px;
  text-align: center;
}

#bottom_bar .toggle {
  display: none;
}

#bottom_bar.browser {
  width: 290px;
  margin-left: -145px;
}

#bottom_bar.browser .toggle {
  display: inline-block;
}

#bottom_bar .ui-btn-inner {
  width: 55px;
}

.scale-text {
  width: 150px;
  height: 150px;
  position: absolute;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.scale-text * {
  position: absolute;
  line-height: 100%;
  text-shadow: none;
}

.scale-text .zero {
  bottom: 120px;
  left: 70px;
}

.scale-text .one {
  bottom: 104px;
  right: 110px;
}

.scale-text .two {
  bottom: 77px;
  right: 120px;
}

.scale-text .three {
  bottom: 50px;
  right: 117px;
}

.scale-text .auto {
  bottom: 105px;
  left: 108px;
}

/* .safe-grip .ui-li-static {
  padding-right: 1.5cm !important;
} */

.safe-grip .ui-li-static .ui-li-static {
  padding-right: 15px !important;
}

.cam-escape,
.plugin-container {
  pointer-events: none;
}

.cam-escape .load-error,
.mjpeg-decoder .load-error,
.media-viewer .load-error {
  display: none;
  position: absolute;
  color: red;
  font-size: 24px;
}

.cam-escape.show-error .load-error,
.mjpeg-decoder.show-error .load-error,
.media-viewer.show-error .load-error {
  display: block;
}

#page-mode {
  text-shadow: none;
  /* margin-left: 4%; */
}

#page-mode-noscale {
  /*position: absolute;*/
}

#page-mode div {
  /*border-color: transparent;*/
}

.imageselect {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.imageselect .shield {
  position: absolute;
  background: black;
  opacity: 0.66;
  width: 100%;
  height: 100%;
}

.imageselect .center {
  top: 50%;
  background: gray;
  position: absolute;
  text-align: center;
  width: 100%;
  box-shadow: 0px 4px 4px black;
}

.imageselect .strip {
  white-space: nowrap;
  overflow: auto;
}

.imageselect .option {
  display: inline-block;
  text-align: center;
  padding: 5px 10px;
}

.imageselect .option.selected {
  background: skyblue;
}

.imageselect .buttons {
  padding: 10px 0;
}

.imageselect .buttons button {
  min-width: 80px;
}

.imageselect button + button {
  margin-left: 10px;
}

.imageselect .option img {
  display: block;
}

.nl-colorshow .ui-btn-inner {
  padding-left: 0;
  padding-right: 0;
}

body[data-theme='a'] {
  background: #222;
}

.lockshield {
  background: url('../img/locked.png') no-repeat center rgba(0, 0, 0, 0.1);
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}

.DoorPhoneDivCSS {
  display: flex;
  /* width: 100%; */
  border: 1px solid grey;
  border-style: solid;
  border-width: 1px;
  /* margin: 5px !important; */
  align-items: center;
  border-radius: 1em;
  margin: 5px !important;
  align-items: center !important;
  border-radius: 5px !important;
  padding-left: 12px !important;
  margin-bottom: 7px !important;
  height: 40px !important;
  background: white;
}

.DoorPhoneDivCSS div {
  border: none !important;
  background: none !important;
  text-shadow: none !important;
  border-radius: unset !important;
  box-shadow: none !important;
  padding: 0% !important;
  width: 60% !important;
}

.doorphone-list {
  border: none !important;
}

.ui-icon-qrcode {
  background-image: url('../img/ic-qrcode.png');
  background-position: center;
  height: 22px;
  /* -webkit-background-size: 20px;
  background-size: 18px; */
}
/* .ui-icon-gear {
	background-image: url("../img/icons-36-setting_black.png");
	background-position: 2px 2px;
	-webkit-background-size: 13px;
	background-size: 13px;
} */

.ui-icon-microphone {
  background-image: url('../img/ic-mic.png');
  background-position: center;
  height: 22px;
  /* -webkit-background-size: 20px;
  background-size: 18px; */
}

.ui-icon-landscape {
  background-image: url('../img/landscape.png');
  background-position: 2px 2px;
  -webkit-background-size: 15px;
  background-size: 15px;
}

.ui-icon-portrait {
  background-image: url('../img/portrait.png');
  background-position: 2px 2px;
  -webkit-background-size: 15px;
  background-size: 15px;
}
.ui-icon-setting-arrow-l {
  background-image: url('../img/iconpack/icons-36-black-pack.png');
  -moz-background-size: 774px 54px;
  -o-background-size: 774px 54px;
  -webkit-background-size: 774px 54px;
  background-size: 774px 54px;
}

/* .ui-icon-home{
	background-image: url("../img/icon-36-home.png");
	background-position: 2px 2px;
	-webkit-background-size: 15px;
	background-size: 15px;
} */
.ui-footer .ui-btn-text {
  display: none;
}

.ui-footer .ui-btn-inner .ui-icon {
  top: 7px;
}

.handle.ui-sortable-handle {
  /*background: fuchsia none repeat scroll 0 0;*/
  display: inline-block;
  height: 5px !important;
  width: 16px !important;
  margin-right: 15px;
  vertical-align: top;
  margin-top: 7px !important;
}

.handle.ui-sortable-handle .bar {
  /* border-radius: 1px;
  display: block;
  height: 1px;
  margin-bottom: 3px;
  border: 1px solid white;
  border-color: rgba(255, 255, 255, 0.7) rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.3)
    rgba(255, 255, 255, 0.7); */
  border-radius: 1px;
  display: block;
  height: 2px;
  margin-bottom: 4px;
  background: black;
}

.ui-icon-home {
  background-position: -575.5px -0;
}

.ui-footer .ui-icon {
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
}

.simple-toast {
  position: fixed;
  bottom: 10%;
  width: 100%;
  text-align: center;
  z-index: 10000;
  text-shadow: none;
}

.simple-toast .inner {
  background: rgba(32, 32, 32, 0.7);
  border-radius: 5px;
  padding: 10px;
  color: white;
  display: inline-block;
}

.simple-toast.red .inner {
  background: rgba(192, 0, 0, 0.7);
}

.simple-toast.green .inner {
  background: rgba(0, 192, 0, 0.7);
}

.nl-switchtext-value {
  font-size: large;
}

.color-editor .ui-controlgroup.ui-mini {
  margin-top: 0;
}

#nested-list-mode .doorphone-settings {
  width: 14.5%;
  margin: 0 -1px;
  max-height: 40px;
}
.ui-body-c .nlaction-list {
  background: white !important;
}
.doorphone-button {
  background: '#F7F7F7';
  border: '1px solid #dadada';
  border-right: 4px solid #dadada !important;
}
#nested-list-mode .splitbutton a {
  height: 40px;
}

.pie-chart .title,
.pie-chart .title-bottom {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.pie-chart .title {
  padding: 15px 15px 10px 15px;
  text-align: center !important;
}

.pie-chart .title-bottom {
  position: absolute !important;
  bottom: 0;
  right: 0;
  padding: 10px 15px 20px 15px;
  text-align: right !important;
}

.pie-chart .stage {
  position: relative;
}

.pie-chart .legend {
  position: absolute;
  top: 0;
  right: 15px;
  background: white;
  border: 1px solid #696969;
  padding: 10px;
  text-align: center;
}
#button-18 .knobs:before,
#button-18 .knobs span {
  content: 'YES' !important;
  position: absolute !important;
  top: 4px !important;
  left: 4px !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: bold !important;
  text-align: center !important;
  line-height: 1 !important;
  background-color: #03a9f4 !important;
  border-radius: 2px !important;
}

#button-18 .knobs:before {
  top: 50% !important;
  left: 8px !important;
  width: 20px !important;
  height: 10px !important;
  margin-top: -5px !important;
  background-color: transparent !important;
  z-index: 2 !important;
}

#button-18 .knobs span {
  width: 20px !important;
  height: 10px !important;
  padding: 9px 4px !important;
  transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) !important;
  z-index: 1 !important;
}

#button-18 .checkbox:active + .knobs:before {
  left: 10px !important;
  width: 46px !important;
  height: 4px !important;
  color: transparent !important;
  margin-top: -2px !important;
  background-color: #0095d8 !important;
  transition: 0.3s ease all !important;
  overflow: hidden !important;
}

#button-18 .checkbox:active + .knobs span {
  width: 58px !important;
}

#button-18 .checkbox:checked:active + .knobs:before {
  left: auto !important;
  right: 10px !important;
  background-color: #d80000 !important;
}

#button-18 .checkbox:checked:active + .knobs span {
  margin-left: -38px !important;
}

#button-18 .checkbox:checked + .knobs:before {
  content: 'NO' !important;
  left: 47px !important;
}

#button-18 .checkbox:checked + .knobs span {
  left: 42px !important;
  background-color: #f44336 !important;
}

#button-18 .checkbox:checked ~ .layer {
  background-color: #fcebeb !important;
}
.toggle-button-cover {
  display: table-cell !important;
  position: relative !important;
  width: 200px !important;
  height: 140px !important;
  box-sizing: border-box !important;
}

.button-cover {
  height: 100px !important;
  margin: 20px !important;
  background-color: #fff !important;
  box-shadow: 0 10px 20px -8px #c5d6d6 !important;
  border-radius: 4px !important;
}

.button-cover:before {
  counter-increment: button-counter !important;
  content: counter(button-counter) !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  color: #d7e3e3 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  padding: 5px !important;
}

.button-cover,
.knobs,
.layer {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
}

.button {
  position: relative !important;
  top: 50% !important;
  width: 74px !important;
  height: 25px !important;
  margin: -20px auto 0 auto !important;
  overflow: hidden !important;
}

.user-change {
  position: relative !important;
  top: 20% !important;
  width: 100% !important;
  height: 20 !important;
  margin: -20px auto 0 auto !important;
  overflow: hidden !important;
  background: #ededed !important;
}

.button.b2 {
  border-radius: 2px !important;
}
.checkbox {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 3 !important;
}

.knobs {
  z-index: 2 !important;
}

.layer {
  width: 100% !important;
  background-color: #ebf7fc !important;
  transition: 0.3s ease all !important;
  z-index: 1 !important;
}
* {
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

*:focus {
  outline: none !important;
}
.button.r,
.button.r .layer {
  border-radius: 100px !important;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color: #f1f9f9;
}

#app-cover {
  display: table;
  width: 600px;
  margin: 80px auto;
  counter-reset: button-counter;
}

.row {
  display: table-row;
}
/*
.pie-chart .legend .channel * {
	display: inline-block;
}

.pie-chart .legend .channel * + *{
	margin-left: 5px;
}
*/

.pie-chart .legend td {
  text-align: left;
}

.pie-chart .legend td + td {
  padding-left: 5px;
}

.pie-chart .pie {
  position: absolute;
  /*width: 200px;*/
  /*height: 200px;*/
  /*border-radius: 50%;*/
  /*overflow: hidden;*/
  /*background: red;*/
  /*left: 15px;*/
}

.pie-chart .pie .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: url('../img/spheroid.png') no-repeat;
  background-size: 100% 100%;
  border-radius: 50%;
}

.pie-chart .inlay {
  height: 100%;
  box-sizing: border-box;
  /*background-color: #d4d4d4;*/
  /*border: 1px solid #9f9f9f;*/
  pointer-events: none;
}

.pie-chart .series-label {
  position: absolute;
  line-height: 100%;
  border-radius: 2px;
  padding: 3px 3px 1px;
  white-space: nowrap;
}

.simple-calendar {
  background: white;
}

.simple-calendar table {
  width: 100%;
  height: 100%;
  background: #a1a1a1;
  border-spacing: 2px;
  border-collapse: separate;
}

.simple-calendar td {
  text-align: center;
  background: white;
  width: 1%;
  padding: 5px;
}

.simple-calendar td.inactive,
.simple-calendar td.inactive input {
  color: #d2d2d2;
  background: #e8e8e8;
}

.simple-calendar .weekdays td {
  width: 14.285714285714285714285714285714%;
}

.simple-calendar .send-value td {
  text-align: left;
}

.simple-calendar select {
  width: 100%;
  height: 100%;
  /*-moz-appearance: listbox;*/
  /*-webkit-appearance: listbox;*/
  /*background: red;*/
  border: 1px solid #a1a1a1;
}

.simple-calendar input {
  width: 100%;
  height: 100%;
  border: none;
  text-align: center;
  box-sizing: border-box;
}

.simple-calendar td.buttons {
  text-align: right;
  background: #e6e6e6;
  padding: 10px;
}

.simple-calendar td.empty {
  color: #afafaf;
}

.simple-calendar button {
  display: inline-block;
  height: 100%;
  min-width: 80px;
  background: #f0f0f0;
  border: 1px solid #a6a6a6;
  padding: 0 10px;
}

.simple-calendar button + button {
  margin-left: 10px;
}

.simple-calendar select,
.simple-calendar option {
  text-shadow: 0px 0px 5px white !important;
}

.simple-calendar-dialog {
  width: 100%;
  height: 100%;
  position: absolute;
  padding: 0.5cm;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
}

.simple-calendar-dialog .simple-calendar {
  width: 100%;
  height: 100%;
  max-width: 600px;
  max-height: 400px;
  margin: 0 auto;
}

.nl-simple-calendar {
  padding: 0 5px;
}

.nl-simple-calendar > * + * {
  margin-top: 10px;
}

.nl-simple-calendar .time > * {
  width: 50%;
  display: inline-block;
  box-sizing: border-box;
}

.nl-simple-calendar .buttons {
  display: none;
  margin-left: -5px;
  margin-right: -5px;
}

.nl-simple-calendar .channels {
  display: none;
}

.nl-simple-calendar.editmode .channels {
  display: block;
}

.nl-simple-calendar.editmode .buttons {
  display: block;
}

.nl-simple-calendar.editmode .editbutton {
  display: none;
}

.nl-simple-calendar .buttons > * {
  width: 33.333%;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 5px;
}

.nl-simple-calendar .send-value {
  display: none;
  margin-left: -5px;
  margin-right: -5px;
}

.nl-simple-calendar .send-value > * {
  width: 50%;
  display: inline-block;
  box-sizing: border-box;
  padding: 0 5px;
}

.nl-simple-calendar.editmode .send-value {
  display: block;
}

.nl-simple-calendar:not(.editmode) .ui-focus {
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}

.nl-simple-calendar .editbutton {
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  /*padding: 0 5px;*/
}

.nl-simple-calendar .time .from {
  padding-right: 5px;
}

.nl-simple-calendar .time .to {
  padding-left: 5px;
}

.nl-simple-calendar .ui-input-text {
  text-align: center;
  box-sizing: border-box;
}

.nl-simple-calendar .buttons .ui-btn-inner {
  padding-left: 0;
  padding-right: 0;
}

.nl-simple-calendar .ui-grid-d > :nth-child(n),
.nl-simple-calendar .weekdays > * {
  width: 14.285714285714285714285714285714%;
  display: inline-block;
}

.nl-simple-calendar .weekdays .ui-bar.inactive {
  opacity: 0.2;
}

/*
.nl-simple-calendar .ui-grid-d .ui-block-a,
.nl-simple-calendar .ui-grid-d .ui-block-b,
.nl-simple-calendar .ui-grid-d .ui-block-c,
.nl-simple-calendar .ui-grid-d .ui-block-d,
.nl-simple-calendar .ui-grid-d .ui-block-e {
	width: 14.285714285714285714285714285714%;
}
*/

.nl-simple-calendar .weekdays .ui-bar {
  padding: 0;
  text-align: center;
  line-height: 50px;
}

.nl-simple-calendar div.ui-input-text,
.nl-simple-calendar div.ui-select {
  width: 100%;
}

.no-touch {
  -ms-touch-action: none;
  touch-action: none;
}

.eisbaer-button,
.eisbaer-button-fakeborder {
  -webkit-transition: width 0.5s, height 0.5s;
  /* Safari */
  transition: width 0.5s, height 0.5s;
}

.eisbaer-polybutton {
  box-shadow: none !important;
}

.eisbaer-polybutton svg {
  pointer-events: none;
}

.eisbaer-polybutton svg * {
  pointer-events: auto;
}

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='number'] {
  -moz-appearance: textfield;
}
.switch {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 40px;
}
.switch input {
  display: none;
}
.slider {
  content: 'YEs';
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.slider:before {
  content: 'No';
  position: absolute;
  content: '';
  height: 35px;
  width: 50%;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
input:checked + .slider {
  background-color: #2196f3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
  /* 30px = 26px (slider's width) + 4px (for the margin) */
  left: calc(100% - 50%);
}
.iphone-x-top,
.iphone-x-bottom {
  background: black;
  position: fixed;
  left: 0;
  width: 100%;
  height: 0;
}
.ui-icon-outinle-home {
  background-image: url('../img/ic-home.png') !important;
  background-position: center;
  height: 22px;
  /* -webkit-background-size: 20px !important;
  background-size: 18px !important; */
}
.iphone-x-top {
  top: 0;
  height: constant(safe-area-inset-top);
  height: env(safe-area-inset-top);
}

.iphone-x-bottom {
  bottom: 0;
  height: constant(safe-area-inset-bottom);
  height: env(safe-area-inset-bottom);
}

.mce-tinymce.mce-container.mce-panel {
  height: 100%;
}

.mce-tinymce .mce-container-body {
  height: 100%;
}

.mce-tinymce .mce-container-body .mce-edit-area {
  height: calc(100% - 35px);
}

input,
textarea,
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

.chrome-bugfix {
  will-change: opacity;
}

.my-confirm-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.my-confirm-wrapper .center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  max-height: 100%;
}

.my-confirm-wrapper .clickshield {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.my-confirm-wrapper .dialog {
  background: white;
  position: relative;
  text-shadow: none;
  border-radius: 4px;
  overflow: hidden;
  margin: 10px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

.my-confirm-wrapper .dialog .title {
  background: darkblue;
  text-align: center;
  color: white;
  padding: 5px;
}

.my-confirm-wrapper .dialog .content {
  padding: 10px 10px 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;
}

.my-confirm-wrapper .image {
  overflow: scroll;
  text-align: center;
  margin-top: 10px;
}

.my-confirm-wrapper img {
  max-width: 100%;
  max-height: 100%;
  max-height: calc(100vh - 125px);
}

.my-confirm-wrapper .dialog .buttons {
  padding: 0px 10px 10px;
  /*border-top: 1px solid black;*/
  /*background: gray;*/
  text-align: center;
}

.my-confirm-wrapper .dialog .button {
  display: inline-block;
  /*border: 1px solid black;*/
  padding: 5px 10px;
  background: darkblue;
  color: white;
  /*font-weight: bold;*/
  margin: 10px 5px 0;
}

.my-confirm-wrapper .dialog .button + .button {
  /*margin-left: 10px;*/
}

.ui-footer-fixed {
  padding-bottom: env(safe-area-inset-bottom);
  background: unset;
}

.lookup-editor-dialog {
  position: absolute;
  background: white;
  width: 400px;
  z-index: 1000;
  box-sizing: border-box;
}

.lookup-editor-dialog.fullscreen {
  width: 100%;
  height: 100%;
  padding: 10px;
}

.lookup-editor-dialog .input {
  border-radius: 0;
}

.lookup-editor-dialog .input-wrapper {
  position: relative;
  width: 200px;
  height: 40px;
  border: 1px solid #b9b9b9;
  margin: 0 5px 5px 0;
  float: left;
  box-sizing: border-box;
}

.lookup-editor-dialog .input-wrapper input {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  padding: 0 5px;
  display: block;
  border: none;
  line-height: 34px;
  font-size: 16px;
}

.lookup-editor-dialog button {
  float: left;
  height: 40px;
}

.lookup-editor-dialog button.cancel {
  background: url('../img/alarmclock/button_cancel.png') no-repeat center;
  background-size: 33px;
  border: none;
  min-width: 40px;
}

.lookup-editor-dialog button.accept {
  background: url('../img/alarmclock/button_accept.png') no-repeat center;
  background-size: 40px;
  border: none;
  min-width: 40px;
}

.lookup-editor-dialog table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  clear: both;
}

.lookup-editor-dialog td {
  padding: 5px;
  border: 1px solid #b9b9b9;
  box-sizing: border-box;
}

.lookup-editor-dialog tbody td {
  border-bottom: none;
}

.lookup-editor-dialog tbody {
  border-bottom: 1px solid #b9b9b9;
}

.lookup-editor-dialog tbody tr:first-child td {
  border-top: none;
}

.lookup-editor-dialog tr.selected td {
  background: #f78a09;
  color: white;
}

.lookup-editor-dialog tr.selected td:first-child {
  background: white;
  color: black;
}

.lookup-editor-dialog tr.selected td:first-child::after {
  content: '▶';
}

.lookup-editor-dialog td:nth-child(1) {
  min-width: 25px;
  text-align: center;
}

/*
.lookup-editor-dialog td:nth-child(2) {
	width: 1%;
}

.lookup-editor-dialog td:nth-child(3) {
	width: 1%;
}

.lookup-editor-dialog td:nth-child(4) {
	width: 100%;
}
*/

.lookup-editor-dialog td:last-child {
  width: 100%;
}

.lookup-editor-dialog tbody {
  display: block;
  overflow: auto;
  overflow-x: hidden;
  /*height: 200px;*/
  max-height: calc(100vh - 130px);
  max-height: max(90px, 100vh - 130px);
  width: 100%;
}

.lookup-editor-dialog thead tr {
  display: block;
}

.lookup-editor-dialog thead td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lookup-editor-dialog thead .search-row td {
  padding: 0;
}

.lookup-editor-dialog thead td input {
  width: 100%;
  height: 28px;
  box-sizing: border-box;
}

.light-background {
  background: transparent;
  border: none;
  padding: 15px 0 15px 0 !important;
}

.ui-body-c .light-background div.ui-controlgroup-controls {
  /* Grey/Grey 100 */

  background: #f7f7f7;
  /* Grey/Grey 400 */

  /* border: 1px solid #dadada; */
  box-sizing: border-box;
  /* Medium shadow */

  /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05); */
  border-radius: 4px;
}

.light-background span.ui-btn-text {
  font-weight: 400;
}

.doorphone-border {
  width: 90%;
  margin-top: 0%;
}

.ui-btn-inner {
  /* text-align: left !important; */
}

.rtr-list {
  margin-top: 0px !important;
  /* background: white !important; */
  border: none !important;
  padding: 0px 0px 8px 0px !important;
}

.nlaction-list {
  /* background: white !important; */
  border: none !important;
  /* border-radius: 7px !important; */
  padding: 2px 0px !important;
}

.ui-body-c .nlaction-list {
  background: white !important;
}

.nlaction-list a {
  border-top: 1px solid #dadada;
  border-left: 1px solid #dadada;
  border-right: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.nlaction-list a.ui-btn-icon-left {
  border: 1px solid #dadada;
  /* border-right: 1px solid #dadada; */
}

.nlaction-list .ui-btn-text {
  /* color: #020303; */
  font-family: 'Manrope' !important;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
}

.ui-body-c .nlaction-list .ui-btn-text {
  color: #020303;
}

.nlaction-list .ui-btn {
  margin: 0.5em 0 !important;
}

.rtr-input {
  background: white !important;
  padding: 2px !important;
  height: 30px !important;
  width: 60px !important;
  font-weight: 0 !important;
}

.ui-slider-dimmer {
  /* margin-left: 82px !important; */
  /* margin-top: 10px !important; */
  /* margin: 10px 0 0 97px !important; */
  /* margin-left: 97px !important; */
}

.ui-btn-up-e {
  box-shadow: 0 0 0 4px #fc5e0763;
  border-radius: 50%;
  top: 89% !important;
  width: 22px !important;
  height: 22px !important;
}

.nl-color-show span {
  font-weight: 400;
  padding: 0.9em 20px;
}

.ui-btn-up-d {
  box-shadow: 0 0 0 4px #70706f66;
  background: #70706f !important;
  border-radius: 50%;
  top: 89% !important;
  width: 22px !important;
  height: 22px !important;
}

.ui-shadow-inset {
  box-shadow: unset !important;
  -webkit-box-shadow: none !important;
}

.ui-body-c {
  background: white !important;
}

.setting-icon a {
  border-radius: unset !important;
  border: none !important;
  box-shadow: none !important;
  background: white !important;
  /* float: right !important; */
}
.doorphonesetting-icon a {
  border-radius: unset !important;
  border: none !important;
  box-shadow: none !important;
  background: white !important;
}
/* .doorphonesetting-icon span:first-child {
  position: absolute !important;
  z-index: 1 !important;
  margin-left: 50px !important;
} */
.ui-icon-trash {
  background-image: url('../img/trash.png') !important;
  background-position: 2px 2px !important;
  -webkit-background-size: 16px !important;
  background-size: 16px !important;
}

.nl-dimmer-input {
  height: 28px !important;
  width: 62px !important;
  border-radius: 5px !important;
  border: 1px solid #dadada !important;
  color: #70706f !important;
}

.ui-slider-rtr,
.ui-slider-dimmer {
  margin-left: 82px !important;
  margin-top: 10px !important;
}

/* .ui-slider-rtr a,.ui-slider-dimmer a {
  margin-left: 0% !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  top: 135% !important;
} */

.ui-slider-rtr a,
.ui-slider-dimmer a {
  /* margin-left: -3% !important; */
  margin-left: -2% !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  top: 135% !important;
}

.jalousie-button-bottom {
  display: flex;
  justify-content: center;
}
.settingpagetlssilder a {
  left: 0%;
  border-radius: 50% !important;
  background: #e95b0d !important;
}
/* .settingpagetlssilder a {
  border-radius: 50% !important;
  background: #e95b0d !important;
} */
.ui-icon-delete {
  background-image: url('../img/ic-cancel.png') !important;
  background-position: 2px 2px !important;
  -webkit-background-size: 20px !important;
  background-size: 15px !important;
}

.settingpagetlssilder .ui-slider.ui-slider-switch.ui-btn-down-c.ui-btn-corner-all {
  background: none;
  width: 80px;
  margin: 5px;
}

.setting-pushnotification
  .ui-slider-handle.ui-slider-handle-snapping.ui-btn.ui-btn-up-c.ui-shadow.ui-btn-corner-all {
  left: 0%;
  border-radius: 50% !important;
  background: #e95b0d !important;
}
.setting-pushnotification .ui-slider-label.ui-slider-label-a.ui-btn-active.ui-btn-corner-all {
  color: black !important;
  width: 100%;
  font-weight: 400;
  font-family: 'Manrope' !important;
  text-shadow: none;
  background: white !important;
}
.settingpagetlssilder .ui-slider-label.ui-slider-label-a.ui-btn-active {
  color: black !important;
  width: 100%;
  font-weight: 400;
  font-family: 'Manrope' !important;
  text-shadow: none;
  background: white !important;
}

.setting-pushnotification .ui-slider-label.ui-slider-label-b.ui-btn-down-c.ui-btn-corner-all {
  color: black !important;
  width: 100%;
  font-weight: 400;
  font-family: 'Manrope' !important;
  text-shadow: none;
  background: white !important;
}

.settingpagetlssilder
  a.ui-slider-handle-snapping.ui-btn.ui-btn-up-c.ui-shadow.ui-btn-corner-all[aria-valuetext='Yes'] {
  background-color: white;
}

.setting-pushnotification .ui-slider.ui-slider-switch.ui-btn-down-c.ui-btn-corner-all {
  background: white !important;
  margin: 0 7px;
}

.settingpagetlssilder
  a.ui-slider-handle-snapping.ui-btn.ui-btn-up-c.ui-shadow.ui-btn-corner-all[aria-valuetext='No'] {
  background-color: white;
}

.settingpagetlssilder .ui-slider-label.ui-slider-label-b.ui-btn-down-c {
  color: black !important;
  width: 100%;
  font-weight: 400;
  font-family: 'Manrope';
  text-shadow: none;
  background: white !important;
}

#server-details .ui-select {
  margin: 0 5px;
  height: 47px;
}

#server-details label.ui-select {
  margin: 7px 7px 2px 7px;
  height: 22px;
}

#server-details .ui-select .ui-icon.ui-icon-arrow-d {
  background-image: url(../img/ic-arrow-down.png) !important;
  background-position: 2px 2px !important;
  -webkit-background-size: 20px !important;
  background-size: 15px !important;
}

.jalousie-button-bottom .ui-btn-inner {
  padding-top: 15px !important;
}

.jalousie-button-bottom span :nth-child(2) {
  position: unset !important;
}

.jalousie-button-bottom .ui-btn-inner {
  margin: 0 15px !important;
  padding-top: 15px !important;
}

.jalousie-button {
  display: flex !important;
  justify-content: center !important;
  /* flex-direction: row-reverse !important; */
}

.jalousie-button .ui-btn-inner {
  margin: 0 30px !important;
  padding-top: 15px !important;
}

.jalousie-button span :nth-child(2) {
  position: unset !important;
}

.jalousie-button span :first-child {
  /* margin-right: 41px !important; */
}

.jalousie-list {
  /* background: white; */
  border: none !important;
  padding-bottom: 8px !important;
}

.ui-body-c .schalter-list > label,
.ui-body-c .jalousie-list > label {
  /* color: #70706f !important; */
}

.schalter-list {
  /* background: white; */
  border: none !important;
  padding: 0 0 8px 0 !important;
}

.switch-list {
  /* background: white; */
  border: none !important;
  padding: 0 0px !important;
}

.schalter-list .ui-slider-inneroffset a {
  width: 50% !important;
}

.switch-button {
  width: 100%;
  opacity: 0.5;
  box-shadow: none;

  border: unset;
}

.light-background .ui-controlgroup-horizontal .ui-btn-inner {
  text-align: left !important;
}

.ui-body-c .ui-bar-a {
  text-shadow: none;
}
.ui-btn-icon-right.ui-li-has-arrow {
  font-weight: 500 !important;
  text-shadow: none !important;
  /* background-image: linear-gradient(#fff, #ffff); */
}
.ui-content {
  padding: 8px 12px 15px;
}

#nestedListDetailsview .group-list {
  width: 100% !important;
  position: relative !important;
  left: -15px !important;
  margin-top: 5px !important;
}

.ui-select .ui-btn.ui-btn-up-c.ui-shadow.ui-btn-corner-all.ui-btn-icon-right {
  border-radius: 4px !important;
  background: #fff;
  box-shadow: none;
  box-sizing: border-box;
  border: 1px solid #dadada;
  font-family: 'Manrope';
  font-weight: 500;
}
.ui-slider .ui-btn-corner-all {
  border-radius: 1.8em !important;
}

label.ui-input-text {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 175%;
  /* margin: 0 7px; */
  margin: 0 10px;
}
.label-doorphone {
  /* width: 80% !important; */
  width: 45%;
  font-weight: 600 !important;
}
.DoorPhoneDivCSS .ui-icon-delete {
  display: none !important;
}
.jalousie-list .ui-btn-corner-all {
  border-radius: 0.4em !important;
}
.jalousie-list .ui-btn-text {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 !important;
  font-size: 16px;
}
.jalousie-list {
  padding: 0 0 8px 0 !important;
}
.jalousie-list .ui-block-a {
  /* width: 48%; */
  margin-right: 4px;
}
.jalousie-list .ui-block-b {
  margin-left: 4px;
  /* width: 48%; */
  /* float: right; */
}
/* #nestedListDetailsview {
  margin: 0em !important;
} */
/* .ui-btn-up-a, */
.ui-btn-up-c {
  /* border: none; */
  border-bottom: 1px solid #ccc !important;
}

.net-disp {
  /* Auto layout */
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  position: static !important;
  left: 0px !important;
  top: 56px !important;

  /* Grey/Grey 100 */

  background: #f7f7f7 !important;
  /* Grey/Grey 400 */

  border: 1px solid #dadada !important;
  box-sizing: border-box;
  /* Medium shadow */

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px !important;

  /* Inside auto layout */

  flex: none !important;
  order: 1 !important;
  flex-grow: 0 !important;
}
.ui-li,
.ui-li.ui-field-contain {
  border: none;
}

.ui-footer-fixed {
  border: none;
}

.ui-footer-fixed .ui-btn-active {
  border: none;
}

.ui-btn-up-c {
  background: linear-gradient(#fff, #ffff);
}
#design > ul > li > div > fieldset > div > div > label.ui-btn-active {
  background: #e95b0d !important;
  color: #fff !important;
}

#design > ul > li > div > fieldset > div > div.ui-radio > label.ui-btn-active {
  background: #e95b0d !important;
  color: #fff !important;
}

.theme-26 #design > ul > li > div > fieldset > div > div > label.ui-btn-active {
  color: #000 !important;
}
/* #design > ul > li > div {
  background: #e95b0d !important;
} */
/* .ui-slider-switch .ui-slider-label-a {
  background: #f7f7f7;
  border: solid 1px #dadada;
}
.ui-slider-switch .ui-slider-label-b {
  background: #f7f7f7;
  border: solid 1px #dadada;
} */

li > .bar {
  border: 1px solid #dadada;
}

#nestedListDetailsview .ui-slider-switch .ui-slider-label {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 3;
}

#nestedListDetailsview .ui-slider-switch .ui-btn.ui-slider-handle {
  background: transparent;
  border: none;
  color: #ffffff;
}

#nestedListDetailsview .ui-slider-switch .ui-btn.ui-slider-handle {
  margin: 0px;
  margin-left: -17px;
  height: auto;
}

.ui-btn-up-c,
.ui-btn-up-b,
.ui-btn-up-a,
.ui-btn-down-c {
  text-shadow: none;
  font-family: 'Manrope' !important;
}

.jalousie-list .ui-btn-up-c {
  /* Grey/Grey 100 */

  background: #f7f7f7;
  /* Grey/Grey 400 */

  border: 1px solid #dadada;
  box-sizing: border-box;
  /* Medium shadow */

  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.05);
  border-radius: 4px;

  /* Inside auto layout */

  flex: none;
  order: 0;
  flex-grow: 1;
  margin: 0;
}

.ui-select .ui-btn {
  text-align: left !important;
}
@supports (-webkit-touch-callout: none) {
  /* position: absolute !important;
    top: 15px;
    left: 70%;
} */

  /* CSS specific to iOS devices */
  body {
    /* overflow: hidden; */
  }
}

.ui-grid-solo .ui-btn-text {
  font-family: 'Manrope' !important;
  font-style: normal;
  font-weight: 500 !important;
  font-size: 16px;
}

.ui-content .ui-slider {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 175%;
}

.ui-slider .ui-corner-all {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 175%;
}

.ui-controlgroup-controls .ui-btn-text {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  /* line-height: 175%; */
}

.ui-listview .ui-slider {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 175%;
}

.ui-sortable .ui-listview .text {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 175%;
}

.ui-listview .setting-input {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 175%;
}
.DoorPhoneInput {
  font-family: 'Manrope';
  font-style: normal;
  font-size: 16px;
  line-height: 175%;
  border: none !important;
  background: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  margin: 0% !important;
  color: #70706f !important;
}

/* .ui-input-text {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 175%;
} */

/* .ui-select .ui-btn .ui-btn-up-c .ui-btn-corner-all .ui-btn-icon-right {
  background: #fff;
} */

.ui-body-c,
.ui-overlay-c {
  border: 1px solid #dadada;
}
.ui-field-contain .ui-controlgroup,
.ui-field-contain fieldset.ui-controlgroup {
  margin: 0 7px;
}

#pushnotificationid {
  margin: 7px 0 0 7px;
}

.dimmer-text {
  /* color: #70706f !important; */
  margin: 0 !important;
}

.ui-field-contain .ui-body .ui-br .ui-li .ui-li-static .ui-btn-up-c {
  border-bottom: none !important;
}

/* .ui-field-contain .ui-body .ui-br .ui-li .ui-li-static .ui-btn-up-c {
  border-bottom: none;
} */

.ui-content .ui-listview,
.ui-panel-inner > .ui-listview {
  margin: 0;
}
.ui-input-text.ui-slider {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  margin-left: 0px;
}
.ui-body-c .ui-input-text.ui-slider {
  /* color: #70706f; */
  /* color: black !important; */
}
.nlaction-list .ui-grid-solo .ui-icon.ui-icon-gear.ui-icon-shadow {
  margin-left: 7px;
}
.nlaction-list .ui-grid-solo .ui-btn-inner .ui-icon {
  width: 20px;
  height: 20px;
}
/* .ui-icon .ui-icon-arrow-r .ui-icon-shadow {
  right: 0;
} */

.ui-btn > .ui-li > .ui-btn-text > a {
  padding: 10px 0 !important;
}
.ui-btn > .ui-li > .ui-icon {
  right: 0;
}
.net-disp > .ui-li > .ui-btn-text > a {
  padding: 10px 15px !important;
}

#settings > ul > li {
  padding: 0 10px !important;
}

/* css of arrow-r icon for root page  */
/* #nested-list-mode > ul > li > .ui-li > .ui-icon {
  background-image: url('../img/right-arrow.png') !important;
  background-position: center !important;
  background-size: cover !important;
} */

.rtr-list > label.ui-slider {
  margin: 0 !important;
}
/* .ui-content < #nested-list-mode < ul < .cam-control {
  padding: 0;
}  */

/* .ui-content:has(.cam-control) {
  padding: 0 !important;
} */

#solution-details > #phonelist > ul > a > span > .ui-icon,
.doorphone-settings > span > .ui-icon {
  width: 20px !important;
  height: 20px !important;
}
.doorphone-ul {
  margin: 10px 6px !important;
}

#solutions > ul {
  margin: 0 8px;
}

#solution-details > #phonelist > ul > a {
  margin: 8px;
}

.nl-colorshow > div > .ui-grid-c > div > a {
  margin: 0;
  padding: 0;
}

#control_22_sequenceGridContainer > div > div > div {
  color: #ffffff;
}
.ui-content > #nestedListDetailsview > .cam-control {
  padding: 0 !important;
}

.ui-body-c .nlaction-list > div > a {
  /* background: #f7f7f7 !important; */
}

/* .ui-btn-up-a a.ui-link-inherit {
  color: #2f3e46;
} */
/* .cam-control .ui-content:parent {
  padding: 0 !important;
} */
/* .primary-button {
  background: #47b4e3;
  color: #fff;
}

.seconday-button {
  background: #e95b0d;
  color: #fff;
} */

.ui-footer > .ui-navbar {
  border-top: 1px solid #dadada;
}
.net-disp > div > span {
  right: 8px !important;
}
#server-details .ui-select > div {
  background: #fff !important;
  box-shadow: none !important;
  background-image: none !important;
  font-weight: 400;
}
#server-details > ul > li > fieldset > div.ui-controlgroup-controls > div > label.ui-btn-active {
  color: #fff !important;
  background: #e95b0d !important;
}

body.theme-26
  #server-details
  > ul
  > li
  > fieldset
  > div.ui-controlgroup-controls
  > div
  > label.ui-btn-active {
  color: #000 !important;
  background: #e95b0d !important;
}

.ui-footer > .ui-focus,
.ui-btn:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
#design [data-theme='p'] {
  border: 1px solid #ccc;
  color: #fff;
  background: #008fb5 !important;
}

#design [data-theme='s'] {
  border: 1px solid #ccc;
  color: #fff;
  background: #e95b0d !important;
}

.doorphone-divider {
  font-family: Manrope;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
}

.ui-footer > div > ul > li > a.ui-btn-active {
  background-image: unset !important;
}

.ui-btn-up-b {
  border: unset;
}
.jalousie-list .ui-btn-hover-c {
  /* background: #e95b0d; */
}
.jalousie-list .ui-btn {
  margin: unset;
  margin-right: 1px;
}
.jalousie-list .ui-btn-icon-top .ui-btn-inner .ui-icon {
  margin-left: unset;
}

a.jalousie-button:active {
  /* background: #e95b0d; */
}
a.jalousie-button-bottom:active {
  /* background: #e95b0d; */
}
.ui-footer > div > ul > li > a.ui-btn-hover-a {
  border: none;
}
body.ui-mobile-viewport {
  border: unset;
}

#index .ui-header .ui-title {
  font-size: 19px;
  margin: 0.6em 10% 0.8em;
}
#server-details div.ui-input-text {
  margin: 0 5px 5px 5px;
}
#server-details fieldset > div {
  margin-bottom: 2px;
}

#server-details fieldset > div {
  margin-bottom: 2px;
}
/* #server-details #labeltls{
 width: 100%;
 } */
.buttonSequencea,
.buttonplaya,
.buttonOffa,
.buttonClosea {
  border-radius: 4px !important;
  width: 90%;
}
@media screen and (orientation: landscape) {
  div.ui-page:not(#index) {
    padding: 42px 0 !important;
  }
}

body.theme-13 .ui-page .a-color span.ui-icon {
  background-image: url('../img/iconpack/icons-36-black-pack.png') !important;
}

/* body.theme-13 .ui-page .r-color span.ui-icon {
  background-image: url('../img/ic-refresh-blk-32.png') !important;
} */

body.theme-13 .ui-page .t-icon span.ui-icon {
  background-image: url('../img/trash-Black.png') !important;
}

body.theme-13 .ui-page .add-btn span.ui-icon {
  background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
}

.theme-13 .ui-btn-left .label-color {
  color: #000 !important;
}

.theme-13 .ui-btn-left .ui-icon {
  background-image: url('../img/iconpack/icons-36-black-pack.png') !important;
}

.theme-26 .switchbtnon span {
  color: #000 !important;
}

.ui-btn-left .label-color {
  color: #ffffff !important;
}

.label-width {
  width: 55% !important;
}

.theme-13 .ui-popup-container .ui-icon-refresh {
  background-image: url('../img/ic-refresh-blk-32.png') !important;
}

.theme-13 .ui-btn-right .ui-controlgroup-controls .r-color .ui-icon-refresh {
  background-image: url('../img/ic-refresh-blk-32.png') !important;
}

.theme-8 .ui-popup-active .ui-icon-refresh {
  background-image: url('../img/ic-refresh-32.png') !important;
}

.ui-popup-active .ui-icon-refresh {
  background-image: url('../img/ic-refresh-32.png') !important;
}

.theme-8 .gear-icon .ui-icon-gear {
  background-image: url('../img/gear-white.png') !important;
}

.theme-26 .ui-page .ui-content .ui-listview .ui-grid-solo .gear-icon .ui-icon-gear {
  background-image: url('../img/gear-icon.png') !important;
}

.ui-page .ui-content .ui-listview .ui-grid-solo .gear-icon {
  border-left: 2px solid #ccc;
  width: 14.5% !important;
}

.theme-8 .ui-listview .ui-btn-icon-right .ui-btn-inner .ui-icon-arrow-r {
  background-image: url('../img/iconpack/icons_36_white.png') !important;
}

.theme-3 .ui-page .ui-popup-container .ui-popup .r-color .ui-icon-refresh {
  background-image: url('../img/ic-refresh-blk-32.png') !important;
}

.theme-8 .DoorPhoneDivCSS label {
  color: #000 !important;
}

body.theme-26 .group-list {
  border: 1.5px solid #ccc;
  margin-top: 5px !important;
}

body .ui-header .ui-btn-right .group-icon .ui-icon-grid {
  background-image: url('../img/iconpack/icons-36-white-pack.png') !important;
}

.theme-13 .ui-header .ui-btn-right .group-icon .ui-icon-grid {
  background-image: url('../img/iconpack/icons-36-black-pack.png') !important;
}

body .ui-page-header-fixed .nested-list {
  color: #ffffff !important;
}

.theme-13 .ui-page-header-fixed .nested-list .ui-btn-text {
  color: #000 !important;
}

body .ui-header .ui-btn-right .ui-controlgroup-controls .ui-btn-up-c {
  background: none !important;
  border: unset !important;
  box-shadow: none !important;
}

.theme-26 .ui-page-active .ui-header .ui-btn-right .ui-btn-up-b .ui-icon-grid {
  background-image: url('../img/iconpack/icons-36-black-pack.png') !important;
}

.theme-32 .ui-page-active .ui-header .ui-btn-right .ui-btn-up-b .ui-icon-grid {
  background-image: url('../img/iconpack/icons-36-white-pack.png') !important;
}

.theme-8 .ui-page-active .ui-listview .ori-mode .ui-btn-active {
  background: #e95b0d !important;
}

@media only screen and (min-width: 600px) {
  .theme-32 .ui-page-active .ui-header .ui-btn-right .ui-btn-up-b .ui-icon-grid {
    background-image: url('../img/iconpack/icons-18-white-pack.png') !important;
  }

  .theme-8 .ui-listview .ui-btn-icon-right .ui-btn-inner .ui-icon-arrow-r {
    background-image: url(../img/iconpack/icons-18-white-pack.png) !important;
  }

  body.theme-13 .ui-page .a-color span.ui-icon {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .theme-8 .gear-icon .ui-icon-gear {
    background-image: url(../img/iconpack/icons-18-white-pack.png) !important;
  }

  .theme-20 .ui-header .ui-icon-refresh {
    background-image: url(../img/iconpack/icons-18-white-pack.png) !important;
  }

  .theme-20 .ui-header .ui-icon-arrow-l {
    background-image: url(../img/iconpack/icons-18-white-pack.png) !important;
  }

  .theme-20 .ui-header .ui-icon-add {
    background-image: url(../img/iconpack/icons-18-white-pack.png) !important;
  }

  .theme-13 .ui-page-header .ui-icon-refresh {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  body .ui-listview .ui-btn-icon-right .ui-icon-arrow-r {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  .theme-26 .ui-page-active .ui-header .ui-btn-right .ui-btn-up-b .ui-icon-grid {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  .ui-body-c .ui-listview .setting-icon .ui-select {
    width: 99% !important;
  }

  .theme-8 .ui-popup .ui-icon-refresh {
    background-image: url(../img/iconpack/icons-18-white-pack.png) !important;
  }

  .theme-3 .ui-popup .ui-icon-refresh {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .ui-listview .ui-btn-hover-c .ui-icon-gear {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .ui-header .ui-btn-hover-a .ui-icon-arrow-l {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .ui-header .ui-btn-hover-a .ui-btn-text {
    color: #000 !important;
  }

  body .ui-header .ui-btn-hover-a .ui-icon-add {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .ui-header .ui-btn-hover-a .ui-icon-landscape {
    background-image: url(../img/landscape-black.png) !important;
  }

  body .ui-header .ui-btn-hover-a .ui-icon-trash {
    background-image: url(../img/trash-Black.png) !important;
  }

  .ui-content .ui-listview .ui-grid-solo .ui-icon-gear {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
    margin-left: 40px !important;
  }

  .ui-content .ui-icon-grid {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .ui-content .ui-icon-play {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .ui-content .ui-icon-power {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .ui-content .ui-icon-arrow-u {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .ui-content .ui-icon-arrow-d {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .ui-content .ui-slider {
    width: 100% !important;
  }

  .ui-page .ui-header .ui-btn-right .group-icon .ui-icon-grid {
    background-image: url(../img/iconpack/icons-18-white-pack.png) !important;
  }

  .ui-page .ui-header .ui-btn-right .ui-btn-hover-a .ui-icon-grid {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .theme-20 .ui-header .ui-btn-hover-a .ui-btn-text {
    color: #ffffff !important;
  }

  .theme-20 .ui-header .ui-btn-hover-a .ui-icon-arrow-l {
    background-image: url('../img/iconpack/icons-18-white-pack.png') !important;
  }

  .theme-20 .ui-header .ui-btn-hover-a .ui-icon-arrow-l {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  .theme-20 .ui-header .ui-btn-hover-a .ui-btn-text {
    color: #000 !important;
  }

  .theme-26 .ui-page-active .ui-btn-right .ui-btn-up-b .ui-icon-grid {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  .theme-32 .ui-page-active .ui-btn-right .ui-btn-up-b .ui-icon-grid {
    background-image: url('../img/iconpack/icons-18-white-pack.png') !important;
  }

  body .ui-content .ui-listview .edit .ui-icon-gear {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .ui-page .ui-header .ui-btn-right .ui-btn-hover-a .ui-icon-grid {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .ui-page .ui-header .ui-btn-right .ui-btn-hover-a .ui-icon-refresh {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .theme-13 .ui-btn-left .ui-icon-arrow-l {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .theme-13 .ui-page .ui-header .ui-btn-right .ui-icon-refresh {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  .theme-13 .ui-page .ui-header .ui-btn-right .ui-icon-landscape {
    background-image: url(../img/landscape-black.png) !important;
  }

  .theme-13 .ui-page .ui-header .ui-btn-right .ui-icon-arrow-l {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  .theme-13 .ui-page .ui-header .ui-btn-right .group-icon .ui-icon-grid {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  body .ui-listview .gear-icon .ui-icon-gear {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  .theme-20 #design .ui-btn-hover-a .ui-icon-arrow-l {
    background-image: url('../img/iconpack/icons-18-white-pack.png') !important;
  }

  .theme-20 #design .ui-btn-hover-a .ui-btn-text {
    color: #ffff !important;
  }

  .theme-8 .ui-page .gear-icon .ui-icon-gear {
    background-image: url('../img/iconpack/icons-18-white-pack.png') !important;
  }

  .theme-8 .ui-page .ui-btn-hover-c .ui-icon-gear {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  body.theme-13 .ui-page .a-color span.ui-icon {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  body.theme-13 .ui-page .t-icon span.ui-icon {
    background-image: url('../img/trash-Black.png') !important;
  }

  body.theme-13 .ui-page .add-btn span.ui-icon {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  .theme-13 .ui-btn-left .ui-icon {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  body .ui-header .ui-btn-right .group-icon .ui-icon-grid {
    background-image: url('../img/iconpack/icons-18-white-pack.png') !important;
  }

  .theme-13 .ui-header .ui-btn-right .group-icon .ui-icon-grid {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  .theme-26 .ui-page-active .ui-header .ui-btn-right .ui-btn-up-b .ui-icon-grid {
    background-image: url('../img/iconpack/icons-18-black-pack.png') !important;
  }

  .theme-32 .ui-page-active .ui-header .ui-btn-right .ui-btn-up-b .ui-icon-grid {
    background-image: url('../img/iconpack/icons-18-white-pack.png') !important;
  }

  .ui-content .ui-listview .semiVisible {
    color: #000 !important;
  }

  body .ui-controlgroup-controls .ui-first-child .ui-btn-inner .ui-icon-grid {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .ui-controlgroup-controls .ui-icon-play {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .ui-controlgroup-controls .ui-icon-power {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .ui-controlgroup-controls .ui-icon-minus {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }
  body .ui-controlgroup-controls .ui-icon-pause {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .ui-controlgroup-controls .ui-icon-plu {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .sandwich .ui-controlgroup-controls .ui-icon-refresh {
    /* background-image: url('../img/ic-refresh-blk-32.png') !important; */
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .ui-controlgroup-controls .ui-icon-arrow-r {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .ui-controlgroup-controls .ui-mini .ui-btn-inner {
    background: gray;
  }

  body .ui-content .ui-grid-c .ui-icon-pause {
    background-image: url(../img/iconpack/icons-18-black-pack.png) !important;
  }

  body .color-editor .ui-controlgroup,
  .ui-controlgroup-horizontal {
    margin: 0 0;
  }

  body .ui-header .add-btn {
    right: 20px;
  }

  body .ui-btn-icon-notext .ui-btn-inner .ui-icon-add {
    zoom: 1.2;
  }
}

body .eis-bg-10063 {
  background: -webkit-linear-gradient(0deg, rgba(156, 156, 156, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

body .eis-bg-41 {
  background-color: rgba(105, 105, 105, 1) !important;
}

body .eis-border-14526 {
  border-color: rgba(195, 195, 195, 1) !important;
}

body .eis-border-14992 {
  border-color: rgba(255, 174, 174, 1) !important;
}

.version-dialog {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.input-checkbox {
  width: 18px;
  height: 18px;
  margin-bottom: 0 !important;
}

.span-font {
  margin-left: 10px;
  font-size: 15px;
  color: #6b6b6b !important;
}

.flot-text {
  top: 0% !important;
}

.reset-icon {
  background-image: url('../img/ic-reset-port.png');
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-right: 7px;
  margin-top: 2px;
}

.custom-scrollbar {
  width: 300px;
  height: 300px;
  overflow: auto;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 10px;
  background-color: #f1f1f1;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #c0c0c0;
}

.custom-dialog-ports {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.sub-dialog {
  background-color: #fefefe;
  padding: 18px;
  border: 1px solid #888;
  max-width: 400px;
  height: 130px;
  width: 80%;
}

.dialog-btns {
  font-size: 12px;
  background: transparent;
  border: none;
  height: 30px;
  width: 50px;
}

.dialog-cancel-btn {
  margin: 2px 5px;
}

.dialog-save-btn {
  margin: 4px 5px;
  box-shadow: 0px 0px 0px 2px rgb(227 227 227);
  border-radius: 5px;
  padding: 4px 11px;
}


/* Pause button added this css 03-07-23*/

body .ui-content .ui-icon-pause {
  background-image: url(../img/iconpack/icons-36-black-pack.png) !important;
}