/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

elements-of-type(html5-block) {
  display: block;
}

@font-face {
  font-family: 'Roboto-Light';
  src: url("../fonts/Roboto-Light.ttf") format("truetype");
}

@font-face {
  font-family: 'Roboto';
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'Roboto-Bold';
  src: url("../fonts/Roboto-Bold.ttf") format("truetype");
}

@font-face {
  font-family: 'Roboto-Medium';
  src: url("../fonts/Roboto-Medium.ttf") format("truetype");
}

/* Special style for uwp */
html {
  -ms-content-zooming: none;
  /* Disables zooming */
  -ms-overflow-style: none;
  /* Hide scrollbar */
}

body {
  overflow: hidden;
  font-family: Roboto;
  font-size: 22px;
  -webkit-overflow-scrolling: touch !important;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently supported by Chrome and Opera */
  background-color: #17181A;
}

::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 1600px) {
  body {
    font-size: 20px;
  }
}

@media screen and (max-width: 1200px) {
  body {
    font-size: 18px;
  }
}

@media screen and (max-width: 870px) {
  body {
    font-size: 14px;
  }
  .log-view-filters .btn {
    padding: 6px 4px;
  }
  .log-view-filters .input-group {
    width: 15%;
  }
  .log-view-content {
    top: 90px !important;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }
  .log-view-content {
    top: 120px !important;
  }
}

h1 {
  font-size: 166%;
}

h2 {
  font-size: 120%;
  margin-bottom: 22px;
}

h3 {
  font-size: 108%;
}

a {
  text-decoration: none;
}

.error {
  color: #dd4b39;
  font-size: 80%;
}

.default-signs {
  color: #000000;
}

.html-text-content {
  color: #000000;
}

.html-text-content em {
  font-style: italic;
}

/*==============Device Menu Icon=================*/
.hide-device-menu {
  display: none !important;
}

.device-menu-icon-holder {
  background-color: #2a2d31;
  position: absolute;
  cursor: pointer;
  pointer-events: all;
}

.device-menu-icon-cog-holder {
  width: 12vh;
  left: 5%;
  bottom: 0;
  padding: 1vh 1vh 0vh 1vh;
}

.device-menu-icon-cog-holder #menuCog {
  display: block;
}

.device-menu-icon-cog-holder #menuClose {
  display: none;
}

.device-menu-icon-cog-holder .device-menu-icon-text {
  font-size: 3vh;
  vertical-align: middle;
  text-align: center;
}

@media screen and (orientation: portrait) {
  .device-menu-icon-cog-holder .device-menu-icon-text {
    font-size: 2vh;
  }
}

.device-menu-div {
  text-align: center;
  display: flex;
  height: 100vh;
  width: 100vw;
}

.device-menu-div .sidebar {
  pointer-events: none;
}

.device-menu-icon-close-holder {
  height: 100%;
  background-color: #2f3237;
  position: absolute;
  top: 0;
  left: 0;
  width: 4.5vmax;
}

.device-menu-icon-close-holder #menuCog {
  display: none;
}

.device-menu-icon-close-holder #menuClose {
  display: block;
}

.device-menu-icon-close-holder .device-menu-icon-text {
  color: #ffffff;
  padding-top: 5.3vh;
  text-align: center;
  font-size: 100%;
  position: relative;
  background: none;
}

.device-menu-icon-text {
  color: #969696;
  font-weight: bold;
}

/*==============Layout=================*/
.container-vcenter {
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.sleep-background {
  background-color: #17181A;
}

.container-vcenter-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  text-align: center;
  width: 100%;
}

.container-vcenter-inner .unload-msg {
  line-height: 2;
  padding: 0 3vw;
  font-size: 3.5vmin;
  font-weight: bold;
}

.container-vcenter-inner .icon {
  height: 25vmin;
  margin-bottom: 3vmin;
}

.container-vcenter-inner .icon img {
  width: auto;
  height: 100%;
}

.main-footer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 90%;
  padding-left: 4.5vmax;
}

.vertical-center {
  top: 50%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  position: fixed;
}

.watchdog-container {
  flex-direction: column;
  padding: 0 3.5vmax;
}

.watchdog-container img {
  margin-bottom: 3vmax;
  max-width: 100%;
  height: 2.5vmax;
}

.watchdog-container .message {
  flex: 1;
  font-size: 2vmax;
  line-height: 1.5;
  margin-bottom: 1em;
}

.watchdog-container .sub-message {
  font-size: 1.5vmax;
  line-height: 2;
}

