@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}

q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input[type="search"]::-webkit-search-decoration {
  display: none;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0;
}

button,
a.button,
input[type="reset"],
input[type="submit"],
input[type="button"],
input[type="image"] {
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
  overflow: visible;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: top;
  text-align: center;
  text-decoration: none;
  width: auto;
  -webkit-appearance: none;
  background-clip: padding-box;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 13px;
  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
}

button,
input[type="reset"],
input[type="submit"],
input[type="button"] {
  line-height: normal !important;
}

textarea,
select,
input,
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"] {
  background: none;
  border: 0;
  margin: 0;
  outline: 0;
  padding: 0;
  text-align: left;
  vertical-align: top;
  font-size: 13px;
  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
  -webkit-appearance: none;
  background-clip: padding-box;
  border-radius: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
textarea::-webkit-outer-spin-button, textarea::-webkit-inner-spin-button,
select::-webkit-outer-spin-button,
select::-webkit-inner-spin-button,
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button,
input[type="date"]::-webkit-inner-spin-button,
input[type="datetime"]::-webkit-outer-spin-button,
input[type="datetime"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-outer-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="email"]::-webkit-outer-spin-button,
input[type="email"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-outer-spin-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="password"]::-webkit-outer-spin-button,
input[type="password"]::-webkit-inner-spin-button,
input[type="search"]::-webkit-outer-spin-button,
input[type="search"]::-webkit-inner-spin-button,
input[type="tel"]::-webkit-outer-spin-button,
input[type="tel"]::-webkit-inner-spin-button,
input[type="text"]::-webkit-outer-spin-button,
input[type="text"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-outer-spin-button,
input[type="time"]::-webkit-inner-spin-button,
input[type="url"]::-webkit-outer-spin-button,
input[type="url"]::-webkit-inner-spin-button,
input[type="week"]::-webkit-outer-spin-button,
input[type="week"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

textarea {
  min-height: 50px;
  overflow: auto;
  resize: vertical;
  width: 100%;
}

optgroup {
  font-style: normal;
  font-weight: normal;
  font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
}

select::-ms-expand {
  display: none;
}

@-moz-document url-prefix() {
  input:invalid,
  button:invalid,
  select:invalid,
  textarea:invalid {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  input::-moz-focus-inner,
  button::-moz-focus-inner,
  select::-moz-focus-inner,
  textarea::-moz-focus-inner {
    border: 0;
    padding: 0;
  }

  select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: "";
  }
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 100%;
  -webkit-text-size-adjust: none;
  /* Prevent font scaling in landscape */
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  font-family: BlinkMacSystemFont, -apple-system, "Roboto", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Tahoma", sans-serif;
  font-size: 15px;
  font-weight: normal;
}
html.translate-cloak {
  background: #2B2B2B;
}

body {
  height: 100%;
}
body.translate-cloak {
  display: none !important;
}

[ui-view] {
  height: 100%;
}

input[type=checkbox], input[type=radio] {
  visibility: hidden;
  display: none;
  width: 0;
  height: 0;
}

svg {
  display: block;
  pointer-events: none;
}

.truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.clickable {
  cursor: pointer;
  -webkit-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}

.selectable {
  -webkit-user-select: all !important;
     -moz-user-select: all !important;
          user-select: all !important;
  -ms-user-select: text !important;
}

.appWrap {
  width: 100%;
  overflow-x: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  background-color: #3A3A3A;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize:first-letter {
  text-transform: uppercase;
}

.clear {
  clear: both;
}

.marginLR15 {
  margin: 0 15px;
}

.marginR15 {
  margin-right: 20px;
}

.marginB {
  margin-bottom: 60px;
}

.minHeight100 {
  min-height: 100%;
}

.marginTopHeader {
  margin-top: 60px;
}

input[type='text'], input[type='number'], input[type='email'], input[type='password'] {
  color: #AEAEAE;
  background-color: transparent;
  border-bottom: solid 1px #7A7A7A;
}
input[type='text']:disabled, input[type='number']:disabled, input[type='email']:disabled, input[type='password']:disabled {
  -webkit-text-fill-color: #AEAEAE !important;
  color: #AEAEAE !important;
  border-color: transparent !important;
}
input[type='text'].error, input[type='number'].error, input[type='email'].error, input[type='password'].error {
  border-color: #F96D5E !important;
}
input[type='text']::-webkit-input-placeholder, input[type='number']::-webkit-input-placeholder, input[type='email']::-webkit-input-placeholder, input[type='password']::-webkit-input-placeholder {
  color: #7b7b7b;
}
input[type='text']:-ms-input-placeholder, input[type='number']:-ms-input-placeholder, input[type='email']:-ms-input-placeholder, input[type='password']:-ms-input-placeholder {
  color: #7b7b7b;
}
input[type='text']::placeholder, input[type='number']::placeholder, input[type='email']::placeholder, input[type='password']::placeholder {
  color: #7b7b7b;
}

select {
  direction: rtl;
  color: #AEAEAE !important;
  background-color: transparent !important;
  border: solid 1px #7A7A7A;
  border-radius: 4px;
  padding: 6px 30px 6px 6px;
  background-image: url(../assets/app-icons/dropdown.svg);
  background-repeat: no-repeat;
  background-position: right 6px top 51%;
}
select:disabled {
  -webkit-text-fill-color: #AEAEAE !important;
  color: #AEAEAE !important;
  border-color: transparent !important;
}
select.error {
  border-color: #F96D5E !important;
}
select::-webkit-input-placeholder {
  color: #7b7b7b;
}
select:-ms-input-placeholder {
  color: #7b7b7b;
}
select::placeholder {
  color: #7b7b7b;
}

textarea {
  color: #2B2B2B;
  background: #F1F1F1;
  margin: 20px;
  padding: 20px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
  font-family: "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace;
  font-size: 1rem;
}

.center {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.bold {
  font-weight: bold;
}

.fontWeightNormal {
  font-weight: normal !important;
}

.CCitemListElement.light {
  color: #3A3A3A;
  background-color: #FFFFFF;
}
.CCitemListElement.light.clickable:hover {
  color: #353535;
  background-color: #fafafa;
}
.CCitemListElement.light.clickable:active {
  color: #262626;
  background-color: #ebebeb;
}
.CCitemListElement.light.active, .CCitemListElement.light.active:hover {
  color: #2d2d2d;
  background-color: #f2f2f2;
}
.CCitemListElement.light .CClight {
  color: #AEAEAE;
}
.CCitemListElement.light .CCred {
  color: #F96D5E;
}
.CCitemListElement.light.pulseEnocean {
  -webkit-animation: pulseEnocean 2s infinite;
          animation: pulseEnocean 2s infinite;
}
.CCitemListElement.light.pulseZigbee {
  -webkit-animation: pulseZigbee 2s infinite;
          animation: pulseZigbee 2s infinite;
}
.CCitemListElement.light.pulseZwave {
  -webkit-animation: pulseZwave 2s infinite;
          animation: pulseZwave 2s infinite;
}
.CCitemListElement.light.pulseHomematic {
  -webkit-animation: pulseHomematic 2s infinite;
          animation: pulseHomematic 2s infinite;
}
.CCitemListElement.light.pulseAfrisoEnocean {
  -webkit-animation: pulseAfrisoEnocean 2s infinite;
          animation: pulseAfrisoEnocean 2s infinite;
}
.CCitemListElement.light.pulseESTMKZWave {
  -webkit-animation: pulseESTMKZWave 2s infinite;
          animation: pulseESTMKZWave 2s infinite;
}
.CCitemListElement.light.pulseWlan {
  -webkit-animation: pulseWlan 2s infinite;
          animation: pulseWlan 2s infinite;
}
.CCitemListElement.dark {
  color: #D3D3D3;
  background-color: #5A5A5A;
  border-color: #4A4A4A !important;
}
.CCitemListElement.dark.clickable:hover {
  color: #dbdbdb;
  background-color: #626262;
}
.CCitemListElement.dark.clickable:active {
  color: #cbcbcb;
  background-color: #525252;
}
.CCitemListElement.dark.active {
  color: #cbcbcb;
  background-color: #525252;
}
.CCitemListElement.dark .CClight {
  color: #AEAEAE;
}
.CCitemListElement.dark .CCred {
  color: #F96D5E;
}

@-webkit-keyframes pulseEnocean {
  50% {
    background-color: #e0f6f1;
  }
}

@keyframes pulseEnocean {
  50% {
    background-color: #e0f6f1;
  }
}
@-webkit-keyframes pulseZigbee {
  50% {
    background-color: #fef0e9;
  }
}
@keyframes pulseZigbee {
  50% {
    background-color: #fef0e9;
  }
}
@-webkit-keyframes pulseZwave {
  50% {
    background-color: #efe4fe;
  }
}
@keyframes pulseZwave {
  50% {
    background-color: #efe4fe;
  }
}
@-webkit-keyframes pulseHomematic {
  50% {
    background-color: #4dc8fd;
  }
}
@keyframes pulseHomematic {
  50% {
    background-color: #4dc8fd;
  }
}
@-webkit-keyframes pulseAfrisoEnocean {
  50% {
    background-color: #bfe1ff;
  }
}
@keyframes pulseAfrisoEnocean {
  50% {
    background-color: #bfe1ff;
  }
}
@-webkit-keyframes pulseESTMKZWave {
  50% {
    background-color: #e8f7d5;
  }
}
@keyframes pulseESTMKZWave {
  50% {
    background-color: #e8f7d5;
  }
}
@-webkit-keyframes pulseWlan {
  50% {
    background-color: #ececec;
  }
}
@keyframes pulseWlan {
  50% {
    background-color: #ececec;
  }
}
.CCitemListElementRed.light, .CCitemListElementRed.dark {
  color: #FFD9D5;
  background-color: #F96D5E;
  border-bottom: 1px solid #FF8A7E !important;
}
.CCitemListElementRed.light.clickable:hover, .CCitemListElementRed.dark.clickable:hover {
  color: #ffd0cb;
  background-color: #f96454;
}
.CCitemListElementRed.light.clickable:active, .CCitemListElementRed.dark.clickable:active {
  color: #ffc2bc;
  background-color: #f85745;
}
.CCitemListElementRed.light.active, .CCitemListElementRed.light.active:hover, .CCitemListElementRed.dark.active, .CCitemListElementRed.dark.active:hover {
  color: #ffd0cb;
  background-color: #f96454;
}
.CCitemListElementRed.light .CClight, .CCitemListElementRed.dark .CClight {
  color: #FFA39A;
}
.CCitemListElementRed.light .CCred, .CCitemListElementRed.dark .CCred {
  color: #FFD9D5;
}

.CCitemListElementNA {
  color: #D3D3D3;
  background-color: #FFFFFF;
}
.CCitemListElementNA.clickable:hover {
  color: #d0d0d0;
  background-color: #fcfcfc;
}
.CCitemListElementNA.clickable:active {
  color: #c6c6c6;
  background-color: #f2f2f2;
}
.CCitemListElementNA.active, .CCitemListElementNA.active:hover {
  color: #d0d0d0;
  background-color: #f2f2f2;
}
.CCitemListElementNA .CClight {
  color: #D3D3D3;
}
.CCitemListElementNA.dark {
  color: #AEAEAE;
  background-color: #5A5A5A;
  border-color: #4A4A4A !important;
}
.CCitemListElementNA.dark.clickable:hover {
  color: #ababab;
  background-color: #575757;
}
.CCitemListElementNA.dark.clickable:active {
  color: #a1a1a1;
  background-color: #4d4d4d;
}
.CCitemListElementNA.dark.active {
  color: #ababab;
  background-color: #575757;
}
.CCitemListElementNA.dark .CClight {
  color: #AEAEAE;
}

.CCgroupsBlue {
  color: #FFFFFF;
  background-color: #707FDC;
}
.CCgroupsBlue.clickable:hover {
  color: white !important;
  background-color: #7c8adf !important;
}
.CCgroupsBlue.clickable:active {
  color: #f7f7f7 !important;
  background-color: #6474d9 !important;
}
.CCgroupsBlue.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #707FDC !important;
}
.CCgroupsBlue.checkboxLabel {
  border-color: #707FDC !important;
}
.CCgroupsBlue .CClight {
  color: #9DA8EA;
}
.CCgroupsBlue.onOffBtn .onOffOnWrap {
  background-color: #707FDC !important;
  border-color: #545FA7;
}
.CCgroupsBlue.rangeSlider .noUi-connect {
  background: #707FDC;
}
.CCgroupsBlue.input:hover, .CCgroupsBlue.select:hover, .CCgroupsBlue.textarea:hover {
  border-color: #9DA8EA !important;
}
.CCgroupsBlue.input:focus, .CCgroupsBlue.select:focus, .CCgroupsBlue.textarea:focus {
  border-color: #707FDC !important;
}

.CChomeegrams {
  color: #FFFFFF;
  background-color: #F973AB;
}
.CChomeegrams.clickable:hover {
  color: white !important;
  background-color: #fa8bba !important;
}
.CChomeegrams.clickable:active {
  color: #f2f2f2 !important;
  background-color: #f85b9c !important;
}
.CChomeegrams.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #F973AB !important;
}
.CChomeegrams.radioInput[type=radio]:checked + .radioLabel:after {
  background-color: #F973AB !important;
}
.CChomeegrams.checkboxLabel {
  border-color: #F973AB !important;
}
.CChomeegrams .CClight {
  color: #FCB3D1;
}
.CChomeegrams.onOffBtn .onOffOnWrap {
  background-color: #F973AB !important;
  border-color: #CD5587;
}
.CChomeegrams.rangeSlider .noUi-connect {
  background: #F973AB;
}
.CChomeegrams.input:hover, .CChomeegrams.select:hover, .CChomeegrams.textarea:hover {
  border-color: #FCB3D1 !important;
}
.CChomeegrams.input:focus, .CChomeegrams.select:focus, .CChomeegrams.textarea:focus {
  border-color: #F973AB !important;
}

.zigbee.itemDetailListElementName {
  color: #FA8B54;
}

.zwave.itemDetailListElementName {
  color: #B781FB;
}

.enocean.itemDetailListElementName {
  color: #6AD3BC;
}

.afrisoEnocean.itemDetailListElementName {
  color: #0065BF;
}

.homematic.itemDetailListElementName {
  color: #027BAF;
}

.wlan.itemDetailListElementName {
  color: #FFFFFF;
}

.homeegrams.itemDetailListElementName {
  color: #F973AB;
}

.groups.itemDetailListElementName {
  color: #707FDC;
}

.settings1.itemDetailListElementName {
  color: #b7b7b7;
}

.settings2.itemDetailListElementName {
  color: #9dc0d8;
}

.settings3.itemDetailListElementName {
  color: #F79A4F;
}

.settings4.itemDetailListElementName {
  color: #B2CB63;
}

.settings5.itemDetailListElementName {
  color: #68D0E6;
}

.CCzigbee {
  color: #FFFFFF;
  background-color: #FA8B54;
}
.CCzigbee.clickable:hover {
  color: white !important;
  background-color: #fb9c6d !important;
}
.CCzigbee.clickable:active {
  color: #f2f2f2 !important;
  background-color: #f97a3b !important;
}
.CCzigbee.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #FA8B54 !important;
}
.CCzigbee .CClight {
  color: #FFBE9E;
}
.CCzigbee.onOffBtn .onOffOnWrap {
  background-color: #FA8B54 !important;
  border-color: #B8653D;
}
.CCzigbee.rangeSlider .noUi-connect {
  background: #FA8B54;
}
.CCzigbee.upDownControl .upDownControlBtn.active {
  background: #FA8B54;
}
.CCzigbee.upDownControl .upDownControlBtn:hover {
  background: #FA8B54;
}
.CCzigbee.upDownControl .upDownControlBtn:active {
  background: #fa8145;
}
.CCzigbee.slatLiveIconWrap {
  background: #FA8B54;
}
.CCzigbee.input:hover, .CCzigbee.select:hover, .CCzigbee.textarea:hover {
  border-color: #B8653D !important;
}
.CCzigbee.input:focus, .CCzigbee.select:focus, .CCzigbee.textarea:focus {
  border-color: #FA8B54 !important;
}