/*==============List Item=================*/
.list-group-item {
  text-align: center;
  border: none;
  cursor: pointer;
  background-color: transparent;
  font-size: 100%;
  border-radius: 0px;
  width: 100%;
  max-width: 300px;
  margin: 0.2em 0 0 0;
  pointer-events: all;
}

.list-group-item .item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: -0.5em;
}

.list-group-item .item-parent {
  margin-top: -2em;
  opacity: 0.9;
  font-size: 60%;
  text-transform: uppercase;
}

.results .list-group-item:first-child {
  line-height: 2.25;
}

@media screen and (orientation: portrait) {
  .results .list-group-item:first-child {
    line-height: 3 !important;
  }
}

.list-group-item:first-child,
.list-group-item:last-child {
  border-radius: 4px;
}

.list-group-item.active,
.list-group-item:hover {
  background-image: none !important;
  text-shadow: none;
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  text-shadow: 0;
}

/*==============Progress bar=================*/
.progress {
  height: 5px;
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  background-image: none;
  margin-bottom: 0;
  margin-top: 40px;
}

.progress .progress-bar {
  line-height: 5px;
  background-color: #449ff2;
}

.reg-sync-progress {
  font-size: 80%;
  text-align: right;
  margin-right: 10%;
  margin-top: 2%;
  color: #666;
}

/*============== Sleep Page =================*/
.sleep-message {
  font-size: 80%;
  color: white;
  width: 100%;
}

.sleep-full-overlay {
  width: 100vw;
  height: 100vh;
  background-color: black;
}

/*============== Keyboard =================*/
.as-keyboard {
  z-index: 11;
  position: absolute;
  background-color: #2f3237;
  color: #ccc;
  padding: 5%;
  width: 100%;
}

.as-keyboard .row {
  width: 100%;
  clear: both;
  margin: 0;
}

.as-keyboard .key {
  width: 16%;
  height: 50px;
  line-height: 50px;
  float: left;
  text-align: center;
  vertical-align: middle;
  font-size: 130%;
  margin: 0.3%;
  cursor: pointer;
}

.as-keyboard .key-2x {
  width: 32.7%;
}

.as-keyboard .key-3x {
  width: 48%;
}

.as-keyboard .key-4x {
  width: 64%;
}

.as-keyboard .key-5x {
  width: 80%;
}

.as-keyboard .key-6x {
  width: 100%;
}

.as-keyboard .key-small {
  font-size: 100%;
}

.as-keyboard .key-primary {
  border-radius: 0px;
  background-color: #43484e;
  color: #969696;
}

.as-keyboard .key-focus,
.as-keyboard .key-selected,
.as-keyboard .key:active {
  background-color: #449ff2;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0px;
}

/*===============Spinner=================*/
.spinner-container {
  z-index: 200;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  background: radial-gradient(#63707F, #131E2A);
}

.spinner-outer {
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  /* IE 9 */
  -webkit-transform: translateY(-50%);
  /* Chrome, Safari, Opera */
  transform: translateY(-50%);
}

.spinner {
  height: 100px;
  width: 100px;
  margin: auto auto 0 auto;
  position: relative;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left: 6px solid rgba(0, 174, 239, 0.15);
  border-right: 6px solid rgba(0, 174, 239, 0.15);
  border-bottom: 6px solid rgba(0, 174, 239, 0.15);
  border-top: 6px solid rgba(0, 174, 239, 0.8);
  border-radius: 100%;
}

.spinner-message {
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  /* IE 9 */
  -webkit-transform: translateY(-50%);
  /* Chrome, Safari, Opera */
  transform: translateY(-50%);
  text-align: center;
  color: #ccc;
  padding: 30px;
}

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

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

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

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/*==============Device Menu=================*/
.osd {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
  pointer-events: none;
  top: 0;
}

.device-menu-container {
  display: flex;
  justify-content: center;
  width: 100vw;
  z-index: 1;
  height: 100vh;
  text-align: center;
  padding-left: 4.5vmax;
  flex-direction: column;
  pointer-events: none;
}

.device-menu-container .operation-error-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 1.5em;
}

.device-menu-container .operation-error-container .operation-error-label {
  background-color: #fa6c6c;
  text-align: center;
  max-width: 33vw;
  margin: 0;
  border-radius: .4vmax;
  font-size: .9em;
  padding: .5vmax;
}

.device-menu-container h1 {
  margin: 0 0 .5em 0;
}

.device-menu-container .list-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}

.device-menu-footer {
  color: #969696;
  float: right;
  font-style: 80%;
  padding: 0 50px 20px 20px;
}

.device-menu-passcode {
  position: fixed;
  top: 50%;
  left: 50%;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 200;
  pointer-events: all;
}

.device-menu-passcode .container {
  float: left;
  width: 350px;
  background-color: #2f3237;
}

.device-menu-passcode .container .subcontainer {
  padding: 15px;
}

.device-menu-passcode .container .subcontainer .header {
  width: 100%;
}

.device-menu-passcode .container .subcontainer .content {
  width: 100%;
  overflow: auto;
  padding-top: 15px;
  padding-bottom: 5px;
}

.device-menu-passcode .container .subcontainer .content .textinput {
  width: 16%;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  font-size: 130%;
  margin: 0.3%;
  cursor: pointer;
  border-style: solid;
  border-color: #BEBFC1;
  border-width: thin;
  margin: 10px;
  background-color: #17181A;
  text-align: center;
}

.device-menu-passcode .container .subcontainer .error-txt {
  color: #FF0000;
  padding-bottom: 10px;
}

.device-menu-passcode .keyboard {
  float: right;
  padding-left: 10px;
}

/*==============App Init view=================*/
.app-init .main-container {
  display: block;
}

.app-init .main-container .app-init-message {
  padding: 0 2em;
  font-size: 1.5em;
}

/*==============Log view=================*/
.log-view {
  color: #555;
  min-width: 90%;
  min-height: 90%;
  border-radius: 10px !important;
  background-color: #fff;
  padding: 0px;
  border-radius: 0;
  position: fixed;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  pointer-events: all;
  font-size: 60%;
}

.log-view .content {
  top: 95px !important;
}

.log-view .header {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0px;
  top: 0px;
}

.log-view .header button {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0px;
  top: 0px;
}

.log-view .log-settings-info {
  margin-top: 0;
}

.log-view .log-settings-content {
  top: 50px;
}

.log-view .log-view-content {
  top: 100px;
}

.log-view-minimize {
  width: 35px;
  height: 35px;
  line-height: 15px;
  font-size: 120%;
  position: absolute;
  right: 20px;
  top: 20px;
  color: #777;
  background-color: #fff;
  border-radius: 5px;
  border: 1px solid #ccc;
  text-align: center;
  padding-top: 7px;
  pointer-events: all;
  cursor: pointer;
  overflow: hidden;
}

.log-view-filters .log-select,
.log-view-filters .log-search,
.log-view-filters .btn {
  font-size: 100%;
}

.log-view-filters .btn {
  height: 34px;
}

/*============== Device Info Menu=================*/
.device-info-view {
  color: #555;
  min-width: 90%;
  min-height: 90%;
  border-radius: 10px !important;
  background-color: #fff;
  padding: 0px;
  border-radius: 0;
  position: fixed;
  z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  pointer-events: all;
  font-size: 65%;
}

.device-info-view h1 {
  position: absolute;
  margin: 20px;
}

.device-info-view h2 {
  margin-bottom: 10px;
}

.device-info-view .border-grey-top {
  border-top: solid 2px #E5E5E5;
  margin: 5px 0px 5px 0px;
}

.device-info-view .group-info {
  margin: 10px 0px 10px 0px;
}

.device-info-view .group-info ul li {
  margin-top: 5px;
  border-bottom: solid 2px #e5e5e5;
  padding-bottom: 5px;
}

.device-info-view .header {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0px;
  top: 0px;
}

.device-info-view .header button {
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0px;
  top: 0px;
}

.device-info-view .info {
  margin: 20px;
  position: absolute;
  top: 4em;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: scroll;
}

.device-info-view .info .group {
  margin-bottom: 20px;
}

.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  not supported by any browser */
}

.layout-editor {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 500;
}

.layout-editor-item {
  position: absolute;
  z-index: 501;
}

.date-time-widget-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.transparent-background {
  background: transparent !important;
}

.device-menu loader {
  position: relative;
  height: auto;
  min-height: auto;
  margin-bottom: 2vh;
}

.message-box-default {
  display: flex;
  align-self: flex-end;
  flex: 1;
  justify-content: center;
  height: 7vmin;
}

.message-box-default div {
  text-align: center;
  border-radius: 5vw;
  padding-left: 1vw;
  padding-right: 1vw;
  font-weight: bold;
  line-height: 7vmin;
}

.alerts-view {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: black;
  z-index: 0;
}

.hot-area {
  display: none;
  position: fixed;
  z-index: 99999;
}