.CCzwave {
  color: #FFFFFF;
  background-color: #B781FB;
}
.CCzwave.clickable:hover {
  color: white !important;
  background-color: #c59afc !important;
}
.CCzwave.clickable:active {
  color: #f2f2f2 !important;
  background-color: #a968fa !important;
}
.CCzwave.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #B781FB !important;
}
.CCzwave .CClight {
  color: #DBBEFF;
}
.CCzwave.onOffBtn .onOffOnWrap {
  background-color: #B781FB !important;
  border-color: #8C5FC4;
}
.CCzwave.rangeSlider .noUi-connect {
  background: #B781FB;
}
.CCzwave.upDownControl .upDownControlBtn.active {
  background: #B781FB;
}
.CCzwave.upDownControl .upDownControlBtn:hover {
  background: #B781FB;
}
.CCzwave.upDownControl .upDownControlBtn:active {
  background: #af72fb;
}
.CCzwave.slatLiveIconWrap {
  background: #B781FB;
}
.CCzwave.input:hover, .CCzwave.select:hover, .CCzwave.textarea:hover {
  border-color: #8C5FC4 !important;
}
.CCzwave.input:focus, .CCzwave.select:focus, .CCzwave.textarea:focus {
  border-color: #B781FB !important;
}

.CCenocean {
  color: #FFFFFF;
  background-color: #6AD3BC;
}
.CCenocean.clickable:hover {
  color: white !important;
  background-color: #7ed9c5 !important;
}
.CCenocean.clickable:active {
  color: #f2f2f2 !important;
  background-color: #56cdb3 !important;
}
.CCenocean.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #6AD3BC !important;
}
.CCenocean.radioInput[type=radio]:checked + .radioLabel:after {
  background-color: #6AD3BC !important;
}
.CCenocean .CClight {
  color: #B5EFE2;
}
.CCenocean.onOffBtn .onOffOnWrap {
  background-color: #6AD3BC !important;
  border-color: #469786;
}
.CCenocean.rangeSlider .noUi-connect {
  background: #6AD3BC;
}
.CCenocean.upDownControl .upDownControlBtn.active {
  background: #6AD3BC;
}
.CCenocean.upDownControl .upDownControlBtn:hover {
  background: #6AD3BC;
}
.CCenocean.upDownControl .upDownControlBtn:active {
  background: #5ed0b7;
}
.CCenocean.slatLiveIconWrap {
  background: #6AD3BC;
}
.CCenocean.input:hover, .CCenocean.select:hover, .CCenocean.textarea:hover {
  border-color: #469786 !important;
}
.CCenocean.input:focus, .CCenocean.select:focus, .CCenocean.textarea:focus {
  border-color: #6AD3BC !important;
}

.CChomematic {
  color: #FFFFFF;
  background-color: #027BAF;
}
.CChomematic.clickable:hover {
  color: white !important;
  background-color: #028dc8 !important;
}
.CChomematic.clickable:active {
  color: #f2f2f2 !important;
  background-color: #026996 !important;
}
.CChomematic.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #027BAF !important;
}
.CChomematic .CClight {
  color: #004E74;
}
.CChomematic.onOffBtn .onOffOnWrap {
  background-color: #027BAF !important;
  border-color: #004E74;
}
.CChomematic.rangeSlider .noUi-connect {
  background: #027BAF;
}
.CChomematic.upDownControl .upDownControlBtn.active {
  background: #027BAF;
}
.CChomematic.upDownControl .upDownControlBtn:hover {
  background: #027BAF;
}
.CChomematic.upDownControl .upDownControlBtn:active {
  background: #0270a0;
}
.CChomematic.slatLiveIconWrap {
  background: #027BAF;
}
.CChomematic.input:hover, .CChomematic.select:hover, .CChomematic.textarea:hover {
  border-color: #004E74 !important;
}
.CChomematic.input:focus, .CChomematic.select:focus, .CChomematic.textarea:focus {
  border-color: #027BAF !important;
}

.CCafrisoEnocean {
  color: #FFFFFF;
  background-color: #0065BF;
}
.CCafrisoEnocean.clickable:hover {
  color: white !important;
  background-color: #0072d9 !important;
}
.CCafrisoEnocean.clickable:active {
  color: #f2f2f2 !important;
  background-color: #0058a6 !important;
}
.CCafrisoEnocean.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #0065BF !important;
}
.CCafrisoEnocean .CClight {
  color: #45B4E4;
}
.CCafrisoEnocean.onOffBtn .onOffOnWrap {
  background-color: #0065BF !important;
  border-color: #004064;
}
.CCafrisoEnocean.rangeSlider .noUi-connect {
  background: #0065BF;
}
.CCafrisoEnocean.upDownControl .upDownControlBtn.active {
  background: #0065BF;
}
.CCafrisoEnocean.upDownControl .upDownControlBtn:hover {
  background: #0065BF;
}
.CCafrisoEnocean.upDownControl .upDownControlBtn:active {
  background: #005db0;
}
.CCafrisoEnocean.slatLiveIconWrap {
  background: #0065BF;
}
.CCafrisoEnocean.input:hover, .CCafrisoEnocean.select:hover, .CCafrisoEnocean.textarea:hover {
  border-color: #004064 !important;
}
.CCafrisoEnocean.input:focus, .CCafrisoEnocean.select:focus, .CCafrisoEnocean.textarea:focus {
  border-color: #0065BF !important;
}

.CCESTMKZWave {
  color: #FFFFFF;
  background-color: #A2DD55;
}
.CCESTMKZWave.clickable:hover {
  color: white !important;
  background-color: #aee16a !important;
}
.CCESTMKZWave.clickable:active {
  color: #f2f2f2 !important;
  background-color: #96d940 !important;
}
.CCESTMKZWave.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #A2DD55 !important;
}
.CCESTMKZWave .CClight {
  color: #E6FFC6;
}
.CCESTMKZWave.onOffBtn .onOffOnWrap {
  background-color: #A2DD55 !important;
  border-color: #527624;
}
.CCESTMKZWave.rangeSlider .noUi-connect {
  background: #A2DD55;
}
.CCESTMKZWave.upDownControl .upDownControlBtn.active {
  background: #A2DD55;
}
.CCESTMKZWave.upDownControl .upDownControlBtn:hover {
  background: #A2DD55;
}
.CCESTMKZWave.upDownControl .upDownControlBtn:active {
  background: #9bda48;
}
.CCESTMKZWave.slatLiveIconWrap {
  background: #A2DD55;
}
.CCESTMKZWave.input:hover, .CCESTMKZWave.select:hover, .CCESTMKZWave.textarea:hover {
  border-color: #527624 !important;
}
.CCESTMKZWave.input:focus, .CCESTMKZWave.select:focus, .CCESTMKZWave.textarea:focus {
  border-color: #A2DD55 !important;
}

.CCwlan {
  color: #FFFFFF;
  background-color: #808080;
}
.CCwlan.clickable:hover {
  color: white !important;
  background-color: #8d8d8d !important;
}
.CCwlan.clickable:active {
  color: #f2f2f2 !important;
  background-color: #737373 !important;
}
.CCwlan.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #808080 !important;
}
.CCwlan .CClight {
  color: #B9B9B9;
}
.CCwlan.onOffBtn .onOffOnWrap {
  background-color: #808080 !important;
  border-color: #808080;
}
.CCwlan.rangeSlider .noUi-connect {
  background: #808080;
}
.CCwlan.upDownControl .upDownControlBtn.active {
  background: #808080;
}
.CCwlan.upDownControl .upDownControlBtn:hover {
  background: #808080;
}
.CCwlan.upDownControl .upDownControlBtn:active {
  background: #787878;
}
.CCwlan.slatLiveIconWrap {
  background: #808080;
}
.CCwlan.input:hover, .CCwlan.select:hover, .CCwlan.textarea:hover {
  border-color: #808080 !important;
}
.CCwlan.input:focus, .CCwlan.select:focus, .CCwlan.textarea:focus {
  border-color: #E7E7E7 !important;
}

.CCdashboard {
  color: #FFFFFF;
  background-color: #3A3A3A;
}
.CCdashboard.clickable:hover {
  color: white !important;
  background-color: #474747 !important;
}
.CCdashboard.clickable:active {
  color: #f2f2f2 !important;
  background-color: #2d2d2d !important;
}
.CCdashboard.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #3A3A3A !important;
}
.CCdashboard .CClight {
  color: #808080;
}
.CCdashboard.onOffBtn .onOffOnWrap {
  background-color: #3A3A3A !important;
  border-color: #3A3A3A;
}
.CCdashboard.rangeSlider .noUi-connect {
  background: #3A3A3A;
}
.CCdashboard.upDownControl .upDownControlBtn.active {
  background: #3A3A3A;
}
.CCdashboard.upDownControl .upDownControlBtn:hover {
  background: #3A3A3A;
}
.CCdashboard.upDownControl .upDownControlBtn:active {
  background: #323232;
}
.CCdashboard.slatLiveIconWrap {
  background: #3A3A3A;
}
.CCdashboard.input:hover, .CCdashboard.select:hover, .CCdashboard.textarea:hover {
  border-color: #3A3A3A !important;
}
.CCdashboard.input:focus, .CCdashboard.select:focus, .CCdashboard.textarea:focus {
  border-color: #E7E7E7 !important;
}

.CCwlanCube {
  color: #FFFFFF;
  background-color: #AEAEAE;
}
.CCwlanCube.clickable:hover {
  color: white !important;
  background-color: #bbbbbb !important;
}
.CCwlanCube.clickable:active {
  color: #f2f2f2 !important;
  background-color: #a1a1a1 !important;
}
.CCwlanCube .CClight {
  color: #D3D3D3;
}

.CCsettings {
  color: #FFFFFF;
  background-color: #F5994E;
}
.CCsettings.clickable:hover {
  color: white !important;
  background-color: #f6a766 !important;
}
.CCsettings.clickable:active {
  color: #f2f2f2 !important;
  background-color: #f48b36 !important;
}

.CCdetailListHeader {
  color: #828282;
  background-color: #525252;
}
.CCdetailListHeader.clickable:hover {
  color: #828282 !important;
  background-color: #525252 !important;
}
.CCdetailListHeader.clickable:active {
  color: #727272 !important;
  background-color: #424242 !important;
}

.CCdetailListHeaderPink {
  color: #FFFFFF;
  background-color: #F973AB;
}
.CCdetailListHeaderPink.clickable:hover {
  background-color: #fa82b4 !important;
}
.CCdetailListHeaderPink.clickable:active {
  background-color: #f864a2 !important;
}

.CCdetailListHeaderBlue {
  color: #FFFFFF;
  background-color: #73DBF9;
}
.CCdetailListHeaderBlue.clickable:hover {
  background-color: #82dffa !important;
}
.CCdetailListHeaderBlue.clickable:active {
  background-color: #64d7f8 !important;
}

.CCdetailListHeaderRed {
  color: #FFFFFF;
  background-color: #F96D5E;
}
.CCdetailListHeaderRed.clickable:hover {
  background-color: #fa7a6d !important;
}
.CCdetailListHeaderRed.clickable:active {
  background-color: #f8604f !important;
}

.CCdetailList {
  color: #D3D3D3;
  background-color: #5A5A5A;
}
.CCdetailList .small {
  color: #a0a0a0;
}
.CCdetailList .clickable:hover {
  color: #dbdbdb;
  background-color: #626262;
}
.CCdetailList .clickable:active {
  color: #cbcbcb;
  background-color: #525252;
}
.CCdetailList .activeHomeegrams {
  color: #ededed;
  background-color: #747474;
}
.CCdetailList .activeHomeegrams .itemDetailListElementNameIcon svg g g {
  fill: #ededed;
}

.CCredText {
  color: #F96D5E !important;
}

.CCredBg {
  background: #F96D5E !important;
}

.CCgreenText {
  color: #A5D36A !important;
}

.CCgreenBg {
  background: #A5D36A !important;
}

.CCdetailListElementAcc {
  color: #D3D3D3;
  background-color: #4A4A4A;
}
.CCdetailListElementAcc.clickable:hover {
  color: #dbdbdb !important;
  background-color: #525252 !important;
}
.CCdetailListElementAcc.clickable:active {
  color: #cbcbcb !important;
  background-color: #424242 !important;
}

.CCdeleteBtn {
  color: #FFFFFF;
  background-color: #F96D5E;
}
.CCdeleteBtn.clickable:hover {
  color: white !important;
  background-color: #fa7a6d !important;
}
.CCdeleteBtn.clickable:active {
  color: #f7f7f7 !important;
  background-color: #f8604f !important;
}

.CCsaveBtn {
  color: #FFFFFF;
  background-color: #B2CB63;
}
.CCsaveBtn.clickable:hover {
  color: white !important;
  background-color: #b8cf6e !important;
}
.CCsaveBtn.clickable:active {
  color: #f7f7f7 !important;
  background-color: #acc758 !important;
}

.CCcancelBtn {
  color: #FFFFFF;
  background-color: #B9B9B9;
}
.CCcancelBtn.clickable:hover {
  color: white !important;
  background-color: #c1c1c1 !important;
}
.CCcancelBtn.clickable:active {
  color: #f7f7f7 !important;
  background-color: #b1b1b1 !important;
}

.CChighlightBtn {
  color: #FFFFFF;
  background-color: #6AD3BC;
}
.CChighlightBtn.clickable:hover {
  color: white !important;
  background-color: #76d6c1 !important;
}
.CChighlightBtn.clickable:active {
  color: #f7f7f7 !important;
  background-color: #5ed0b7 !important;
}

.CCsettings1 {
  color: #FFFFFF;
  background-color: #848484;
}
.CCsettings1.reverse {
  color: #848484;
  background-color: transparent !important;
}
.CCsettings1.clickable:hover {
  color: white !important;
  background-color: #919191 !important;
}
.CCsettings1.clickable:active {
  color: #f2f2f2 !important;
  background-color: #777777 !important;
}
.CCsettings1.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #848484 !important;
}
.CCsettings1.radioInput[type=radio]:checked + .radioLabel:after {
  background-color: #848484 !important;
}
.CCsettings1.onOffBtn .onOffOnWrap {
  background-color: #848484 !important;
  border-color: #515151;
}
.CCsettings1.rangeSlider .noUi-connect {
  background: #848484;
}
.CCsettings1.input:hover, .CCsettings1.select:hover, .CCsettings1.textarea:hover {
  border-color: #9e9e9e !important;
}
.CCsettings1.input:focus, .CCsettings1.select:focus, .CCsettings1.textarea:focus {
  border-color: #848484 !important;
}

.CCsettings2 {
  color: #FFFFFF;
  background-color: #5491BB;
}
.CCsettings2.reverse {
  color: #5491BB;
  background-color: transparent !important;
}
.CCsettings2.clickable:hover {
  color: white !important;
  background-color: #669dc2 !important;
}
.CCsettings2.clickable:active {
  color: #f2f2f2 !important;
  background-color: #4685b0 !important;
}
.CCsettings2.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #5491BB !important;
}
.CCsettings2.radioInput[type=radio]:checked + .radioLabel:after {
  background-color: #5491BB !important;
}
.CCsettings2.onOffBtn .onOffOnWrap {
  background-color: #5491BB !important;
  border-color: #305b79;
}
.CCsettings2.rangeSlider .noUi-connect {
  background: #5491BB;
}
.CCsettings2.input:hover, .CCsettings2.select:hover, .CCsettings2.textarea:hover {
  border-color: #78a8ca !important;
}
.CCsettings2.input:focus, .CCsettings2.select:focus, .CCsettings2.textarea:focus {
  border-color: #5491BB !important;
}

.CCsettings3 {
  color: #FFFFFF;
  background-color: #F79A4F;
}
.CCsettings3.reverse {
  color: #F79A4F;
  background-color: transparent !important;
}
.CCsettings3.clickable:hover {
  color: white !important;
  background-color: #f8a867 !important;
}
.CCsettings3.clickable:active {
  color: #f2f2f2 !important;
  background-color: #f68c37 !important;
}
.CCsettings3.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #F79A4F !important;
}
.CCsettings3.radioInput[type=radio]:checked + .radioLabel:after {
  background-color: #F79A4F !important;
}
.CCsettings3.onOffBtn .onOffOnWrap {
  background-color: #F79A4F !important;
  border-color: #d6650a;
}
.CCsettings3.rangeSlider .noUi-connect {
  background: #F79A4F;
}
.CCsettings3.input:hover, .CCsettings3.select:hover, .CCsettings3.textarea:hover {
  border-color: #f9b680 !important;
}
.CCsettings3.input:focus, .CCsettings3.select:focus, .CCsettings3.textarea:focus {
  border-color: #F79A4F !important;
}

.CCsettings4 {
  color: #FFFFFF;
  background-color: #B2CB63;
}
.CCsettings4.reverse {
  color: #B2CB63;
  background-color: transparent !important;
}
.CCsettings4.clickable:hover {
  color: white !important;
  background-color: #bbd176 !important;
}
.CCsettings4.clickable:active {
  color: #f2f2f2 !important;
  background-color: #a9c550 !important;
}
.CCsettings4.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #B2CB63 !important;
}
.CCsettings4.radioInput[type=radio]:checked + .radioLabel:after {
  background-color: #B2CB63 !important;
}
.CCsettings4.onOffBtn .onOffOnWrap {
  background-color: #B2CB63 !important;
  border-color: #7e9632;
}
.CCsettings4.rangeSlider .noUi-connect {
  background: #B2CB63;
}
.CCsettings4.input:hover, .CCsettings4.select:hover, .CCsettings4.textarea:hover {
  border-color: #c5d889 !important;
}
.CCsettings4.input:focus, .CCsettings4.select:focus, .CCsettings4.textarea:focus {
  border-color: #B2CB63 !important;
}

.CCsettings5 {
  color: #FFFFFF;
  background-color: #68D0E6;
}
.CCsettings5.reverse {
  color: #68D0E6;
  background-color: transparent !important;
}
.CCsettings5.clickable:hover {
  color: white !important;
  background-color: #7ed7ea !important;
}
.CCsettings5.clickable:active {
  color: #f2f2f2 !important;
  background-color: #52c9e2 !important;
}
.CCsettings5.checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  color: #68D0E6 !important;
}
.CCsettings5.radioInput[type=radio]:checked + .radioLabel:after {
  background-color: #68D0E6 !important;
}
.CCsettings5.onOffBtn .onOffOnWrap {
  background-color: #68D0E6 !important;
  border-color: #21aac7;
}
.CCsettings5.rangeSlider .noUi-connect {
  background: #68D0E6;
}
.CCsettings5.input:hover, .CCsettings5.select:hover, .CCsettings5.textarea:hover {
  border-color: #94deed !important;
}
.CCsettings5.input:focus, .CCsettings5.select:focus, .CCsettings5.textarea:focus {
  border-color: #68D0E6 !important;
}

.CCNotificationGrey {
  color: #FFFFFF;
  background-color: #2B2B2B;
}

.CCNotificationGreen {
  color: #FFFFFF;
  background-color: #A5D36A;
}

.CCNotificationOrange {
  color: #FFFFFF;
  background-color: #FFC663;
}

.CCNotificationRed {
  color: #FFFFFF;
  background-color: #FA8B54;
}

.CCNotificationDarkRed {
  color: #FFFFFF;
  background-color: #F96D5E;
}

.CChomeegramButtonGreen {
  background-color: #6AD3BC;
}
.CChomeegramButtonGreen:hover {
  background-color: #7ed9c5;
}
.CChomeegramButtonGreen:active {
  background-color: #56cdb3;
}

.CChomeegramButtonPink {
  background-color: #F973AB;
}
.CChomeegramButtonPink:hover {
  background-color: #fa8bba;
}
.CChomeegramButtonPink:active {
  background-color: #f85b9c;
}

.CChomeegramButtonBlue {
  background-color: #73DBF9;
}
.CChomeegramButtonBlue:hover {
  background-color: #82dffa;
}
.CChomeegramButtonBlue:active {
  background-color: #64d7f8;
}

/* ************************************** */
/* Mandatory CSS required for ng-sortable */
/* ************************************** */
.as-sortable-item, .as-sortable-placeholder {
  display: block;
}

.as-sortable-item {
  -ms-touch-action: none;
  touch-action: none;
}

.as-sortable-item-handle {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

.as-sortable-drag {
  position: absolute;
  pointer-events: none;
  z-index: 9999;
}

.as-sortable-hidden {
  display: none !important;
}

.as-sortable-un-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* ******************************************* */
/* Optional CSS, default style for ng-sortable */
/* ******************************************* */
.as-sortable-drag {
  -webkit-transform: translateY(120px);
          transform: translateY(120px);
  -webkit-box-shadow: 0px 0px 29px 3px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 29px 3px rgba(0, 0, 0, 0.2);
}

/* ==========================================================================
   $BASE-PICKER
   ========================================================================== */
/**
* Note: the root picker element should *NOT* be styled more than what’s here.
 */
.picker {
  font-size: 16px;
  text-align: left;
  line-height: 1.2;
  color: #000000;
  position: absolute;
  z-index: 10000;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/**
 * The picker input element.
 */
.picker__input {
  cursor: default;
}

/**
 * When the picker is opened, the input element is “activated”.
 */
.picker__input.picker__input--active {
  border-color: #0089ec;
}

/**
 * The holder is the only “scrollable” top-level container element.
 */
.picker__holder {
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/*!
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */
/**
 * Note: the root picker element should *NOT* be styled more than what’s here.
 */
/**
 * Make the holder and frame fullscreen.
 */
.picker__holder,
.picker__frame {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-transform: translateY(500%);
  transform: translateY(500%);
}

/**
 * The holder should overlay the entire screen.
 */
.picker__holder {
  position: fixed;
  transition: background 0.15s ease-out, -webkit-transform 0s 0.15s;
  -webkit-transition: background 0.15s ease-out, -webkit-transform 0s 0.15s;
  transition: background 0.15s ease-out, transform 0s 0.15s;
  transition: background 0.15s ease-out, transform 0s 0.15s, -webkit-transform 0s 0.15s;
  -webkit-backface-visibility: hidden;
}

/**
 * The frame that bounds the box contents of the picker.
 */
.picker__frame {
  position: absolute;
  margin: 0 auto;
  min-width: 256px;
  max-width: 666px;
  width: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}

@media (min-height: 33.875em) {
  .picker__frame {
    overflow: visible;
    top: auto;
    bottom: -100%;
    max-height: 80%;
  }
}
@media (min-height: 40.125em) {
  .picker__frame {
    margin-bottom: 7.5%;
  }
}
/**
 * The wrapper sets the stage to vertically align the box contents.
 */
.picker__wrap {
  display: table;
  width: 100%;
  height: 100%;
}

@media (min-height: 33.875em) {
  .picker__wrap {
    display: block;
  }
}
/**
 * The box contains all the picker contents.
 */
.picker__box {
  background: #ffffff;
  display: table-cell;
  vertical-align: middle;
}

@media (min-height: 26.5em) {
  .picker__box {
    font-size: 1.25em;
  }
}
@media (min-height: 33.875em) {
  .picker__box {
    display: block;
    font-size: 1.33em;
    border: 1px solid #777777;
    border-top-color: #898989;
    border-bottom-width: 0;
    border-radius: 5px 5px 0 0;
    -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
            box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
  }
}
@media (min-height: 40.125em) {
  .picker__box {
    font-size: 1.5em;
    border-bottom-width: 1px;
    border-radius: 5px;
  }
}
/**
 * When the picker opens...
 */
.picker--opened .picker__holder {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  background: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
  zoom: 1;
  background: rgba(0, 0, 0, 0.32);
  -webkit-transition: background 0.15s ease-out;
  transition: background 0.15s ease-out;
}

.picker--opened .picker__frame {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  opacity: 1;
}

@media (min-height: 33.875em) {
  .picker--opened .picker__frame {
    top: auto;
    bottom: 100px;
  }
}
/* ==========================================================================
   $BASE-DATE-PICKER
   ========================================================================== */
/**
 * The picker box.
 */
.picker__box {
  padding: 0 1em;
}

/**
 * The header containing the month and year stuff.
 */
.picker__header {
  text-align: center;
  position: relative;
  margin-top: .75em;
}

/**
 * The month and year labels.
 */
.picker__month,
.picker__year {
  font-weight: 500;
  display: inline-block;
  margin-left: .25em;
  margin-right: .25em;
}

.picker__year {
  color: #999999;
  font-size: .8em;
  font-style: italic;
}

/**
 * The month and year selectors.
 */
.picker__select--month,
.picker__select--year {
  border: 1px solid #b7b7b7;
  height: 2em;
  padding: .5em;
  margin-left: .25em;
  margin-right: .25em;
}

@media (min-width: 24.5em) {
  .picker__select--month,
  .picker__select--year {
    margin-top: -0.5em;
  }
}
.picker__select--month {
  width: 35%;
}

.picker__select--year {
  width: 22.5%;
}

.picker__select--month:focus,
.picker__select--year:focus {
  border-color: #0089ec;
}

/**
 * The month navigation buttons.
 */
.picker__nav--prev,
.picker__nav--next {
  position: absolute;
  padding: .5em 1.25em;
  width: 1em;
  height: 1em;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  top: -0.25em;
}

@media (min-width: 24.5em) {
  .picker__nav--prev,
  .picker__nav--next {
    top: -0.33em;
  }
}
.picker__nav--prev {
  left: -1em;
  padding-right: 1.25em;
}

@media (min-width: 24.5em) {
  .picker__nav--prev {
    padding-right: 1.5em;
  }
}
.picker__nav--next {
  right: -1em;
  padding-left: 1.25em;
}

@media (min-width: 24.5em) {
  .picker__nav--next {
    padding-left: 1.5em;
  }
}
.picker__nav--prev:before,
.picker__nav--next:before {
  content: " ";
  border-top: .5em solid transparent;
  border-bottom: .5em solid transparent;
  border-right: 0.75em solid #000000;
  width: 0;
  height: 0;
  display: block;
  margin: 0 auto;
}

.picker__nav--next:before {
  border-right: 0;
  border-left: 0.75em solid #000000;
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
}

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
  cursor: default;
  background: none;
  border-right-color: #f5f5f5;
  border-left-color: #f5f5f5;
}

/**
 * The calendar table of dates
 */
.picker__table {
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  font-size: inherit;
  width: 100%;
  margin-top: .75em;
  margin-bottom: .5em;
}

@media (min-height: 33.875em) {
  .picker__table {
    margin-bottom: .75em;
  }
}
.picker__table td {
  margin: 0;
  padding: 0;
}

/**
 * The weekday labels
 */
.picker__weekday {
  width: 14.285714286%;
  font-size: .75em;
  padding-bottom: .25em;
  color: #999999;
  font-weight: 500;
  /* Increase the spacing a tad */
}

@media (min-height: 33.875em) {
  .picker__weekday {
    padding-bottom: .5em;
  }
}
/**
 * The days on the calendar
 */
.picker__day {
  padding: .3125em 0;
  font-weight: 200;
  border: 1px solid transparent;
}

.picker__day--today {
  position: relative;
}

.picker__day--today:before {
  content: " ";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 0;
  height: 0;
  border-top: 0.5em solid #0059bc;
  border-left: .5em solid transparent;
}

.picker__day--disabled:before {
  border-top-color: #aaaaaa;
}

.picker__day--outfocus {
  color: #dddddd;
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
}

.picker__day--highlighted {
  border-color: #0089ec;
}

.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  background: #0089ec;
  color: #ffffff;
}

.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #dddddd;
  cursor: default;
}

.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
  background: #bbbbbb;
}

/**
 * The footer containing the "today", "clear", and "close" buttons.
 */
.picker__footer {
  text-align: center;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
  border: 1px solid #ffffff;
  background: #ffffff;
  font-size: .8em;
  padding: .66em 0;
  font-weight: bold;
  width: 33%;
  display: inline-block;
  vertical-align: bottom;
}

.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
  border-bottom-color: #b1dcfb;
}

.picker__button--today:focus,
.picker__button--clear:focus,
.picker__button--close:focus {
  background: #b1dcfb;
  border-color: #0089ec;
  outline: none;
}

.picker__button--today:before,
.picker__button--clear:before,
.picker__button--close:before {
  position: relative;
  display: inline-block;
  height: 0;
}

.picker__button--today:before,
.picker__button--clear:before {
  content: " ";
  margin-right: .45em;
}

.picker__button--today:before {
  top: -0.05em;
  width: 0;
  border-top: 0.66em solid #0059bc;
  border-left: .66em solid transparent;
}

.picker__button--clear:before {
  top: -0.25em;
  width: .66em;
  border-top: 3px solid #ee2200;
}

.picker__button--close:before {
  content: "\D7";
  top: -0.1em;
  vertical-align: top;
  font-size: 1.1em;
  margin-right: .35em;
  color: #777777;
}

.picker__button--today[disabled],
.picker__button--today[disabled]:hover {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #dddddd;
  cursor: default;
}

.picker__button--today[disabled]:before {
  border-top-color: #aaaaaa;
}

/* ==========================================================================
   $DEFAULT-DATE-PICKER
   ========================================================================== */
/* ==========================================================================
   $BASE-TIME-PICKER
   ========================================================================== */
/**
 * The list of times.
 */
.picker__list {
  list-style: none;
  padding: 0.75em 0 4.2em;
  margin: 0;
}

/**
 * The times on the clock.
 */
.picker__list-item {
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  margin-bottom: -1px;
  position: relative;
  background: #ffffff;
  padding: .75em 1.25em;
}

@media (min-height: 46.75em) {
  .picker__list-item {
    padding: .5em 1em;
  }
}
/* Hovered time */
.picker__list-item:hover {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
  border-color: #0089ec;
  z-index: 10;
}

/* Highlighted and hovered/focused time */
.picker__list-item--highlighted {
  border-color: #0089ec;
  z-index: 10;
}

.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted {
  cursor: pointer;
  color: #000000;
  background: #b1dcfb;
}

/* Selected and hovered/focused time */
.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
  background: #0089ec;
  color: #ffffff;
  z-index: 10;
}

/* Disabled time */
.picker__list-item--disabled,
.picker__list-item--disabled:hover,
.picker--focused .picker__list-item--disabled {
  background: #f5f5f5;
  border-color: #f5f5f5;
  color: #dddddd;
  cursor: default;
  border-color: #dddddd;
  z-index: auto;
}

/**
 * The clear button
 */
.picker--time .picker__button--clear {
  display: block;
  width: 80%;
  margin: 1em auto 0;
  padding: 1em 1.25em;
  background: none;
  border: 0;
  font-weight: 500;
  font-size: .67em;
  text-align: center;
  text-transform: uppercase;
  color: #666;
}

.picker--time .picker__button--clear:hover,
.picker--time .picker__button--clear:focus {
  color: #000000;
  background: #b1dcfb;
  background: #ee2200;
  border-color: #ee2200;
  cursor: pointer;
  color: #ffffff;
  outline: none;
}

.picker--time .picker__button--clear:before {
  top: -0.25em;
  color: #666;
  font-size: 1.25em;
  font-weight: bold;
}

.picker--time .picker__button--clear:hover:before,
.picker--time .picker__button--clear:focus:before {
  color: #ffffff;
  border-color: #ffffff;
}

/* ==========================================================================
   $DEFAULT-TIME-PICKER
   ========================================================================== */
/**
 * The frame the bounds the time picker.
 */
.picker--time .picker__frame {
  min-width: 256px;
  max-width: 320px;
}

/**
 * The picker box.
 */
.picker--time .picker__box {
  font-size: 1em;
  background: #f2f2f2;
  padding: 0;
}

@media (min-height: 40.125em) {
  .picker--time .picker__box {
    margin-bottom: 5em;
  }
}
/*!
 * angular-hotkeys v1.7.0
 * https://chieffancypants.github.io/angular-hotkeys
 * Copyright (c) 2016 Wes Cruver
 * License: MIT
 */
.cfp-hotkeys-container {
  display: table !important;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #333;
  font-size: 1em;
  background-color: rgba(255, 255, 255, 0.9);
}

.cfp-hotkeys-container.fade {
  z-index: -1024;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}

.cfp-hotkeys-container.fade.in {
  z-index: 10002;
  visibility: visible;
  opacity: 1;
}

.cfp-hotkeys-title {
  font-weight: bold;
  text-align: center;
  font-size: 1.2em;
}

.cfp-hotkeys {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

.cfp-hotkeys table {
  margin: auto;
  color: #333;
}

.cfp-content {
  display: table-cell;
  vertical-align: middle;
}

.cfp-hotkeys-keys {
  padding: 5px;
  text-align: right;
}

.cfp-hotkeys-key {
  display: inline-block;
  color: #fff;
  background-color: #333;
  border: 1px solid #333;
  border-radius: 5px;
  text-align: center;
  margin-right: 5px;
  -webkit-box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
          box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
  padding: 5px 9px;
  font-size: 1em;
}

.cfp-hotkeys-text {
  padding-left: 10px;
  font-size: 1em;
}

.cfp-hotkeys-close {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 2em;
  font-weight: bold;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  min-height: 45px;
  min-width: 45px;
  text-align: center;
}

.cfp-hotkeys-close:hover {
  background-color: #fff;
  cursor: pointer;
}

@media all and (max-width: 500px) {
  .cfp-hotkeys {
    font-size: 0.8em;
  }
}
@media all and (min-width: 750px) {
  .cfp-hotkeys {
    font-size: 1.2em;
  }
}
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.noUi-target {
  position: relative;
  direction: ltr;
}

.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
  /* Fix 401 */
}

.noUi-connect {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}

.noUi-origin {
  position: absolute;
  height: 0;
  width: 0;
}

.noUi-handle {
  position: relative;
  z-index: 1;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
  transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

/* Painting and performance;
 * Browsers can paint handles in their own layer.
 */
.noUi-base,
.noUi-handle {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Slider size and handle placement;
 */
.noUi-horizontal {
  height: 10px;
}

.noUi-horizontal .noUi-handle {
  width: 26px;
  height: 26px;
  left: -13px;
  top: -8px;
}

.noUi-vertical {
  width: 18px;
}

.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  left: -6px;
  top: -17px;
}

/* Styling;
 */
.noUi-target {
  background: #6E6E6E;
  border-radius: 10px;
}

.noUi-connect {
  -webkit-transition: background 450ms;
  transition: background 450ms;
  border-radius: 10px;
}

/* Handles and cursors;
 */
.noUi-dragable {
  cursor: w-resize;
}

.noUi-vertical .noUi-dragable {
  cursor: n-resize;
}

.noUi-handle {
  border-radius: 30px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.noUi-handle:hover {
  background-color: #f2f2f2 !important;
}

/* Handle stripes;
 */
.noUi-tooltip {
  display: block;
  position: absolute;
  border-radius: 4px;
  background: #FFFFFF;
  color: #6E6E6E;
  padding: 5px 10px;
  text-align: center;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}

.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  bottom: 120%;
}

.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

/* Disabled state;
 */
[disabled].noUi-connect,
[disabled] .noUi-connect {
  background: #B8B8B8;
}

[disabled].noUi-origin,
[disabled] .noUi-handle {
  cursor: not-allowed;
}

.buttonWrap {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 40px 0;
}
.buttonWrap.bottom {
  position: absolute;
  bottom: 40px;
  left: 0;
}

.button {
  cursor: pointer;
  padding: 20px 20px;
  width: 90%;
  max-width: 300px;
  margin-bottom: 20px;
  border-radius: 4px;
  -webkit-transition: .1s ease-out;
  transition: .1s ease-out;
  line-height: 140%;
  font-size: 1rem;
  /* 16px */
  font-weight: normal;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.button:hover {
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.button:active {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.button:last-child {
  margin-bottom: 0px;
}
.button.width100 {
  width: 100%;
  max-width: none;
}

.cancel {
  cursor: pointer;
  padding: 20px 20px;
  width: 90%;
  max-width: 300px;
  margin-bottom: 20px;
  text-align: center;
  color: #AEAEAE;
  border-radius: 4px;
  -webkit-transition: .3s ease-out;
  transition: .3s ease-out;
  line-height: 140%;
  font-size: 1rem;
  /* 16px */
  font-weight: normal;
}
.cancel:hover {
  color: #bbbbbb;
  background-color: #575757;
}
.cancel:active {
  color: #b6b6b6;
  background-color: #525252;
}
.cancel.width100 {
  width: 100%;
  max-width: none;
}

.loginSiteWrap {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #4A4A4A;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}

.loginHeader {
  position: fixed;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  z-index: 1;
  width: 100%;
  height: 60px;
  background-color: #6E6E6E;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
.loginHeader .loginLogo {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 5px 0 0 15px;
  border-radius: 30px;
  width: 50px;
  height: 50px;
}
.loginHeader .loginLogo svg {
  width: 35px;
  height: 35px;
}
.loginHeader .loginLogo.homee {
  background: #FFFFFF;
}
.loginHeader .loginLogo.afriso {
  background: #0065BF;
}
.loginHeader .loginLogo.estmk {
  background: #80C826;
}
.loginHeader .setupHomee {
  color: #AEAEAE;
  text-align: right;
  line-height: 60px;
  padding: 0 30px;
}
.loginHeader .setupHomee:hover {
  color: white !important;
  background-color: #767676 !important;
}
.loginHeader .setupHomee:active {
  color: #f7f7f7 !important;
  background-color: #666666 !important;
}

.loginWrap {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 140px;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
@media screen and (max-width: 768px) {
  .loginWrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media screen and (max-width: 550px) {
  .loginWrap {
    padding-top: 110px;
  }
}

.loginInfowrap {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
  max-width: 500px;
  margin-bottom: 40px;
  color: #D3D3D3;
  text-align: left;
  font-size: 2rem;
  /* 32px */
  font-weight: bold;
}
.loginInfowrap .loginInfoHead {
  margin-bottom: 30px;
  line-height: 120%;
}
.loginInfowrap .loginInfoText {
  font-size: 1.25rem;
  /* 32px */
  font-weight: normal;
  line-height: 130%;
}
.loginInfowrap .loginInfoText .link {
  text-decoration: underline;
  cursor: pointer;
}
.loginInfowrap .loginInfoText.small {
  font-size: 1rem;
  /* 32px */
  font-weight: normal;
}
@media screen and (max-width: 550px) {
  .loginInfowrap {
    display: none;
  }
  .loginInfowrap.showAllways {
    display: block;
  }
}

.loginTitle {
  text-align: center;
  color: #7A7A7A;
  font-size: 1.25rem;
  /* 18px */
  font-weight: bold;
  width: 100%;
  margin-bottom: 20px;
}

.loginStoredHomeesWrap {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
  width: 100%;
  max-width: 500px;
  padding: 0 60px 40px 60px;
  border-left: 1px solid #6E6E6E;
  height: auto;
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .loginStoredHomeesWrap {
    width: 100%;
    max-width: none;
    border: none;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    padding: 0 10% 40px 10%;
  }
}

.loginStoredHomees {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.loginStoredHomee {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 60px;
  width: 100%;
  color: #B9B9B9;
  background-color: #3A3A3A;
  border-bottom: 1px solid #4A4A4A;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.loginStoredHomee:last-child {
  border-bottom: none;
}
.loginStoredHomee:hover {
  background-color: #3d3d3d;
}
.loginStoredHomee:active {
  background-color: #2d2d2d;
}
.loginStoredHomee .close {
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 20px;
}
.loginStoredHomee .close svg path {
  fill: #6E6E6E;
}
.loginStoredHomee .loginStoredHomeeInnerWrap {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.loginStoredHomee .loginStoredHomeeInnerWrap .icon {
  padding: 0 20px;
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.loginStoredHomee .loginStoredHomeeInnerWrap .icon svg {
  width: 35px;
  height: 35px;
}
.loginStoredHomee .loginStoredHomeeInnerWrap .name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-right: 20px;
}

.loginStoredHomees li.ng-animate {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.loginStoredHomees li.ng-enter {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  opacity: .8;
}

.loginStoredHomees li.ng-enter.ng-enter-active {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.loginStoredHomees li.ng-leave {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.loginStoredHomees li.ng-leave.ng-leave-active {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  opacity: .8;
}

.loginForm {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
  max-width: 500px;
  padding: 0 60px;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .loginForm {
    max-width: none;
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    padding: 0 10%;
  }
}
.loginForm .loginInput {
  width: 100%;
  height: 60px;
  border-bottom: solid 1px #6E6E6E;
  color: #D3D3D3;
  padding-left: 20px;
  margin-bottom: 20px;
  font-size: 1rem;
  /* 18px */
  -webkit-transition: 0.1s ease-in-out;
  transition: 0.1s ease-in-out;
}
.loginForm .loginInput::-webkit-input-placeholder {
  color: #7A7A7A;
}
.loginForm .loginInput:-ms-input-placeholder {
  color: #7A7A7A;
}
.loginForm .loginInput::placeholder {
  color: #7A7A7A;
}
.loginForm .loginInput:hover {
  background-color: #3A3A3A;
}
.loginForm .loginInput:focus {
  border-bottom: solid 1px #6AD3BC;
  background-color: #3A3A3A;
}
.loginForm .loginInput.error {
  border-color: #F96D5E;
}
.loginForm .loginBtn {
  width: 100%;
  height: 60px;
  text-align: center;
  margin-top: 45px;
  font-size: 1.25rem;
  /* 18px */
  font-weight: bold;
}
.loginForm .loginCheckboxWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: left;
  -webkit-justify-content: left;
      -ms-flex-pack: left;
          justify-content: left;
  height: 60px;
  margin-bottom: 30px;
}
.loginForm .loginCheckboxWrap .checkboxLabel {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  background-color: #3d3d3d;
  margin-right: 20px;
}
.loginForm .loginCheckboxWrap .checkboxLabel:hover {
  cursor: pointer;
}
.loginForm .loginCheckboxWrap .checkboxLabel:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 9px;
  height: 5px;
  background: transparent;
  top: 6px;
  left: 5px;
  border: 3px solid;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.loginForm .loginCheckboxWrap .checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  opacity: 1;
}
.loginForm .loginCheckboxWrap .checkboxText {
  color: #AEAEAE;
  font-size: 1rem;
  /* 16px */
  font-weight: normal;
}

.spinner {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2B2B2B;
  z-index: 9999;
}

.spinnerCenterWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  max-width: 80%;
  padding: 40px;
  background-color: #000000;
}

.spinnerTextbox {
  color: #FFFFFF;
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
}

.spinnerCubeWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.spinnerCubeWrap.homee {
  width: 50px;
  height: 55px;
  -webkit-animation: loading 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
          animation: loading 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.spinnerCubeWrap.homee .spinnerCubeTop {
  width: 30px;
  height: 5px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  background-color: #AEAEAE;
  -webkit-animation: colorHomee 16s ease-in-out infinite;
          animation: colorHomee 16s ease-in-out infinite;
}
.spinnerCubeWrap.homee .spinnerCubeBody {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 2px;
  background-color: #AEAEAE;
  -webkit-animation: colorHomee 16s ease-in-out infinite;
          animation: colorHomee 16s ease-in-out infinite;
}
.spinnerCubeWrap.homee .spinnerCubeBody svg {
  width: 30px;
  height: 30px;
}
.spinnerCubeWrap.afriso {
  width: 50px;
  height: 50px;
  -webkit-animation: loading 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
          animation: loading 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.spinnerCubeWrap.afriso .spinnerCubeTop {
  display: none;
  width: 0;
  height: 0;
}
.spinnerCubeWrap.afriso .spinnerCubeBody {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 2px;
  background-color: #0065BF;
}
.spinnerCubeWrap.afriso .spinnerCubeBody svg {
  width: 30px;
  height: 30px;
}
.spinnerCubeWrap.estmk {
  width: 50px;
  height: 55px;
  -webkit-animation: loading 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
          animation: loading 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.spinnerCubeWrap.estmk .spinnerCubeTop {
  width: 30px;
  height: 5px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  background-color: #80C826;
}
.spinnerCubeWrap.estmk .spinnerCubeBody {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 2px;
  background-color: #80C826;
}
.spinnerCubeWrap.estmk .spinnerCubeBody svg {
  width: 30px;
  height: 30px;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  12.5% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  37.5% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  62.5% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  87.5% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  12.5% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  37.5% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  62.5% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  75% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  87.5% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes colorHomee {
  0% {
    background-color: #AEAEAE;
  }
  24% {
    background-color: #AEAEAE;
  }
  25% {
    background-color: #B781FB;
  }
  49% {
    background-color: #B781FB;
  }
  50% {
    background-color: #6AD3BC;
  }
  74% {
    background-color: #6AD3BC;
  }
  75% {
    background-color: #FA8B54;
  }
  99% {
    background-color: #FA8B54;
  }
  100% {
    background-color: #AEAEAE;
  }
}
@keyframes colorHomee {
  0% {
    background-color: #AEAEAE;
  }
  24% {
    background-color: #AEAEAE;
  }
  25% {
    background-color: #B781FB;
  }
  49% {
    background-color: #B781FB;
  }
  50% {
    background-color: #6AD3BC;
  }
  74% {
    background-color: #6AD3BC;
  }
  75% {
    background-color: #FA8B54;
  }
  99% {
    background-color: #FA8B54;
  }
  100% {
    background-color: #AEAEAE;
  }
}
.rootNotifications {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  z-index: 9000;
}
.rootNotifications .text {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-weight: bold;
  line-height: 140%;
  margin-right: 10px;
}
.rootNotifications .icon {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  width: 20px;
  height: 20px;
}
.rootNotifications .icon svg {
  width: 20px;
  height: 20px;
}
.rootNotifications .icon.spin svg {
  -webkit-animation: spin .8s infinite linear;
          animation: spin .8s infinite linear;
}
.rootNotifications .icon.wobble svg {
  -webkit-animation: wobble .5s  ease-in-out;
          animation: wobble .5s  ease-in-out;
}
.rootNotifications .icon.ng-leave {
  display: none;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  25% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  75% {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes wobble {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  25% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  75% {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
.rootNotifications.ng-hide-add {
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}

.rootNotifications.ng-hide-remove {
  -webkit-transition: -webkit-transform .3s ease-out;
  transition: -webkit-transform .3s ease-out;
  transition: transform .3s ease-out;
  transition: transform .3s ease-out, -webkit-transform .3s ease-out;
}

.rootNotifications.ng-hide {
  -webkit-transform: translateY(100px);
          transform: translateY(100px);
}

.userInteractionPopUpWrap {
  z-index: 9090;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(5px);
}

.userInteractionPopUp {
  z-index: 9998;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 500px;
  padding: 35px;
  text-align: center;
  background-color: #2B2B2B;
  color: #D3D3D3;
  line-height: 120%;
  border-radius: 5px;
}
.userInteractionPopUp .userInteractionPopUpHead {
  font-size: 1.25rem;
  /* 18px */
  font-weight: bold;
  margin-bottom: 4%;
}
.userInteractionPopUp .userInteractionPopUpText {
  font-size: 1rem;
  /* 16px */
  margin-bottom: 15%;
}
.userInteractionPopUp .userInteractionPopUpBtnWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.userInteractionPopUp .userInteractionPopUpBtnWrap .userInteractionPopUpCancelBtn, .userInteractionPopUp .userInteractionPopUpBtnWrap .userInteractionPopUpOkBtn {
  padding: 10px 20px;
  border-radius: 5px;
}
.userInteractionPopUp .userInteractionPopUpBtnWrap .userInteractionPopUpCancelBtn {
  margin-right: 20px;
  color: #B9B9B9;
  background-color: #4A4A4A;
  font-weight: bold;
}
.userInteractionPopUp .userInteractionPopUpBtnWrap .userInteractionPopUpOkBtn {
  margin-left: 20px;
  color: #FFFFFF;
  background-color: #6E6E6E;
  font-weight: bold;
}

.userInteractionPopUp.ng-hide-remove {
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.5, 0.1, 0, 1.2);
  transition: -webkit-transform 0.3s cubic-bezier(0.5, 0.1, 0, 1.2);
  transition: transform 0.3s cubic-bezier(0.5, 0.1, 0, 1.2);
  transition: transform 0.3s cubic-bezier(0.5, 0.1, 0, 1.2), -webkit-transform 0.3s cubic-bezier(0.5, 0.1, 0, 1.2);
}

.userInteractionPopUp.ng-hide {
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}

.switchHomeePopUpWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 8080;
}

.switchHomeePopUp {
  margin-top: 10%;
  display: block;
  max-width: 400px;
  width: 80%;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
  min-width: 200px;
  color: #AEAEAE;
  background-color: #4A4A4A;
  border-radius: 4px;
}

.switchHomeePopUpHeader {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 60px;
  background-color: #2B2B2B;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.switchHomeePopUpHeader .title {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 20px;
  font-weight: bold;
}
.switchHomeePopUpHeader .close {
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 20px;
}
.switchHomeePopUpHeader .close svg path {
  fill: #AEAEAE;
}
.switchHomeePopUpHeader .close:hover {
  border-top-right-radius: 4px;
  background-color: #383838;
}
.switchHomeePopUpHeader .close:active {
  border-top-right-radius: 4px;
  background-color: #1e1e1e;
}

.homeeSwitcherInputWrap {
  width: 100%;
  padding: 20px;
  background: #3A3A3A;
}

input.homeeSwitcherInput {
  padding: 0 20px;
  width: 100%;
  height: 60px;
  border: none;
  background-color: #2B2B2B;
  color: #AEAEAE;
  border-radius: 4px;
  border: 2px solid #2B2B2B;
  border-color: #2B2B2B !important;
  font-size: 1.42rem;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
input.homeeSwitcherInput:hover {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
input.homeeSwitcherInput:focus {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
input.homeeSwitcherInput::-webkit-input-placeholder {
  color: #484848;
}
input.homeeSwitcherInput:-ms-input-placeholder {
  color: #484848;
}
input.homeeSwitcherInput::placeholder {
  color: #484848;
}

.switchHomeeList li {
  background-color: #4A4A4A;
}
.switchHomeeList li:first-child {
  background-color: #525252;
}
.switchHomeeList li:last-child {
  border: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.switchHomeeList li:hover {
  background-color: #575757;
}
.switchHomeeList li:active {
  background-color: #3d3d3d;
}

.switchHomeeList li.ng-animate {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.switchHomeeList li.ng-enter {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  opacity: .8;
}

.switchHomeeList li.ng-enter.ng-enter-active {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.switchHomeeList li.ng-leave {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.switchHomeeList li.ng-leave.ng-leave-active {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  opacity: .8;
}

.switchHomeeListElement {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #3A3A3A;
  height: 60px;
}
.switchHomeeListElement .close {
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 20px;
}
.switchHomeeListElement .close svg path {
  fill: #2B2B2B;
}
.switchHomeeListElement .switchHomeeListElementInnerWrap {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.switchHomeeListElement .switchHomeeListElementInnerWrap .icon {
  padding: 0 20px;
  height: 60px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.switchHomeeListElement .switchHomeeListElementInnerWrap .icon svg {
  width: 35px;
  height: 35px;
}
.switchHomeeListElement .switchHomeeListElementInnerWrap .name {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-right: 20px;
}

.switchHomeePopUp.ng-hide-add {
  -webkit-transition: 3s cubic-bezier(0.5, 0.1, 0, 1);
  transition: 3s cubic-bezier(0.5, 0.1, 0, 1);
}

.switchHomeePopUp.ng-hide-remove {
  -webkit-transition: 0.3s cubic-bezier(0.5, 0.1, 0, 1);
  transition: 0.3s cubic-bezier(0.5, 0.1, 0, 1);
}

.switchHomeePopUp.ng-hide {
  -webkit-transform: translateY(500px);
          transform: translateY(500px);
  opacity: .5;
}

.mainNavWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  background-color: #3A3A3A;
  -webkit-box-flex: 20;
  -webkit-flex: 20;
      -ms-flex: 20;
          flex: 20;
  min-width: 0;
  height: 100%;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  -webkit-transition: 0.3s cubic-bezier(0.5, 0.1, 0, 1);
  transition: 0.3s cubic-bezier(0.5, 0.1, 0, 1);
}
@media screen and (max-width: 768px) {
  .mainNavWrap {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    z-index: 9999;
    width: 250px;
    position: absolute;
    left: -250px;
  }
}

@media screen and (max-width: 768px) {
  .mainNavIn {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
  }
}

.backgroundFade {
  z-index: 9;
  min-width: 0;
  height: 0;
  display: none;
}
@media screen and (max-width: 768px) {
  .backgroundFade {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(5px);
  }
  .backgroundFade.show {
    display: block;
  }
}

.mainNavHeaderWrap {
  position: relative;
  width: 100%;
  height: 260px;
}
.mainNavHeaderWrap .mainNavHeaderHeader {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.12);
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
.mainNavHeaderWrap .mainNavHeaderHeader .mainNavHeaderSettinsIconDev {
  position: absolute;
  display: block;
  top: 8px;
  right: 6px;
  width: 30px;
  height: 15px;
}
.mainNavHeaderWrap .mainNavHeaderHeader .mainNavHeaderSettinsIconDev svg {
  width: 30px;
  height: 15px;
}
.mainNavHeaderWrap .mainNavHeaderHeader .mainNavHeaderSettinsIcon {
  padding: 15px;
}
.mainNavHeaderWrap .mainNavHeaderContent {
  width: 100%;
  height: 200px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.mainNavHeaderWrap .mainNavHeaderContent .mainNavHeaderIcon {
  margin-bottom: 10px;
}
.mainNavHeaderWrap .mainNavHeaderContent .mainNavHeaderIcon svg {
  width: 40px;
  height: 40px;
}
.mainNavHeaderWrap .mainNavHeaderContent .mainNavHeaderName {
  margin-bottom: 5px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: bold;
}
.mainNavHeaderWrap .mainNavHeaderContent .mainNavHeaderId {
  color: #F1F1F1;
  font-size: 0.875rem;
}

.mainNav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mainMenuBtnWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 70px;
  line-height: 70px;
  padding: 0 10%;
  color: #6E6E6E;
  font-weight: bold;
}
.mainMenuBtnWrap:hover {
  color: #969696;
  background-color: #333333;
  -webkit-box-shadow: 6px 0px 0px 0px #969696 inset;
          box-shadow: 6px 0px 0px 0px #969696 inset;
}
.mainMenuBtnWrap:hover svg path {
  fill: #969696;
}
.mainMenuBtnWrap:active {
  color: #969696;
  background-color: #303030;
  -webkit-box-shadow: 6px 0px 0px 0px #969696 inset;
          box-shadow: 6px 0px 0px 0px #969696 inset;
}
.mainMenuBtnWrap:active svg path {
  fill: #969696;
}
.mainMenuBtnWrap.active {
  color: #E2E2E2;
  background-color: #2B2B2B;
  -webkit-box-shadow: 6px 0px 0px 0px #E2E2E2 inset;
          box-shadow: 6px 0px 0px 0px #E2E2E2 inset;
}
.mainMenuBtnWrap.active svg path {
  fill: #E2E2E2;
}
.mainMenuBtnWrap .mainMenuBtnIcon {
  width: 20px;
  height: 20px;
  margin-right: 10%;
}

.switchHomee {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #2B2B2B;
  text-align: center;
  color: #6E6E6E;
}
.switchHomee:hover {
  color: #767676;
  background-color: #333333;
}
.switchHomee:active {
  color: #666666;
  background-color: #232323;
}

.dashboardWrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  background: #F1F1F1;
}
.dashboardWrap .itemListHeader {
  display: none;
}
@media screen and (max-width: 768px) {
  .dashboardWrap {
    padding-top: 60px;
  }
  .dashboardWrap .itemListHeader {
    width: 100%;
    display: block;
  }
}
.dashboardWrap.fullScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.fullScreenBtn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 19px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.fullScreenBtn:hover {
  -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
}
.fullScreenBtn:active {
  background: #fefefe;
  -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
@media screen and (max-width: 768px) {
  .fullScreenBtn {
    display: none;
  }
}

.homeeColors {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 4px;
}
.homeeColors .homeeColorsBrain {
  width: 100%;
  height: 100%;
  background: #3A3A3A;
  -webkit-animation: dash 0.3s ease-in-out;
          animation: dash 0.3s ease-in-out;
}
.homeeColors .homeeColorsEnocean {
  width: 100%;
  height: 100%;
  background: #6AD3BC;
  -webkit-animation: dash 0.3s ease-in-out;
          animation: dash 0.3s ease-in-out;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.homeeColors .homeeColorsAfrisoenocean {
  width: 100%;
  height: 100%;
  background: #0065BF;
  -webkit-animation: dash 0.3s ease-in-out;
          animation: dash 0.3s ease-in-out;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.homeeColors .homeeColorsZwave {
  width: 100%;
  height: 100%;
  background: #B781FB;
  -webkit-animation: dash 0.3s ease-in-out;
          animation: dash 0.3s ease-in-out;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.homeeColors .homeeColorsEstmkzwave {
  width: 100%;
  height: 100%;
  background: #A2DD55;
  -webkit-animation: dash 0.3s ease-in-out;
          animation: dash 0.3s ease-in-out;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.homeeColors .homeeColorsZigbee {
  width: 100%;
  height: 100%;
  background: #FA8B54;
  -webkit-animation: dash 0.3s ease-in-out;
          animation: dash 0.3s ease-in-out;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

@-webkit-keyframes dash {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1, 1.8);
            transform: scale(1, 1.8);
    -webkit-transform-origin: top middle;
            transform-origin: top middle;
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

@keyframes dash {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    -webkit-transform: scale(1, 1.8);
            transform: scale(1, 1.8);
    -webkit-transform-origin: top middle;
            transform-origin: top middle;
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.sentence {
  width: calc(100% - 60px);
  color: #3A3A3A;
  font-size: 3rem;
  font-weight: bold;
  line-height: 130%;
  margin: 30px;
}
@media screen and (max-width: 1200px) {
  .sentence {
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 768px) {
  .sentence {
    font-size: 2rem;
  }
}
@media screen and (max-width: 550px) {
  .sentence {
    margin: 30px 15px 30px 15px;
    width: calc(100% - 30px);
    font-size: 1.8rem;
  }
}
.sentence .wobble {
  cursor: pointer;
}
.sentence .wobble:hover, .sentence .wobble:active {
  display: inline-block;
  -webkit-animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
          animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@-webkit-keyframes shake {
  10%, 90% {
    -webkit-transform: translate(-1px, 0);
            transform: translate(-1px, 0);
  }
  20%, 80% {
    -webkit-transform: translate(2px, -4px);
            transform: translate(2px, -4px);
  }
  30%, 50%, 70% {
    -webkit-transform: translate(-4px, -4px);
            transform: translate(-4px, -4px);
  }
  40%, 60% {
    -webkit-transform: translate(4px, -4px);
            transform: translate(4px, -4px);
  }
}

@keyframes shake {
  10%, 90% {
    -webkit-transform: translate(-1px, 0);
            transform: translate(-1px, 0);
  }
  20%, 80% {
    -webkit-transform: translate(2px, -4px);
            transform: translate(2px, -4px);
  }
  30%, 50%, 70% {
    -webkit-transform: translate(-4px, -4px);
            transform: translate(-4px, -4px);
  }
  40%, 60% {
    -webkit-transform: translate(4px, -4px);
            transform: translate(4px, -4px);
  }
}
.modeControlWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: calc(100% - 60px);
  max-width: 400px;
  padding: 0 15px;
  background: #FFFFFF;
  border-radius: 4px;
  margin-bottom: 15px;
  margin-left: 30px;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 600px) {
  .modeControlWrap {
    margin-left: 25px;
  }
}
@media screen and (max-width: 550px) {
  .modeControlWrap {
    margin-left: 15px;
    margin-bottom: 10px;
    width: calc(100% - 30px);
    max-width: none;
  }
}

.modeWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.mode {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #FFFFFF;
  cursor: pointer;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  margin-top: 5px;
  margin-bottom: 5px;
}
.mode svg {
  width: 60%;
  height: 60%;
}
.mode svg path {
  fill: #5A5A5A;
}
.mode.active {
  cursor: default;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  background: #E7E7E7 !important;
}
.mode:hover {
  background: #F1F1F1;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.3);
}
.mode:active {
  background: #dadada;
  -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
}

.modeText {
  margin-bottom: 10px;
  font-size: 0.8rem;
  color: #6E6E6E;
}
.modeText.active {
  color: #3A3A3A;
}

.widgetsWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: calc(100% - 30px);
  margin-left: 15px;
  margin-bottom: 15px;
}
@media screen and (max-width: 550px) {
  .widgetsWrap {
    margin-left: 5px;
    margin-bottom: 5px;
    width: calc(100% - 10px);
  }
}

.widget {
  cursor: pointer;
  margin: 15px;
  width: calc(16.666666667% - 30px);
  height: 150px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 4px;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
          box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  line-height: 130%;
  font-size: 1rem;
}
.widget:hover {
  -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.2);
}
.widget:active {
  background: #fefefe;
  -webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
.widget.alarm {
  background: #FF8A7E;
  color: #FFFFFF;
}
.widget.alarm .widgetTitle {
  color: #FFFFFF;
}
.widget.alarm .widgetValuesWrap {
  color: #FFFFFF;
}
.widget.fullScreen {
  width: calc(16.666666667% - 30px);
  font-size: 1.2rem;
}
@media screen and (max-width: 1600px) {
  .widget.fullScreen {
    width: calc(16.666666667% - 30px);
    font-size: 1rem;
  }
}
@media screen and (max-width: 1260px) {
  .widget.fullScreen {
    width: calc(20% - 30px);
  }
}
@media screen and (max-width: 1000px) {
  .widget.fullScreen {
    width: calc(25% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .widget.fullScreen {
    width: calc(33.333333333% - 30px);
  }
}
@media screen and (max-width: 600px) {
  .widget.fullScreen {
    width: calc(50% - 20px);
  }
}
@media screen and (max-width: 400px) {
  .widget.fullScreen {
    line-height: normal;
    font-size: 0.875rem;
  }
  .widget.fullScreen .widgetTitle {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 1600px) {
  .widget {
    width: calc(20% - 30px);
    font-size: 1rem;
  }
}
@media screen and (max-width: 1260px) {
  .widget {
    width: calc(25% - 30px);
  }
}
@media screen and (max-width: 1000px) {
  .widget {
    width: calc(33.333333333% - 30px);
  }
}
@media screen and (max-width: 768px) {
  .widget {
    width: calc(33.333333333% - 30px);
  }
}
@media screen and (max-width: 600px) {
  .widget {
    width: calc(50% - 20px);
    margin: 10px;
  }
}
@media screen and (max-width: 400px) {
  .widget {
    line-height: normal;
    font-size: 0.875rem;
  }
  .widget .widgetTitle {
    font-size: 1.2rem;
  }
}

.widgetTitle {
  width: 90%;
  text-align: center;
  margin: 10% 0 7% 0;
  line-height: normal;
  color: #3A3A3A;
  font-size: 1.6rem;
  font-weight: bold;
}
@media screen and (max-width: 1600px) {
  .widgetTitle {
    font-size: 1.4rem;
  }
}

.widgetIconWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 25%;
  height: 25%;
}
.widgetIconWrap svg {
  width: 100%;
  height: 100%;
}

.widgetValuesWrap {
  width: 90%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #6E6E6E;
  overflow: hidden;
  margin: 7% 0 10 0%;
}

.widgetValues {
  width: 100%;
  text-align: center;
  overflow: hidden;
}
.widgetValues.truncateMiddle li {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.widgetValues.truncateMiddle li span:first-child {
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.widgetValues.truncateMiddle li span:first-child:first-letter {
  text-transform: uppercase;
}
.widgetValues.truncateMiddle li span:last-child {
  margin-left: .5ch;
}
.widgetValues.truncateMultiline li {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.dashboardViewWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
}
.dashboardViewWrap.active {
  width: 100%;
  height: 100%;
}

.dashboardViewBlur {
  position: relative;
  width: 52%;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(5px);
}
@media screen and (max-width: 768px) {
  .dashboardViewBlur {
    width: 40%;
  }
}
@media screen and (max-width: 550px) {
  .dashboardViewBlur {
    display: none;
  }
}

.dashboardView {
  position: relative;
  width: 48%;
  height: 100%;
  -webkit-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.1);
          box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 768px) {
  .dashboardView {
    width: 60%;
  }
}
@media screen and (max-width: 550px) {
  .dashboardView {
    width: 100%;
  }
}

.dashboardValues {
  width: 100%;
  background: #FFFFFF;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 20px;
  color: #4A4A4A;
  font-size: 1.333333333rem;
  font-weight: bold;
  line-height: 130%;
}

.itemView {
  z-index: 4;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 80;
  -webkit-flex: 80;
      -ms-flex: 80;
          flex: 80;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .itemView {
    -webkit-box-flex: 85;
    -webkit-flex: 85;
        -ms-flex: 85;
            flex: 85;
  }
}
@media screen and (max-width: 550px) {
  .itemView {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 100%;
  }
}

.itemListWrap {
  position: relative;
  -webkit-box-flex: 40;
  -webkit-flex: 40;
      -ms-flex: 40;
          flex: 40;
  min-width: 0;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  background-color: #ECECEC;
  padding-bottom: 60px;
  padding-top: 60px;
  height: 100%;
}
@media screen and (max-width: 550px) {
  .itemListWrap {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 100%;
  }
}

.itemListHeader {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  position: fixed;
  top: 0;
  left: 20%;
  width: 32%;
  z-index: 5;
  height: 60px;
  line-height: 60px;
  font-weight: bold;
  text-align: center;
  color: #6E6E6E;
  background-color: #D3D3D3;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 768px) {
  .itemListHeader {
    left: 0;
    width: 40%;
  }
}
@media screen and (max-width: 550px) {
  .itemListHeader {
    width: 100%;
  }
}
.itemListHeader .mainMenuToggle {
  position: absolute;
  display: none;
  float: left;
  width: 60px;
  height: 60px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .itemListHeader .mainMenuToggle {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .itemListHeader .mainMenuToggle svg {
    width: 18px;
    height: 18px;
  }
}
.itemListHeader .headerBtns {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  position: absolute;
  top: 10px;
  right: 10px;
}
.itemListHeader .addItemBtn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
}
.itemListHeader .addItemBtn svg {
  width: 18px;
  height: 18px;
}
.itemListHeader .sortBtn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
}
.itemListHeader .sortBtn svg {
  width: 18px;
  height: 18px;
}
.itemListHeader .sortBtn.enabled {
  background-color: #AEAEAE;
}
.itemListHeader .sortBtn.enabled svg path {
  fill: white;
}
.itemListHeader .sortBtn.disabled svg path {
  fill: #AEAEAE;
}

.itemListSearchWrap {
  width: 100%;
  height: 60px;
  padding: 10px;
  border-bottom: 1px solid #E2E2E2 !important;
  background-color: #ECECEC;
}
.itemListSearchWrap.fixed {
  position: fixed;
  top: 60px;
  left: 20%;
  width: 32%;
  z-index: 4;
}
@media screen and (max-width: 768px) {
  .itemListSearchWrap.fixed {
    left: 0;
    width: 40%;
  }
}
@media screen and (max-width: 550px) {
  .itemListSearchWrap.fixed {
    width: 100%;
  }
}

.itemListSearch {
  padding: 0 10px !important;
  width: 100%;
  height: 100%;
  border: none;
  background-color: white !important;
  color: #606060 !important;
  border-radius: 5px !important;
  border: none !important;
  font-size: 1.42rem;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.itemListSearch:hover {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.itemListSearch:focus {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.itemListSearch::-webkit-input-placeholder {
  color: #AEAEAE !important;
}
.itemListSearch:-ms-input-placeholder {
  color: #AEAEAE !important;
}
.itemListSearch::placeholder {
  color: #AEAEAE !important;
}

.itemList {
  width: 100%;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.statisticsString {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 0 30px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  line-height: 130%;
  color: #AEAEAE;
  font-size: 0.8rem;
}

.itemListSubhead {
  color: #AEAEAE;
  background-color: #ECECEC;
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 15px;
  font-size: 0.875rem;
  font-weight: bold;
}

.itemListElement {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  width: 100%;
  height: 96px;
  border-bottom: 1px solid #E2E2E2;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  overflow-x: hidden;
}

.itemListElement.ng-animate {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.itemListElement.ng-enter {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  opacity: .8;
}

.itemListElement.ng-enter.ng-enter-active {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.itemListElement.ng-leave, .itemListElementSmall.ng-leave {
  display: none;
}

.itemListElement.ng-leave.ng-leave-active {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  opacity: .8;
}

.itemListElementSmall {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #E2E2E2;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.itemListElementSmall:last-child {
  border: none;
}

.itemlListElementIconWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 80px;
  height: 100%;
}
.itemlListElementIconWrap.dark svg {
  width: 50px;
  height: 50px;
  padding: 5px;
  border-radius: 25px;
  background: #FFFFFF;
}
.itemlListElementIconWrap svg {
  width: 40px;
  height: 40px;
}
.itemlListElementIconWrap.dimmableBulbOff svg path:first-child {
  opacity: 0;
}

.itemListElementTextWrap {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  padding-right: 20px;
  line-height: 22px;
  text-align: left;
}
.itemListElementTextWrap .itemListElementName {
  font-weight: bold;
}

.itemlListElementWarningWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* align horizontal */
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* align vertical */
  height: 100%;
  padding-right: 20px;
}
.itemlListElementWarningWrap.light svg path {
  fill: #FFFFFF;
}

.itemListElementDetailsWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* align horizontal */
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  /* align vertical */
  width: 100px;
}
.itemListElementDetailsWrap .itemListElementDetail {
  text-align: center;
  font-size: 1rem;
  /* 16px */
  font-weight: bold;
  line-height: 32px;
}

.itemListElementNameOneLine {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  padding-left: 15px;
  margin-right: 15px;
  font-weight: bold;
  line-height: 90px;
  text-align: left;
}

.itemListElementValue {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin-right: 15px;
  font-weight: light;
  text-align: right;
  line-height: 90px;
}
.itemListElementValue .circle {
  width: 10px;
  height: 10px;
  border-radius: 10px;
}

.itemListElementValueIcon {
  margin-right: 9px;
}

.itemListElementIcon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 96px;
  margin-right: 15px;
}
.itemListElementIcon svg {
  height: 20px;
}
.itemListElementIcon svg path {
  fill: #AEAEAE;
}
.itemListElementIcon.spin svg {
  -webkit-animation: spin .8s infinite linear;
          animation: spin .8s infinite linear;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.sortableHandleWrap {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 80px;
  height: 80px;
  background-color: #ECECEC;
}
.sortableHandleWrap .sortableHandle {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 80px;
  height: 80px;
}
.sortableHandleWrap .sortableHandle svg path {
  fill: #6E6E6E;
}

.listElementDevMode {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 3px;
  color: #FFFFFF;
  background: #F96D5E;
}

.appCopyright {
  text-align: center;
  color: #AEAEAE;
  line-height: 140%;
  font-size: 0.875rem;
  font-weight: normal;
}
.appCopyright .bold {
  font-weight: bold;
  line-height: 170%;
}

.colorDot {
  font-size: 3em;
  vertical-align: -8px;
}

.emptyStateWrap {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: calc(100% - 80px);
}
.emptyStateWrap .emptyState {
  max-width: 500px;
  padding: 20px;
  text-align: center;
  line-height: 140%;
  color: #6E6E6E;
  font-size: 1rem;
  font-weight: normal;
}

.itemDetailViewWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-flex: 60;
  -webkit-flex: 60;
      -ms-flex: 60;
          flex: 60;
  min-width: 0;
  height: 100%;
}
@media screen and (max-width: 550px) {
  .itemDetailViewWrap {
    -webkit-box-flex: 0;
    -webkit-flex: none;
        -ms-flex: none;
            flex: none;
    width: 100%;
  }
}

.itemDetailView {
  z-index: 5;
}
@media screen and (max-width: 550px) {
  .itemDetailView {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.itemDetailView.active {
  width: 100%;
  height: 100%;
}

.itemDetailWrap {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: scroll;
  /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  background-color: #4A4A4A;
  padding-bottom: 60px;
  padding-top: 60px;
}
.itemDetailWrap.paddingBottomHomeegrams {
  padding-bottom: 250px;
}
.itemDetailWrap.lightBG {
  background-color: #ECECEC;
}

.overflowVisible {
  overflow-y: visible;
}

.translate3dWrap {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.itemDetailHeader {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  position: fixed;
  top: 0;
  right: 0;
  z-index: 150;
  width: 48%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  line-height: 60px;
  color: #FFFFFF;
  font-weight: bold;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
          box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 768px) {
  .itemDetailHeader {
    width: 60%;
  }
}
@media screen and (max-width: 550px) {
  .itemDetailHeader {
    width: 100%;
  }
}

.itemDetailHeaderBack {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 60px;
  padding-right: 15px;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.itemDetailHeaderBack svg {
  height: 18px;
}
.itemDetailHeaderBack svg path {
  fill: #FFFFFF;
}

.itemDetailHeaderName {
  width: auto;
  text-align: left;
  margin-right: 10px;
}

.itemDetailHeaderValue {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  margin-right: 10px;
  text-align: left;
  font-weight: normal;
}

.itemDetailHeaderBtn {
  width: auto;
  text-align: right;
}

.itemDetailControlWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}

.itemDetailControlWrapHomeegrams {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  height: 80px;
  background-color: #5A5A5A;
}

.itemDetailListSearchWrap {
  width: 100%;
  height: 60px;
  padding: 10px;
}

.itemDetailListSearch {
  padding: 0 10px !important;
  width: 100%;
  height: 100%;
  border: none;
  background-color: #5A5A5A !important;
  color: #D3D3D3 !important;
  border-radius: 5px !important;
  border: none !important;
  font-size: 1.42rem;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.itemDetailListSearch:hover {
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.itemDetailListSearch:focus {
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
.itemDetailListSearch::-webkit-input-placeholder {
  color: #AEAEAE !important;
}
.itemDetailListSearch:-ms-input-placeholder {
  color: #AEAEAE !important;
}
.itemDetailListSearch::placeholder {
  color: #AEAEAE !important;
}

.itemDetailList.overflowHidden {
  overflow-x: hidden;
}

.itemDetailListElement {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #4A4A4A;
}
.itemDetailListElement:last-child {
  border: none;
}
.itemDetailListElement.border:last-child {
  border-bottom: 1px solid #4A4A4A;
}
.itemDetailListElement.flexibleHeight {
  padding: 15px 0;
  height: auto;
  min-height: 60px;
  line-height: 140%;
}
.itemDetailListElement.flexibleHeight .itemDetailListElementName {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  width: calc(100% - 80px);
}
.itemDetailListElement.flexibleHeight .itemDetailListElementName .small {
  font-weight: normal;
}
.itemDetailListElement.column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.itemDetailListElement.justifycenter {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.itemDetailListElement.ng-leave {
  display: none;
}

.itemDetailListElementNameIcon {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 20px;
}
.itemDetailListElementNameIcon svg {
  width: 20px;
  height: 20px;
}

.itemDetailListElementName {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  margin: 0 20px;
  font-weight: bold;
  text-align: left;
}
.itemDetailListElementName div:nth-child(2) {
  padding-top: 5px;
}
.itemDetailListElementName.flexOneOne {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
}
.itemDetailListElementName .small {
  font-size: 0.875rem;
  line-height: 140%;
}
.itemDetailListElementName.normal {
  font-weight: normal;
}

.itemDetailListElementPassword {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 15px;
}
.itemDetailListElementPassword .itemDetailListElementPasswordWrap {
  width: 100%;
  max-width: 300px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.itemDetailListElementPassword .itemDetailListElementPasswordWrap .passwordNr {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 40px;
  height: 40px;
  background: #3A3A3A;
  border-radius: 4px;
  font-weight: bold;
}

.itemDetailListElementTextarea {
  width: calc(100% - 40px);
  line-height: 150%;
  border-radius: 8px;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}

.itemDetailListElementSpinner {
  position: absolute;
  top: 5px;
  left: 5px;
}
.itemDetailListElementSpinner svg {
  width: 15px;
  height: 15px;
  -webkit-animation: spin .8s infinite linear;
          animation: spin .8s infinite linear;
}
.itemDetailListElementSpinner svg path {
  fill: #AEAEAE;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.itemDetailListElementMiddle {
  width: 100%;
  padding: 0 20px;
  background: #808080;
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
}
.itemDetailListElementMiddle:hover {
  background-color: #888888;
}
.itemDetailListElementMiddle:active {
  color: #f7f7f7;
  background-color: #787878;
}

.itemDetailListElementValue {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  margin-right: 20px;
  color: #AEAEAE;
  font-weight: normal;
  text-align: right;
}
.itemDetailListElementValue .itemDetailInputWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  height: 60px;
}
.itemDetailListElementValue .itemDetailInputWrap .itemDetailInput {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 25px;
  text-align: right;
  font-size: 1rem;
  font-weight: normal;
}
.itemDetailListElementValue .itemDetailInputWrap .itemDetailInputUnit {
  margin-left: 5px;
}
.itemDetailListElementValue .itemDetailInputWrap .submitInputBtn {
  height: 60px;
  line-height: 60px;
  width: 30px;
  border: none;
  padding: 0;
  background: transparent;
  margin-left: 20px;
}
.itemDetailListElementValue .itemDetailInputWrap .submitInputBtn svg {
  width: 30px;
  height: 30px;
}
.itemDetailListElementValue .circle {
  width: 10px;
  height: 10px;
  border-radius: 10px;
}

input[type='file'] {
  width: 0.1px;
  height: 0.1px;
  opacity: 0.5;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.itemDetailListElementValueIcon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  margin-right: 20px;
}

.itemDetailListElementArrow {
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  margin-right: 20px;
}
.itemDetailListElementArrow svg {
  height: 14px;
}
.itemDetailListElementArrow svg path {
  fill: #AEAEAE;
}
.itemDetailListElementArrow.spin svg {
  -webkit-animation: spin .8s infinite linear;
          animation: spin .8s infinite linear;
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
            transform: rotate(-360deg);
  }
}
.itemDetailListElementHead {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  font-size: 0.875rem;
  font-weight: bold;
}

.itemDetailListItem {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 96px;
  border-bottom: 1px solid #4A4A4A;
}
.itemDetailListItem:last-child {
  border: none;
}
.itemDetailListItem .itemlListItemIconWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 80px;
  height: 100%;
}
.itemDetailListItem .itemlListItemIconWrap svg {
  width: 40px;
  height: 40px;
}
.itemDetailListItem .itemListItemTextWrap {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  line-height: 22px;
  text-align: left;
}
.itemDetailListItem .itemListItemTextWrap .itemListItemName {
  font-weight: bold;
}
.itemDetailListItem .itemListItemTextWrap .itemListItemRows {
  color: #AEAEAE;
  font-size: 0.875rem;
  /* 14px */
}

.checkboxWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 20px;
}
.checkboxWrap .checkboxLabel {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  background-color: #4A4A4A;
  cursor: pointer;
}
.checkboxWrap .checkboxLabel:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 9px;
  height: 5px;
  background: transparent;
  top: 6px;
  left: 5px;
  border: 3px solid;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.checkboxWrap .checkboxInput[type=checkbox]:checked + .checkboxLabel:after {
  opacity: 1;
}

.radioWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 60px;
  margin: 0 20px;
}
.radioWrap .radioLabel {
  display: block;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: #4A4A4A;
  cursor: pointer;
}
.radioWrap .radioLabel:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: transparent;
  top: 4px;
  left: 4px;
  border-radius: 15px;
}
.radioWrap .radioInput[type=radio]:checked + .radioLabel:after {
  opacity: 1;
}

.itemDetailInfoTextWrap {
  width: 100%;
  color: #B9B9B9;
  padding: 50px 15px;
  margin: 0 auto;
}
.itemDetailInfoTextWrap.fixedHeight {
  height: 250px;
}
.itemDetailInfoTextWrap.info {
  padding: 10px 20px 20px 20px;
}
.itemDetailInfoTextWrap.info .itemDetailInfoText {
  text-align: left;
  max-width: none;
}
.itemDetailInfoTextWrap.border {
  border-bottom: 1px solid #4A4A4A;
}
.itemDetailInfoTextWrap.borderTop {
  border-top: 1px solid #4A4A4A;
}
.itemDetailInfoTextWrap .itemDetailInfoTextHead {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  margin-bottom: 10px;
  font-size: 1.25rem;
  /* 18px */
  font-weight: bold;
  text-align: center;
  word-wrap: break-word;
}
.itemDetailInfoTextWrap .itemDetailInfoText {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  font-size: 0.875rem;
  /* 14px */
  font-weight: normal;
  line-height: 130%;
  text-align: center;
  word-wrap: break-word;
}
.itemDetailInfoTextWrap .itemDetailInfoText a {
  color: #B9B9B9;
}

.itemDetailCubesWrapWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap {
  display: block;
  width: 90%;
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap .itemDetailCube {
  float: left;
  position: relative;
  margin: 4%;
  width: 42%;
  padding-bottom: 42%;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap .itemDetailCube:hover {
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap .itemDetailCube:active {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap .itemDetailCube svg {
  bottom: 40px;
  right: 0;
  position: absolute;
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap .itemDetailCube .itemDetailCubeText {
  position: absolute;
  bottom: 10px;
  width: 100%;
  padding: 0 4%;
  text-align: center;
  line-height: 120%;
  font-size: 1rem;
  font-weight: bold;
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap .itemDetailCube.ng-animate {
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap .itemDetailCube.ng-enter {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  opacity: .8;
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap .itemDetailCube.ng-enter.ng-enter-active {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap .itemDetailCube.ng-leave {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.itemDetailCubesWrapWrap .itemDetailCubesWrap .itemDetailCube.ng-leave.ng-leave-active {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  opacity: .8;
}

.itemPreview {
  background: #F1F1F1;
  margin: 20px;
  padding: 20px;
  border-radius: 8px;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}

.itemDetailPasswordWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
}
.itemDetailPasswordWrap .itemDetailPassword {
  width: 60%;
  height: 60px;
  margin-bottom: 50px;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid white;
}

.teachInBtnWrap {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.teachInBtnWrap .teachInBtn {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.25rem;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.teachInBtnWrap .teachInBtn:hover {
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.teachInBtnWrap .teachInBtn:active {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.chooseIconsWrap {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.chooseIconsWrap .chooseIconsInnerWrap {
  width: 90%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.chooseIconsWrap .chooseIconsInnerWrap .chooseIconIcon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 10px;
  padding: 15px;
  background-color: #ECECEC;
  border-radius: 40px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.chooseIconsWrap .chooseIconsInnerWrap .chooseIconIcon svg {
  width: 40px;
  height: 40px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.chooseIconsWrap .chooseIconsInnerWrap .chooseIconIcon:hover {
  background-color: #dfdfdf;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.chooseIconsWrap .chooseIconsInnerWrap .chooseIconIcon:active {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.chooseIconsWrap .chooseIconsInnerWrap .chooseConfigIconText {
  margin-top: 10px;
  color: #ECECEC;
  text-align: center;
}
.chooseIconsWrap .chooseIconsInnerWrap.fixedWidth {
  width: 300px;
}
.chooseIconsWrap .chooseIconsInnerWrap.fixedWidth .chooseHomeeIcon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50px;
  margin: 10px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.chooseIconsWrap .chooseIconsInnerWrap.fixedWidth .chooseHomeeIcon svg {
  width: 40px;
  height: 40px;
}
.chooseIconsWrap .chooseIconsInnerWrap.fixedWidth .chooseHomeeIcon:hover {
  background-color: #dfdfdf;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.chooseIconsWrap .chooseIconsInnerWrap.fixedWidth .chooseHomeeIcon:active {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.homeegramLogicString {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
  -webkit-box-shadow: 2px -4px 8px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 2px -4px 8px 0px rgba(0, 0, 0, 0.2);
  width: 48%;
  padding: 40px 20px;
  font-style: italic;
  line-height: 140%;
}
@media screen and (max-width: 768px) {
  .homeegramLogicString {
    width: 60%;
  }
}
@media screen and (max-width: 550px) {
  .homeegramLogicString {
    width: 100%;
    -webkit-box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.2);
            box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.2);
  }
}

.editAttributeValueWrap {
  width: 100%;
  background-color: #5A5A5A;
}

.inputWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: collum;
      -ms-flex-wrap: collum;
          flex-wrap: collum;
  padding: 20px 20px 20px 20px;
  color: #D3D3D3;
  background-color: #5A5A5A;
  border-bottom: 1px solid #4A4A4A;
  font-size: 1.266666667rem;
  font-weight: normal;
}
.inputWrap input {
  width: 80px;
  margin-right: 5px;
  text-align: left;
  color: #D3D3D3;
  font-size: 1.266666667rem;
  font-weight: normal;
}
.inputWrap span {
  font-weight: bold;
}

.currentValueWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  padding: 30px 0;
  color: #878787;
}

.intervalTypePicker, .intervalPicker, .timePicker, .datePicker, .minutePicker, .hourPicker, .dayTypePicker, .dayPositionPicker, .weekdayPicker, .weekPicker, .monthPicker, .yearPicker {
  max-width: 100px;
  margin: 0 20px !important;
  margin-bottom: -3px !important;
}

.timePickerLabel {
  margin-left: -15px;
}

.timeOffsetDirectionPickerLabel {
  margin-left: 5px;
}

.afterComma {
  margin-right: -15px !important;
}

.timePickerMax {
  margin-left: 15px;
  margin-bottom: -3px !important;
  font-size: 0.8rem;
  color: #bababa;
}

.homeegramInlineBtn {
  margin-left: 15px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  -webkit-transition: 0.2s cubic-bezier(0.5, 0.1, 0, 1);
  transition: 0.2s cubic-bezier(0.5, 0.1, 0, 1);
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.homeegramInlineBtn svg {
  width: 30px;
  height: 30px;
}
.homeegramInlineBtn:hover {
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.homeegramInlineBtn:active {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.homeegramTextarea {
  width: 100%;
  margin: 0 20px;
}

.anchor {
  padding-top: 60px;
}

.homeegramsMultiselectionWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 100%;
  padding: 20px 20px 0 20px;
}

.homeegramsMultiselectionelement {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  width: 60px;
  height: 60px;
  border: 2px solid #6E6E6E;
  border-radius: 60px;
  margin: 5px;
  color: #AEAEAE;
  font-size: 1.125rem;
  font-weight: bold;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}
.homeegramsMultiselectionelement:hover {
  background-color: #575757;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.homeegramsMultiselectionelement:active {
  background-color: #646464;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.homeegramsMultiselectionelement.active {
  background-color: #8AE3CF;
  border-color: #469786;
  color: #FFFFFF;
}
.homeegramsMultiselectionelement.active:hover {
  background-color: #9fe8d7;
}

.onOffBtn {
  padding: 20px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.onOffBtn.inline {
  background-color: transparent;
  padding: 0;
}
.onOffBtn.end {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.onOffBtn.light {
  background-color: #FFFFFF;
}
.onOffBtn.light .onOffText {
  color: #D3D3D3;
}
.onOffBtn.light .onOffOnText {
  color: #878787;
}

.onOffText {
  color: #878787;
  font-size: 1.266666667rem;
  font-weight: normal;
  line-height: 40px;
  -webkit-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
  margin: 0 15px;
}
@media screen and (max-width: 550px) {
  .onOffText {
    font-size: 1rem;
  }
}

.onOffwrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 60px;
  height: 30px;
  border: 2px solid;
  border-radius: 30px;
  border-color: #AEAEAE;
  -webkit-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
  cursor: pointer;
  background-color: #D3D3D3;
}

.onOffToggle {
  width: 26px;
  height: 26px;
  border-radius: 26px;
  background-color: #FFFFFF;
  border-color: #D3D3D3;
  -webkit-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.onOffToggle:hover {
  background-color: #f2f2f2 !important;
}
.onOffToggle.alpha {
  background-color: #F973AB !important;
}

.onOffOnText {
  color: #D3D3D3;
}

.onOffOnToggle {
  -webkit-transform: translateX(30px);
          transform: translateX(30px);
}

.onOffUndefinedToggle {
  -webkit-transform: translateX(15px);
          transform: translateX(15px);
}

.upDownControl {
  width: 100%;
  height: 120px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.upDownControl.light {
  background: #FFFFFF;
}

.upDownControlBtn {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 80px;
  margin: 0 20px;
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: .2s ease-out;
  transition: .2s ease-out;
  background: #6E6E6E;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.upDownControlBtn:hover {
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.upDownControlBtn:active {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

.arrow {
  width: 0;
  height: 0;
  border-top: 20px solid transparent !important;
  border-bottom: 20px solid transparent !important;
  border-left: 30px solid;
  border-color: white;
}

.up {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
}

.down {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.stop {
  width: 30px;
  height: 30px;
  background: white;
}

.iconWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.upDownWorking {
  -webkit-animation: spin .8s infinite linear;
          animation: spin .8s infinite linear;
}
.upDownWorking svg {
  width: 30px;
  height: 30px;
}
.upDownWorking svg path {
  fill: white;
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
.playBtnWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 45px 0;
}
.playBtnWrap .playBtn {
  cursor: pointer;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: 2px solid;
  border-color: #CD5587;
  background-color: #F973AB;
  -webkit-transition: 0.1s ease-in;
  transition: 0.1s ease-in;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.playBtnWrap .playBtn .playBtnIcon {
  position: absolute;
  top: 8px;
  left: 41%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 8px solid;
  border-color: #FFFFFF;
}
.playBtnWrap .playBtn.inactive {
  border-color: #AEAEAE;
  background-color: #D3D3D3;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.playBtnWrap .playBtn.inactive .playBtnIcon {
  border-color: #FFFFFF;
}
.playBtnWrap .playBtn.active:hover {
  border-color: #d0618f;
  background-color: #fa82b4;
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.playBtnWrap .playBtn.active:hover .playBtnIcon {
  border-color: #FFFFFF;
}
.playBtnWrap .playBtn.active:active {
  border-color: #cb4d81;
  background-color: #f969a5;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.playBtnWrap .playBtn.active:active .playBtnIcon {
  border-color: #f2f2f2;
}
.playBtnWrap .playBtn .playingDots {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #FFFFFF;
}

.rangeSliderWrap {
  width: 100%;
  height: 120px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.rangeSliderWrap.light {
  background: #FFFFFF;
}
.rangeSliderWrap .rangeSlider {
  display: block;
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.rangeSliderWrap .rangeSliderText {
  margin: 0 20px;
  color: #878787;
  text-align: left;
  font-size: 1.266666667rem;
  font-weight: normal;
  -webkit-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
  line-height: 40px;
}
@media screen and (max-width: 550px) {
  .rangeSliderWrap .rangeSliderText {
    font-size: 1rem;
  }
}
.rangeSliderWrap .rangeSliderText.rangeSliderTextOn {
  color: #D3D3D3;
  text-align: right;
}
.rangeSliderWrap.fullWidth {
  padding: 0 20px;
}

.slatSliderWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 120px;
  padding: 20px 30px 20px 20px;
}

.slatLiveIconWrapWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: 20px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.slatSliderWithIconsWrap {
  display: relative;
  width: 100%;
}

.slatLiveIconWrap {
  width: 60px;
  height: 60px;
  padding: 20px 16px;
  border-radius: 40px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.slatLiveIconWrap .slatIconElement {
  background: #FFFFFF;
}

.slatLiveIcon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
}

.slatSlider {
  display: block;
  position: relative;
}

.slatIconElement {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #AEAEAE;
}

.colorPickerWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  width: 100%;
  padding: 0 20px;
}

.colorWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 20px 10px;
}

.colorPickerPickerWrap {
  position: relative;
  border-radius: 30px;
  width: 40px;
  height: 40px;
  margin: 10px 5px;
}

.colorPickerOverlay {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  pointer-events: none;
  border-radius: 30px;
  width: 40px;
  height: 40px;
  background: #2B2B2B;
  color: transparent !important;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.colorPickerOverlay svg path {
  fill: #6E6E6E;
}
.colorPickerOverlay.active {
  border: 2px solid #AEAEAE;
}
.colorPickerOverlay.active svg path {
  fill: #AEAEAE;
}
.colorPickerOverlay:hover {
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.colorPickerOverlay:active {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.colorPickerOverlay:disabled {
  opacity: 1;
}

.colorPickerPlaceholder {
  position: absolute;
  top: 1px;
  left: 1px;
  color: transparent !important;
  border-radius: 30px;
  width: 38px;
  height: 38px;
}

.colorPicker {
  cursor: pointer;
  border-radius: 30px;
  width: 40px;
  height: 40px;
  margin: 10px 5px;
  color: transparent !important;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}
.colorPicker.active {
  border: 2px solid #4a4a4a;
}
.colorPicker:hover {
  -webkit-box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.2);
}
.colorPicker:active {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
.colorPicker:disabled {
  opacity: 1;
}

.colorTitle {
  text-align: center;
  color: #878787;
  line-height: normal;
}
.colorTitle.active {
  color: #D3D3D3;
}

.colorName {
  width: 70px;
  text-align: center;
  color: #878787;
  line-height: normal;
}
.colorName.active {
  color: #D3D3D3;
}

.chartWrap {
  position: relative;
  display: block;
  width: 100%;
  background: #3A3A3A;
}
.chartWrap.fullScreen {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #3A3A3A;
}
.chartWrap.fullScreen .chart {
  height: calc(100% - 120px - 10px);
}

.chartTitleWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  height: 40px;
  color: #828282;
  background-color: #525252;
}

.chartTitleIcon {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 0;
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  padding: 0 15px;
  background-color: #525252;
}
.chartTitleIcon svg path {
  fill: #828282;
}
.chartTitleIcon.left {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.chartTitleIcon.right {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.chartTitleIcon:hover {
  background-color: #646464;
}
.chartTitleIcon:hover svg path {
  fill: #949494;
}
.chartTitleIcon:active {
  background-color: #3d3d3d;
}
.chartTitleIcon:active svg path {
  fill: #6d6d6d;
}

.chartTitle {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.timeSpanWrap {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  height: 40px;
  background: #2B2B2B;
}

.timeSpan {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #6E6E6E;
}
.timeSpan.active {
  color: #B9B9B9;
  font-weight: bold;
}
.timeSpan.clickable:hover {
  color: #767676;
  background: #333333;
}
.timeSpan.clickable:active {
  color: #666666;
  background: #232323;
}

.chart {
  width: 100%;
  height: 300px;
  cursor: crosshair;
  margin-top: 10px;
}
.chart.sizeHalf {
  height: 150px;
}

.tooltip {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  color: #B9B9B9;
  background: #2B2B2B;
  z-index: 145;
  padding: 5px;
  line-height: 130%;
  font-size: 0.8rem;
  border-radius: 4px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
}

.resetZoom {
  z-index: 140;
  position: absolute;
  top: 85px;
  right: 5px;
  background: #2B2B2B;
  padding: 5px;
  color: #6E6E6E;
  border-radius: 4px;
}
.resetZoom:hover {
  -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2);
}
.resetZoom:active {
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
}

.fullScreenWrap {
  width: 100%;
  height: 40px;
  background: #2B2B2B;
  color: #6E6E6E;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.fullScreenWrap:hover {
  color: #767676;
  background: #333333;
}
.fullScreenWrap:active {
  color: #666666;
  background: #232323;
}

.chartsSpinner {
  position: absolute;
  top: 80px;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: calc(100% - 120px);
  background: #3A3A3A;
}

.loading {
  height: 50px;
  width: 50px;
  border-bottom: 6px solid rgba(0, 0, 0, 0.3);
  border-left: 6px solid rgba(0, 0, 0, 0.3);
  border-right: 6px solid rgba(0, 0, 0, 0.3);
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-radius: 100%;
  -webkit-animation: rot .6s infinite linear;
          animation: rot .6s infinite linear;
}

@-webkit-keyframes rot {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

@keyframes rot {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
.textError {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  color: #B9B9B9;
  background: #2B2B2B;
  border-radius: 4px;
  max-width: 80%;
  padding: 30px;
  text-align: center;
  line-height: 140%;
}

@font-face {
  font-family: octicons-link;
  src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZwABAAAAAACFQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEU0lHAAAGaAAAAAgAAAAIAAAAAUdTVUIAAAZcAAAACgAAAAoAAQAAT1MvMgAAAyQAAABJAAAAYFYEU3RjbWFwAAADcAAAAEUAAACAAJThvmN2dCAAAATkAAAABAAAAAQAAAAAZnBnbQAAA7gAAACyAAABCUM+8IhnYXNwAAAGTAAAABAAAAAQABoAI2dseWYAAAFsAAABPAAAAZwcEq9taGVhZAAAAsgAAAA0AAAANgh4a91oaGVhAAADCAAAABoAAAAkCA8DRGhtdHgAAAL8AAAADAAAAAwGAACfbG9jYQAAAsAAAAAIAAAACABiATBtYXhwAAACqAAAABgAAAAgAA8ASm5hbWUAAAToAAABQgAAAlXu73sOcG9zdAAABiwAAAAeAAAAME3QpOBwcmVwAAAEbAAAAHYAAAB/aFGpk3jaTY6xa8JAGMW/O62BDi0tJLYQincXEypYIiGJjSgHniQ6umTsUEyLm5BV6NDBP8Tpts6F0v+k/0an2i+itHDw3v2+9+DBKTzsJNnWJNTgHEy4BgG3EMI9DCEDOGEXzDADU5hBKMIgNPZqoD3SilVaXZCER3/I7AtxEJLtzzuZfI+VVkprxTlXShWKb3TBecG11rwoNlmmn1P2WYcJczl32etSpKnziC7lQyWe1smVPy/Lt7Kc+0vWY/gAgIIEqAN9we0pwKXreiMasxvabDQMM4riO+qxM2ogwDGOZTXxwxDiycQIcoYFBLj5K3EIaSctAq2kTYiw+ymhce7vwM9jSqO8JyVd5RH9gyTt2+J/yUmYlIR0s04n6+7Vm1ozezUeLEaUjhaDSuXHwVRgvLJn1tQ7xiuVv/ocTRF42mNgZGBgYGbwZOBiAAFGJBIMAAizAFoAAABiAGIAznjaY2BkYGAA4in8zwXi+W2+MjCzMIDApSwvXzC97Z4Ig8N/BxYGZgcgl52BCSQKAA3jCV8CAABfAAAAAAQAAEB42mNgZGBg4f3vACQZQABIMjKgAmYAKEgBXgAAeNpjYGY6wTiBgZWBg2kmUxoDA4MPhGZMYzBi1AHygVLYQUCaawqDA4PChxhmh/8ODDEsvAwHgMKMIDnGL0x7gJQCAwMAJd4MFwAAAHjaY2BgYGaA4DAGRgYQkAHyGMF8NgYrIM3JIAGVYYDT+AEjAwuDFpBmA9KMDEwMCh9i/v8H8sH0/4dQc1iAmAkALaUKLgAAAHjaTY9LDsIgEIbtgqHUPpDi3gPoBVyRTmTddOmqTXThEXqrob2gQ1FjwpDvfwCBdmdXC5AVKFu3e5MfNFJ29KTQT48Ob9/lqYwOGZxeUelN2U2R6+cArgtCJpauW7UQBqnFkUsjAY/kOU1cP+DAgvxwn1chZDwUbd6CFimGXwzwF6tPbFIcjEl+vvmM/byA48e6tWrKArm4ZJlCbdsrxksL1AwWn/yBSJKpYbq8AXaaTb8AAHja28jAwOC00ZrBeQNDQOWO//sdBBgYGRiYWYAEELEwMTE4uzo5Zzo5b2BxdnFOcALxNjA6b2ByTswC8jYwg0VlNuoCTWAMqNzMzsoK1rEhNqByEyerg5PMJlYuVueETKcd/89uBpnpvIEVomeHLoMsAAe1Id4AAAAAAAB42oWQT07CQBTGv0JBhagk7HQzKxca2sJCE1hDt4QF+9JOS0nbaaYDCQfwCJ7Au3AHj+LO13FMmm6cl7785vven0kBjHCBhfpYuNa5Ph1c0e2Xu3jEvWG7UdPDLZ4N92nOm+EBXuAbHmIMSRMs+4aUEd4Nd3CHD8NdvOLTsA2GL8M9PODbcL+hD7C1xoaHeLJSEao0FEW14ckxC+TU8TxvsY6X0eLPmRhry2WVioLpkrbp84LLQPGI7c6sOiUzpWIWS5GzlSgUzzLBSikOPFTOXqly7rqx0Z1Q5BAIoZBSFihQYQOOBEdkCOgXTOHA07HAGjGWiIjaPZNW13/+lm6S9FT7rLHFJ6fQbkATOG1j2OFMucKJJsxIVfQORl+9Jyda6Sl1dUYhSCm1dyClfoeDve4qMYdLEbfqHf3O/AdDumsjAAB42mNgYoAAZQYjBmyAGYQZmdhL8zLdDEydARfoAqIAAAABAAMABwAKABMAB///AA8AAQAAAAAAAAAAAAAAAAABAAAAAA==) format("woff");
}
.markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  color: #24292e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}

.markdown-body ol, .markdown-body ul {
  list-style: initial;
}

.markdown-body .pl-c {
  color: #6a737d;
}

.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v {
  color: #005cc5;
}

.markdown-body .pl-e,
.markdown-body .pl-en {
  color: #6f42c1;
}

.markdown-body .pl-smi,
.markdown-body .pl-s .pl-s1 {
  color: #24292e;
}

.markdown-body .pl-ent {
  color: #22863a;
}

.markdown-body .pl-k {
  color: #d73a49;
}

.markdown-body .pl-s,
.markdown-body .pl-pds,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sre,
.markdown-body .pl-sr .pl-sra {
  color: #032f62;
}

.markdown-body .pl-v,
.markdown-body .pl-smw {
  color: #e36209;
}

.markdown-body .pl-bu {
  color: #b31d28;
}

.markdown-body .pl-ii {
  color: #fafbfc;
  background-color: #b31d28;
}

.markdown-body .pl-c2 {
  color: #fafbfc;
  background-color: #d73a49;
}

.markdown-body .pl-c2::before {
  content: "^M";
}

.markdown-body .pl-sr .pl-cce {
  font-weight: bold;
  color: #22863a;
}

.markdown-body .pl-ml {
  color: #735c0f;
}

.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms {
  font-weight: bold;
  color: #005cc5;
}

.markdown-body .pl-mi {
  font-style: italic;
  color: #24292e;
}

.markdown-body .pl-mb {
  font-weight: bold;
  color: #24292e;
}

.markdown-body .pl-md {
  color: #b31d28;
  background-color: #ffeef0;
}

.markdown-body .pl-mi1 {
  color: #22863a;
  background-color: #f0fff4;
}

.markdown-body .pl-mc {
  color: #e36209;
  background-color: #ffebda;
}

.markdown-body .pl-mi2 {
  color: #f6f8fa;
  background-color: #005cc5;
}

.markdown-body .pl-mdr {
  font-weight: bold;
  color: #6f42c1;
}

.markdown-body .pl-ba {
  color: #586069;
}

.markdown-body .pl-sg {
  color: #959da5;
}

.markdown-body .pl-corl {
  text-decoration: underline;
  color: #032f62;
}

.markdown-body .octicon {
  display: inline-block;
  vertical-align: text-top;
  fill: currentColor;
}

.markdown-body a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

.markdown-body a:active,
.markdown-body a:hover {
  outline-width: 0;
}

.markdown-body strong {
  font-weight: inherit;
}

.markdown-body strong {
  font-weight: bolder;
}

.markdown-body h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

.markdown-body img {
  border-style: none;
}

.markdown-body svg:not(:root) {
  overflow: hidden;
}

.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

.markdown-body hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

.markdown-body input {
  font: inherit;
  margin: 0;
}

.markdown-body input {
  overflow: visible;
}

.markdown-body [type="checkbox"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

.markdown-body * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.markdown-body input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.markdown-body a {
  color: #0366d6;
  text-decoration: none;
}

.markdown-body a:hover {
  text-decoration: underline;
}

.markdown-body strong {
  font-weight: 600;
}

.markdown-body hr {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dfe2e5;
}

.markdown-body hr::before {
  display: table;
  content: "";
}

.markdown-body hr::after {
  display: table;
  clear: both;
  content: "";
}

.markdown-body table {
  border-spacing: 0;
  border-collapse: collapse;
}

.markdown-body td,
.markdown-body th {
  padding: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body h1 {
  font-size: 32px;
  font-weight: 600;
}

.markdown-body h2 {
  font-size: 24px;
  font-weight: 600;
}

.markdown-body h3 {
  font-size: 20px;
  font-weight: 600;
}

.markdown-body h4 {
  font-size: 16px;
  font-weight: 600;
}

.markdown-body h5 {
  font-size: 14px;
  font-weight: 600;
}

.markdown-body h6 {
  font-size: 12px;
  font-weight: 600;
}

.markdown-body p {
  margin-top: 0;
  margin-bottom: 10px;
}

.markdown-body blockquote {
  margin: 0;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body ol ol,
.markdown-body ul ol {
  list-style-type: lower-roman;
}

.markdown-body ul ul ol,
.markdown-body ul ol ol,
.markdown-body ol ul ol,
.markdown-body ol ol ol {
  list-style-type: lower-alpha;
}

.markdown-body dd {
  margin-left: 0;
}

.markdown-body code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
}

.markdown-body pre {
  margin-top: 0;
  margin-bottom: 0;
  font: 12px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.markdown-body .octicon {
  vertical-align: text-bottom;
}

.markdown-body .pl-0 {
  padding-left: 0 !important;
}

.markdown-body .pl-1 {
  padding-left: 4px !important;
}

.markdown-body .pl-2 {
  padding-left: 8px !important;
}

.markdown-body .pl-3 {
  padding-left: 16px !important;
}

.markdown-body .pl-4 {
  padding-left: 24px !important;
}

.markdown-body .pl-5 {
  padding-left: 32px !important;
}

.markdown-body .pl-6 {
  padding-left: 40px !important;
}

.markdown-body::before {
  display: table;
  content: "";
}

.markdown-body::after {
  display: table;
  clear: both;
  content: "";
}

.markdown-body > *:first-child {
  margin-top: 0 !important;
}

.markdown-body > *:last-child {
  margin-bottom: 0 !important;
}

.markdown-body a:not([href]) {
  color: inherit;
  text-decoration: none;
}

.markdown-body .anchor {
  float: left;
  padding-right: 4px;
  margin-left: -20px;
  line-height: 1;
}

.markdown-body .anchor:focus {
  outline: none;
}

.markdown-body p,
.markdown-body blockquote,
.markdown-body ul,
.markdown-body ol,
.markdown-body dl,
.markdown-body table,
.markdown-body pre {
  margin-top: 0;
  margin-bottom: 16px;
}

.markdown-body hr {
  height: 0.25em;
  padding: 0;
  margin: 24px 0;
  background-color: #e1e4e8;
  border: 0;
}

.markdown-body blockquote {
  padding: 0 1em;
  color: #6a737d;
  border-left: 0.25em solid #dfe2e5;
}

.markdown-body blockquote > :first-child {
  margin-top: 0;
}

.markdown-body blockquote > :last-child {
  margin-bottom: 0;
}

.markdown-body kbd {
  display: inline-block;
  padding: 3px 5px;
  font-size: 11px;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: solid 1px #c6cbd1;
  border-bottom-color: #959da5;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 0 #959da5;
          box-shadow: inset 0 -1px 0 #959da5;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}

.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
  color: #1b1f23;
  vertical-align: middle;
  visibility: hidden;
}

.markdown-body h1:hover .anchor,
.markdown-body h2:hover .anchor,
.markdown-body h3:hover .anchor,
.markdown-body h4:hover .anchor,
.markdown-body h5:hover .anchor,
.markdown-body h6:hover .anchor {
  text-decoration: none;
}

.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
  visibility: visible;
}

.markdown-body h1 {
  padding-bottom: 0.3em;
  font-size: 2em;
  border-bottom: 1px solid #eaecef;
}

.markdown-body h2 {
  padding-bottom: 0.3em;
  font-size: 1.5em;
  border-bottom: 1px solid #eaecef;
}

.markdown-body h3 {
  font-size: 1.25em;
}

.markdown-body h4 {
  font-size: 1em;
}

.markdown-body h5 {
  font-size: 0.875em;
}

.markdown-body h6 {
  font-size: 0.85em;
  color: #6a737d;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 2em;
}

.markdown-body ul ul,
.markdown-body ul ol,
.markdown-body ol ol,
.markdown-body ol ul {
  margin-top: 0;
  margin-bottom: 0;
}

.markdown-body li > p {
  margin-top: 16px;
}

.markdown-body li + li {
  margin-top: 0.25em;
}

.markdown-body dl {
  padding: 0;
}

.markdown-body dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}

.markdown-body dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}

.markdown-body table {
  display: block;
  width: 100%;
  overflow: auto;
}

.markdown-body table th {
  font-weight: 600;
}

.markdown-body table th,
.markdown-body table td {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

.markdown-body table tr {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}

.markdown-body table tr:nth-child(2n) {
  background-color: #f6f8fa;
}

.markdown-body img {
  max-width: 100%;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  background-color: #fff;
}

.markdown-body code {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
}

.markdown-body code::before,
.markdown-body code::after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

.markdown-body pre {
  word-wrap: normal;
}

.markdown-body pre > code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

.markdown-body .highlight {
  margin-bottom: 16px;
}

.markdown-body .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}

.markdown-body .highlight pre,
.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}

.markdown-body pre code {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

.markdown-body pre code::before,
.markdown-body pre code::after {
  content: normal;
}

.markdown-body .full-commit .btn-outline:not(:disabled):hover {
  color: #005cc5;
  border-color: #005cc5;
}

.markdown-body kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: solid 1px #d1d5da;
  border-bottom-color: #c6cbd1;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 -1px 0 #c6cbd1;
          box-shadow: inset 0 -1px 0 #c6cbd1;
}

.markdown-body :checked + .radio-label {
  position: relative;
  z-index: 1;
  border-color: #0366d6;
}

.markdown-body .task-list-item {
  list-style-type: none;
}

.markdown-body .task-list-item + .task-list-item {
  margin-top: 3px;
}

.markdown-body .task-list-item input {
  margin: 0 0.2em 0.25em -1.6em;
  vertical-align: middle;
}

.markdown-body hr {
  border-bottom-color: #eee;
}