/**
 * This is the main styles file which is linked to an html.
 * All other css files should be added using 'import' directive.
 */
/* 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,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
.textured-background-common {
  background-size: 550px 550px;
  background-attachment: fixed;
}
.textured-background {
  background: url(../43df7c25630e824b5a12.png), #fff;
  background-size: 550px 550px;
  background-attachment: fixed;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(../967e123ad65de8c5d5c4.woff2) format('woff2');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(../fb9fdde61d631c58d46c.woff2) format('woff2');
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('Roboto Mono Regular'), url(../f3904d10026b5730fbd8.woff2) format('woff2');
}
/*layout common styles*/
@keyframes showContent {
  from {
    left: 100%;
  }
  to {
    left: 0;
  }
}
@keyframes hideContent {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
@keyframes showModalContent {
  from {
    left: -65%;
  }
  to {
    left: 0;
  }
}
@keyframes hideModalContent {
  from {
    left: 0;
  }
  to {
    left: -65%;
  }
}
@keyframes easeLeft {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 200px;
  }
}
@keyframes easeRight {
  from {
    margin-left: 200px;
  }
  to {
    margin-left: 0;
  }
}
@keyframes progress-bar-indeterminate {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -111px 0;
  }
}
@keyframes context-menu-fade-in {
  from {
    transform: scale3d(0.5, 0.5, 1);
    opacity: 0;
  }
  to {
    transform: scale3d(1, 1, 1);
    opacity: 1;
  }
}
@keyframes ribbon-options-fade-in {
  from {
    transform: translate3d(100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes ribbon-options-fade-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes hide-ribbon-animation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(90deg);
  }
}
@keyframes show-ribbon-animation {
  from {
    transform: rotateY(90deg);
  }
  to {
    transform: rotateY(0deg);
  }
}
@keyframes show-options-ribbon-animation {
  from {
    transform: rotateY(-90deg);
  }
  to {
    transform: rotateY(0deg);
  }
}
@keyframes hide-options-ribbon-animation {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-90deg);
  }
}
@keyframes open-tooltip-animation {
  from {
    max-height: 0;
  }
  to {
    max-height: 300px;
  }
}
@keyframes close-tooltip-animation {
  from {
    max-height: 300px;
  }
  to {
    max-height: 0;
  }
}
@keyframes opacity-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes opacity-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes reorder-wrapper {
  from {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
  }
  to {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  }
}
@keyframes notifications-fade-in {
  from {
    transform: translate3d(360px, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes breadcrumb-fade-in {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fav-shadow-fade-in {
  from {
    box-shadow: 0 0 35px rgba(0, 0, 0, 0);
    border-color: transparent;
  }
  to {
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.4);
    border-color: #a7a9ac;
  }
}
@keyframes fav-shadow-fade-out {
  from {
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.4);
    border-color: #a7a9ac;
  }
  to {
    box-shadow: 0 0 35px rgba(0, 0, 0, 0);
    border-color: transparent;
  }
}
@keyframes fav-circle-success {
  0% {
    background: #a7a9ac;
  }
  25% {
    background: #a7a9ac;
  }
  50% {
    background: #56aa1c;
  }
  75% {
    background: #56aa1c;
  }
  100% {
    background: #a7a9ac;
  }
}
@keyframes fav-circle-error {
  0% {
    background: #a7a9ac;
  }
  25% {
    background: #a7a9ac;
  }
  50% {
    background: #FF0000;
  }
  75% {
    background: #FF0000;
  }
  100% {
    background: #a7a9ac;
  }
}
@keyframes ribbon-animation {
  from {
    height: 0;
    padding: 0 10px;
  }
  to {
    padding: 10px;
    height: 100px;
  }
}
@keyframes video-report-blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes alarm-area {
  0% {
    fill: rgba(255, 0, 0, 0.2);
    stroke: rgba(255, 0, 0, 0.5);
  }
  50% {
    fill: rgba(255, 0, 0, 0.5);
    stroke: rgba(255, 0, 0, 0.7);
  }
  100% {
    fill: rgba(255, 0, 0, 0.2);
    stroke: rgba(255, 0, 0, 0.5);
  }
}
@keyframes appliance-icon-animation {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes navigation-blink {
  from,
  to {
    outline: 3px solid #89c377;
  }
  50% {
    outline: 10px solid #89c377;
  }
}
@keyframes language-mobile-blink {
  0% {
    background-color: #d9ead2;
  }
  100% {
    background-color: #ffffff;
  }
}
@keyframes rotate-anti-clockwise {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes rotate-clockwise {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes modal-fade-in {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}
@keyframes modal-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes login-modal-fade-out {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.8);
  }
}
@keyframes flip-vertical-first-step {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(90deg);
  }
}
@keyframes flip-vertical-second-step {
  from {
    transform: rotateY(-90deg);
  }
  to {
    transform: rotateY(0);
  }
}
@keyframes flip-horizontal-first-step {
  from {
    transform: rotateX(0);
  }
  to {
    transform: rotateX(90deg);
  }
}
@keyframes flip-horizontal-second-step {
  from {
    transform: rotateX(-90deg);
  }
  to {
    transform: rotateX(0);
  }
}
@keyframes resize-fade-in {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes resize-fade-out {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.5);
    opacity: 0;
  }
}
@keyframes animate-item {
  50% {
    background-color: #fff2e6;
  }
}
@keyframes pulse {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}
@keyframes icon-pulse {
  from {
    box-shadow: 0 0 0 rgba(86, 170, 28, 0.7);
  }
  to {
    box-shadow: 0 0 0 10px rgba(86, 170, 28, 0);
  }
}
@keyframes slide-fade-in {
  from {
    height: 0;
  }
  to {
    height: 26px;
  }
}
@keyframes question-icon-pulse {
  from {
    box-shadow: 0 0 0 rgba(173, 173, 173, 0.7);
  }
  to {
    box-shadow: 0 0 0 8px rgba(173, 173, 173, 0);
  }
}
@keyframes popup {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
  20% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }
}
@keyframes entity-highlight {
  from {
    background-size: 50% 50%;
  }
  to {
    background-size: 350% 350%;
  }
}
.flex {
  display: flex;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-column-grow-1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.flex-column-grow-0 {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  flex-grow: 0;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
.flex-row-grow-1 {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}
.flex-row-grow-0 {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-grow: 0;
}
.flex-center {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
}
.flex-row-reverse {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-direction: row-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-grow-1 {
  flex-grow: 1;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
/**
 * Contains styles for forms and inputs.
 */
.button-active button:not(.iv-btn):hover:active:not(:disabled),
.button-active button:not(.primary):hover:active:not(:disabled),
.button-active input[type="button"]:hover:active:not(:disabled),
.button-active input[type="submit"]:hover:active:not(:disabled),
.button-active input[type="reset"]:hover:active:not(:disabled),
.button-active #closeButton:hover:active:not(:disabled) {
  box-shadow: 0 0 4px #56aa1c;
  outline: none;
}
.button-active button:not(.iv-btn):hover:active:not(:disabled).favourites-item,
.button-active button:not(.primary):hover:active:not(:disabled).favourites-item,
.button-active input[type="button"]:hover:active:not(:disabled).favourites-item,
.button-active input[type="submit"]:hover:active:not(:disabled).favourites-item,
.button-active input[type="reset"]:hover:active:not(:disabled).favourites-item,
.button-active #closeButton:hover:active:not(:disabled).favourites-item,
.button-active button:not(.iv-btn):hover:active:not(:disabled).open-filter-btn,
.button-active button:not(.primary):hover:active:not(:disabled).open-filter-btn,
.button-active input[type="button"]:hover:active:not(:disabled).open-filter-btn,
.button-active input[type="submit"]:hover:active:not(:disabled).open-filter-btn,
.button-active input[type="reset"]:hover:active:not(:disabled).open-filter-btn,
.button-active #closeButton:hover:active:not(:disabled).open-filter-btn {
  box-shadow: none;
}
.common-button {
  background-color: white;
  border: 1px solid #89c377;
  color: #56aa1c;
  cursor: pointer;
  min-width: 70px;
  padding: 6px 10px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
}
.common-button:hover {
  background-color: #d9ead2;
}
.common-button:hover:active {
  background-color: #d9ead2;
  border-color: #56aa1c;
  box-shadow: none;
}
.button-group .btn-group {
  border-top: 1px solid #a7a9ac;
  text-align: right;
  margin-top: 15px;
  padding: 12px 1px;
}
.primary-button.primary {
  background-color: #56aa1c;
  border-color: #56aa1c;
  color: #ffffff;
  box-shadow: none;
}
.primary-button.primary:hover {
  background-color: #89c377;
  border-color: #56aa1c;
  box-shadow: none;
}
.primary-button.primary:hover:active:not(:disabled) {
  border-color: #56aa1c;
  background-color: #89c377;
  box-shadow: 0 0 4px #89c377;
}
.secondary-button.secondary {
  background-color: #ff4634;
  border-color: #ff4634;
  color: #ffffff;
  box-shadow: none;
}
.secondary-button.secondary:hover {
  background-color: #ff7d71;
  border-color: #ff4634;
  box-shadow: none;
}
.secondary-button.secondary:hover:active:not(:disabled) {
  border-color: #ff4634;
  background-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
}
.disabled-button:disabled,
.disabled-button.disabled {
  background-color: #ededed !important;
  border-color: #a7a9ac !important;
  box-shadow: none;
  cursor: default;
  color: #a7a9ac !important;
}
.light-blue-button.light-blue {
  border: none;
  background-color: #e0f3ff;
  color: #0075FF;
}
.light-blue-button.light-blue:hover {
  background-color: #c0e7ff;
  color: #0075FF;
}
.light-blue-button.light-blue:hover:active {
  background-color: #c0e7ff;
  box-shadow: 0 0 4px #c0e7ff;
}
.light-red-button.light-red {
  border: none;
  background-color: #ffffff;
  color: #ff4634;
}
.light-red-button.light-red:hover {
  background-color: #ff7d71;
  color: #ffffff;
}
.light-red-button.light-red:hover:active {
  background-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
}
.link-button.btn-link {
  line-height: 0;
  padding: 0;
  border: none;
  width: auto;
  min-width: initial;
  text-decoration: underline;
}
.link-button.btn-link:hover {
  background-color: transparent;
}
.link-button.btn-link:hover:active {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
.favourites.favourites-item:disabled {
  background-color: #ffffff !important;
}
.favourites.favourites-item:disabled img {
  opacity: 0.3;
}
.favourites.favourites-item:disabled .title {
  opacity: 0.5;
}
.small-button {
  font-weight: bold;
  height: 24px;
  line-height: 10px;
}
.visible-button.visible {
  cursor: default;
}
.button-focus button:focus,
.button-focus input[type="button"]:focus,
.button-focus input[type="submit"]:focus {
  box-shadow: none;
  outline: none;
}
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus {
  box-shadow: none;
  outline: none;
}
body.mobile button:focus,
body.mobile input[type="button"]:focus,
body.mobile input[type="submit"]:focus {
  box-shadow: none;
  outline: none;
}
@media screen and (max-width: 350px) {
  body.mobile .input-group > label {
    white-space: normal;
    overflow: visible;
    height: auto;
    margin-bottom: 5px;
    line-height: 17px;
  }
}
body.mobile .input-group .input-placeholder .entity-chooser.appliance-field-input {
  width: 100%;
}
body.mobile .save-form-wrapper {
  margin-top: 5px;
  top: auto;
  min-height: 30px;
  max-height: 30px;
  position: static;
}
@media screen and (max-width: 650px) {
  body.mobile .save-form-wrapper {
    align-self: auto;
  }
}
body.mobile .save-form-wrapper save-form {
  width: 100%;
}
body.mobile .save-form-wrapper .save-form {
  justify-content: flex-end;
}
body.mobile .save-form-wrapper #instanceName {
  min-width: 160px;
  flex-grow: 1;
}
body.mobile .save-form-wrapper #closeButton {
  margin-right: 10px;
}
body.mobile .checkBox input {
  margin: 0;
  width: 15px;
  height: 15px;
}
body.mobile .checkBox input:before {
  content: '';
  width: 17px;
  height: 17px;
  display: inline-block;
  cursor: pointer;
  background-size: 17px;
  transform: scale(1.6);
}
body.mobile .custom-input--checkbox:before,
body.mobile .checkBox input:before {
  background: url(../93d372931ca535b718ea.svg) no-repeat 0 0;
}
body.mobile .custom-input--checkbox:checked:before,
body.mobile .checkBox input:checked:before {
  content: url(../a73e8543596aeb3e9cdc.svg);
}
body.mobile .input-group .radio-input input[type="radio"],
body.mobile .input-group .radio-input input[type="checkbox"] {
  width: 14px;
}
body.mobile .checkbox-with-label-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11pt;
  padding: 0;
  margin: 0 0 10px 0;
  min-height: 30px;
}
body.mobile .checkbox-with-label-wrapper--label {
  flex-grow: 1;
  text-align: left;
  line-height: 30px;
  position: relative;
  height: 30px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  padding: 0 60px 0 0;
}
body.mobile .checkbox-with-label-wrapper--label::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  border: 2px solid #ededed;
  border-radius: 15px;
  height: 30px;
  width: 50px;
  box-sizing: border-box;
  float: right;
  background: #ffffff;
  z-index: 1;
  box-shadow: inset 0 0 0 0 #4cd964;
  transition: box-shadow 0.2s linear, border-color 0.2s linear, background-color 0.1s 0.1s linear;
  will-change: box-shadow, border-color, background-color;
}
body.mobile .checkbox-with-label-wrapper--label::before {
  content: '';
  display: block;
  border: 1px solid #a7a9ac;
  border-radius: 50%;
  height: 26px;
  width: 26px;
  float: right;
  background: #ffffff;
  position: absolute;
  z-index: 2;
  right: 21px;
  top: 1px;
  transition: transform 0.2s ease-out, border-color 0.2s linear;
}
body.mobile .checkbox-with-label-wrapper--input-checkbox {
  visibility: hidden;
  position: absolute;
}
body.mobile .checkbox-with-label-wrapper--input-checkbox:disabled + span {
  color: #a7a9ac;
}
body.mobile .checkbox-with-label-wrapper--input-checkbox:disabled + span::before,
body.mobile .checkbox-with-label-wrapper--input-checkbox:disabled + span::after {
  opacity: 0.5;
}
body.mobile .checkbox-with-label-wrapper--input-checkbox:checked + .checkbox-with-label-wrapper--label::after {
  box-shadow: inset 0 0 2px 10px #56aa1c;
  border-color: #56aa1c;
  background-color: #56aa1c;
}
body.mobile .checkbox-with-label-wrapper--input-checkbox:checked + .checkbox-with-label-wrapper--label::before {
  transform: translateX(20px);
  border-color: #56aa1c;
}
@media screen and (max-width: 320px) {
  body.mobile .save-form-wrapper #instanceName {
    min-width: 130px;
  }
}
.custom-input {
  margin: 0;
  padding: 0;
  border: 0;
}
.custom-input:disabled {
  opacity: 0.5;
}
.custom-input--checkbox {
  height: 13px;
  width: 13px;
}
.custom-input--checkbox:before {
  content: '';
  width: 17px;
  height: 17px;
  display: inline-block;
  cursor: pointer;
  background-size: 17px;
  margin: -2px;
  background: url(../3f794da4a858b57dd624.svg) no-repeat 0 0;
}
.custom-input--checkbox:checked:before {
  content: url(../10c5119c5558c217322c.svg);
}
.custom-input--checkbox:indeterminate:before {
  content: url(../b23340a918f9f5072555.svg);
}
.custom-input--checkbox.grey-checked {
  opacity: 0.5;
}
.custom-input--checkbox.grey-checked:before {
  content: url(../10c5119c5558c217322c.svg);
}
.custom-input--checkbox.grey-checked.selected {
  opacity: 1;
}
.custom-input--radio[type="checkbox"] {
  height: 11px;
  width: 11px;
  min-height: 11px;
  min-width: 11px;
}
.custom-input--radio[type="checkbox"]:before {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin: -1px 0 0 -1px;
  background: #eaeaea;
  border: 1px solid #808080;
  border-radius: 50%;
  cursor: pointer;
}
.custom-input--radio[type="checkbox"].selected:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 width=%2711%27 height=%2711%27%3E%3Ccircle cx=%275.5%27 cy=%275.5%27 r=%273%27 fill=%27black%27 /%3E%3C/svg%3E");
}
.zero-margin-padding {
  margin: 0;
  padding: 0;
}
form {
  margin: 0;
  padding: 0;
  width: 100%;
}
.webkit-scrolling-touch {
  -webkit-overflow-scrolling: touch;
}
fieldset {
  border: 1px solid #a7a9ac;
  padding: 0 18px 18px 18px;
  position: relative;
  min-width: inherit;
}
fieldset legend {
  background-color: transparent;
  padding: 0 10px;
}
fieldset legend.bold {
  font-weight: bold;
}
fieldset legend.h3-size {
  font-size: 13px;
}
fieldset li {
  margin-bottom: 7px;
}
fieldset li span:nth-child(2) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: block;
  width: 90%;
  margin-left: 4px;
}
.error-mark:not(.ng-pristine):not(.hidden-error) {
  border-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
  outline: none;
}
.error-mark:not(.ng-pristine):not(.hidden-error) + .newErrorMessage {
  display: block;
  position: absolute;
  top: 27px;
  left: 2px;
}
input + .newErrorMessage,
select + .newErrorMessage,
.custom-date-input + .newErrorMessage {
  display: none;
}
input:invalid:not(.ng-pristine):not(.hidden-error),
select:invalid:not(.ng-pristine):not(.hidden-error),
.custom-date-input:invalid:not(.ng-pristine):not(.hidden-error),
input.ng-invalid:not(.ng-pristine):not(.hidden-error),
select.ng-invalid:not(.ng-pristine):not(.hidden-error),
.custom-date-input.ng-invalid:not(.ng-pristine):not(.hidden-error) {
  border-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
  outline: none;
}
input:invalid:not(.ng-pristine):not(.hidden-error) + .newErrorMessage,
select:invalid:not(.ng-pristine):not(.hidden-error) + .newErrorMessage,
.custom-date-input:invalid:not(.ng-pristine):not(.hidden-error) + .newErrorMessage,
input.ng-invalid:not(.ng-pristine):not(.hidden-error) + .newErrorMessage,
select.ng-invalid:not(.ng-pristine):not(.hidden-error) + .newErrorMessage,
.custom-date-input.ng-invalid:not(.ng-pristine):not(.hidden-error) + .newErrorMessage {
  display: block;
  position: absolute;
  top: 27px;
  left: 2px;
}
.custom-date-input.ng-empty:not(.ng-pristine):not(.hidden-error),
.custom-date-input.ng-invalid-max:not(.ng-pristine):not(.hidden-error),
.custom-date-input.ng-invalid-min:not(.ng-pristine):not(.hidden-error) {
  border-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
  outline: none;
}
.custom-date-input.ng-empty:not(.ng-pristine):not(.hidden-error) + .newErrorMessage,
.custom-date-input.ng-invalid-max:not(.ng-pristine):not(.hidden-error) + .newErrorMessage,
.custom-date-input.ng-invalid-min:not(.ng-pristine):not(.hidden-error) + .newErrorMessage {
  display: block;
  position: absolute;
  top: 27px;
  left: 2px;
}
#slotEndTime span.newErrorMessage,
#slotStartTime span.newErrorMessage {
  position: relative;
  top: 4px;
  margin-bottom: 4px;
}
#deviceConfiguration span.newErrorMessage {
  position: static;
  margin-top: 3px;
}
.newErrorMessage,
.errorMessage {
  color: #ff7d71;
  position: relative;
}
input[type="checkbox"]:not([disabled]):hover {
  cursor: pointer;
}
div.input-group:last-of-type {
  margin-bottom: 0;
}
.input-group {
  height: auto;
  margin: 0 0 5px 0;
  display: flex;
}
.input-group.no-margin {
  margin-bottom: 0;
}
.input-group .input-group {
  margin-bottom: 0;
}
.input-group:last-child {
  margin-bottom: 0;
}
.input-group.new-appliance-field select {
  min-width: 197px;
}
.input-group-label-wrapper {
  padding-right: var(--labelMargin);
}
.input-group-label-wrapper > label {
  min-width: auto;
  margin-right: 0;
  display: inline-block;
  width: auto;
}
.input-group > label {
  width: 370px;
  max-width: 370px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 0;
}
.input-group > label[for="confirmUserPassword"] {
  line-height: 14px;
  white-space: normal;
}
.input-group > label.full-text {
  white-space: normal;
  text-overflow: clip;
}
.input-group label.bold {
  font-size: 13px;
  font-weight: bold;
  line-height: 22px;
}
.input-group .input-placeholder {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
}
.input-group .input-placeholder--with-validation-messages {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.input-group .input-placeholder .entity-chooser {
  flex-grow: 1;
  width: 100%;
}
.input-group .input-placeholder .entity-chooser.appliance-field-input {
  width: auto;
}
.input-group .input-placeholder .entity-chooser.appliance-field-input .input-wrapper input {
  min-width: 220px;
}
.input-group .input-placeholder input[type="text"],
.input-group .input-placeholder input[type="password"],
.input-group .input-placeholder input[type="number"],
.input-group .input-placeholder input[type="email"],
.input-group .input-placeholder input[type="tel"],
.input-group .input-placeholder input[type="date"],
.input-group .input-placeholder .custom-date-input,
.input-group .input-placeholder textarea,
.input-group .input-placeholder select {
  width: 100%;
}
.input-group .input-placeholder input[type="text"]:invalid:not(.ng-pristine) + .newErrorMessage,
.input-group .input-placeholder input[type="password"]:invalid:not(.ng-pristine) + .newErrorMessage,
.input-group .input-placeholder input[type="number"]:invalid:not(.ng-pristine) + .newErrorMessage,
.input-group .input-placeholder input[type="email"]:invalid:not(.ng-pristine) + .newErrorMessage,
.input-group .input-placeholder input[type="tel"]:invalid:not(.ng-pristine) + .newErrorMessage,
.input-group .input-placeholder input[type="date"]:invalid:not(.ng-pristine) + .newErrorMessage,
.input-group .input-placeholder .custom-date-input:invalid:not(.ng-pristine) + .newErrorMessage,
.input-group .input-placeholder textarea:invalid:not(.ng-pristine) + .newErrorMessage,
.input-group .input-placeholder select:invalid:not(.ng-pristine) + .newErrorMessage {
  position: relative;
  top: 3px;
  left: 0;
}
.input-group .input-placeholder label {
  float: left;
  clear: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 145px;
}
.input-group .input-placeholder input[name="fake_email"],
.input-group .input-placeholder input[name="fake_password"] {
  display: none;
}
.input-group .input-placeholder input[type="checkbox"] {
  margin: 0;
  padding: 0;
}
.input-group .input-placeholder.reverse {
  flex-direction: row-reverse;
}
.input-group.no-last {
  margin-top: 5px;
  margin-bottom: 0 !important;
}
.input-group.no-last .validMessage {
  line-height: 24px;
}
.input-group.no-last .newErrorMessage {
  margin: 3px 0;
}
.input-group.last {
  margin-top: 5px;
}
.input-group .radio-input {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-grow: 0;
  align-items: center;
}
.input-group .radio-input input[type="radio"],
.input-group .radio-input input[type="checkbox"] {
  margin: 0 5px 0 0;
  cursor: pointer;
}
.input-group .radio-input label {
  width: auto !important;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input-group .radio-input .custom-date-input[disabled],
.input-group .radio-input input:disabled,
.input-group .radio-input input:disabled + label {
  cursor: default;
}
.hidden-label {
  display: none !important;
}
label {
  border: none;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  margin: 0;
  padding: 0;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
.custom-date-input:focus,
input[type="time"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  border-color: #a7a9ac;
  box-shadow: 0 0 4px #6d6e71;
  outline: none;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
.custom-date-input,
input[type="time"],
input[type="search"],
textarea,
select {
  box-sizing: border-box;
  border: 1px solid #a7a9ac;
  border-radius: 0;
  color: #6d6e71;
  display: inline-block;
  font-size: 13px;
  font-family: "Open Sans", "Verdana", "Geneva", sans-serif;
  height: 24px;
  box-shadow: none;
  line-height: 18px;
  margin: 0;
  min-width: 160px;
  padding: 3px 5px 1px;
  width: 100px;
}
input[type="text"]:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="password"]:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="number"]:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="email"]:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="tel"]:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="date"]:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
.custom-date-input:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="time"]:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="search"]:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
textarea:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
select:invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="text"].ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="password"].ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="number"].ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="email"].ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="tel"].ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="date"].ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
.custom-date-input.ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="time"].ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
input[type="search"].ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
textarea.ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error),
select.ng-invalid:not(.ng-pristine):not([type="email"]):not(.hidden-error) {
  border-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
  outline: none;
}
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
input[type="tel"]:disabled,
input[type="date"]:disabled,
.custom-date-input:disabled,
input[type="time"]:disabled,
input[type="search"]:disabled,
textarea:disabled,
select:disabled,
input[type="text"][disabled],
input[type="password"][disabled],
input[type="number"][disabled],
input[type="email"][disabled],
input[type="tel"][disabled],
input[type="date"][disabled],
.custom-date-input[disabled],
input[type="time"][disabled],
input[type="search"][disabled],
textarea[disabled],
select[disabled] {
  background-color: #ededed;
  color: #a7a9ac;
}
input[type="text"][readonly],
input[type="password"][readonly],
input[type="number"][readonly],
input[type="email"][readonly],
input[type="tel"][readonly],
input[type="date"][readonly],
.custom-date-input[readonly],
input[type="time"][readonly],
input[type="search"][readonly],
textarea[readonly],
select[readonly] {
  -webkit-user-select: text;
  cursor: auto;
}
input[type="text"][readonly]:focus,
input[type="password"][readonly]:focus,
input[type="number"][readonly]:focus,
input[type="email"][readonly]:focus,
input[type="tel"][readonly]:focus,
input[type="date"][readonly]:focus,
.custom-date-input[readonly]:focus,
input[type="time"][readonly]:focus,
input[type="search"][readonly]:focus,
textarea[readonly]:focus,
select[readonly]:focus {
  box-shadow: none;
}
input[type="date"],
input[type="month"],
input[type="week"],
.custom-date-input {
  background: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBpZD0iaWNvLWRhdGUiIHZpZXdCb3g9IjAgMCAxNiAxNiIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48Zz4KICAgIDxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjYWJhYmFiIiBkPSJNMTEsMWgtMXYyaDFWMXogTTEzLDJoLTF2MWMwLDAuNi0wLjQsMS0xLDFoLTFDOS40LDQsOSwzLjYsOSwzCiAgICAgICAgVjJINnYxYzAsMC42LTAuNCwxLTEsMUg0QzMuNCw0LDMsMy42LDMsM1YySDJDMS40LDIsMSwyLjQsMSwzdjEwYzAsMC42LDAuNCwxLDEsMWgxMWMwLjYsMCwxLTAuNCwxLTFWM0MxNCwyLjQsMTMuNiwyLDEzLDJ6CiAgICAgICAgIE00LDEzSDJ2LTJoMlYxM3ogTTQsMTBIMlY4aDJWMTB6IE00LDdIMlY1aDJWN3ogTTcsMTNINXYtMmgyVjEzeiBNNywxMEg1VjhoMlYxMHogTTcsN0g1VjVoMlY3eiBNMTAsMTNIOHYtMmgyVjEzeiBNMTAsMTBIOFY4aDIKICAgICAgICBWMTB6IE0xMCw3SDhWNWgyVjd6IE0xMywxM2gtMnYtMmgyVjEzeiBNMTMsMTBoLTJWOGgyVjEweiBNMTMsN2gtMlY1aDJWN3ogTTUsMUg0djJoMVYxeiI+PC9wYXRoPgo8L2c+PC9zdmc+) calc(100% - 4px) no-repeat;
  -webkit-appearance: none;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="month"]::-webkit-inner-spin-button,
input[type="week"]::-webkit-inner-spin-button,
.custom-date-input::-webkit-inner-spin-button {
  display: none;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
.custom-date-input::-webkit-calendar-picker-indicator {
  width: 16px;
  height: 16px;
  margin: -1px -21px 2px 2px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="week"]::-webkit-date-and-time-value,
.custom-date-input::-webkit-date-and-time-value {
  margin-left: 0;
  margin-right: 0;
}
input[type="date"]:invalid + .errorMessage,
input[type="month"]:invalid + .errorMessage,
input[type="week"]:invalid + .errorMessage,
.custom-date-input:invalid + .errorMessage {
  display: block;
}
input[type="date"]:invalid:required:not(:out-of-range) + .errorMessage::after,
input[type="month"]:invalid:required:not(:out-of-range) + .errorMessage::after,
input[type="week"]:invalid:required:not(:out-of-range) + .errorMessage::after,
.custom-date-input:invalid:required:not(:out-of-range) + .errorMessage::after {
  content: attr(data-error-required);
}
input[type="date"]:invalid:out-of-range + .errorMessage::after,
input[type="month"]:invalid:out-of-range + .errorMessage::after,
input[type="week"]:invalid:out-of-range + .errorMessage::after,
.custom-date-input:invalid:out-of-range + .errorMessage::after {
  content: attr(data-error-underflow);
}
input[type="time"]::-webkit-clear-button,
input[type="date"]::-webkit-clear-button,
input[type="month"]::-webkit-clear-button,
input[type="week"]::-webkit-clear-button {
  display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="time"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button {
  height: 24px;
  width: 16px;
  display: block;
  margin: -2px -5px 0 0;
}
input[type="time"] {
  min-width: 45px;
  width: 85px;
  padding: 1px 5px;
}
button:not(.iv-btn):hover:active:not(:disabled),
button:not(.primary):hover:active:not(:disabled),
input[type="button"]:hover:active:not(:disabled),
input[type="submit"]:hover:active:not(:disabled),
input[type="reset"]:hover:active:not(:disabled),
#closeButton:hover:active:not(:disabled) {
  box-shadow: 0 0 4px #56aa1c;
  outline: none;
}
button:not(.iv-btn):hover:active:not(:disabled).favourites-item,
button:not(.primary):hover:active:not(:disabled).favourites-item,
input[type="button"]:hover:active:not(:disabled).favourites-item,
input[type="submit"]:hover:active:not(:disabled).favourites-item,
input[type="reset"]:hover:active:not(:disabled).favourites-item,
#closeButton:hover:active:not(:disabled).favourites-item,
button:not(.iv-btn):hover:active:not(:disabled).open-filter-btn,
button:not(.primary):hover:active:not(:disabled).open-filter-btn,
input[type="button"]:hover:active:not(:disabled).open-filter-btn,
input[type="submit"]:hover:active:not(:disabled).open-filter-btn,
input[type="reset"]:hover:active:not(:disabled).open-filter-btn,
#closeButton:hover:active:not(:disabled).open-filter-btn {
  box-shadow: none;
}
select {
  padding: 0 20px 0 5px;
  line-height: 22px;
  -webkit-appearance: none;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDAgTDgsMCBMIDQsNCBaIiBmaWxsPSIjODI4MjgyIj48L3BhdGg+PC9zdmc+) calc(100% - 7px) no-repeat;
}
select optgroup {
  background: #d9ead2;
  color: #6d6e71;
  font-style: normal;
  font-weight: normal;
}
select optgroup option {
  background: white;
  color: #6d6e71;
}
select#doorType option:disabled {
  color: #a7a9ac;
}
textarea {
  min-height: 80px;
  resize: vertical;
  overflow-y: auto;
}
.asterisk {
  color: #FF0000;
  position: absolute;
  left: 100%;
  top: 0;
  width: 10px;
  height: 10px;
  text-align: center;
}
.input-placeholder-column {
  align-items: flex-start !important;
  flex-direction: column !important;
}
.input-placeholder-column input {
  width: 100%;
}
.no-center-align {
  align-items: initial !important;
}
.asterisk-wrapper {
  margin-right: 20px;
  display: flex;
  min-width: 180px;
  position: relative;
}
.asterisk-wrapper.mobileInputBlock {
  display: block;
}
.asterisk-wrapper.mobileInputBlock .newErrorMessage {
  margin-bottom: 5px;
}
.asterisk-wrapper.reverse {
  flex-direction: row-reverse;
}
.asterisk-wrapper.no-margin {
  margin: 0;
}
.asterisk-wrapper .asterisk.hidden {
  visibility: hidden;
}
.asterisk-wrapper input[type="text"] {
  flex-grow: 1;
  text-overflow: ellipsis;
}
.dateInput {
  border: 0;
}
.input {
  display: inline-block;
  margin: 0;
  padding: 0;
  position: relative;
}
.input input[type="text"],
.input input[type="password"],
.input input[type="number"],
.input input[type="email"],
.input input[type="tel"],
.input input[type="date"],
.input input[type="time"],
.input input[type="search"] {
  padding-right: 0;
}
.input .input-addon {
  background-color: white;
  cursor: default;
  height: calc(100% - 5px);
  position: absolute;
  top: 2.5px;
  right: 1px;
  width: 24px;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.input .input-addon.clear-search {
  top: 2px;
  border: none;
  padding: 0;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIj48cGF0aCBkPSJNMCwxLjVMMS41LDBMNSwzLjVMOC41LDBMMTAsMS41TDYuNSw1TDEwLDguNUw4LjUsMTBMNSw2LjVMMS41LDEwTDAsOC41TDMuNSw1WiIgZmlsbD0iIzgyODI4MiI+PC9wYXRoPjwvc3ZnPg==) no-repeat center;
}
.input .input-addon.clear-search:focus {
  box-shadow: none;
}
.input .input-addon.date {
  background-color: transparent;
  cursor: pointer;
  top: 2px;
  right: 3px;
}
.btn {
  background-color: white;
  border: 1px solid #89c377;
  color: #56aa1c;
  cursor: pointer;
  min-width: 70px;
  padding: 6px 10px;
  text-align: center;
  font-size: 12px;
  margin-left: 5px;
  line-height: 17px;
  box-sizing: border-box;
  font-weight: bold;
  height: 24px;
  line-height: 10px;
}
.btn:hover {
  background-color: #d9ead2;
}
.btn:hover:active {
  background-color: #d9ead2;
  border-color: #56aa1c;
  box-shadow: none;
}
.btn.favourites-item:disabled {
  background-color: #ffffff !important;
}
.btn.favourites-item:disabled img {
  opacity: 0.3;
}
.btn.favourites-item:disabled .title {
  opacity: 0.5;
}
.btn.visible {
  cursor: default;
}
.btn.primary {
  background-color: #56aa1c;
  border-color: #56aa1c;
  color: #ffffff;
  box-shadow: none;
}
.btn.primary:hover {
  background-color: #89c377;
  border-color: #56aa1c;
  box-shadow: none;
}
.btn.primary:hover:active:not(:disabled) {
  border-color: #56aa1c;
  background-color: #89c377;
  box-shadow: 0 0 4px #89c377;
}
.btn.secondary {
  background-color: #ff4634;
  border-color: #ff4634;
  color: #ffffff;
  box-shadow: none;
}
.btn.secondary:hover {
  background-color: #ff7d71;
  border-color: #ff4634;
  box-shadow: none;
}
.btn.secondary:hover:active:not(:disabled) {
  border-color: #ff4634;
  background-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
}
.btn:disabled,
.btn.disabled {
  background-color: #ededed !important;
  border-color: #a7a9ac !important;
  box-shadow: none;
  cursor: default;
  color: #a7a9ac !important;
}
.btn.btn-link {
  line-height: 0;
  padding: 0;
  border: none;
  width: auto;
  min-width: initial;
  text-decoration: underline;
}
.btn.btn-link:hover {
  background-color: transparent;
}
.btn.btn-link:hover:active {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
.btn.light-blue {
  border: none;
  background-color: #e0f3ff;
  color: #0075FF;
}
.btn.light-blue:hover {
  background-color: #c0e7ff;
  color: #0075FF;
}
.btn.light-blue:hover:active {
  background-color: #c0e7ff;
  box-shadow: 0 0 4px #c0e7ff;
}
.btn.light-red {
  border: none;
  background-color: #ffffff;
  color: #ff4634;
}
.btn.light-red:hover {
  background-color: #ff7d71;
  color: #ffffff;
}
.btn.light-red:hover:active {
  background-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
}
button.back {
  margin-left: 0;
  flex-grow: 0;
}
.save-form-wrapper {
  --form-height: 30px;
  position: absolute;
  height: var(--form-height);
  top: calc(-1 * var(--form-height));
  right: 0;
  padding: 0 5px;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
}
#videoReportContent .save-form-wrapper {
  top: 0;
}
@media screen and (max-width: 650px) {
  .save-form-wrapper {
    width: 100vw;
    position: static;
    flex-shrink: 0;
    flex-grow: 0;
    top: 0;
  }
}
.save-form-wrapper .save-form {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
}
.save-form-wrapper .save-form button {
  margin: 0 0 0 5px;
}
.save-form-wrapper .save-form label {
  margin: 0 10px;
}
.long-label div.input-group label {
  width: 260px !important;
}
.edit-block {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
  flex-grow: 0;
  display: inline-flex;
  padding: 0 5px;
  z-index: 1;
}
.edit-block img.edit-pencil,
.edit-block .edit-pencil > img {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0 2px;
}
.edit-block .edit-pencil:hover {
  cursor: pointer;
}
.edit-block .edit-list {
  padding: 0 3px;
  color: #56aa1c;
  text-decoration: underline;
  text-transform: uppercase;
}
#useInternetTime {
  margin-left: 22px;
}
#saveToControllerCameras,
#saveToNetworkCameras,
#saveToController,
#saveToNetwork {
  margin-left: 7px;
}
label[for="setDateBackup"] {
  min-width: 228px;
}
label[for="customTimeRadio"] {
  min-width: 180px;
}
#emailReport,
#printReport,
#pdfFormat,
#csvFormat {
  margin-left: 5px;
}
#passwordStrength {
  height: 11px;
  position: relative;
  top: 7px;
}
.strengthBox {
  transition-property: width;
  transition-duration: 0.4s;
  height: 15px;
  position: relative;
  top: 5px;
}
.strengthBox1 {
  background-color: #FF0000;
  width: 25%;
}
.strengthBox2 {
  background-color: #FF0000;
  width: 50%;
}
.strengthBox3 {
  background-color: #ffd700;
  width: 75%;
}
.strengthBox4,
.strengthBox5 {
  background-color: #98fb98;
  width: 100%;
}
.input-focus input[type="text"]:focus,
.input-focus input[type="password"]:focus,
.input-focus input[type="number"]:focus,
.input-focus input[type="email"]:focus,
.input-focus input[type="tel"]:focus,
.input-focus input[type="date"]:focus,
.input-focus .custom-date-input:focus,
.input-focus input[type="time"]:focus,
.input-focus input[type="search"]:focus,
.input-focus textarea:focus,
.input-focus select:focus {
  border-color: #a7a9ac;
  box-shadow: 0 0 4px #6d6e71;
  outline: none;
}
/**
 * File responsible for text settings for all application.
 * By default, 'Open Sans' from Google web fonts is used.
 */
html,
body,
button,
a {
  color: #3c3c3b;
  font-family: 'Open Sans', Verdana, Geneva, sans-serif;
  font-size: 12px;
}
h1 {
  font-size: 24px;
  font-weight: normal;
  line-height: 24px;
  margin-bottom: 10px;
}
h2 {
  font-size: 18px;
  font-weight: normal;
  line-height: 18px;
  margin-bottom: 10px;
}
h3 {
  font-size: 13px;
  font-weight: bold;
  line-height: 16px;
  margin-bottom: 15px;
}
h4 {
  font-size: 13px;
  font-weight: bold;
  line-height: 16px;
  text-transform: uppercase;
}
h6 {
  font-size: 13px;
  font-weight: bold;
  line-height: 13px;
}
p {
  margin: 5px 0;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  font-family: 'Open Sans', Verdana, Geneva, sans-serif;
  font-size: 12px;
}
::-webkit-input-placeholder {
  color: #a7a9ac;
  font-family: 'Open Sans', Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: normal;
}
:-moz-placeholder {
  color: #a7a9ac;
  font-family: 'Open Sans', Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: normal;
}
::-moz-placeholder {
  color: #a7a9ac;
  font-family: 'Open Sans', Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: normal;
}
:-ms-input-placeholder {
  color: #a7a9ac;
  font-family: 'Open Sans', Verdana, Geneva, sans-serif;
  font-size: 12px;
  font-weight: normal;
}
/**
 * File contains settings for different view modes - large icons, small icons, and list.
 * Details view mode is described in a separate file (grid.less).
 */
.listing {
  position: relative;
  height: 100%;
}
.listing.in-loading {
  position: relative;
  z-index: 1;
}
.listing.in-loading.loading-full-cover + #pageLoading {
  background-color: #ffffff;
}
.listing.in-loading + #pageLoading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: rgba(255, 255, 255, 0.5);
  z-index: 2;
}
.listing.in-loading + #pageLoading::after {
  content: "";
  background: url(../2cd21886d4ceef201b08.svg) no-repeat 0 0;
  display: block;
  height: 40px;
  left: 50%;
  margin: -20px 0 0 -110px;
  position: absolute;
  top: 50%;
  width: 220px;
  z-index: 3;
}
.listing .loading {
  position: relative;
}
.listing .draggable-content {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  overflow: hidden;
}
.listing .draggable-content.visible {
  visibility: visible;
}
.listing .draggable-content figure {
  position: absolute;
  margin: 0 !important;
}
.listing figure {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid transparent;
  cursor: pointer;
}
.listing figure:hover,
.listing figure.selected {
  background-color: #d9ead2;
}
.listing figure:hover figcaption,
.listing figure.selected figcaption {
  color: #36740b;
}
.listing figure.ready-to-drop,
.listing figure.focus {
  outline: 2px dotted #89c377;
  background-color: #f4faf3;
}
.listing figure.active,
.listing figure.selected-by-control,
.listing figure.selected-by-control.focus {
  background-color: #d9ead2;
  border-color: #89c377;
}
.listing figure.active figcaption,
.listing figure.selected-by-control figcaption,
.listing figure.selected-by-control.focus figcaption {
  color: #36740b;
}
.listing figure.cut {
  opacity: 0.3;
}
.listing figure.cut:hover {
  background-color: transparent;
}
.listing figure.disabled {
  cursor: default;
  opacity: 0.5;
  pointer-events: none;
}
.listing figure.disabled:hover {
  background-color: transparent;
}
.listing figure .custom-barred {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPiAgPGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iNjQiIHkyPSI2NCIgc3R5bGU9InN0cm9rZTpyZ2IoMjU1LDAsMCk7c3Ryb2tlLXdpZHRoOjQiPjwvbGluZT4gIDxsaW5lIHgxPSI2NCIgeTE9IjAiIHgyPSIwIiB5Mj0iNjQiIHN0eWxlPSJzdHJva2U6cmdiKDI1NSwwLDApO3N0cm9rZS13aWR0aDo0Ij48L2xpbmU+PC9zdmc+);
}
.listing tr.ready-to-drop {
  border: 1px dotted #89c377;
  background-color: #f4faf3;
}
.listing tr.ready-to-drop td {
  background-color: #f4faf3;
}
.listing tr.ready-to-drop:nth-child(2n) td {
  background-color: #f4faf3;
}
.listing .page {
  display: flex;
  flex-wrap: wrap;
}
.listing .large-icons,
.listing .small-icons {
  height: 100%;
  overflow-y: auto;
}
.listing .large-icons .container,
.listing .small-icons .container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: 100%;
  padding: 10px;
}
.listing .large-icons .container figure,
.listing .small-icons .container figure {
  display: inline-block;
  line-height: 0;
  margin: 0 4px 10px;
  vertical-align: top;
  width: 96px;
  overflow: hidden;
  position: relative;
}
.listing .large-icons .container figure input[type=checkbox],
.listing .small-icons .container figure input[type=checkbox] {
  position: absolute;
  top: -2px;
  right: -3px;
  height: 14px;
  width: 14px;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.listing .large-icons .container figure input[type=checkbox].invisible,
.listing .small-icons .container figure input[type=checkbox].invisible {
  display: none;
}
.listing .large-icons .container figure figcaption,
.listing .small-icons .container figure figcaption {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  height: auto;
  line-height: 15px;
  margin-bottom: 13px;
  padding: 0;
  text-align: center;
  width: 100%;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  max-height: 30px;
  display: block;
  display: -webkit-box;
  display: -ms-box;
  display: box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.listing .large-icons {
  line-height: 143px;
}
.listing .large-icons figure {
  max-height: 133px;
  min-height: 133px;
}
.listing .large-icons figure img,
.listing .large-icons figure .entity-icon {
  margin: 12px auto;
}
.listing .large-icons figure img {
  display: block;
}
.listing .small-icons {
  line-height: 101px;
}
.listing .small-icons figure {
  max-height: 91px;
  min-height: 91px;
}
.listing .small-icons figure .entity-icon {
  margin: 8px auto;
}
.listing .list {
  height: 100%;
  overflow-x: scroll;
}
.listing .list .container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 3px 5px;
  height: 100%;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.listing .list .container .fake-page {
  float: left;
  display: flex;
  height: 100%;
}
.listing .list .container .page {
  float: left;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.listing .list .container figure {
  height: 26px;
  width: 311px;
}
.listing .list .container figure .entity-icon {
  float: left;
  margin: 4px;
  position: relative;
}
.listing .list .container figure .no-ico {
  display: none;
}
.listing .list .container figure figcaption {
  height: 24px;
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.listing .grid-container {
  height: calc(100% - 36px);
}
.listing .grid-container .container {
  padding: 0;
}
.listing .grid-container table {
  table-layout: fixed;
  width: 100%;
}
.listing .grid-container table.page {
  display: table;
}
.listing .details {
  overflow-y: scroll;
  overflow-x: hidden;
}
.listing .details .page {
  flex-direction: column;
}
.listing .details .fake-page {
  min-width: 1px;
}
.listing .details figure {
  clear: both;
}
.listing .details figure:nth-child(2n) {
  background-color: #f4faf3;
}
.listing .details div {
  float: left;
}
body.mobile .listing figure:hover figcaption,
body.mobile .listing figure.selected figcaption {
  color: inherit;
}
body.mobile .listing figure.active figcaption,
body.mobile .listing figure.selected-by-control figcaption,
body.mobile .listing figure.selected-by-control.focus figcaption {
  color: #36740b;
}
@media screen and (max-width: 1024px) {
  body.mobile .listing {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }
}
@media screen and (max-width: 375px) {
  body.mobile .listing .large-icons .container figure {
    width: 30%;
  }
}
@media screen and (min-width: 376px) and (max-width: 415px) {
  body.mobile .listing .large-icons .container figure {
    width: 30.333%;
  }
}
@media screen and (min-width: 416px) and (max-width: 568px) {
  body.mobile .listing .large-icons .container figure {
    width: 22.1%;
  }
}
@media screen and (min-width: 569px) and (max-width: 667px) {
  body.mobile .listing .large-icons .container figure {
    width: 17.5%;
  }
}
@media screen and (min-width: 668px) and (max-width: 684px) {
  body.mobile .listing .large-icons .container figure {
    width: 15.1%;
  }
}
@media screen and (min-width: 685px) and (max-width: 768px) {
  body.mobile .listing .large-icons .container figure {
    width: 15.2%;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  body.mobile .listing .large-icons .container figure {
    width: 11%;
  }
}
/**
 * Contains icons definitions for the whole application.
 * All icon images are placed in separate files based on icon size.
 */
span.entity-icon {
  float: left;
  display: inline-block;
  vertical-align: top !important;
  margin-right: 3px;
}
.ico-entity-128 {
  width: 128px;
  height: 128px;
}
.entityIcon {
  width: 16px;
}
.largeIcon {
  width: 128px;
  height: 128px;
  position: absolute;
}
.ico-entity-64 {
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.ico-entity-32 {
  width: 32px;
  height: 32px;
  position: relative;
}
.ico-events-16 {
  height: 16px;
  width: 16px;
  background-size: auto !important;
}
.ico-person-image-16 {
  background-position: 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}
.ico-person-image-128 {
  background-position: 0 0;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
}
.ico-events-32 {
  height: 32px;
  width: 32px;
  background-size: auto !important;
}
.ico-entity-16 {
  height: 16px;
  width: 16px;
}
.ico-entity-16.ico-soft-button {
  background: #89c377;
  width: 16px;
  height: 16px;
}
.ribbon-icon-32 {
  background-repeat: no-repeat;
  display: block;
  height: 34px;
  width: 32px;
}
.ribbon-icon-16 {
  background-repeat: no-repeat;
  display: block;
  height: 16px;
  left: 0;
  margin: -8px 3px 3px 3px;
  position: absolute;
  top: 50%;
  width: 16px;
}
.ribbon-lightning {
  width: 8px;
  height: 19px;
}
.ribbon-lightning-arrange {
  position: relative;
  float: left;
  margin-top: -38px;
  margin-left: 53px;
}
.ribbon-lightning-favourites {
  position: absolute;
  top: 2px;
  right: 14px;
}
.ribbon-view.ribbon-icon-16 {
  border-right: 1px solid #ededed;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 7px 8px;
  position: absolute;
  top: 0;
}
.ribbon-language.ribbon-icon-16 {
  border-right: 1px solid #ededed;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 0 8px;
  position: absolute;
  top: 0;
}
.add-new.ribbon-icon-16 {
  margin-left: 10px;
}
.ribbon-newEntity.ico-soft-button {
  background: none;
  background-color: #89c377;
  width: 16px;
  height: 16px;
}
.btn-dropdown ul .ribbon-video.ribbon-icon-16 {
  border-right: 1px solid #ededed;
  left: 0;
  position: absolute;
  top: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 8px;
}
.ribbon-video.ribbon-icon-16 {
  margin: -8px 3px 3px 3px;
  position: absolute;
  top: 50%;
}
.ico-navigation-buttons-32 {
  height: 32px;
  width: 32px;
}
.ico-navigation-buttons-16 {
  height: 16px;
  width: 16px;
}
.ico-navigation-buttons-64 {
  height: 64px;
  width: 64px;
}
.ico-soft-button.ico-soft-button-16 {
  min-width: 16px;
  height: 24px;
}
.ico-soft-button.ico-soft-button-32 {
  min-width: 32px;
  height: 32px;
}
.ico-soft-button.ico-soft-button-64 {
  min-width: 64px;
  height: 64px;
}
.additional {
  z-index: 0;
  position: absolute;
}
.vr-aligned {
  position: absolute;
  left: 28%;
}
.folder {
  left: 25%;
  position: absolute;
  top: -3%;
}
.add-folder {
  left: 20%;
  position: absolute;
  top: -3%;
}
.folder-tooltip {
  left: -10%;
  position: absolute;
  top: -23%;
}
.delete {
  top: -3%;
  left: 38%;
}
.key3 {
  position: absolute;
  top: 12%;
  left: 2%;
}
.print-preview-icon {
  position: absolute;
  top: 7%;
  left: 33%;
}
.export-print-icon {
  position: absolute;
  top: 7%;
  left: 35%;
}
.pie-loader-wrapper {
  --time: 30s;
  --size: 29px;
  --border: 1px;
  --dark-color: #56aa1c;
  --light-color: #d9ead2;
  position: relative;
  background: white;
  width: var(--size);
  height: var(--size);
}
@keyframes flip {
  50% {
    border-color: var(--dark-color);
    transform: none;
    box-shadow: none;
  }
  50.01%,
  100% {
    border-color: var(--light-color);
    transform: rotate(180deg);
    box-shadow: 0 0 1px 0 #ffffff;
  }
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.pie-loader-wrapper .piece-wrapper {
  display: flex;
  height: 100%;
}
.pie-loader-wrapper .whole-pie {
  position: absolute;
  border-radius: 50%;
  border: var(--border) solid var(--light-color);
  width: calc(100% - 2 * var(--border));
  height: calc(100% - 2 * var(--border));
}
.pie-loader-wrapper .numbers-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pie-loader-wrapper .numbers-wrapper span {
  font-size: calc(0.5 * var(--size));
}
.pie-loader-wrapper .piece {
  width: 50%;
  height: calc(100% - 2 * var(--border) - 0.2px);
  border: var(--border) solid var(--dark-color);
  background-color: white;
  animation-duration: var(--time);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.pie-loader-wrapper .static {
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
  border-right: none;
  z-index: 2;
  transform-origin: 100% 50%;
  animation-name: flip;
}
.pie-loader-wrapper .spinner {
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  border-left: none;
  transform-origin: 0 50%;
  animation-name: rotate;
}
.disable-selection {
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer */
  -khtml-user-select: none;
  /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none;
  /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none;
  /* Disable Android and iOS callouts*/
}
/**
 * Responsible for pages shown for users with old or unsupported browsers.
 * Adds styles for 'browser is not supported' messages.
 */
.browser-warning {
  background-color: #ffffff;
  bottom: 0;
  left: 0;
  margin: 100px auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 500px;
  z-index: 100;
}
.browser-warning li {
  list-style: none;
  margin-bottom: 10px;
}
.browser-warning a {
  text-decoration: underline;
}
.browser-warning a:hover {
  text-decoration: none;
}
.number-input-wrapper {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  flex-grow: 0;
  width: 100%;
}
.number-input-wrapper input[type="text"]:focus,
.number-input-wrapper input[type="password"]:focus,
.number-input-wrapper input[type="number"]:focus,
.number-input-wrapper input[type="email"]:focus,
.number-input-wrapper input[type="tel"]:focus,
.number-input-wrapper input[type="date"]:focus,
.number-input-wrapper .custom-date-input:focus,
.number-input-wrapper input[type="time"]:focus,
.number-input-wrapper input[type="search"]:focus,
.number-input-wrapper textarea:focus,
.number-input-wrapper select:focus {
  border-color: #a7a9ac;
  box-shadow: 0 0 4px #6d6e71;
  outline: none;
}
.number-input-wrapper .number-input input[type="text"] {
  width: 33px;
  padding-right: 20px;
}
.number-input-wrapper .number-input input[type="text"] + .input-addon {
  width: 16px;
}
.number-input-wrapper .number-input input[type="text"][disabled] + .input-addon {
  background-color: #ededed;
}
.number-input-wrapper .number-input .input-addon {
  background-color: #ffffff;
  cursor: default;
  height: calc(100% - 5px);
  position: absolute;
  top: 2px;
  right: 3px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.number-input-wrapper .number-input .input-addon button:focus {
  box-shadow: none;
}
.number-input-wrapper .number-input button {
  border: 0;
  box-shadow: none;
  cursor: pointer;
  height: 10px;
  position: absolute;
  width: 14px;
}
.number-input-wrapper .number-input .inc {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDQgTDgsNCBMIDQsMCBaIiBmaWxsPSIjODI4MjgyIi8+PC9zdmc+) 3px 5px no-repeat transparent;
  top: -1px;
  right: 2px;
}
.number-input-wrapper .number-input .dec {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDAgTDgsMCBMIDQsNCBaIiBmaWxsPSIjODI4MjgyIj48L3BhdGg+PC9zdmc+) 3px 2px no-repeat transparent;
  bottom: -1px;
  right: 2px;
}
.number-input-wrapper .errorMessage {
  line-height: 12px;
  display: none;
  position: relative;
  top: 3px;
  color: #FF0000;
}
.timepicker {
  height: 24px;
  width: 80px;
  position: relative;
}
.timepicker .input-group .input-placeholder {
  z-index: inherit;
}
.timepicker.active {
  border-color: #a7a9ac;
  box-shadow: 0 0 4px #6d6e71;
  outline: none;
}
.timepicker .hours input[type="text"],
.timepicker .minutes input[type="text"] {
  min-width: 50px;
  width: 33px;
  padding-right: 20px;
  padding-left: 5px;
}
.timepicker .hours input[type="text"] + .input-addon,
.timepicker .minutes input[type="text"] + .input-addon {
  width: 16px;
}
.timepicker .hours input[type="text"][disabled] + .input-addon,
.timepicker .minutes input[type="text"][disabled] + .input-addon {
  background-color: #ededed;
}
.timepicker .hours input[type="text"]:focus,
.timepicker .minutes input[type="text"]:focus {
  border-color: #a7a9ac;
  box-shadow: none;
}
.timepicker .hours button,
.timepicker .minutes button {
  border: 0;
  box-shadow: none;
  cursor: pointer;
  height: 12px;
  position: absolute;
  width: 10px;
}
.timepicker .hours .inc,
.timepicker .minutes .inc {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDQgTDgsNCBMIDQsMCBaIiBmaWxsPSIjODI4MjgyIi8+PC9zdmc+) 4px 5px no-repeat transparent;
  top: 1px;
  right: 6px;
}
.timepicker .hours .dec,
.timepicker .minutes .dec {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDAgTDgsMCBMIDQsNCBaIiBmaWxsPSIjODI4MjgyIj48L3BhdGg+PC9zdmc+) 4px 2px no-repeat transparent;
  bottom: -4px;
  right: 6px;
}
.timepicker .minutes {
  left: 30px;
  top: -24px;
}
.timepicker .minutes input[type="text"] {
  border-left: none;
}
.timepicker .minutes::before {
  content: ':';
  top: 5px;
  position: absolute;
  left: -3px;
}
.tab-content .timepicker .hours {
  vertical-align: middle;
}
#optionTime input[type="text"] {
  min-width: 50px;
  width: 33px;
}
#slotStartTime .minutes,
#slotEndTime .minutes {
  left: -18px;
  top: 0;
}
.modal-body .timepicker {
  width: 78px;
}
.options-timepicker .timepicker,
.modal-body .timepicker#denyAccess {
  width: 80px;
}
.time-fieldset .timepicker {
  width: 80px;
}
.modal-body .timepicker[type="hours"] {
  width: 80px;
}
.modal-body .timepicker[type="hours"] .hours {
  width: 100%;
}
.modal-body .timepicker[type="hours"] .hours input[type="text"] {
  width: 80px;
}
.modal-body .timepicker[type="hours"] .minutes input {
  visibility: hidden;
}
.modal-body .timepicker[type="hours"] .minutes .input-addon {
  right: 6px;
}
.modal-body .timepicker[type="hours"] .minutes::before {
  display: none;
}
.datepicker {
  -webkit-box-shadow: 0 0 15px #AAA;
  -moz-box-shadow: 0 0 15px #AAA;
  box-shadow: 0 0 15px #AAA;
  background-color: #ffffff;
  border: 1px solid #a7a9ac;
  display: none;
  position: absolute;
  top: 30px;
  width: 300px;
  z-index: 200;
}
.datepicker:after {
  content: '';
}
.datepicker table {
  width: 100%;
}
.datepicker table .controls th {
  background-color: #767575;
  height: 30px;
  padding: 0;
  vertical-align: top;
}
.datepicker table .controls th button {
  background-color: transparent;
  border: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  color: #ffffff;
  cursor: pointer;
  font-weight: bold;
  height: 30px;
  text-align: center;
}
.datepicker table .controls th button.iconed {
  background-repeat: no-repeat;
  width: 25px;
}
.datepicker table .controls th button.iconed.previous {
  background-position: 90% 50%;
  float: left;
}
.datepicker table .controls th button.iconed.next {
  background-position: 10% 50%;
  float: right;
}
.datepicker table .day-titles th {
  height: 17px;
  font-weight: bold;
  padding-top: 8px;
  text-align: center;
}
.datepicker table tbody tr:first-child td {
  padding-top: 3px;
}
.datepicker table td {
  height: 25px;
}
.datepicker table button {
  background-color: #f1f1f1;
  border: 1px solid #f1f1f1;
  cursor: pointer;
  display: block;
  height: 22px;
  margin: 0 auto;
  text-align: center;
  width: 97%;
}
.datepicker table button.contains-video {
  font-weight: bold;
  text-decoration: underline;
}
.datepicker table button.selected {
  background-color: #89c377;
  border-color: #a7dd82;
}
.datepicker table button.secondary {
  color: #bfbfbf;
}
.datepicker table button:hover {
  background-color: #d9ead2;
  border-color: #d9ead2;
}
.datepicker table button:disabled {
  background-color: #ffffff;
  cursor: default;
}
.datepicker table em {
  display: block;
  text-align: center;
}
#newDayDate {
  padding-right: 30px;
}
#newDayDateDiv .ng-invalid-date-disabled {
  border-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
}
.ng-valid-date-disabled + div.input-addon.date {
  cursor: default;
}
.input-addon button:disabled {
  cursor: default;
}
.modal-overlay {
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999999995;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: opacity;
  animation: opacity-fade-in 0.2s linear;
}
.modal-overlay.unfocused .modal {
  --filter: grayscale(1) brightness(0.6);
  filter: var(--filter) !important;
}
.modal-overlay.unfocused .modal:-webkit-full-screen-ancestor {
  filter: var(--filter) !important;
}
.modal-overlay.fade-out {
  animation: opacity-fade-out 0.3s linear;
}
.modal-overlay + .grid-tooltip {
  z-index: 999999996;
}
.modal-overlay.gray-bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.modal-overlay.overlay-new + .modal-wrapper .modal {
  z-index: 999999995;
}
.modal-overlay.modal-overlay-reached {
  z-index: 999999999;
}
.modal {
  --modal-border: none;
  --modal-shadow: 0 0 20px #6d6e71;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-right: var(--modal-border);
  border-left: var(--modal-border);
  border-bottom: var(--modal-border);
  visibility: hidden;
  min-width: 320px;
  max-height: 100%;
  z-index: 101;
  will-change: transition, filter;
  position: relative;
  box-shadow: var(--modal-shadow);
  transition: filter 0.2s linear;
  animation: modal-fade-in 0.2s ease-out;
}
.modal#videoPopupModal {
  border: none;
}
.modal#videoPopupModal:before {
  border-top: none;
}
.modal.no-modal-animation {
  animation: none;
}
.modal.fade-out {
  animation: modal-fade-out 0.2s linear forwards;
  transition: transform 0.2s linear;
}
.modal.return-to-screen {
  transition: transform 0.2s ease-out;
}
.modal > form:not(form[name="addNewCredential"]) {
  height: 100%;
}
.modal .btn {
  font-weight: bold;
}
.modal .btn[disabled] {
  background-color: #ffffff;
  border-color: #a7a9ac;
  cursor: default;
  color: #a7a9ac;
}
.modal:before {
  border-top: 3px solid #56aa1c;
  border-bottom: 0;
  content: '';
  display: block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.modal#userOptionsMobile::before {
  display: none;
}
.modal#userOptionsMobile .modal-body {
  border-top: none;
}
.modal.warning:before {
  border-top: 3px solid #ff7601;
}
.modal.error:before {
  border-top: 3px solid #FF0000;
}
.modal#errorOccurredModal .modal-body {
  flex-direction: column;
}
.modal#addToHomeScreenModal .modal-body {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}
.modal#addToHomeScreenModal .logo-add-to-home {
  width: 48px !important;
  height: 48px !important;
  flex-shrink: 0;
  border-radius: 8px;
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.3), inset 0 0.07em 0 rgba(255, 255, 255, 0.5);
}
.modal#addToHomeScreenModal .info-message {
  margin-left: 10px;
  line-height: 18px;
}
.modal#addToHomeScreenModal .info-message strong {
  font-weight: bold;
}
.modal#addToHomeScreenModal .info-message .add-to-home {
  display: inline-block;
  width: 16px;
  height: 18px;
  margin-left: 4px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  text-indent: -9999em;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAACtCAYAAAB7l7tOAAAF6UlEQVR4AezZWWxUZRiH8VcQEdxZEFFiUZBFUCIa1ABBDARDcCciYGKMqTEGww3SOcNSAwQTjOBiiIpEhRjAhRgXRC8MFxojEhAFZUGttVhaoSxlaW3n8W3yXZxm6vTrOMM5Q98n+V9MMu1pvl++uZhKuypghu49KaaTWGdZSYoVN6VD95nMpLNYZ9XNbdQR2od2k88O3Gm6Bh0t7H0p5Vwp2Ax3ajpu2tYbciFWwkTFO63DY6+JcI4USFaSyYpWp8N7SVZJKR3EinkBk9JxvZFXxhnZSjBaoWp1ZL0ES8WKYXMZp0AndORgy8WKFe5Yf1zvvSBWDEpys2LU6MjD5kmEWQlGKsJRHXlcqUSQVcItEnDEA6gAb7LhjvD9WO6yIEfICQI5A1nzGCYB1T4og5bBiFcyv2f6ujYhl4iVxwKG6qp8MK55HsqPwK0rMr9v/yEo3uCPrJstVh5KMER30Aeh31Ioq0FrHfjXw9CYghnrvYFTuqfEymFzGSwBlT4ARYr7u+K6GLmCVGvAGg2NMG0d/sgJnpScZLjXSkC5z8H3eQ72/k24Q8NfzvwFyK4qtuJSZKaubRPyE/K/Mtx+EvCHL+7uasId1t10w0scz/RzSzYzAfgKV30D3LPaG7lRkR8RK4tKKJKAMp+D7r0EfmmOe0x3m2itAc/ZxBjgAt1mXHWKPPkdb+QGSTJdrDaU5EoJ2OtzwD0WwY7KNNzbRfMFFg24WPdtGHnS221Cflgsj56hjwTs8TnY7oq7/QDhjutGicsb2AVcovsO18l6uPPNNiE/JFaGAq7Q7fY50G4LYVtz3FrdaNGyBXbIl+q24DqhyHes9EaulwR3SwtZs+ktAT/7HORliru1gnCndONFyx44Dfn7MPLYN7yR6yTJZAllJeguAT/4HOBFz8I3ZWm4E0TLFbBD7qn7EVdtHYx53R9ZN0ksrZRuErDN5+AuLIWvm+Oe1k0ULdfADrmX7idcR0/DyBXeyCdlLuMMOGCBz4F1ng+f7yFcve5e0fIFHELeiav6BAx70Rt5p0yhY3u/wR0kyarW/uX35b403PtFyzewQ75ctwtXzSkY8WqruHslSV8RscrL6TJ1bcvfWJ0/HzbtIdw/ugdFyzdwOOAq3T6fmzxwGQ3vbmO8iFioIWqYSsHMj9M/ljfuTsOdItoZBXYBfXX7cVXVwvXLm/8+fU3lcdCqdEMNGBbgUmRmfQISQKd5sGEn4VK6YtEiAXYBA3QVuA4q8hCHrDcafR1ul65jewfuovsCl7vJrNlOuEbdo6JFCuwCrtb9hqusBu56Cw4cI1y1briIWEBn3Ue0XKPuMdGiBg4H9NdV0HJ/6QZLOEPmPN0GmpfSPS5arIBdwHUtIFfoBsl/ZsgfhHCfFi2WwC5goO4AmvanbqBkzJA76tboZokWa2AXMEi3RTdAvDLkDqJFAhzB32xFD2wZsGXA0WfAlgFbBmwZsGXAlgFbBpzk04JaKb0iA9ZnF9x5SQAFtRKKIgPWZxfaeRmwAZ/BGbAB37eaG6MCbnq2Aed5czYyKirgpmcbsAHHZAZswN0Wwo7KeG1fFf2jAm56dtzOQ42yB+65mDhWFBUwUETMUiMDNmADbp/APRaTAh6I2bpGCNw1bufRZJQ1cPdF/NueHZsgDEBBGLbMGoIu4AZu5gLOZeEaYmEXeznF3jRPyEv4frgJvvJe3qTefY0AAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwb8rwADBgwYMGDAgAEDBgwYMGDAgAEDBgwYMGDAgAEDBgz4/sz1Nia/9hizA7zgklwy3RYwYMBzBRjw4bPjxAbAAizAAtwgwAIswAIswAIMGDBgARZgARZgAS4FWIAFWIAFWIABAwYswAIswAIswIUAC7AAC7AACzBgwIAFWIAFWIAFuBBgARZgARZgAQYMGPApQ99ZCdgWtzqwATbABtgAG2DbnxNb7zbRimsMLMACrDf2wMWI/WasfQAAAABJRU5ErkJggg==);
  overflow: hidden;
  vertical-align: middle;
}
.modal#replaceHardwareDevice .modal-body {
  overflow: hidden;
  flex-wrap: nowrap;
}
.modal#eventReportModal .modal-body {
  height: 400px;
  padding: 0;
  line-height: 1;
}
.modal#eventReportModal .modal-body .event-report-wrapper {
  display: flex;
  flex-grow: 1;
  overflow-x: auto;
}
.modal#eventReportModal .modal-body .event-report-wrapper event-report {
  overflow-y: auto;
}
.modal.new-modal {
  background-color: #ededed;
}
.modal.new-modal:before {
  content: none;
}
.modal.new-modal .modal-header {
  min-height: 38px;
  border-top: 3px solid #56aa1c;
}
.modal.new-modal .modal-header .title {
  flex-grow: 1;
  display: flex;
  align-items: center;
  font-size: 10pt;
  text-transform: uppercase;
  margin: 0 25px;
}
.modal.new-modal .modal-header .close {
  flex-basis: 25px;
}
.modal.new-modal .modal-body {
  border-top: none;
  padding-top: 0;
}
.modal.modal-util-new {
  position: relative;
}
.modal.modal-reached {
  z-index: 999999999;
}
#licenseAgreementModal .modal-body {
  padding-top: 10px;
  line-height: 1.3;
}
#licenseAgreementModal .modal-body ul {
  list-style: disc;
}
#licenseAgreementModal .modal-body ol {
  list-style: decimal;
}
#licenseAgreementModal .modal-body ol,
#licenseAgreementModal .modal-body ul {
  padding-left: 10px;
  margin-top: 15px;
  margin-bottom: 15px;
}
#licenseAgreementModal .modal-body strong {
  font-weight: bold;
}
#licenseAgreementModal .modal-body em {
  font-style: italic;
}
#manageHardware grid {
  display: flex;
  flex-direction: column;
}
#manageHardware .grid-container {
  overflow-x: hidden;
  overflow-y: auto;
}
#selectSoftButtonsModal manage-soft-buttons-button {
  position: absolute;
  right: 20px;
}
.modal-header {
  cursor: default;
  position: relative;
  text-align: center;
  display: flex;
}
.modal-header h6 {
  height: 20px;
  padding: 10px 0 0 20px;
  text-transform: uppercase;
  flex: 1 1 auto;
}
.modal-header h6.ondrag {
  cursor: move;
}
.modal-header .close {
  flex: 0 0 20px;
  margin: auto;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIj48cGF0aCBkPSJNMCwxLjVMMS41LDBMNSwzLjVMOC41LDBMMTAsMS41TDYuNSw1TDEwLDguNUw4LjUsMTBMNSw2LjVMMS41LDEwTDAsOC41TDMuNSw1WiIgZmlsbD0iIzgyODI4MiI+PC9wYXRoPjwvc3ZnPg==) 0 0 no-repeat transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
  height: 10px;
  width: 10px;
  font-size: 6px;
}
.modal-header .close:focus {
  outline: none;
  box-shadow: none;
}
.modal-body {
  line-height: 1.5;
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  border-top: 1px solid #a7a9ac;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 20px;
  -webkit-overflow-scrolling: touch;
}
.modal-body h3 {
  font-weight: normal;
}
.modal-body .tab-content {
  width: 100%;
  overflow: visible !important;
  position: inherit;
  height: inherit;
}
.modal-body .tab-content .target-chooser {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.modal-body .errors {
  color: #ff7d71;
  margin-bottom: 15px;
}
.modal-body .notPermissions {
  display: inline-block;
  position: absolute;
  width: calc(100% - 20px * 2);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: auto;
  color: #3c3c3b;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}
.modal-body .modal-list {
  margin: 10px 0 0 0;
  padding-left: 15px;
}
.modal-body .modal-list li + li {
  margin-top: 5px;
}
.modal-body.modal-loading-indicator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: rgba(255, 255, 255, 0.4);
  z-index: 9999;
}
.modal-body.modal-loading-indicator::after {
  content: '';
  background: url(../2cd21886d4ceef201b08.svg) 50% 50% no-repeat transparent;
  display: block;
  top: 50%;
  left: 50%;
  position: absolute;
  margin: -10px 0 0 -110px;
  z-index: 99999;
  width: 220px;
  height: 20px;
}
.modal-body.modal-loading {
  opacity: 0.6;
}
.modal-body .modal-loader {
  background: url(../2cd21886d4ceef201b08.svg) 50% 50% no-repeat transparent;
  bottom: 55px;
  left: 0;
  position: absolute;
  right: 0;
  top: 60px;
}
.modal-body fieldset {
  padding: 16px 10px;
}
.modal-body .input-group {
  display: flex;
  flex-wrap: wrap;
}
.modal-body .input-group .dynamic-input-wrapper {
  width: 140px;
}
.modal-body .input-group .dynamic-input-wrapper label {
  width: auto;
  display: inline-block;
}
.modal-body .input-group label {
  display: flex;
  position: relative;
  width: 140px;
}
.modal-body .input-group .password-mask {
  -webkit-text-security: disc;
  text-security: disc;
}
.modal-body .hidden {
  visibility: hidden;
}
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding: 10px;
  text-align: end;
  border-top: 1px solid #a7a9ac;
  flex-shrink: 0;
}
body.mobile .new-mobile-modal-header {
  flex-direction: row-reverse;
  padding: 0;
  height: auto;
}
body.mobile .new-mobile-modal-header h6.ondrag {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 60px 0 0;
  text-align: center;
  font-size: 14pt;
  text-overflow: ellipsis;
  text-transform: none;
}
body.mobile .modal-overlay {
  width: 100vw;
}
body.mobile .modal {
  width: 100%;
  margin-left: 0;
  margin-top: 0;
  border: none;
}
body.mobile .modal:not(.static),
body.mobile .modal#editGroupMembershipModal {
  min-height: 270px;
  position: absolute;
  height: 100%;
  box-sizing: border-box;
}
body.mobile .modal.static:not(#editGroupMembershipModal) {
  max-width: 90vw;
  min-width: 90vw;
  max-height: 90vh;
  border: none;
  box-shadow: 0 0 20px #6d6e71;
}
body.mobile .modal.static:not(#editGroupMembershipModal):not(.modal-util-new) {
  animation: context-menu-fade-in 0.2s ease-out both;
}
body.mobile .modal.static:not(#editGroupMembershipModal)::before {
  display: none;
}
body.mobile .modal.static:not(#editGroupMembershipModal) .modal-header {
  padding: 0;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  background-color: #ffffff;
}
body.mobile .modal.static:not(#editGroupMembershipModal) .modal-header h6 {
  padding: 0;
  font-size: 10.5pt;
  line-height: normal;
}
body.mobile .modal.static:not(#editGroupMembershipModal) .modal-header .close-modal {
  display: none;
}
body.mobile .modal.static:not(#editGroupMembershipModal) .modal-body {
  border-top: none;
  padding: 0 20px 20px;
  font-size: 10.5pt;
  flex-basis: auto;
  background-color: #ffffff;
  max-height: calc(90vh - 115px);
}
body.mobile .modal.static:not(#editGroupMembershipModal) .modal-body a {
  font-size: 10.5pt;
}
body.mobile .modal.static:not(#editGroupMembershipModal) .modal-footer {
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-shrink: 0;
  background-color: #ffffff;
}
body.mobile .modal.static:not(#editGroupMembershipModal) .modal-footer .btn {
  margin: 0;
  border: none;
  height: 50px;
  flex-basis: 50%;
  background: #ffffff;
  flex-grow: 1;
  font-weight: normal;
  font-size: 10.5pt;
}
body.mobile .modal.static:not(#editGroupMembershipModal) .modal-footer .btn:active {
  background: rgba(0, 0, 0, 0.2);
}
body.mobile .modal.static:not(#editGroupMembershipModal) .modal-footer .btn.primary {
  background: #56aa1c;
  font-weight: bold;
  color: #ffffff;
}
body.mobile .modal.static:not(#editGroupMembershipModal) .modal-footer .btn + .btn {
  border-left: 1px solid #a7a9ac;
  border-right: none;
}
body.mobile .modal.static:not(#editGroupMembershipModal)#invalidCredentialModal .modal-body {
  justify-content: flex-start;
}
body.mobile .modal.static:not(#editGroupMembershipModal)#invalidCredentialModal .modal-footer .btn {
  flex-basis: 100%;
  border-bottom: 1px solid #a7a9ac;
}
body.mobile .modal.mobile {
  width: 100% !important;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.2s ease-out;
}
body.mobile .modal.mobile.closed {
  transform: translate3d(100%, 0, 0) !important;
}
body.mobile .modal .modal-body {
  flex-direction: column;
  flex-wrap: nowrap;
}
body.mobile .modal#editPermissionsModal,
body.mobile .modal#image {
  min-height: initial;
}
body.mobile .modal#licenseAgreementModal .modal-body {
  flex-direction: column;
  background-color: transparent;
}
body.mobile .modal#licenseAgreementModal .modal-body p {
  flex-shrink: 0;
}
body.mobile .modal.mobile {
  width: 100vw !important;
  height: 100% !important;
  animation: context-menu-fade-in 0.2s ease-out both;
}
body.mobile .modal.mobile::before {
  content: none;
}
body.mobile .modal.mobile .modal-header {
  width: auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
body.mobile .modal.mobile .modal-header h6 {
  width: calc(100% - 60px);
  padding: 10px 0 10px 20px;
  text-align: left;
  line-height: 19pt;
  z-index: 3;
}
body.mobile .modal.mobile .modal-header button.close-modal {
  flex-basis: 60px;
  height: 60px;
  background-size: 35%;
  background-position: center;
}
body.mobile .modal.mobile .modal-header.updated-modal-header {
  flex-direction: row-reverse;
  padding: 0;
  height: auto;
}
body.mobile .modal.mobile .modal-header.updated-modal-header h6.ondrag {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 60px 0 0;
  text-align: center;
  font-size: 14pt;
  text-overflow: ellipsis;
  text-transform: none;
}
body.mobile .modal.mobile .modal-body {
  width: 100% !important;
  padding: 0;
  height: calc(100% - 60px - 60px - 10px*2) !important;
}
body.mobile .modal.mobile .modal-body .target-chooser {
  height: 100vh;
}
body.mobile .modal.mobile .modal-body #groupMembership {
  height: 100%;
}
body.mobile .modal.mobile .modal-body.modal-loading {
  opacity: 1;
}
body.mobile .modal.mobile .modal-body.modal-loading .ui-tree {
  opacity: 0.6;
}
body.mobile .modal.mobile .modal-body .ui-tree-space {
  display: none;
}
body.mobile .modal.mobile .modal-body .ui-tree-item {
  height: 30px;
  padding: 10px 20px;
  border-bottom: 1px #ededed solid;
}
body.mobile .modal.mobile .modal-body .ui-tree-item .expand-button:hover {
  background-color: transparent;
}
body.mobile .modal.mobile .modal-body .ui-tree-item .ui-tree-item-content {
  align-items: center;
}
body.mobile .modal.mobile .modal-body .ui-tree-item .ui-tree-item-left-extension-wrapper .expand-button {
  height: 30px;
  width: 30px;
  padding: 0;
}
body.mobile .modal.mobile .modal-body .ui-tree-item .ui-tree-item-left-extension-wrapper .expand-button .sub-menu-arrow {
  font-size: 20px;
}
body.mobile .modal.mobile .modal-body .ui-tree-item .ui-tree-item-left-extension-wrapper .ui-tree-checkbox input {
  margin: 8.5px 16px 6.5px 3px;
}
body.mobile .modal.mobile .modal-body .ui-tree-item .ui-tree-item-icon {
  margin: 8px 8px 8px 0;
}
body.mobile .modal.mobile .modal-body .ui-tree-item:hover {
  background-color: transparent;
}
body.mobile .modal.mobile .modal-body .ui-tree-item.active {
  background-color: #89c377;
}
body.mobile .modal.mobile.complex-mobile {
  min-height: initial;
}
body.mobile .modal.mobile.complex-mobile .modal-header {
  width: 100vw;
  padding: 0;
}
body.mobile .modal.mobile.complex-mobile .modal-header .header-content {
  display: flex;
  width: 100vw;
  height: 100%;
  padding: 0 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-shrink: 0;
  flex-grow: 1;
  box-sizing: border-box;
}
body.mobile .modal.mobile.complex-mobile .modal-header .header-content h6 {
  padding: 0;
  font-size: 14pt;
  font-weight: normal;
  color: #000000;
  text-transform: none;
  flex-grow: 2;
  z-index: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto;
}
body.mobile .modal.mobile.complex-mobile .modal-header .header-content h6:not(:last-child) {
  margin-right: 0;
}
body.mobile .modal.mobile.complex-mobile .modal-header .header-content.contains-search {
  justify-content: flex-start;
}
body.mobile .modal.mobile.complex-mobile .modal-header .header-content.contains-search h6 {
  flex-grow: 0;
}
body.mobile .modal.mobile.complex-mobile .modal-header .header-content .close-modal {
  background-size: 39%;
  background-position: center;
}
body.mobile .modal.mobile.complex-mobile .modal-header .header-content .left-control,
body.mobile .modal.mobile.complex-mobile .modal-header .header-content .close-modal,
body.mobile .modal.mobile.complex-mobile .modal-header .header-content .right-control {
  position: static;
  top: 0;
  left: 0;
  padding: 0;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0 0 0 -20px;
  z-index: 2;
}
body.mobile .modal.mobile.complex-mobile .modal-header .header-content .left-control + h6,
body.mobile .modal.mobile.complex-mobile .modal-header .header-content .close-modal + h6 {
  margin: 0 40px 0 0;
  padding: 0 0 0 0;
}
body.mobile .modal.mobile.complex-mobile .modal-header .header-content .right-control {
  margin-left: -40px;
  margin-right: -20px;
}
body.mobile .modal.mobile.complex-mobile .modal-body {
  flex-wrap: wrap;
  padding: 0;
  overflow: hidden;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content {
  width: 100vw;
  height: 100%;
  flex-grow: 1;
  overflow: auto;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content .scrollable-content {
  overflow: scroll;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content > * {
  max-width: 100%;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content ul.options-list {
  padding: 0;
  width: 100%;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content ul.options-list li {
  display: flex;
  align-items: center;
  border-bottom: 1px #ededed solid;
  padding: 15px 20px;
  font-size: 14px;
  line-height: 20px;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content ul.options-list li .menu-icon {
  height: 16px;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content ul.options-list li .menu-title {
  padding-left: 10px;
  display: flex;
  flex-grow: 2;
  font-weight: bold;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content ul.options-list li .sub-menu-arrow {
  font-size: 20px;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content ul.options-list li .checkbox {
  width: 20px;
  height: 20px;
  border-radius: 50px;
  border: 1px #ededed solid;
  color: transparent;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content ul.options-list li.active .checkbox {
  color: #ffffff;
  background-color: #56aa1c;
  border-color: #56aa1c;
  text-align: center;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content ul.options-list li.isLoading {
  animation: language-mobile-blink 1.5s infinite;
}
body.mobile .modal.mobile.complex-mobile .modal-body .body-content .loader {
  background: url(../2cd21886d4ceef201b08.svg) 50% 100% no-repeat transparent;
  height: 20px;
  width: 100%;
}
body.mobile .modal.mobile .modal-footer {
  height: 60px;
  padding: 10px;
  border-top: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
body.mobile .modal.mobile .modal-footer button,
body.mobile .modal.mobile .modal-footer .bth {
  display: block;
  margin: 0;
  border: none;
  color: #ffffff;
  background-color: #56aa1c;
  min-width: 40%;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12pt;
  transition: transform 0.1s linear;
}
body.mobile .modal.mobile .modal-footer button:active,
body.mobile .modal.mobile .modal-footer .bth:active {
  transform: scale(0.97);
}
body.mobile .modal.mobile .modal-footer button + button,
body.mobile .modal.mobile .modal-footer .bth + button,
body.mobile .modal.mobile .modal-footer button + .btn,
body.mobile .modal.mobile .modal-footer .bth + .btn {
  margin: 0 0 0 10px;
  background-color: #ffffff;
  border: 1px solid #56aa1c;
  color: #56aa1c;
}
@media screen and (max-height: 460px) and (orientation: landscape) {
  body.mobile .modal.mobile .modal-header,
  body.mobile .modal.mobile.complex-mobile .modal-header {
    height: 40px;
  }
  body.mobile .modal.mobile .modal-body {
    height: calc(100% - 40px - 40px - 10px*2) !important;
  }
  body.mobile .modal.mobile .modal-footer {
    height: 40px;
    flex-shrink: 0;
  }
  body.mobile .modal.mobile.modal-with-checkable-grid-and-notes#mark-as-safe-modal header.modal-header button.close.close-modal,
  body.mobile .modal.mobile.modal-with-checkable-grid-and-notes#acknowledge-alarm-modal header.modal-header button.close.close-modal {
    flex-basis: 50px;
    height: 40px;
    padding: 0;
  }
}
body.mobile .modal-header {
  flex-shrink: 0;
}
body.mobile #manageCodesModal .modal-header {
  width: auto;
  padding: 0 20px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
body.mobile #manageCodesModal .modal-header button.close {
  width: 60px;
  height: 60px;
  order: 0;
  background-position: center;
  background-size: 20px;
  padding: 0;
}
body.mobile #manageCodesModal .modal-header h6 {
  padding: 0 10px;
  order: 1;
  font-size: 12pt;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 19pt;
}
modal-tabs {
  flex: 0 0 100%;
  width: 100%;
}
modal-tabs span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.modal-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dynamic-select-active {
  background: #56aa1c;
  color: #ffffff;
}
.dynamic-select-active path:not(.unchangeable),
.dynamic-select-active polygon:not(.unchangeable),
.dynamic-select-active circle:not(.unchangeable) {
  fill: #ffffff !important;
}
.dynamic-select-active .invert-exception {
  fill: #56aa1c !important;
}
.dynamic-select-active .invert-exception.stroke {
  fill: transparent!important;
  stroke: #ffffff !important;
}
.dynamic-select-active .active-exception {
  fill: #ffffff !important;
}
.dynamic-select-hover {
  background: #d9ead2;
  color: #3c3c3b;
}
.dynamic-select-hover path:not(.unchangeable),
.dynamic-select-hover polygon:not(.unchangeable),
.dynamic-select-hover circle:not(.unchangeable) {
  fill: #6d6e71 !important;
}
.dynamic-select-hover .invert-exception {
  fill: #6d6e71 !important;
}
.dynamic-select-hover .invert-exception.stroke {
  fill: transparent!important;
  stroke: #6d6e71 !important;
}
.dynamic-select-hover .active-exception {
  fill:  !important;
}
.dynamic-select {
  background: #ffffff;
  color: #3c3c3b;
}
.dynamic-select path:not(.unchangeable),
.dynamic-select polygon:not(.unchangeable),
.dynamic-select circle:not(.unchangeable) {
  fill: #6d6e71 !important;
}
.dynamic-select .invert-exception {
  fill: #6d6e71 !important;
}
.dynamic-select .invert-exception.stroke {
  fill: transparent!important;
  stroke: #6d6e71 !important;
}
.dynamic-select .active-exception {
  fill:  !important;
}
.static-icon-select-active {
  background: #56aa1c;
  color: #ffffff;
}
.static-icon-select-hover {
  background: #d9ead2;
  color: #3c3c3b;
}
.static-icon-select {
  background: #ffffff;
  color: #3c3c3b;
}
.disabled-select {
  opacity: 0.5;
  cursor: default;
}
.disabled-select:hover {
  background-color: inherit;
}
.disabled-select.active:hover {
  background: #56aa1c;
  color: #ffffff;
}
.disabled-select.active:hover path:not(.unchangeable),
.disabled-select.active:hover polygon:not(.unchangeable),
.disabled-select.active:hover circle:not(.unchangeable) {
  fill: #ffffff !important;
}
.disabled-select.active:hover .invert-exception {
  fill: #56aa1c !important;
}
.disabled-select.active:hover .invert-exception.stroke {
  fill: transparent!important;
  stroke: #ffffff !important;
}
.disabled-select.active:hover .active-exception {
  fill: #ffffff !important;
}
#eventsTable {
  width: 100%;
}
.overallStatus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.paxlockStatus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.controller-wrapper {
  display: flex;
  justify-content: space-between;
  margin: 3px 5px 3px 0;
}
.controller-wrapper.nested {
  padding-left: 10px;
}
.controller-wrapper.controller-column {
  justify-content: flex-start;
  align-items: center;
}
.controller-wrapper.controller-column div:last-of-type svg {
  display: none;
}
.controller-wrapper.controller-column .label {
  padding-left: 5px;
}
.controller-wrapper.controller-column.indent .label {
  padding-left: 30px;
}
.controller-wrapper.hidden {
  display: none;
}
.controller-wrapper .plus svg,
.controller-wrapper .minus svg {
  width: 12px;
  height: 12px;
}
.grid-container {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
#fields-mapping-modal select {
  width: auto;
  min-width: 120px;
}
#manageHardware .grid tr .hardware-controller-head {
  display: flex;
}
#manageHardware .grid tr .hardware-controller-head .controller-wrapper.controller-column.opened div:last-of-type svg {
  display: block;
}
#manageHardware .grid tr .hardware-controller-head .controller-wrapper.controller-column.opened div:first-of-type svg {
  display: none;
}
#manageHardware .grid tr.gray-background td {
  background-color: #f4f4f4;
}
#manageHardware .grid tr.white-background td {
  background-color: #ffffff;
}
#manageHardware .grid tr.hidden {
  display: none;
}
#manageHardware .grid tr.opened .controller-wrapper.controller-column div:last-of-type svg {
  display: block;
}
#manageHardware .grid tr.opened .controller-wrapper.controller-column div:first-of-type svg {
  display: none;
}
#manageHardware .grid tr:hover > td {
  background-color: #d9ead2;
}
#manageHardware .grid tr.selected td {
  background-color: #56aa1c;
  color: #ffffff;
}
#manageHardware .grid tr.selected td .loading {
  background-color: #ffffff;
}
#manageHardware .grid tr.selected td svg {
  fill: #ffffff !important;
}
#manageHardware .grid tr.selected td .paxlockSpinnerCirclePositive {
  stroke: #ffffff !important;
}
#manageHardware .grid tr.selected td .paxlockProgressSpinnerCirclePositive {
  stroke: #ffffff !important;
  fill: transparent !important;
}
#manageHardware .grid tr.selected td .paxlockProgressSpinnerCircleNegative {
  stroke: #ffffff !important;
}
#manageHardware .grid tr.selected td .paxlockSpinnerCircleNegative {
  stroke: #ffffff !important;
}
#manageHardware .grid tr.selected td .localNetWorkIconSVG {
  filter: brightness(0) invert(1) !important;
}
#manageHardware .grid tr.selected td .online,
#manageHardware .grid tr.selected td .offline,
#manageHardware .grid tr.selected td .onlineonbattery,
#manageHardware .grid tr.selected td .critical,
#manageHardware .grid tr.selected td .low,
#manageHardware .grid tr.selected td .discharging,
#manageHardware .grid tr.selected td .full,
#manageHardware .grid tr.selected td .amber,
#manageHardware .grid tr.selected td .updating,
#manageHardware .grid tr.selected td .reinstating {
  color: #ffffff;
}
#grid-shadow {
  opacity: 50 / 100;
  filter: alpha(opacity=50);
  cursor: move;
  display: none;
  position: absolute;
  z-index: 10;
}
#grid-shadow-column {
  opacity: 70 / 100;
  filter: alpha(opacity=70);
  background-color: #aaa;
  position: absolute;
  width: 30px;
  z-index: 9;
}
#mainWindow {
  flex-grow: 1;
}
#mainWindow tr:hover > td .camera-event-icon {
  display: block;
}
#mainWindow tr:hover > td .ico-appliance-camera .ico-event-play-16 {
  display: block;
}
#mainWindow tr:hover > td .ico-appliance-camera .ico-event-camera-16 {
  display: none;
}
#mainWindow tr:hover > td .ico-appliance-camera::after {
  content: none;
}
.grid.page thead th {
  height: 0;
  padding-top: 0;
  line-height: 0;
  padding-bottom: 0;
  font-size: 0;
}
.table-button-wrapper {
  display: flex;
  justify-content: space-between;
}
.table-button-wrapper .button-wrapper {
  position: relative;
  z-index: 99999;
}
.table-button-wrapper .open-filter-btn {
  background-color: transparent;
  cursor: pointer;
  background-repeat: no-repeat;
  border: 0;
  outline: 0;
  box-shadow: none;
  position: absolute;
  top: 5px;
  right: 10px;
}
.grid,
.grid-reorder-wrapper > table {
  table-layout: auto;
  width: 100%;
  position: relative;
}
.grid td,
.grid-reorder-wrapper > table td,
.grid th,
.grid-reorder-wrapper > table th {
  vertical-align: middle;
  background-color: #ededed;
  box-sizing: border-box;
}
.grid td.reorder-transition,
.grid-reorder-wrapper > table td.reorder-transition,
.grid th.reorder-transition,
.grid-reorder-wrapper > table th.reorder-transition {
  white-space: nowrap;
  transition: width 0.2s linear, padding 0.2s linear;
}
.grid th,
.grid-reorder-wrapper > table th {
  background-color: #ededed;
  border-right: 1px solid #a7a9ac;
  color: #6d6e71;
  padding: 10px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.grid th .th-wrapper,
.grid-reorder-wrapper > table th .th-wrapper {
  display: flex;
  flex-grow: 1;
}
.grid th[data-id="__lastColumn"],
.grid-reorder-wrapper > table th[data-id="__lastColumn"],
.grid th[data-column-id="__lastColumn"],
.grid-reorder-wrapper > table th[data-column-id="__lastColumn"] {
  width: 0;
  padding: 0;
  z-index: 1;
  cursor: default;
}
.grid th.drop-zone-left,
.grid-reorder-wrapper > table th.drop-zone-left,
.grid th.drop-zone-right,
.grid-reorder-wrapper > table th.drop-zone-right {
  overflow: visible;
}
.grid th .drop-zone-before,
.grid-reorder-wrapper > table th .drop-zone-before {
  content: '\2335';
  color: #222;
  display: block;
  width: 21px;
  background-color: #ffffff;
  height: 33px;
  position: absolute;
  top: -1px;
  margin-left: -11px;
  border: 1px solid #a7a9ac;
  box-sizing: border-box;
  line-height: 28px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}
.grid th .drop-zone-after,
.grid-reorder-wrapper > table th .drop-zone-after {
  content: '';
  display: block;
  width: 5px;
  background-color: #ffffff;
  height: 10000%;
  position: absolute;
  top: 31px;
  margin-left: -3px;
  border-width: 0 1px 0 1px;
  border-style: solid;
  border-color: #a7a9ac;
  box-sizing: border-box;
  z-index: 999999994;
}
.grid th.drop-zone-left::before,
.grid-reorder-wrapper > table th.drop-zone-left::before {
  content: '\2335';
  color: #222;
  display: block;
  width: 21px;
  background-color: #ffffff;
  height: 33px;
  position: absolute;
  top: -1px;
  margin-left: -11px;
  border: 1px solid #a7a9ac;
  box-sizing: border-box;
  line-height: 28px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  left: 0;
}
.grid th.drop-zone-right::before,
.grid-reorder-wrapper > table th.drop-zone-right::before {
  content: '\2335';
  color: #222;
  display: block;
  width: 21px;
  background-color: #ffffff;
  height: 33px;
  position: absolute;
  top: -1px;
  margin-left: -11px;
  border: 1px solid #a7a9ac;
  box-sizing: border-box;
  line-height: 28px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  left: 100%;
}
.grid th.drop-zone-left::after,
.grid-reorder-wrapper > table th.drop-zone-left::after {
  content: '';
  display: block;
  width: 5px;
  background-color: #ffffff;
  height: 10000%;
  position: absolute;
  top: 31px;
  margin-left: -3px;
  border-width: 0 1px 0 1px;
  border-style: solid;
  border-color: #a7a9ac;
  box-sizing: border-box;
  z-index: 999999994;
  left: 0;
}
.grid th.drop-zone-right::after,
.grid-reorder-wrapper > table th.drop-zone-right::after {
  content: '';
  display: block;
  width: 5px;
  background-color: #ffffff;
  height: 10000%;
  position: absolute;
  top: 31px;
  margin-left: -3px;
  border-width: 0 1px 0 1px;
  border-style: solid;
  border-color: #a7a9ac;
  box-sizing: border-box;
  z-index: 999999994;
  left: 100%;
}
.grid th:first-child.drop-zone-left::before,
.grid-reorder-wrapper > table th:first-child.drop-zone-left::before,
.grid th:first-child.drop-zone-left::after,
.grid-reorder-wrapper > table th:first-child.drop-zone-left::after {
  margin-left: -1px;
}
.grid th.fake-last-column.drop-zone-right::before,
.grid-reorder-wrapper > table th.fake-last-column.drop-zone-right::before {
  margin-left: -20px;
}
.grid th.fake-last-column.drop-zone-right::after,
.grid-reorder-wrapper > table th.fake-last-column.drop-zone-right::after {
  margin-left: -4px;
}
.grid th.under-reorder::after,
.grid-reorder-wrapper > table th.under-reorder::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #a7a9ac;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.5);
  animation: none;
  margin: 0;
  box-sizing: border-box;
}
.grid th.under-reorder.drop-zone::after,
.grid-reorder-wrapper > table th.under-reorder.drop-zone::after {
  content: '\2335';
  background: #ededed;
  line-height: 28px;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}
.grid th .splitter,
.grid-reorder-wrapper > table th .splitter {
  opacity: 0;
  background: #ffffff;
  height: 100%;
  cursor: ew-resize;
  position: absolute;
  right: -5px;
  top: 0;
  width: 9px;
  z-index: 2;
  display: block;
}
.grid th .splitter.right-direction,
.grid-reorder-wrapper > table th .splitter.right-direction {
  right: auto;
  display: none;
  left: -5px;
}
.grid th .title,
.grid-reorder-wrapper > table th .title {
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid th.sort.forbidden,
.grid-reorder-wrapper > table th.sort.forbidden {
  cursor: default;
}
.grid th.sort .title,
.grid-reorder-wrapper > table th.sort .title {
  background-repeat: no-repeat;
  background-position: right 50%;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
  white-space: nowrap;
}
.grid th.sort.asc,
.grid-reorder-wrapper > table th.sort.asc,
.grid th.sort.desc,
.grid-reorder-wrapper > table th.sort.desc {
  --sort-padding: 10px;
}
.grid th.sort.asc .title,
.grid-reorder-wrapper > table th.sort.asc .title,
.grid th.sort.desc .title,
.grid-reorder-wrapper > table th.sort.desc .title {
  padding-right: var(--sort-padding);
}
.grid th.sort.asc .title,
.grid-reorder-wrapper > table th.sort.asc .title {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDQgTDgsNCBMIDQsMCBaIiBmaWxsPSIjODI4MjgyIi8+PC9zdmc+);
}
.grid th.sort.desc .title,
.grid-reorder-wrapper > table th.sort.desc .title {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDAgTDgsMCBMIDQsNCBaIiBmaWxsPSIjODI4MjgyIj48L3BhdGg+PC9zdmc+);
}
.grid th.reorder,
.grid-reorder-wrapper > table th.reorder {
  cursor: move;
}
.grid.reorder-enabled th:not(.forbidden),
.grid-reorder-wrapper > table.reorder-enabled th:not(.forbidden) {
  cursor: move;
}
.grid.reorder-enabled th.forbidden,
.grid-reorder-wrapper > table.reorder-enabled th.forbidden {
  cursor: default;
}
.grid td,
.grid-reorder-wrapper > table td {
  border-right: 1px solid #ededed;
  line-height: 15px;
  padding: 5px 10px;
  overflow: hidden;
  height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  background: #ffffff;
  color: #3c3c3b;
}
.grid td.select-enabled,
.grid-reorder-wrapper > table td.select-enabled {
  padding-left: 5px;
  display: flex;
  align-items: center;
  height: 19px;
}
.grid td input[type=checkbox].invisible,
.grid-reorder-wrapper > table td input[type=checkbox].invisible {
  display: none;
}
.grid td.status-missing,
.grid-reorder-wrapper > table td.status-missing {
  color: #FF0000;
}
.grid td.status-safe,
.grid-reorder-wrapper > table td.status-safe {
  color: #36740b;
}
.grid td .copy-to-clipboard,
.grid-reorder-wrapper > table td .copy-to-clipboard {
  order: 1;
  visibility: hidden;
}
.grid td:hover .copy-to-clipboard,
.grid-reorder-wrapper > table td:hover .copy-to-clipboard {
  visibility: visible;
}
.grid tr,
.grid-reorder-wrapper > table tr {
  cursor: pointer;
}
.grid tr.pointer,
.grid-reorder-wrapper > table tr.pointer,
.grid tr .pointer,
.grid-reorder-wrapper > table tr .pointer {
  cursor: pointer;
}
.grid tr:nth-child(2n) td,
.grid-reorder-wrapper > table tr:nth-child(2n) td {
  background-color: #ededed;
}
.grid tr.live-event.animation-start td,
.grid-reorder-wrapper > table tr.live-event.animation-start td {
  background-color: #fff2e6;
}
.grid tr.live-event.animation,
.grid-reorder-wrapper > table tr.live-event.animation {
  /*td {
                    -moz-transition: all 1s ease-in;
                    -webkit-transition: all 1s ease-in;
                    -o-transition: all 1s ease-in;
                    transition: all 1s ease-in;
                }*/
}
.grid tr:hover > td,
.grid-reorder-wrapper > table tr:hover > td {
  background: #d9ead2;
  color: #3c3c3b;
  border-right-color: #ededed;
}
.grid tr.active td,
.grid-reorder-wrapper > table tr.active td,
.grid tr.selected-by-control td,
.grid-reorder-wrapper > table tr.selected-by-control td {
  font-weight: bold;
  background: #56aa1c;
  color: #ffffff;
}
.grid tr.active td path:not(.unchangeable),
.grid-reorder-wrapper > table tr.active td path:not(.unchangeable),
.grid tr.selected-by-control td path:not(.unchangeable),
.grid-reorder-wrapper > table tr.selected-by-control td path:not(.unchangeable),
.grid tr.active td polygon:not(.unchangeable),
.grid-reorder-wrapper > table tr.active td polygon:not(.unchangeable),
.grid tr.selected-by-control td polygon:not(.unchangeable),
.grid-reorder-wrapper > table tr.selected-by-control td polygon:not(.unchangeable),
.grid tr.active td circle:not(.unchangeable),
.grid-reorder-wrapper > table tr.active td circle:not(.unchangeable),
.grid tr.selected-by-control td circle:not(.unchangeable),
.grid-reorder-wrapper > table tr.selected-by-control td circle:not(.unchangeable) {
  fill: #ffffff !important;
}
.grid tr.active td .invert-exception,
.grid-reorder-wrapper > table tr.active td .invert-exception,
.grid tr.selected-by-control td .invert-exception,
.grid-reorder-wrapper > table tr.selected-by-control td .invert-exception {
  fill: #56aa1c !important;
}
.grid tr.active td .invert-exception.stroke,
.grid-reorder-wrapper > table tr.active td .invert-exception.stroke,
.grid tr.selected-by-control td .invert-exception.stroke,
.grid-reorder-wrapper > table tr.selected-by-control td .invert-exception.stroke {
  fill: transparent!important;
  stroke: #ffffff !important;
}
.grid tr.active td .active-exception,
.grid-reorder-wrapper > table tr.active td .active-exception,
.grid tr.selected-by-control td .active-exception,
.grid-reorder-wrapper > table tr.selected-by-control td .active-exception {
  fill: #ffffff !important;
}
.grid tr.cut,
.grid-reorder-wrapper > table tr.cut {
  opacity: 0.3;
}
.grid tr.cut:hover td,
.grid-reorder-wrapper > table tr.cut:hover td {
  background-color: transparent;
}
.grid tr.no-items td,
.grid-reorder-wrapper > table tr.no-items td {
  background-color: #ffffff;
  font-weight: normal;
}
.grid tr.auto-play,
.grid-reorder-wrapper > table tr.auto-play {
  position: relative;
  background: #c9faa7;
}
.grid tr.auto-play.progress > td .ico-appliance-camera,
.grid-reorder-wrapper > table tr.auto-play.progress > td .ico-appliance-camera {
  background: none;
}
.grid tr.auto-play.progress > td .ico-appliance-camera .ico-event-pause-16,
.grid-reorder-wrapper > table tr.auto-play.progress > td .ico-appliance-camera .ico-event-pause-16 {
  cursor: pointer;
  display: block;
  width: 16px;
  height: 16px;
}
.grid tr.auto-play.progress > td .ico-appliance-camera .ico-event-play-16,
.grid-reorder-wrapper > table tr.auto-play.progress > td .ico-appliance-camera .ico-event-play-16 {
  display: none;
}
.grid tr.auto-play.progress > td .ico-appliance-camera .ico-event-camera-16,
.grid-reorder-wrapper > table tr.auto-play.progress > td .ico-appliance-camera .ico-event-camera-16 {
  display: none;
}
.grid tr.auto-play.progress > td .ico-appliance-camera::after,
.grid-reorder-wrapper > table tr.auto-play.progress > td .ico-appliance-camera::after {
  content: '';
}
.grid tr.auto-play.progress::after,
.grid-reorder-wrapper > table tr.auto-play.progress::after {
  background: #89c377;
  transition: width 0.1s linear;
  will-change: width;
}
.grid tr.auto-play.progress.paused > td .ico-appliance-camera .ico-event-play-16,
.grid-reorder-wrapper > table tr.auto-play.progress.paused > td .ico-appliance-camera .ico-event-play-16 {
  display: block !important;
}
.grid tr.auto-play.progress.paused > td .ico-appliance-camera .ico-event-pause-16,
.grid-reorder-wrapper > table tr.auto-play.progress.paused > td .ico-appliance-camera .ico-event-pause-16 {
  display: none !important;
}
.grid tr.auto-play.progress.paused > td .ico-appliance-camera .ico-event-camera-16,
.grid-reorder-wrapper > table tr.auto-play.progress.paused > td .ico-appliance-camera .ico-event-camera-16 {
  display: none !important;
}
.grid tr.auto-play::after,
.grid-reorder-wrapper > table tr.auto-play::after {
  content: '';
  display: block;
  width: var(--autoPlayProgress, 0);
  position: absolute;
  left: 0;
  float: left;
}
.grid tr.auto-play td,
.grid-reorder-wrapper > table tr.auto-play td {
  font-weight: bold;
  background: transparent;
  position: relative;
  z-index: 2;
}
.grid .iconed,
.grid-reorder-wrapper > table .iconed {
  width: 36px;
}
.grid .iconed div,
.grid-reorder-wrapper > table .iconed div {
  display: inline-flex;
}
.grid .iconed div .camera-event-icon,
.grid-reorder-wrapper > table .iconed div .camera-event-icon {
  margin-left: 10px;
  overflow: hidden;
}
.grid .iconed div .ico-appliance-camera .ico-event-pause-16,
.grid-reorder-wrapper > table .iconed div .ico-appliance-camera .ico-event-pause-16 {
  display: none;
}
.grid .iconed .entity-icon,
.grid-reorder-wrapper > table .iconed .entity-icon {
  float: none;
  vertical-align: bottom;
  margin: 0;
}
.grid .entity-icon,
.grid-reorder-wrapper > table .entity-icon {
  float: none;
  vertical-align: bottom;
  margin: 0;
}
.grid .entityIconed,
.grid-reorder-wrapper > table .entityIconed {
  width: 36px;
}
.grid.ui-grid-table,
.grid-reorder-wrapper > table.ui-grid-table {
  table-layout: fixed;
}
#mobileReportGrid .grid.ui-grid-table tr:hover td {
  background-color: #ffffff;
}
#mobileReportGrid .grid.ui-grid-table td {
  background-color: #ffffff;
  border-bottom: 1px solid #d8d8d8;
  vertical-align: top;
  padding-bottom: 0;
  transition: height 0.3s ease-out;
  line-height: 20px;
  border-right: none;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox {
  padding-bottom: 10px;
  display: flex;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox div {
  white-space: pre-line;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox .checkBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20px;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox .defaultTextBox {
  flex-grow: 2;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox .iconsBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 25px;
  padding-top: 3px;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox .iconsBox img {
  margin-bottom: 3px;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox .iconsBox .camera-event-icon {
  margin-top: 10px;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox .iconsBox .camera-event-icon .ico-event-pause-16 {
  display: none !important;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox .iconsBox .camera-event-icon .ico-appliance-camera-16 {
  display: none !important;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox .arrow {
  display: flex;
  flex-basis: 30px;
  font-size: 20px;
  flex-direction: column;
  justify-content: center;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox .arrow span {
  height: 20px;
  width: 20px;
  transition: transform 0.3s ease-out;
}
#mobileReportGrid .grid.ui-grid-table td .defaultBox .arrow span.open {
  transform: rotate(-90deg);
  transform-origin: center;
}
#mobileReportGrid .grid.ui-grid-table td .additionalBox {
  padding-bottom: 10px;
  padding-left: 25px;
  position: absolute;
}
#mobileReportGrid .grid.ui-grid-table td .additionalBox div {
  white-space: pre-line;
}
#mobileReportGrid .grid.ui-grid-table td .additionalBox .status-missing span {
  color: #ff7d71;
}
#mobileReportGrid .grid.ui-grid-table td .additionalBox .status-safe span {
  color: #56aa1c;
}
#eventsGrid {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#reportGrid,
#mobileReportGrid {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}
.mobile #reportGrid,
.mobile #mobileReportGrid {
  height: 100%;
}
#reportGrid .fake-head,
#mobileReportGrid .fake-head {
  height: 0;
  visibility: hidden;
}
#reportGrid .fake-head th,
#mobileReportGrid .fake-head th {
  height: 0;
  padding: 0;
}
#reportGrid .fake-head th .th-wrapper,
#mobileReportGrid .fake-head th .th-wrapper {
  display: table-cell;
}
#reportGrid .grid-container,
#mobileReportGrid .grid-container {
  flex-grow: 1;
  overflow-y: scroll;
  height: 0;
}
#reportGrid .grid-container.items-inserted .fake-body,
#mobileReportGrid .grid-container.items-inserted .fake-body {
  display: none;
}
#reportGrid .grid-container .fake-body,
#mobileReportGrid .grid-container .fake-body {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #6d6e71;
  text-transform: uppercase;
  font-weight: bold;
  position: relative;
  height: 100%;
  width: 100%;
}
#reportGrid.modal-grid div.title,
#mobileReportGrid.modal-grid div.title {
  height: 12px;
  line-height: 12px;
}
#reportGrid.modal-grid .iconed,
#mobileReportGrid.modal-grid .iconed {
  line-height: 12px;
}
#reportGrid.modal-grid input[type="checkbox"],
#mobileReportGrid.modal-grid input[type="checkbox"] {
  margin: 0;
}
body.desktop-view .events-grid-wrapper .grid-header {
  padding-right: 0;
}
.events-grid-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  position: relative;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
}
.events-widget-view .events-grid-wrapper .grid-header {
  padding: 0 0 0 0;
}
.events-widget-view .events-grid-wrapper .grid-header th:last-child {
  border-right: none;
}
.events-widget-view .events-grid-wrapper .iconed {
  width: 42px;
}
.events-grid-wrapper .grid-header {
  background-color: #ededed;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
}
.events-grid-wrapper tr {
  cursor: pointer;
}
.events-grid-wrapper .save-report-form button {
  margin-top: -1px;
  font-weight: bold;
  margin-right: 5px;
}
.events-grid-wrapper .save-report-form input {
  margin-top: -2px;
}
.events-grid-wrapper .save-report-form label {
  margin: -2px 10px 0 10px;
}
.grid-reorder-wrapper {
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 999999995;
  animation: reorder-wrapper 0.2s linear;
  outline: 1px solid #a7a9ac;
  cursor: move;
}
.grid-reorder-wrapper table thead th {
  border-right: none;
}
.grid-reorder-wrapper.transition-on {
  transition: transform 0.2s ease-out;
}
.events-grid td.entityIconed,
.grid-reorder-wrapper > table td.entityIconed {
  position: relative;
  overflow: visible;
}
.events-grid td.entityIconed .largeIcon,
.grid-reorder-wrapper > table td.entityIconed .largeIcon {
  position: absolute;
  margin-top: -64px;
  margin-left: -128px;
  z-index: 1;
}
.events-grid td.hiddenCell,
.grid-reorder-wrapper > table td.hiddenCell {
  visibility: hidden;
}
body.printPreview {
  overflow: auto;
}
@media print {
  body {
    overflow: visible;
    width: auto;
    height: auto;
  }
}
.selectDisallow {
  -webkit-user-select: none;
}
.selectAllow {
  -webkit-user-select: auto;
}
.mobile-grid-tooltip {
  position: static;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 30px;
  background-color: #ededed;
}
.mobile-grid-tooltip .tooltip-content-wrapper {
  max-height: 0;
  overflow: auto;
}
.mobile-grid-tooltip .tooltip-content-wrapper p.tooltip-info-block {
  line-height: 15px;
}
.mobile-grid-tooltip .tooltip-content-wrapper.open-tooltip {
  animation: open-tooltip-animation 0.5s ease-out both;
}
.mobile-grid-tooltip .tooltip-content-wrapper.close-tooltip {
  animation: close-tooltip-animation 0.5s ease-out both;
}
#enlargedWidgetWrapper + .grid-tooltip {
  z-index: 999999995;
}
.grid-tooltip {
  --before-offset: -15px;
  --after-offset: -13px;
  display: block;
  position: absolute;
  padding: 5px;
  z-index: 999999996;
  background: #ffffff;
  border: 1px solid #a7a9ac;
  -webkit-box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
  font-size: 11px;
}
.grid-tooltip .tooltip-content-wrapper {
  max-height: 300px;
  overflow: auto;
}
.grid-tooltip:before,
.grid-tooltip:after {
  content: '';
  display: block;
  position: absolute;
  border-style: solid;
  left: 50%;
  margin: 0 0 0 -11px;
  transform: rotate(180deg);
  border-color: #ffffff transparent transparent transparent;
  border-width: 14px 14px 0 14px;
}
.grid-tooltip:before {
  border-top-color: #89c377;
  top: var(--before-offset);
}
.grid-tooltip:after {
  top: var(--after-offset);
}
.grid-tooltip.top-view:before,
.grid-tooltip.top-view:after {
  transform: none;
  top: initial;
}
.grid-tooltip.top-view:before {
  bottom: var(--before-offset);
}
.grid-tooltip.top-view:after {
  bottom: var(--after-offset);
}
.grid-tooltip .tooltip-content-wrapper {
  width: 220px;
  text-align: center;
}
.grid-tooltip .tooltip-content-wrapper td:last-of-type {
  border-right: none;
}
.grid-tooltip .tooltip-content-wrapper td.icon {
  width: 16px;
}
.grid-tooltip .tooltip-content-wrapper td.time {
  width: 130px;
}
.grid-tooltip .tooltip-content-wrapper td.person {
  width: 100px;
}
.grid-tooltip p {
  display: inline-block;
  width: 100%;
  margin: 0;
  line-height: 1.5;
  font-weight: normal;
  font-size: 12px;
}
.grid-tooltip a.user-name-link {
  cursor: pointer;
}
.grid-tooltip .master-mark-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 5px;
}
.grid-tooltip .master-mark-wrapper svg {
  width: 40px;
  height: 40px;
  padding: 5px;
}
.grid-tooltip .master-mark-wrapper .header {
  font-size: larger;
  font-weight: bold;
  margin-bottom: 5px;
}
.grid-tooltip .master-mark-wrapper .text-wrapper {
  padding-left: 7px;
  text-align: initial;
}
.grid-tooltip .multisite-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 5px;
}
.grid-tooltip .multisite-wrapper svg {
  width: 40px;
  height: 40px;
  padding: 5px;
}
.grid-tooltip .multisite-wrapper .header {
  font-size: larger;
  font-weight: bold;
  margin-bottom: 5px;
}
.grid-tooltip .multisite-wrapper .text-wrapper {
  padding-left: 5px;
  text-align: initial;
}
.grid-tooltip .multiSubnet-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px 5px;
}
.grid-tooltip .multiSubnet-wrapper svg {
  width: 40px;
  height: 40px;
  padding: 5px;
}
.grid-tooltip .multiSubnet-wrapper .header {
  font-size: larger;
  font-weight: bold;
  margin-bottom: 5px;
}
.grid-tooltip .multiSubnet-wrapper .text-wrapper {
  padding-left: 5px;
  text-align: initial;
}
.no-select {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
}
/*columns width for mark as safe*/
.checkbox-col {
  width: 20px;
}
.image-col {
  width: 18px;
}
.person-col {
  width: 213px;
}
.location-col {
  width: 150px;
}
.animate-new-item td {
  animation: animate-item 2s 1 normal;
}
.paxlockSpinner {
  margin: -25px 0 0 -35px !important;
}
.mobile-grid-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin-top: 5px;
}
body.android .mobile-grid-wrapper {
  height: 100%;
}
.mobile-grid-search-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 14px;
  padding: 8px 0;
  background: #ededed;
  color: #b3b3b3;
  text-align: center;
  font-weight: bold;
  border-width: 1px 0;
  border-style: solid;
  border-color: #d8d8d8;
  position: relative;
}
.mobile-grid-search-wrapper .mobile-grid-search {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.mobile-grid-search-wrapper .mobile-grid-search label {
  order: 1;
  width: 31px;
  height: 30px;
  flex-shrink: 0;
}
.mobile-grid-search-wrapper .mobile-grid-search label.visible img:first-child {
  display: none;
}
.mobile-grid-search-wrapper .mobile-grid-search label.visible img:last-child {
  display: block;
}
.mobile-grid-search-wrapper .mobile-grid-search label img {
  margin: 3px 4px 3px 3px;
}
.mobile-grid-search-wrapper .mobile-grid-search label img:last-child {
  display: none;
}
.mobile-grid-search-wrapper .mobile-grid-search #toggleMobileSearch {
  opacity: 0;
  margin: 0 -13px 0 0;
}
.mobile-grid-search-wrapper .mobile-grid-search #toggleMobileSearch:checked + .search-wrapper {
  width: 100%;
  opacity: 1;
}
.mobile-grid-search-wrapper .mobile-grid-search .search-wrapper {
  width: 0;
  box-sizing: border-box;
  opacity: 0;
  transition: width 0.2s ease-out, opacity 0.2s ease-in;
  overflow: hidden;
  display: flex;
}
.mobile-grid-search-wrapper .mobile-grid-search .search-wrapper input[type="search"] {
  margin: 0 0 0 4px;
  flex-grow: 1;
  -webkit-user-select: text;
}
.mobile-grid-search-wrapper .mobile-grid-search .search-wrapper input[type="search"]:focus {
  box-shadow: none;
  outline: none;
}
.mobile-grid-search-wrapper .mobile-grid-search .search-wrapper input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
.mobile-grid {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.mobile-grid .mobile-grid__header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 14px;
  padding: 8px 0;
  background: #ededed;
  color: #b3b3b3;
  text-align: center;
  font-weight: bold;
  border-width: 1px 0;
  border-style: solid;
  border-color: #d8d8d8;
  position: relative;
}
.mobile-grid .mobile-grid__table-wrapper {
  display: flex;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.mobile-grid .mobile-grid__table {
  width: 100%;
  height: 100%;
}
.mobile-grid .mobile-grid__row {
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 10px 30px 10px 30px;
  overflow: hidden;
  border-bottom: 1px solid #d8d8d8;
}
@keyframes fadein {
  0% {
    opacity: 0;
    background-color: #ffdda0;
  }
  30% {
    background-color: #ffdda0;
  }
  100% {
    opacity: 1;
    background-color: initial;
  }
}
.mobile-grid .mobile-grid__row.animate {
  animation: fadein 1s;
}
.mobile-grid .mobile-grid__row.mobile-grid__fake-row {
  display: none;
}
.mobile-grid .mobile-grid__row:hover {
  background: #f8f8f8 !important;
}
.mobile-grid .mobile-grid__row-icon-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-width: 16px;
  margin-left: -16px;
  padding-right: 4px;
}
.mobile-grid .mobile-grid__row-text-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex: 1;
}
.mobile-grid .mobile-grid__row-default-info {
  position: relative;
}
.mobile-grid .mobile-grid__row-additional-info {
  position: relative;
  overflow: hidden;
  max-height: 0;
  transition: all 0.2s ease-out;
}
.mobile-grid .mobile-grid__row-additional-info--expanded {
  padding-top: 10px;
  max-height: 9999px;
  transition: all 0.3s ease-out;
}
.mobile-grid .mobile-grid__row-button-accordion {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 20px;
  height: 30px;
  top: calc(50% - 15px);
  right: -18px;
  font-size: 18px;
  cursor: pointer;
  color: #000000;
  transform: scaleY(-1) rotate(90deg);
  transition: transorfm 0.4s ease-out;
}
.mobile-grid .mobile-grid__row-button-accordion--toggled {
  transform: scaleY(-1) rotate(-90deg);
}
.mobile-grid .mobile-grid__cell {
  display: flex;
  width: 100%;
}
.mobile-grid .mobile-grid__cell.iconed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 16px;
}
.mobile-grid .mobile-grid__cell.iconed .entity-icon {
  flex-direction: column;
  justify-content: center;
  width: 16px;
  height: 20px;
  overflow: hidden;
}
.mobile-grid .mobile-grid__cell.status-missing .mobile-grid__cell-description {
  color: #FF0000;
}
.mobile-grid .mobile-grid__cell.status-safe .mobile-grid__cell-description {
  color: #36740b;
}
.mobile-grid .mobile-grid__cell-label {
  display: flex;
  align-items: baseline;
  line-height: 16px;
  padding: 2px 10px 2px 0;
  flex-shrink: 0;
}
.mobile-grid .mobile-grid__cell-description {
  display: flex;
  align-items: center;
  line-height: 16px;
  padding: 2px 0 2px 0;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #000000;
}
.mobile-grid .mobile-grid__cell-description input {
  margin: 0;
}
software-permissions,
building-permissions,
bp-details,
sp-details {
  height: 100%;
}
.tabbed-content .tabs {
  list-style: none;
  position: relative;
  z-index: 1;
}
.tabbed-content .tabs li {
  border: 1px solid #a7a9ac;
  cursor: pointer;
  float: left;
  padding: 7px 10px;
}
.tabbed-content .tabs li:first-child {
  border-left: none;
}
.tabbed-content .tabs li + li {
  margin-left: -1px;
}
.tabbed-content .tabs li.active-tab {
  background-color: #ffffff;
  border-color: #a7a9ac;
  border-bottom-color: #ffffff;
  color: #56aa1c;
  height: auto;
  margin-top: -4px;
  padding-bottom: 11px;
}
.tabbed-content .tabs li:first-child.active-tab {
  margin-left: 0;
}
.tabbed-content#viewDevice .tabs li,
.tabbed-content#manageHardware .tabs li {
  padding: 6px 10px;
}
.tabbed-content#viewDevice .tabs li:last-child:not(:only-child),
.tabbed-content#manageHardware .tabs li:last-child:not(:only-child) {
  border-right: none;
}
.tabbed-content#viewDevice .tabs li::before,
.tabbed-content#manageHardware .tabs li::before {
  left: auto;
}
.tabbed-content#viewDevice .tabs li.active::before,
.tabbed-content#manageHardware .tabs li.active::before {
  width: 100%;
}
.tabbed-content#viewDevice .tabs li span,
.tabbed-content#manageHardware .tabs li span {
  line-height: 14px;
}
.tabbed-content.page-content {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1;
  height: 100%;
  position: relative;
  z-index: 0;
}
.tabbed-content.page-content .tabs {
  margin-top: -28px;
}
.tabbed-content.page-content .tab-content-block {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}
.tabbed-content.page-content .tab-content {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  height: 0;
  overflow: auto;
}
.tabbed-content.page-content .tab-content .container .bold-fieldset fieldset legend {
  top: 17px;
  left: auto;
}
.tabbed-content.page-content .tab-content .container .bold-fieldset fieldset legend.bold {
  font-size: 13px;
  font-weight: bold;
  line-height: 16px;
  margin-bottom: 5px;
}
.tabbed-content.page-content .tab-content .container fieldset legend {
  top: 17px;
  left: auto;
}
.tabbed-content.page-content .tab-content .container fieldset legend.bold {
  font-size: 13px;
  font-weight: bold;
  line-height: 16px;
  margin-bottom: 5px;
}
.tabbed-content.page-content .tab-content .container.permissions {
  position: relative;
}
.tabbed-content.page-content .tab-content .container.permissions .list-wrapper {
  width: 100%;
  overflow: auto;
}
.tabbed-content.page-content .tab-content .container.permissions .list-wrapper .static-list.groups,
.tabbed-content.page-content .tab-content .container.permissions .list-wrapper .static-list li {
  margin-bottom: 10px;
}
.tabbed-content.page-content .tab-content .container.permissions fieldset {
  position: static;
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding-bottom: 80px;
}
.tabbed-content.page-content .tab-content .container.permissions fieldset fieldset legend {
  top: 17px;
  left: auto;
}
.tabbed-content.page-content .tab-content .container.permissions fieldset fieldset legend.bold {
  font-size: 13px;
  font-weight: bold;
  line-height: 16px;
  margin-bottom: 5px;
}
.tabbed-content.page-content .tab-content .container.permissions#softwareElements .software-element .permission-description {
  flex-grow: 2;
  align-self: center;
}
.tabbed-content.page-content .tab-content .container.permissions#softwareElements .software-element .tree-column-titles {
  display: flex;
  justify-content: flex-end;
  padding: 0 48px 0 0;
}
.tabbed-content.page-content .tab-content .container.permissions#softwareElements .software-element .title {
  text-align: center;
  width: 64px;
}
.tabbed-content.page-content .tab-content .container.permissions#softwareElements .software-element .input.search-component {
  display: none;
}
.tabbed-content.page-content .tab-content .container.permissions#softwareElements .software-element .ui-tree {
  margin-top: 10px;
  padding: 0 43px 0 0;
  box-sizing: border-box;
  overflow: scroll;
}
.tabbed-content.page-content .tab-content .container.permissions#softwareElements .software-element .ui-tree li.ui-tree-item {
  margin-bottom: 0;
  cursor: default;
  pointer-events: none;
}
.tabbed-content.page-content .tab-content .container.permissions#softwareElements .software-element .ui-tree li.ui-tree-item button {
  pointer-events: auto;
}
.tabbed-content.page-content .tab-content .container.permissions#softwareElements .software-element .ui-tree li.ui-tree-item input {
  opacity: 0.5;
}
.tabbed-content.page-content .tab-content .container.permissions#softwareElements .software-element:last-of-type {
  height: calc(100% - 35px);
}
.tabbed-content.page-content .tab-content .container.permissions .softwareElements {
  position: relative;
  top: 2px;
}
.tabbed-content.page-content .tab-content .container.permissions .checkboxOffset {
  padding-right: 60px;
}
.tabbed-content.page-content .tab-content .container.permissions .checkboxOffset-double {
  padding-right: 120px;
}
.tabbed-content.page-content .tab-content .container.permissions.time-profiles h3 {
  margin-bottom: 7px;
}
.tabbed-content.page-content .tab-content .container.single {
  padding: 13px 17px 13px;
  overflow: hidden;
}
.tabbed-content.page-content .tab-content .container.accordion-content {
  height: auto !important;
  flex-grow: 1;
}
.tabbed-content.page-content .tab-content .container.accordion-content fieldset legend {
  height: 24px;
  line-height: 24px !important;
}
.tabbed-content.page-content .tab-content .scrollable.appliance-permissions {
  padding: 0 5px;
  display: flex;
  justify-content: space-between;
}
.tabbed-content.page-content .tab-content .scrollable.appliance-permissions .container {
  padding: 17px 7px 17px 15px;
  overflow: auto;
  width: 50%;
}
.tabbed-content.page-content .tab-content .scrollable.doubled-block .container {
  padding: 15px 0;
  width: 49%;
}
.tabbed-content.page-content .tab-content .scrollable.tripled-block .container {
  width: 33%;
  padding: 15px 5px;
}
.tabbed-content.page-content .tab-content .scrollable.doubled-block,
.tabbed-content.page-content .tab-content .scrollable.tripled-block {
  display: flex;
  justify-content: space-around;
  padding: 0 7px;
}
.tabbed-content.page-content .scrollable {
  flex: 1;
  height: 0;
}
.tabbed-content .accordion-item.permissions {
  padding-bottom: 17px;
}
.tabbed-content .accordion-item .accordion-content fieldset {
  min-height: 100px;
}
.tabbed-content .building-permissions {
  width: 100%;
  box-sizing: border-box;
  min-height: 70px;
}
.tabbed-content .building-permissions fieldset {
  min-height: 70px;
}
.tabbed-content .appliances-tp {
  width: 100%;
  height: auto;
  position: relative;
}
.tabbed-content .appliances-tp .people-building-permissions thead tr th {
  border: none;
}
.tabbed-content .appliances-tp .people-building-permissions tbody tr {
  border-top: 1px solid #a7a9ac;
}
.tabbed-content .appliances-tp .people-building-permissions tbody tr td {
  vertical-align: top;
  border-right: none;
}
.tabbed-content .appliances-tp .people-building-permissions tbody tr td ul {
  margin-top: 10px;
}
.tabbed-content .appliances-tp .people-building-permissions tbody tr td ul li {
  margin-bottom: 7px;
}
.tabbed-content .appliances-tp .people-building-permissions tbody tr td ul li img {
  margin-right: 3px;
}
.tabbed-content .modal-header {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -1px;
}
.tabbed-content .modal-header .tabs {
  display: flex;
  flex: 0 0 100%;
}
.tabbed-content .modal-header .tabs li {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tabbed-content .modal-header .tabs li:only-of-type {
  width: 25%;
  flex-grow: 0;
}
.tabbed-content .modal-header .tabs li::before {
  content: '';
  width: 0;
  background-color: #56aa1c;
  height: 2px;
  position: absolute;
  left: -1px;
  top: -1px;
}
.tabbed-content .modal-header .tabs li.active::before {
  width: calc(100% + 2px);
  transition: width 0.3s ease-out;
}
.tabbed-content .back-button {
  border: 1px solid #a7a9ac;
  margin-left: -1px;
  cursor: pointer;
  float: none !important;
  background: #d9ead2;
  margin-top: 3px;
  position: relative;
  height: 34px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 11pt;
  padding: 0;
  flex-shrink: 0;
  display: none;
}
.tabbed-content .back-button span {
  flex-grow: 1;
  padding-left: 10px;
  color: #000000;
}
.tabbed-content .back-button img {
  width: 16px;
  height: 28px;
  padding: 0 7px 0 0;
}
.tabbed-content .back-button:first-child.active {
  margin-left: -1px;
}
.tabbed-content .back-button.active {
  border: 1px solid #a7a9ac;
  color: inherit;
}
.tabbed-content .back-button img {
  padding-left: 7px;
}
.tabbed-content .open-tabs-button {
  display: none;
  font-size: 25px;
  width: 25px;
  position: absolute;
  top: 3px;
  left: 3px;
  color: #cecece;
}
.tabbed-content .static-list {
  line-height: 20px;
}
.tabbed-content .static-list.user-software-permissions {
  margin-bottom: 10px;
}
.tabbed-content .static-list .group-entity {
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.tabbed-content .static-list li {
  display: flex;
  align-items: center;
  flex-direction: row;
  position: relative;
}
.tabbed-content .static-list .permission-appliances,
.tabbed-content .static-list .permission-time-profile {
  padding: 3px 0;
}
.after {
  content: '';
  position: absolute;
  bottom: 0;
}
body.mobile.body-accordion {
  -webkit-overflow-scrolling: auto;
}
body.mobile.body-accordion *:not(.modal *) {
  -webkit-overflow-scrolling: auto;
}
body.mobile .tabbed-content.page-content {
  flex: 1;
  height: 100%;
  position: relative;
}
body.mobile .tabbed-content.page-content.scrolled-blocked {
  overflow-y: scroll;
  overflow-x: hidden;
}
body.mobile .tabbed-content.page-content .scrolled-mobile-tab-block {
  height: 100%;
}
body.mobile .tabbed-content.page-content .scrolled-mobile-tab-block ul {
  height: 100%;
  overflow-y: scroll;
}
body.mobile .tabbed-content.page-content .tab-content .menu-container {
  overflow: auto;
}
.menu-container {
  overflow: hidden;
}
.menu-container .menu {
  border-right: 1px solid #a7a9ac;
  height: 100%;
  float: left;
  margin-bottom: -5000px;
  padding-bottom: 5000px;
  padding-top: 10px;
  width: 129px;
}
.menu-container .menu li {
  border: 1px solid transparent;
  cursor: pointer;
  display: block;
  list-style: none;
  margin-right: -1px;
  padding: 8px 10px;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}
.menu-container .menu li.active {
  border-color: #a7a9ac;
  border-right-color: #ffffff;
  color: #56aa1c;
}
.menu-container .menu li.disabled {
  background-color: #ededed;
  color: #aaa;
  margin-right: 0;
}
.menu-container .menu li.disabled.active {
  border-color: #a7a9ac;
  border-right-color: #ededed;
  color: #888;
  margin-right: -1px;
}
.menu-container .menu-content {
  margin-left: 129px;
}
.icropper {
  position: relative;
}
.icropper .no-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.icropper .crop-node {
  /* blank bg image for IE */
  background-image: url(data:image/gif;base64,R0lGODlhMgAyAIAAAAAAAP///yH5BAEHAAEALAAAAAAyADIAAAIzjI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKicFADs=);
  border: 1px dotted #999;
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  cursor: move;
}
.icropper .archor {
  width: 5px;
  height: 5px;
  border: 1px solid #a7a9ac;
  position: absolute;
  z-index: 10;
}
.icropper .archor.archor-lt {
  cursor: nw-resize;
  left: -4px;
  top: -4px;
}
.icropper .archor.archor-t {
  cursor: s-resize;
  top: -4px;
}
.icropper .archor.archor-rt {
  cursor: ne-resize;
  right: -4px;
  top: -4px;
}
.icropper .archor.archor-r {
  cursor: e-resize;
  right: -4px;
}
.icropper .archor.archor-rb {
  cursor: se-resize;
  right: -4px;
  bottom: -4px;
}
.icropper .archor.archor-b {
  cursor: s-resize;
  bottom: -4px;
}
.icropper .archor.archor-lb {
  cursor: sw-resize;
  bottom: -4px;
  left: -4px;
}
.icropper .archor.archor-l {
  cursor: e-resize;
  left: -4px;
}
.icropper .block {
  position: absolute;
  opacity: 0.5;
  z-index: 5;
  background-color: #000000;
}
.icropper .block.block-l {
  left: 0;
}
.icropper .block.block-t {
  top: 0;
  width: 100%;
}
.icropper .block.block-r {
  right: 0;
}
.icropper .block.block-b {
  bottom: 0;
  width: 100%;
}
.icropper img {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
}
body.mobile .icropper .fake-archor {
  width: 20px;
  height: 20px;
  position: absolute;
}
body.mobile .icropper .fake-archor.fake-archor-lt {
  left: -9px;
  top: -9px;
}
body.mobile .icropper .fake-archor.fake-archor-t {
  top: -9px;
  left: -9px;
}
body.mobile .icropper .fake-archor.fake-archor-rt {
  right: -9px;
  top: -9px;
}
body.mobile .icropper .fake-archor.fake-archor-r {
  right: -9px;
  top: -9px;
}
body.mobile .icropper .fake-archor.fake-archor-rb {
  right: -9px;
  bottom: -9px;
}
body.mobile .icropper .fake-archor.fake-archor-b {
  bottom: -9px;
}
body.mobile .icropper .fake-archor.fake-archor-lb {
  bottom: -9px;
  left: -9px;
}
body.mobile .icropper .fake-archor.fake-archor-l {
  left: -9px;
  bottom: -9px;
}
#selected {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: -1;
  width: 64px;
  height: 75px;
  overflow: visible;
  box-sizing: border-box;
  padding: 20px 0 0 20px;
  -webkit-user-select: none;
}
#selected.drag-image {
  z-index: 6;
  opacity: 0.8;
  right: auto;
  bottom: auto;
}
#selected.drag-image-end-ie {
  display: none;
}
#selected .selected-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #d9ead2;
  border: 1px solid #89c377;
  width: 64px;
  height: 75px;
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 4;
}
#selected .selected-item:nth-child(2) {
  top: 6px;
  left: 12px;
  z-index: 3;
}
#selected .selected-item:nth-child(3) {
  top: 3px;
  left: 15px;
  z-index: 2;
}
#selected .selected-item:nth-child(4) {
  top: 0;
  left: 18px;
  z-index: 1;
}
#selected .selected-item img {
  margin: 11px auto;
  width: 32px;
  height: 32px;
  display: block;
}
#selected figcaption {
  position: absolute;
  left: 4px;
  bottom: -3px;
  padding: 3px 5px;
  color: #ffffff;
  font-weight: bold;
  background-color: #56aa1c;
  line-height: 13px;
  z-index: 5;
  -webkit-user-select: none;
}
#selected figcaption::before {
  content: '';
  display: block;
  position: absolute;
  top: -6px;
  left: 0;
  border: 3px solid #407e15;
  border-top-color: transparent;
  border-left-color: transparent;
}
#selected figcaption::after {
  content: attr(data-items);
}
.arrow_mixin:after,
.arrow_mixin:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrow_mixin.left:after,
.arrow_mixin.left:before {
  left: 22px;
}
.arrow_mixin.right:after,
.arrow_mixin.right:before {
  right: 12px;
}
.arrow_mixin:after {
  border-bottom-color: #ffffff;
  border-width: 8px;
  margin-left: -8px;
}
.arrow_mixin:before {
  border-bottom-color: #a7a9ac;
  border-width: 9px;
  margin-left: -9px;
}
.context-menu {
  position: absolute;
  visibility: hidden;
  background-color: #ffffff;
  display: block;
  list-style: none;
  padding: 5px 0;
  min-width: 200px;
  border: 1px solid #a7a9ac;
  z-index: 999999994;
  -webkit-user-select: none;
}
.context-menu.fade-in {
  animation: context-menu-fade-in 0.1s ease-out;
}
.context-menu.fade-out {
  animation: opacity-fade-out 0.1s ease-in;
}
.context-menu.user:after,
.context-menu.user:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.context-menu.user.left:after,
.context-menu.user.left:before {
  left: 22px;
}
.context-menu.user.right:after,
.context-menu.user.right:before {
  right: 12px;
}
.context-menu.user:after {
  border-bottom-color: #ffffff;
  border-width: 8px;
  margin-left: -8px;
}
.context-menu.user:before {
  border-bottom-color: #a7a9ac;
  border-width: 9px;
  margin-left: -9px;
}
.context-menu > li.has-menu > button::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-width: 4px 0 4px 4px;
  border-style: solid;
  border-color: transparent transparent transparent #000000;
  margin: 9px 0 0 -20px;
}
.context-menu > li.has-menu > ul {
  top: -6px;
  left: 100%;
  visibility: visible;
  display: none;
}
.context-menu > li.has-menu > ul.to-left {
  left: initial;
  right: 100%;
}
.context-menu.left-menu > li.has-menu > button::before {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-width: 4px 4px 4px 0;
  border-style: solid;
  border-color: transparent #000000 transparent transparent;
  top: 0;
  margin: 9px 0 0 -20px;
}
.context-menu.left-menu > li.has-menu > ul {
  top: -6px;
  right: 100%;
  visibility: visible;
  display: none;
}
.context-menu li {
  display: block;
  color: #000000;
  padding: 0;
  height: 26px;
}
.context-menu li.group-start {
  border-top: 1px solid #a7a9ac;
}
.context-menu li.active {
  background-color: #56aa1c;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}
.context-menu li.active span {
  font-weight: bold;
  color: #ffffff;
}
.context-menu li.has-menu {
  position: relative;
}
.context-menu li.has-menu:hover > button {
  background-color: #56aa1c;
  color: #ffffff;
}
.context-menu li.has-menu:hover > button::after {
  border-left-color: #ffffff;
}
.context-menu li.has-menu:hover > button::before {
  border-right-color: #ffffff;
}
.context-menu li.has-menu:hover > button:not([disabled]) + ul {
  display: block;
}
.context-menu li.has-menu > button {
  position: relative;
}
.context-menu li.has-menu > button:disabled::after {
  border-left-color: #a7a9ac;
}
.context-menu li.has-menu > button:disabled::before {
  border-right-color: #a7a9ac;
}
.context-menu li.has-menu > button:disabled:hover::after {
  border-left-color: #a7a9ac;
}
.context-menu li.has-menu > button:disabled:hover::before {
  border-right-color: #a7a9ac;
}
.context-menu li.has-menu > button:hover::after {
  border-left-color: #ffffff;
}
.context-menu li.has-menu > button:hover::before {
  border-right-color: #ffffff;
}
.context-menu li.has-menu > button:focus::after {
  border-left-color: #ffffff;
}
.context-menu li.has-menu > button:focus::before {
  border-right-color: #ffffff;
}
.context-menu li button {
  width: 100%;
  height: 100%;
  margin: 0;
  border: none;
  background-color: transparent;
  color: #000000;
  padding: 0;
  line-height: 26px;
  font-size: 12px;
  text-align: left;
  display: flex;
  align-items: stretch;
  cursor: pointer;
}
.context-menu li button.sg-menu {
  padding-left: 40px;
}
.context-menu li button .context-menu-icon {
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.context-menu li button .context-menu-icon img {
  width: 16px;
  height: 16px;
  margin: 0;
}
.context-menu li button .context-menu-icon img.main-icon {
  display: block;
}
.context-menu li button .context-menu-icon img.hover-icon {
  display: none;
}
.context-menu li button .context-menu-title {
  flex-grow: 1;
}
.context-menu li button .context-menu-tumbler {
  width: 50px;
  padding: 2px 0;
}
.context-menu li button:first-letter {
  text-transform: capitalize;
}
.context-menu li button::after {
  content: attr(data-hotkey);
  right: 0;
  padding-right: 16px;
  color: #a7a9ac;
}
.context-menu li button:hover {
  background-color: #56aa1c;
  color: #ffffff;
}
.context-menu li button:hover::after {
  color: #ffffff;
}
.context-menu li button:hover .context-menu-icon img.main-icon {
  display: none;
}
.context-menu li button:hover .context-menu-icon img.hover-icon {
  display: block;
}
.context-menu li button:focus {
  background-color: #56aa1c;
  color: #ffffff;
  outline: none;
  box-shadow: none;
}
.context-menu li button:disabled {
  color: #a7a9ac;
  cursor: default;
}
.context-menu li button:disabled::after {
  color: #a7a9ac;
}
.context-menu li button:disabled:hover {
  background-color: transparent;
  color: #a7a9ac;
}
.context-menu li button:disabled:focus {
  background-color: transparent;
  color: #a7a9ac;
  outline: none;
  box-shadow: none;
}
.notifications-stack {
  position: fixed;
  z-index: 999999999;
  top: 10px;
  right: 10px;
  width: 350px;
}
.notification {
  position: relative;
  width: 350px;
  height: 80px;
  background: #ffffff;
  box-shadow: 0 1px 4px #bbb;
  cursor: pointer;
  margin-bottom: 10px;
  overflow: hidden;
  transition: height 0.2s linear, margin-bottom 0.2s linear;
}
.notification:last-child {
  margin-bottom: 0;
}
.notification.fade-in {
  animation: notifications-fade-in 0.2s 0 ease-out;
}
.notification.fade-out {
  animation: opacity-fade-out 0.2s 0 linear backwards;
}
.notification.collapsed {
  visibility: hidden;
  height: 0;
  margin: 0;
}
.notification .close-btn {
  float: right;
  border: none;
  background: #ffffff no-repeat 0 0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMVJREFUeNpi/P//PwO5gImBAjBINH/69ElIWlr6rrKy8uF///4xMzIyMoBoLS2trYKCgm8+fvwojKIbFGAw/OXLFz5JSckHQE3/gYZc3Lx5MzvQoCMgvoCAwOvv379zIatH0QzCIAWcnJwfQeYyMTH9BdFA/id0jVg1g/CGDRv4VFRUrgFt/CcrK3t/3759vNjUUc9mdD8DARvRfgaGppCUlNRdJSWlw3///mUGBSiI1tTU3ArU/ObDhw/CyOoZR2DyBAgwAJqI5aXI21MxAAAAAElFTkSuQmCC);
  cursor: default;
  width: 15px;
  height: 15px;
  padding: 0;
  line-height: 21px;
  font-size: 22px;
  text-align: center;
  border-radius: 15px;
  margin: 7px;
}
.notification .close-btn:hover {
  background-color: #ddd;
}
.notification img {
  float: left;
  border: 20px solid #f5f5f5;
  box-sizing: border-box;
  height: 80px;
  width: 80px;
  margin-right: 10px;
  cursor: inherit;
}
.notification h1 {
  padding: 10px 15px 0 15px;
  margin: 0;
  font-size: 14px;
  font-weight: normal;
  cursor: inherit;
  width: 270px;
}
.notification p {
  padding: 5px 15px 10px 15px;
  margin: 0;
  cursor: inherit;
  width: 270px;
}
.screen-blocker.hidden {
  display: none;
}
.screen-blocker.blocker-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 999999998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.screen-blocker.blocker-overlay.hidden {
  display: none;
}
.screen-blocker.blocker-overlay .screen-blocker-message {
  width: 100%;
  max-width: 700px;
  height: 240px;
  background: #ffffff;
  box-sizing: border-box;
  border-top: 3px solid #56aa1c;
}
.screen-blocker.blocker-overlay .screen-blocker-message h1 {
  text-align: center;
  padding: 20px 0;
  font-size: 24px;
  font-weight: normal;
  line-height: 24px;
  margin-bottom: 10px;
}
.screen-blocker.blocker-overlay .screen-blocker-message .screen-blocker-message-body p {
  font-size: 14px;
  text-align: center;
  line-height: 21px;
  padding: 0 20px;
  margin: 5px 0;
}
.screen-blocker.blocker-overlay .screen-blocker-message .screen-blocker-message-body .screen-blocker-message-add-ons {
  text-align: center;
  padding: 40px 0;
}
.screen-blocker.blocker-overlay .screen-blocker-message .screen-blocker-message-body .screen-blocker-message-add-ons .loading {
  display: inline-block;
  position: static;
  margin: 0;
}
.screen-blocker.blocker-overlay .screen-blocker-message .screen-blocker-message-body .screen-blocker-message-add-ons .btn {
  background-color: #ffffff;
  border: 1px solid #89c377;
  color: #56aa1c;
  cursor: pointer;
  font-weight: bold;
  padding: 6px 10px;
  text-align: center;
  min-width: 110px;
}
.screen-blocker.blocker-overlay .screen-blocker-message .screen-blocker-message-body .screen-blocker-message-add-ons .btn.primary {
  background-color: #56aa1c;
}
.screen-blocker.blocker-overlay .screen-blocker-message .screen-blocker-message-body .screen-blocker-message-add-ons .btn:hover {
  background-color: #89c377;
}
.screen-blocker.blocker-overlay .screen-blocker-message .screen-blocker-message-body .screen-blocker-message-add-ons .btn:active {
  background-color: #89c377;
  border-color: #56aa1c;
}
.screen-blocker.blocker-overlay .screen-blocker-message .screen-blocker-message-body .screen-blocker-message-add-ons .btn[disabled] {
  background-color: #ffffff;
  border-color: #a7a9ac;
  cursor: default;
  color: #a7a9ac;
}
body.mobile .screen-blocker.blocker-overlay .screen-blocker-message {
  width: 100vw;
  height: 100vh;
  margin: 0;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.horizontal-splitter {
  height: 6px;
  display: block;
  border-top: 1px solid #a7a9ac;
  border-bottom: 1px solid #a7a9ac;
  box-sizing: border-box;
  cursor: ns-resize;
  position: relative;
  background: #ffffff;
  flex-shrink: 0;
  flex-grow: 0;
}
.horizontal-splitter + section {
  position: relative;
}
event-report-type .horizontal-splitter + section {
  position: absolute;
}
.entity-chooser {
  white-space: nowrap;
  position: relative;
}
.entity-chooser input {
  display: inline-block !important;
}
.entity-chooser button {
  vertical-align: top;
}
.entity-list-chooser {
  box-sizing: border-box;
  height: 100%;
  margin-bottom: 0;
}
.entity-list-chooser legend {
  display: flex;
  align-items: center;
  height: 16px;
}
.entity-list-chooser .chooser-content {
  height: 100%;
  overflow: auto;
  margin-top: -16px;
}
.entity-chooser {
  display: flex;
  flex-direction: row;
}
.entity-chooser .input-wrapper {
  position: relative;
  flex-grow: 1;
}
.entity-chooser .clear-search {
  border: none;
  padding: 0;
  background: white url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIj48cGF0aCBkPSJNMCwxLjVMMS41LDBMNSwzLjVMOC41LDBMMTAsMS41TDYuNSw1TDEwLDguNUw4LjUsMTBMNSw2LjVMMS41LDEwTDAsOC41TDMuNSw1WiIgZmlsbD0iIzgyODI4MiI+PC9wYXRoPjwvc3ZnPg==) no-repeat center;
  height: 22px;
  width: 22px;
  position: absolute;
  top: 1px;
  right: 1px;
  cursor: pointer;
}
.entity-chooser .clear-search:focus {
  box-shadow: none;
}
.entity-chooser .clear-search.disabled {
  background-color: #ededed;
}
.entity-chooser input[type="text"].required-empty {
  border-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
  outline: none;
}
body.mobile .entity-chooser {
  flex-grow: 1;
  display: flex;
  width: 100%;
}
body.mobile .entity-chooser input[type="text"] {
  flex-grow: 1;
  min-width: initial !important;
}
.time-field {
  height: 24px;
  white-space: nowrap;
  display: flex;
}
.time-field .time-item {
  display: flex;
  height: 100%;
  width: 72px;
  margin-right: 7px;
}
.time-field .time-item > div {
  float: left;
}
.time-field .time-item input {
  min-width: 50px;
  width: 50px;
}
.time-field .time-item::after {
  content: attr(data-type);
  display: inline-block;
  height: 100%;
  line-height: 24px;
  margin-left: 3px;
  color: #3c3c3b;
}
.time-field .time-item .chrome-fix {
  background-color: transparent;
}
.range-input {
  display: flex;
  align-items: center;
}
.range-input span {
  padding: 0 5px;
}
.camera-configurator .range-control {
  width: 600px;
}
.camera-configurator .camera-configurator-container {
  height: 355px;
  width: 400px;
  background-color: #000000;
  position: relative;
}
.camera-configurator .camera-configurator-container .clear-zones {
  position: absolute;
  bottom: 0;
  left: 430px;
}
.camera-configurator .camera-configurator-container .main-container {
  margin: 0 auto;
  height: auto;
  display: block;
}
.camera-configurator .camera-configurator-container .main-container .pvs-motion-detection-sensitivity {
  position: relative;
  background-color: #ffffff;
  top: 5px;
}
.camera-configurator .motion-sensitivity {
  margin-top: 20px;
  width: 400px;
  text-align: center;
}
.camera-configurator .motion-sensitivity .sens-level {
  font-size: 10px;
  position: relative;
  top: -10px;
}
.camera-configurator .motion-sensitivity .sens-level.left-label {
  float: left;
  text-align: left;
}
.camera-configurator .motion-sensitivity .sens-level.right-label {
  float: right;
  clear: none;
  text-align: right;
}
.camera-configurator .motion-sensitivity .text-center {
  font-weight: bold;
  font-size: 14px;
  line-height: 40px;
}
.camera-configurator .motion-sensitivity input {
  width: 400px;
  margin: 0;
}
device-field .new-appliance-field.input-group .input-placeholder {
  width: auto;
  flex-grow: 0;
}
.new-appliance-field.input-group .input-placeholder {
  flex-grow: 1;
  min-width: 198px;
}
.new-appliance-field.input-group .input-placeholder .appliance-field-input {
  width: 220px;
}
.new-appliance-field.input-group .input-placeholder .input-wrapper input {
  min-width: 198px;
}
.new-appliance-field.input-group.type-checkbox {
  flex-wrap: nowrap;
}
.new-appliance-field.input-group.type-checkbox .input-placeholder-column {
  align-items: center !important;
  flex-direction: row !important;
}
.new-appliance-field.input-group.type-checkbox .input-placeholder-column input {
  width: auto;
}
body.mobile .new-appliance-field.input-group.type-checkbox .input-placeholder-column input {
  width: 100%;
}
.accordion-item {
  width: 100%;
  height: auto;
  border: 1px solid #a7a9ac;
  margin-bottom: 5px;
}
.tabbed-content.page-content .accordion-item .scrollable {
  height: auto;
}
.accordion-item.opened .item-title {
  border-bottom: 1px solid #a7a9ac;
}
.accordion-item.opened .item-title .icon {
  transform: rotate3d(0, 0, 0, 0);
}
.accordion-item.closed .item-title .icon {
  transform: rotate3d(0, 0, 1, -90deg);
}
.accordion-item .item-content {
  width: 100%;
  overflow: hidden;
  transition: height 0.2s linear;
  height: 0;
}
.accordion-item .item-content .accordion-content {
  height: auto !important;
}
.accordion-item .item-content .accordion-content.aligned {
  float: left;
  width: 100%;
  padding-bottom: 17px;
}
.accordion-item .item-content .accordion-content.aligned fieldset {
  padding-bottom: 10px;
}
.accordion-item .item-content .accordion-content .remove-connector {
  margin: 0 -30px;
  min-width: 140px;
  float: right;
}
.accordion-item .item-content .accordion-content fieldset legend {
  height: 24px;
  line-height: 24px;
}
.accordion-item .item-content .menu-content {
  height: 100%;
}
.accordion-item .item-content .menu-content .container {
  padding-right: 0;
  padding-bottom: 15px;
  height: auto;
}
.accordion-item .item-content .menu-content .container .static-list {
  margin-top: 15px;
}
.accordion-item .item-title {
  height: 30px;
  background-color: #ededed;
  font-weight: bold;
  line-height: 30px;
  padding: 0 10px;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.accordion-item .item-title .title {
  margin: 0 7px;
}
.accordion-item .item-title .icon {
  width: 22px;
  height: 22px;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiIgd2lkdGg9IjIyIiBoZWlnaHQ9IjIyIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSIxMCIgZmlsbD0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2U9IiM1NmFhMWMiPjwvY2lyY2xlPjxwYXRoIGQ9Ik0xMSwxMkwxNiw4TDE2LDExTDExLDE1TDYsMTFMNiw4WiIgZmlsbD0iIzU2YWExYyI+PC9wYXRoPjwvc3ZnPg==) no-repeat;
  transition: transform 0.3s ease-out;
  transform: rotate3d(0, 0, 1, -90deg);
}
#accordion {
  width: calc(100% - 30px);
  height: auto;
  padding: 15px 15px 0;
}
body.mobile .accordion-item .item-content .accordion-content {
  display: flex;
  flex-direction: column;
}
body.mobile .accordion-item .item-title {
  height: 34px;
}
body.mobile .accordion-item .item-title .title {
  margin: 0;
  font-size: 9pt;
  line-height: 9pt;
}
body.mobile .accordion-item .item-title .icon {
  width: 25px;
  height: 25px;
  background-size: 25px;
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 10px;
}
@media screen and (max-width: 680px) {
  body.mobile #accordion {
    width: calc(100% - 5px * 2 - 2px);
    padding: 5px 5px 0;
  }
}
.filter-chips {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 2px 2px 5px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.filter-chips li {
  white-space: nowrap;
  border: 1px solid #a8cb8a;
  margin: 3px;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  flex-shrink: 0;
  background: #ffffff;
  font-size: 10pt;
}
.filter-chips li:only-child {
  flex-grow: 0;
}
.filter-chips li.disabled {
  border-color: #a7a9ac;
}
.filter-chips li.disabled span {
  color: #B2B2B2;
}
.filter-chips li.disabled span:active {
  background: transparent;
  color: #B2B2B2;
}
.filter-chips li.disabled span:active + button {
  background: transparent;
}
.filter-chips li.disabled span:active + button::after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzIuNTI2IDMyLjUyNiIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+PHBvbHlnb24gcG9pbnRzPSIzMi41MjYsMi44MjggMjkuNjk4LDAgMTYuMjYzLDEzLjQzNSAyLjgyOCwwIDAsMi44MjggMTMuNDM1LDE2LjI2MyAwLDI5LjY5OCAyLjgyOCwzMi41MjYgMTYuMjYzLDE5LjA5MSAgIDI5LjY5OCwzMi41MjYgMzIuNTI2LDI5LjY5OCAxOS4wOTEsMTYuMjYzICIgZmlsbD0iI2NjYyIvPjwvc3ZnPg==);
}
.filter-chips li.disabled button::after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzIuNTI2IDMyLjUyNiIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+PHBvbHlnb24gcG9pbnRzPSIzMi41MjYsMi44MjggMjkuNjk4LDAgMTYuMjYzLDEzLjQzNSAyLjgyOCwwIDAsMi44MjggMTMuNDM1LDE2LjI2MyAwLDI5LjY5OCAyLjgyOCwzMi41MjYgMTYuMjYzLDE5LjA5MSAgIDI5LjY5OCwzMi41MjYgMzIuNTI2LDI5LjY5OCAxOS4wOTEsMTYuMjYzICIgZmlsbD0iI2NjYyIvPjwvc3ZnPg==);
}
.filter-chips li.disabled button:active {
  background: transparent;
}
.filter-chips li span {
  padding: 8px 0 9px 8px;
  color: #347310;
  flex-grow: 1;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
}
.filter-chips li span:active {
  background: #a8cb8a;
  color: #ffffff;
}
.filter-chips li span:active + button {
  background: #a8cb8a;
}
.filter-chips li span:active + button::after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzIuNTI2IDMyLjUyNiIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+PHBvbHlnb24gcG9pbnRzPSIzMi41MjYsMi44MjggMjkuNjk4LDAgMTYuMjYzLDEzLjQzNSAyLjgyOCwwIDAsMi44MjggMTMuNDM1LDE2LjI2MyAwLDI5LjY5OCAyLjgyOCwzMi41MjYgMTYuMjYzLDE5LjA5MSAgIDI5LjY5OCwzMi41MjYgMzIuNTI2LDI5LjY5OCAxOS4wOTEsMTYuMjYzICIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
}
.filter-chips li button {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  height: 30px;
  width: 30px;
}
.filter-chips li button:active {
  background: rgba(0, 0, 0, 0.2);
}
.filter-chips li button:focus {
  box-shadow: none;
  outline: none;
}
.filter-chips li button::after {
  content: '';
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzIuNTI2IDMyLjUyNiIKICAgICBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAzMi41MjYgMzIuNTI2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+Cjxwb2x5Z29uIHBvaW50cz0iMzIuNTI2LDIuODI4IDI5LjY5OCwwIDE2LjI2MywxMy40MzUgMi44MjgsMCAwLDIuODI4IDEzLjQzNSwxNi4yNjMgMCwyOS42OTggMi44MjgsMzIuNTI2IDE2LjI2MywxOS4wOTEgICAyOS42OTgsMzIuNTI2IDMyLjUyNiwyOS42OTggMTkuMDkxLDE2LjI2MyAiIGZpbGw9IiNhOGNiOGEiLz4KPC9zdmc+Cg==) no-repeat;
  background-size: contain;
  width: 12px;
  height: 12px;
  position: relative;
  margin: auto;
}
.modal-with-checkable-grid-and-notes .modal-grid-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}
.modal-with-checkable-grid-and-notes .modal-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  border: 1px solid #a7a9ac;
}
.modal-with-checkable-grid-and-notes .modal-grid__header {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.modal-with-checkable-grid-and-notes .modal-grid__header-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.modal-with-checkable-grid-and-notes .modal-grid__header-cell {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex: 1;
  min-height: 18px;
  justify-content: center;
  padding: 6px;
  border-right: 1px solid #a7a9ac;
  text-transform: uppercase;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  background-color: #ededed;
  background-repeat: no-repeat;
  background-position: right 50%;
  background-position-x: calc(100% - 6px);
  cursor: pointer;
}
.modal-with-checkable-grid-and-notes .modal-grid__header-cell:last-of-type {
  border-right: none;
}
.modal-with-checkable-grid-and-notes .modal-grid__header-cell--sort-asc {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDQgTDgsNCBMIDQsMCBaIiBmaWxsPSIjODI4MjgyIi8+PC9zdmc+);
}
.modal-with-checkable-grid-and-notes .modal-grid__header-cell--sort-desc {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDAgTDgsMCBMIDQsNCBaIiBmaWxsPSIjODI4MjgyIj48L3BhdGg+PC9zdmc+);
}
.modal-with-checkable-grid-and-notes .modal-grid__header-cell--checkbox {
  max-width: 14px;
  background-image: initial;
}
.modal-with-checkable-grid-and-notes .modal-grid__table-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 360px;
  overflow-x: auto;
  overflow-y: auto;
}
.modal-with-checkable-grid-and-notes .modal-grid__modal-table {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.modal-with-checkable-grid-and-notes .modal-table__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  min-height: 30px;
}
.modal-with-checkable-grid-and-notes .modal-table__row:nth-child(2n) {
  background-color: #ededed;
}
.modal-with-checkable-grid-and-notes .modal-table__row:hover {
  background-color: #d9ead2;
}
.modal-with-checkable-grid-and-notes .modal-table__cell {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  flex: 1;
  padding: 6px;
  border-right: 1px solid #ededed;
  cursor: pointer;
}
.modal-with-checkable-grid-and-notes .modal-table__cell:last-of-type {
  border-right: none;
}
.modal-with-checkable-grid-and-notes .modal-table__cell--checkbox {
  max-width: 14px;
}
.modal-with-checkable-grid-and-notes .modal-table__cell--icon {
  max-width: 16px;
}
.modal-with-checkable-grid-and-notes .modal-table__cell--date {
  max-width: 200px;
}
.modal-with-checkable-grid-and-notes .modal-table__cell--where {
  max-width: 150px;
}
.modal-with-checkable-grid-and-notes .notes-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  flex-shrink: 0;
  width: 100%;
  height: 130px;
}
.modal-with-checkable-grid-and-notes .notes-wrapper__label {
  padding-bottom: 5px;
  padding-top: 5px;
  height: auto;
  line-height: normal;
}
.modal-with-checkable-grid-and-notes .notes-wrapper__text-area {
  resize: none;
  width: 100%;
  flex-grow: 1;
}
.modal-with-checkable-grid-and-notes .notes-wrapper__text-area + .newErrorMessage {
  display: none;
}
.modal-with-checkable-grid-and-notes .notes-wrapper__text-area:invalid:not(.ng-pristine):not(.hidden-error) {
  border-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
  outline: none;
}
.modal-with-checkable-grid-and-notes .notes-wrapper__text-area:invalid:not(.ng-pristine):not(.hidden-error) + .newErrorMessage {
  display: block;
  margin-top: 3px;
}
.modal-with-checkable-grid-and-notes .notes-wrapper .notes-wrapper__error-message {
  margin-top: 3px;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile {
  min-height: initial;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-body,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-body,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-body {
  height: 100% !important;
  width: auto !important;
  padding: 10px 20px;
  flex-wrap: nowrap;
  overflow-y: scroll;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .checkbox-with-label-wrapper,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .checkbox-with-label-wrapper,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .checkbox-with-label-wrapper {
  width: 100%;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-check-all-events-container,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-check-all-events-container,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-check-all-events-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 5px 0;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-check-all-events-checkbox,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-check-all-events-checkbox,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-check-all-events-checkbox {
  content: '';
  display: block;
  position: relative;
  right: 0;
  top: 0;
  border: 2px solid #ededed;
  border-radius: 15px;
  height: 30px;
  width: 60px;
  box-sizing: border-box;
  float: right;
  background: #ffffff;
  z-index: 1;
  box-shadow: inset 0 0 0 0 #4cd964;
  transition: box-shadow 0.2s linear, border-color 0.2s linear, background-color 0.1s 0.1s linear;
  will-change: box-shadow, border-color, background-color;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-check-all-events-checkbox:before,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-check-all-events-checkbox:before,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-check-all-events-checkbox:before {
  content: '';
  display: block;
  border: 1px solid #a7a9ac;
  border-radius: 50%;
  height: 26px;
  width: 26px;
  float: right;
  background: #ffffff;
  position: absolute;
  z-index: 2;
  right: 21px;
  top: 1px;
  transition: transform 0.2s ease-out, border-color 0.2s linear;
  will-change: transform, border-color;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-grid-container,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-grid-container,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-grid-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  min-height: 200px;
  flex: 1;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-grid,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-grid,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  border: 1px solid #a7a9ac;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-grid__header,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-grid__header,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-grid__header {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  min-height: 30px;
  text-transform: uppercase;
  border-top: 1px solid #a7a9ac;
  background: #ededed;
  color: #6d6e71;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-grid__table-wrapper,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-grid__table-wrapper,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-grid__table-wrapper {
  overflow-x: auto;
  overflow-y: auto;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-grid__modal-table,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-grid__modal-table,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-grid__modal-table {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;
  padding: 10px 15px 10px 10px;
  overflow: hidden;
  border-bottom: 1px solid #ededed;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-icon-container,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-icon-container,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-icon-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 16px;
  height: 16px;
  padding-right: 4px;
  padding-top: 2px;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-text-container,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-text-container,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-text-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-table__cell,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__cell,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__cell {
  display: flex;
  flex-direction: row;
  width: 100%;
  cursor: pointer;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-table__cell-label,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__cell-label,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__cell-label {
  display: flex;
  align-items: baseline;
  line-height: 16px;
  padding: 2px 10px 2px 0;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-table__cell-description,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__cell-description,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__cell-description {
  display: flex;
  align-items: center;
  line-height: 16px;
  padding: 2px 0 2px 0;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #000000;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-checkbox-container,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-checkbox-container,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-checkbox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 16px;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-checkbox,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-checkbox,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .modal-table__row-checkbox {
  transform: scale(1.5);
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0;
  width: 100%;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__label,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__label,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__label {
  margin: 10px 0 5px 0;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area {
  resize: none;
  width: 100%;
  height: auto;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area + .newErrorMessage,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area + .newErrorMessage,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area + .newErrorMessage {
  display: none;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area:invalid:not(.ng-pristine):not(.hidden-error),
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area:invalid:not(.ng-pristine):not(.hidden-error),
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area:invalid:not(.ng-pristine):not(.hidden-error) {
  border-color: #ff7d71;
  box-shadow: 0 0 4px #ff7d71;
  outline: none;
}
body.mobile .mobile-modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area:invalid:not(.ng-pristine):not(.hidden-error) + .newErrorMessage,
body.mobile mark-as-safe.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area:invalid:not(.ng-pristine):not(.hidden-error) + .newErrorMessage,
body.mobile acknowledge-alarm.modal-with-checkable-grid-and-notes.modal.mobile .notes-wrapper__text-area:invalid:not(.ng-pristine):not(.hidden-error) + .newErrorMessage {
  display: block;
  margin-top: 3px;
}
.wizard-wrapper {
  width: 100%;
  min-height: 370px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wizard-wrapper .tabs {
  display: flex;
  height: 30px;
  justify-content: space-between;
  margin: -20px -20px 15px;
}
.wizard-wrapper .tabs .tab {
  flex-grow: 1;
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.wizard-wrapper .tabs .tab::after {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  background-color: #a7a9ac;
}
.wizard-wrapper .tabs .tab + .tab {
  margin-left: -1px;
}
.wizard-wrapper .tabs .tab + .tab .step-info {
  border-left: 1px solid #a7a9ac;
}
.wizard-wrapper .tabs .tab .step-info {
  width: 100%;
  flex-basis: 26px;
  display: flex;
  align-items: center;
}
.wizard-wrapper .tabs .tab .step-info span {
  display: inline-block;
  vertical-align: middle;
  color: #a7a9ac;
  padding-left: 10px;
}
.wizard-wrapper .tabs .tab.active .step-info span {
  color: #36740b;
}
.wizard-wrapper .tabs .tab.active .line {
  width: 100%;
}
.wizard-wrapper .tabs .tab .line {
  transition: width 0.3s ease-out;
  position: relative;
  z-index: 2;
  width: 0;
  flex-basis: 2px;
  background-color: #56aa1c;
}
.wizard-wrapper .steps {
  width: 100%;
  height: 100%;
  flex-basis: 370px;
  position: relative;
}
.wizard-wrapper .steps > div {
  position: absolute;
  width: 100%;
  transition: transform 0.3s ease-out;
}
.wizard-wrapper .steps > div label[for="deviceType"] {
  display: block;
  width: 140px;
}
.wizard-wrapper .steps > div .input-group {
  margin-top: 35px;
}
.wizard-wrapper .steps > div.transformed-forward {
  transform: translateX(600px);
}
.wizard-wrapper .steps > div.transformed-back {
  transform: translateX(-600px);
}
.wizard-wrapper .footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px 10px 0;
  margin: 0 -20px -10px;
  border-top: 1px solid #a7a9ac;
}
.wizard-wrapper .footer .wizard-loader {
  position: relative;
  flex-grow: 1;
  height: 30px;
}
.wizard-wrapper .footer .wizard-loader .modal-loader {
  top: 0;
  bottom: 0;
}
.newEl {
  transition: transform 0.3s ease-out;
}
.newEl.transformed {
  transform: translateX(0px);
}
.temp-hidden-left {
  transform: translateX(-600px);
}
.temp-hidden-right {
  transform: translateX(600px);
}
.controllers-table-wrapper {
  height: 100%;
}
.table-wrapper {
  width: 100%;
  height: calc(100% - 70px);
  overflow-x: hidden;
  overflow-y: auto;
}
.table-head,
.table-body {
  width: 100%;
  table-layout: fixed;
}
.table-head td,
.table-body td,
.table-head th,
.table-body th {
  text-transform: uppercase;
  text-align: left;
  border-bottom: 1px solid #a7a9ac;
  height: 32px;
  vertical-align: middle;
  padding-left: 5px;
}
.table-head td:first-child,
.table-body td:first-child,
.table-head th:first-child,
.table-body th:first-child {
  width: 30px;
  text-align: center;
  padding: 0;
}
.table-head td.image-container,
.table-body td.image-container,
.table-head th.image-container,
.table-body th.image-container {
  width: 30px;
  text-align: center;
  padding: 0;
}
.table-head th,
.table-body th {
  background-color: #ededed;
  border-right: 1px solid #a7a9ac;
}
.table-head th:last-child,
.table-body th:last-child {
  border-right: none;
}
.table-body th {
  padding: 0;
  border: none;
  height: 0;
  font-size: 0;
}
.table-body tr:nth-child(even) {
  background-color: #E4EDDA;
}
.table-head th {
  background-repeat: no-repeat;
  background-position: 95% 50%;
}
.table-head th span {
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 88%;
  margin-top: 7px;
}
.table-head th.asc {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDQgTDgsNCBMIDQsMCBaIiBmaWxsPSIjODI4MjgyIi8+PC9zdmc+);
}
.table-head th.desc {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDAgTDgsMCBMIDQsNCBaIiBmaWxsPSIjODI4MjgyIj48L3BhdGg+PC9zdmc+);
}
.table-head th:hover {
  cursor: pointer;
}
.disable-items {
  pointer-events: none;
  opacity: 0.5;
}
.disable-buttons-and-inputs input,
.disable-buttons-and-inputs button {
  pointer-events: none;
  opacity: 0.5;
}
.wizard-addappliance_chooseaccesspoint input,
.wizard-addappliance_chooseaccesspoint button {
  pointer-events: none;
  opacity: 0.5;
}
.wizard-addappliance_chooseaccesspoint .mapping-container:not(.Device_StandardMappingDoor):not(.VideoRecorder) {
  pointer-events: none;
  opacity: 0.5;
}
.wizard-addappliance_choosecamera input,
.wizard-addappliance_choosecamera button {
  pointer-events: none;
  opacity: 0.5;
}
.wizard-addappliance_choosecamera .mapping-container:not(.Camera) {
  pointer-events: none;
  opacity: 0.5;
}
.wizard-addappliance_choosepaxton10camera input,
.wizard-addappliance_choosepaxton10camera button {
  pointer-events: none;
  opacity: 0.5;
}
.wizard-addappliance_choosepaxton10camera .mapping-container:not(.PaxtonCamera) {
  pointer-events: none;
  opacity: 0.5;
}
.wizard-addappliance_choosepaxlock input,
.wizard-addappliance_choosepaxlock button {
  pointer-events: none;
  opacity: 0.5;
}
.wizard-addappliance_choosepaxlock .mapping-container:not(.Paxlock) {
  pointer-events: none;
  opacity: 0.5;
}
.alarm-widget .alarms-widget-edit fieldset {
  flex: 1 1 100%;
}
.alarm-widget .alarms-widget-view {
  display: flex;
  flex-direction: column;
}
.alarm-widget .alarms-widget-view .alarm-icons {
  display: flex;
}
.alarm-widget .alarms-widget-view .alarm-icons .active {
  animation: video-report-blink 0.35s infinite ease-in-out alternate;
  filter: drop-shadow(0 0 5px #ff7974);
}
.alarm-widget .alarms-widget-view .small-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper {
  display: flex;
  flex: 1 1 auto;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper > div {
  display: flex;
  justify-content: center;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarm-icons {
  position: relative;
  flex: 1 0 90px;
  flex-basis: 40%;
  flex-grow: 1;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarm-icons [svg-image] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarm-icons [svg-image] img {
  margin: auto;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list {
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 60%;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info .normal-alarm-status-span-size {
  font-size: 10.5pt;
  line-height: 1.3;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info .inline-alarm-status .alarm-status {
  flex-direction: row;
  align-items: center;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info .inline-alarm-status .alarm-status span {
  font-size: 10.5pt;
  line-height: 1.3;
  padding-right: 3px;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-count {
  font-size: 21pt;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-status {
  flex-direction: row;
  align-items: center;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-status span {
  font-size: 10.5pt;
  line-height: 1.3;
  padding-right: 3px;
}
@media screen and (max-height: 814px) {
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.three-statuses span.alarm-description .alarm-count,
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-count {
    width: 70px;
    font-size: 17pt;
  }
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.three-statuses span.alarm-description .alarm-status,
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-status {
    flex-direction: row;
    align-items: center;
  }
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.three-statuses span.alarm-description .alarm-status span,
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-status span {
    font-size: 10.5pt;
    line-height: 1.3;
    padding-right: 3px;
  }
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span {
  padding-left: 0;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description {
  display: flex;
  justify-content: center;
  border: 0 solid #a7a9ac;
  border-left-width: 2px;
}
@media screen and (max-width: 1366px) {
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description {
    flex-direction: column;
    align-items: center;
  }
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description > span {
  padding-bottom: 1px;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description.disarmed .alarm-count,
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description.inactive .alarm-count {
  color: #56aa1c;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description.active .alarm-count,
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description.armed .alarm-count {
  color: #d47d7e;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-count {
  font-size: 26pt;
  margin-right: 16px;
  font-weight: bold;
  text-align: center;
  color: #acacac;
}
@media screen and (max-width: 1366px) {
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-count {
    margin-right: 0;
    margin-bottom: 4px;
  }
}
@media screen and (min-width: 1920px) {
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-count {
    margin-right: 32px;
  }
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status span {
  font-size: 10.5pt;
  line-height: 1.3;
  font-weight: bold;
}
@media screen and (max-width: 1366px) {
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status {
    align-items: center;
  }
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status span {
    font-size: 10pt;
  }
}
@media screen and (max-width: 1024px) {
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status {
    align-items: center;
  }
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status span {
    font-size: 8pt;
  }
}
@media screen and (max-height: 814px) {
  .alarm-widget .alarms-widget-view .small-view .alarms-wrapper .alarm-icons [svg-image] img {
    width: 48px;
  }
}
.alarm-widget .alarms-widget-view .large-view {
  flex-grow: 1;
  display: flex;
  height: 100%;
  overflow: auto;
}
.alarm-widget .alarms-widget-view .large-view .message-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.alarm-widget .alarms-widget-view .large-view .message-wrapper span {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
}
.alarm-widget .alarms-widget-view .large-view .alarms-wrapper {
  display: grid;
  width: 100%;
  --grid-gap: 10px;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(var(--columns-count), calc((100% - (var(--grid-gap) * (var(--columns-count) - 1))) / var(--columns-count)));
  grid-template-rows: repeat(var(--rows-count), calc((100% - var(--grid-gap) * (var(--rows-count) - 1)) / var(--rows-count)));
  grid-auto-rows: calc((100% - var(--grid-gap) * (var(--rows-count) - 1)) / var(--rows-count));
}
.alarm-widget .alarms-widget-view .large-view .alarms-wrapper .alarm-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: normal;
  gap: 10px;
  width: 100%;
  height: 100%;
}
.alarm-widget .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-status {
  color: #9a9a9a;
}
.alarm-widget .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-name,
.alarm-widget .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-status {
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alarm-widget .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-icons {
  max-height: 60%;
}
@media screen and (max-width: 1024px) {
  .alarm-widget .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-icons {
    max-height: 50%;
  }
}
.alarm-widget .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-icons [svg-image] {
  display: flex;
  justify-content: center;
}
.alarm-widget .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-icons [svg-image] img {
  display: block;
  object-fit: contain;
}
.alarm-widget .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-icons [svg-image] img:hover {
  cursor: pointer;
}
#enlargedWidgetWrapper .alarms-widget-view {
  --rows-count: 4 !important;
  --columns-count: 9 !important;
}
.video-widget .widget-settings-wrapper .video-widget-edit .nothing-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
.video-widget .widget-settings-wrapper .video-widget-edit .settings {
  flex-direction: column;
  padding: 0 10px;
  overflow: auto;
}
@media screen and (max-height: 890px) {
  .video-widget .widget-settings-wrapper .video-widget-edit .settings {
    display: block;
  }
  .video-widget .widget-settings-wrapper .video-widget-edit .settings .radio-input {
    white-space: nowrap;
  }
  .video-widget .widget-settings-wrapper .video-widget-edit .settings .radio-input input {
    flex-shrink: 0;
  }
}
.video-widget .widget-view-wrapper .video-widget-view {
  display: flex;
  flex-grow: 1;
}
.video-widget .widget-view-wrapper .video-widget-view.hidden {
  display: none;
}
.video-widget .widget-view-wrapper .video-widget-view .camera-settings {
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
}
.video-widget .widget-view-wrapper .video-widget-view .camera-settings .camera-time {
  min-width: fit-content;
}
.video-widget .widget-view-wrapper .video-widget-view .video-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: 100%;
}
.video-widget .widget-view-wrapper .video-widget-view .video-wrapper .player-wrapper {
  display: flex;
  flex-grow: 1;
}
.video-widget .widget-view-wrapper .video-widget-view .video-wrapper .player-wrapper figure {
  display: flex;
  flex-grow: 1;
  border: none;
}
.video-widget .widget-view-wrapper .video-widget-view .video-wrapper .player-wrapper figure .streaming-container {
  transition: margin 0.5s;
}
.video-widget .widget-view-wrapper .video-widget-view .video-wrapper .timeline-wrapper {
  will-change: max-height;
}
.video-widget .widget-view-wrapper .video-widget-view .video-wrapper .timeline-wrapper .timeline-container {
  margin-bottom: 0;
}
.video-widget .widget-view-wrapper .video-widget-view .video-wrapper .timeline-wrapper.shown {
  max-height: 110px;
  transition: max-height 0.5s;
}
.video-widget .widget-view-wrapper .video-widget-view .video-wrapper .timeline-wrapper.shown.new {
  max-height: 45px;
}
.video-widget .widget-view-wrapper .video-widget-view .video-wrapper .timeline-wrapper.shown .timeline-container {
  visibility: visible;
}
.site-graphic-widget-edit .settings-list {
  flex-direction: column;
  overflow: auto;
}
.site-graphic-widget-edit .settings-list .input-group {
  margin: 0;
}
.site-graphic-widget-edit .settings-list .radio-input label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media screen and (max-width: 1600px) {
  .site-graphic-widget-edit .settings-list .radio-input label {
    max-width: 95px;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1800px) {
  .site-graphic-widget-edit .settings-list .radio-input label {
    max-width: 125px;
  }
}
@media screen and (max-height: 890px) {
  .site-graphic-widget-edit .settings-list {
    display: block;
  }
  .site-graphic-widget-edit .settings-list .radio-input {
    white-space: nowrap;
  }
  .site-graphic-widget-edit .settings-list .radio-input input {
    flex-shrink: 0;
  }
}
#upgradeNotes h1,
#upgradeNotes h2,
#upgradeNotes h3 {
  color: #3c3c3b;
}
#upgradeNotes h1 {
  font-size: 2.2em;
  font-weight: bold;
}
#upgradeNotes h1 + hr {
  display: none;
}
#upgradeNotes h2 {
  font-size: 2em;
  font-weight: bold;
  margin: 2em 0 0 0;
}
#upgradeNotes h2 + hr {
  border-style: solid;
  border-color: #a7a9ac;
  border-width: 1px 0 0 0;
  margin: 1em 0 2em 0;
}
#upgradeNotes h3 {
  font-size: 1.6em;
}
#upgradeNotes h3 + h2 {
  font-size: 1.2em;
  margin: 1em 0 2em 0;
  font-weight: normal;
}
#upgradeNotes h3 + hr {
  display: none;
}
#upgradeNotes p {
  font-size: 1.2em;
  margin: 1em 0 2em 0;
  font-weight: normal;
}
#upgradeNotes p + hr {
  display: none;
}
#upgradeNotes strong {
  font-weight: bold;
}
alarm-events-widget-view .events-widget-view {
  display: flex;
  flex-grow: 1;
}
alarm-events-widget-view .mobile-alarm-events {
  width: 100%;
  display: flex;
}
alarm-events-widget-view .mobile-alarm-events .alarm-icons {
  position: relative;
  display: flex;
  flex: 1 0 30%;
  margin-right: var(--widgetPadding);
}
alarm-events-widget-view .mobile-alarm-events .alarm-icons .image-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
alarm-events-widget-view .mobile-alarm-events .alarm-icons .image-container img {
  margin: auto;
  width: 100%;
  height: 100%;
}
alarm-events-widget-view .mobile-alarm-events .bell-icon {
  position: absolute;
  align-self: center;
  max-height: 100%;
  height: 70px;
}
alarm-events-widget-view .mobile-alarm-events .bell-icon.active {
  animation: video-report-blink 0.7s infinite linear;
}
alarm-events-widget-view .mobile-alarm-events .alarm-events-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}
alarm-events-widget-view .mobile-alarm-events .alarm-events-info .alarm-info {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
alarm-events-widget-view .mobile-alarm-events .alarm-events-info .alarm-info span {
  font-size: 1.2em;
  line-height: 1.3;
}
@media screen and (max-height: 600px) {
  alarm-events-widget-view .mobile-alarm-events .alarm-events-info .alarm-info span {
    font-size: 1em;
  }
}
@media screen and (max-height: 500px) {
  alarm-events-widget-view .mobile-alarm-events .alarm-events-info .alarm-info span {
    font-size: 0.8em;
  }
}
events-widget-view .events-widget-view {
  border: 1px solid #ccc;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}
events-widget-view .events-widget-view .mobile-grid-wrapper {
  height: auto;
  margin-top: -1px;
}
events-widget-view .events-widget-view .mobile-grid-wrapper .mobile-grid__header {
  display: none;
}
events-widget-view .events-widget-view .mobile-grid-wrapper .mobile-grid__table-wrapper {
  overflow: auto;
}
events-widget-view .events-widget-view .events-grid-wrapper {
  width: 100%;
}
events-widget-view .events-widget-view .events-grid-wrapper .grid-container {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiB2aWV3Qm94PSIwIDAgMSA1OCIgd2lkdGg9IjEiIGhlaWdodD0iNTgiPjxnPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjI5IiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMCIgeT0iMjkiIHdpZHRoPSIxIiBoZWlnaHQ9IjI5IiBmaWxsPSIjZjZmNmY2Ii8+PC9nPjwvc3ZnPg==);
  background-attachment: local;
}
body.rtl business-card-widget-view .business-cards-wrapper .event-info-wrapper .event-info .event-text .user-name,
body.rtl business-card-widget-view .business-cards-wrapper .user-info-wrapper .event-text .user-name,
body.rtl business-card-widget-view .business-cards-wrapper .event-info-wrapper .event-info .event-text .event-description,
body.rtl business-card-widget-view .business-cards-wrapper .user-info-wrapper .event-text .event-description,
body.rtl business-card-widget-view .business-cards-wrapper .event-info-wrapper .event-info .event-text .event-appliance,
body.rtl business-card-widget-view .business-cards-wrapper .user-info-wrapper .event-text .event-appliance {
  text-align: right;
}
business-card-widget-view {
  --step: -170px;
  --navButtonSize: 12px;
  --defaultAnimationDuration: 0.4s;
  --littleMargin: 0px;
}
@keyframes newEventAnimation {
  from {
    transform: translateZ(calc(-1 * var(--step))) translateY(100%);
  }
  to {
    transform: translateZ(0) translateY(0);
  }
}
@keyframes appearAtTheEndAnimation {
  from {
    transform: translateZ(calc(4 * var(--step)));
    filter: brightness(1.8);
  }
  to {
    transform: translateZ(calc(3 * var(--step)));
    filter: brightness(1.24);
  }
}
business-card-widget-view .business-cards-wrapper {
  flex-grow: 1;
  position: relative;
  perspective: 3000px;
  perspective-origin: 50% calc(-5.5 * 30px);
  overflow: hidden;
}
business-card-widget-view .business-cards-wrapper .business-card-smaller {
  --info-padding: 10px;
}
business-card-widget-view .business-cards-wrapper .business-card-smaller .event-info-wrapper .event-info .event-text .user-name span {
  font-size: 1.3em;
}
business-card-widget-view .business-cards-wrapper .business-card-smaller .event-info-wrapper .event-info .event-text .event-description,
business-card-widget-view .business-cards-wrapper .business-card-smaller .event-info-wrapper .event-info .event-text .event-time,
business-card-widget-view .business-cards-wrapper .business-card-smaller .event-info-wrapper .event-info .event-text .event-date,
business-card-widget-view .business-cards-wrapper .business-card-smaller .event-info-wrapper .event-info .event-text .event-appliance {
  font-size: 1.1em;
  line-height: 1.2;
}
business-card-widget-view .business-cards-wrapper .business-card-smaller .event-info-wrapper .event-info .event-text .event-time-with-icon .event-icon {
  --image-size: 28px;
}
business-card-widget-view .business-cards-wrapper .business-card-smaller:not(.large) .user-info-wrapper .user-info .field-data {
  font-size: 1.1em;
}
business-card-widget-view .business-cards-wrapper .business-card {
  --margin: 0px;
  --max-image-size: 128px;
  --info-padding: 20px;
  display: flex;
  flex-grow: 1;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, #ffffff, #ededed);
  width: calc(100% - 2 * var(--littleMargin));
  height: calc(100% - var(--margin) - var(--littleMargin));
  margin: var(--margin) var(--littleMargin) var(--littleMargin) var(--littleMargin);
  box-shadow: 0 0 3px #848484;
  border-radius: 2px;
  transition: transform ease-in-out var(--defaultAnimationDuration), filter ease-out var(--defaultAnimationDuration);
  box-sizing: border-box;
}
business-card-widget-view .business-cards-wrapper .business-card .card-image {
  max-width: 50%;
}
business-card-widget-view .business-cards-wrapper .business-card .card-image img {
  object-fit: contain;
}
business-card-widget-view .business-cards-wrapper .business-card[data-index="0"] {
  animation: newEventAnimation var(--defaultAnimationDuration) ease-in reverse;
  z-index: 6;
}
business-card-widget-view .business-cards-wrapper .business-card.new[data-index="1"] {
  animation: newEventAnimation var(--defaultAnimationDuration) ease-out;
}
business-card-widget-view .business-cards-wrapper .business-card:not(.small) {
  --margin: 30px;
}
business-card-widget-view .business-cards-wrapper .business-card:not(.small).new[data-index="4"] {
  animation: appearAtTheEndAnimation var(--defaultAnimationDuration) ease-out;
}
business-card-widget-view .business-cards-wrapper .business-card:not(.small)[data-index="1"] {
  filter: brightness(1);
  transform: translateZ(0);
  z-index: 5;
}
business-card-widget-view .business-cards-wrapper .business-card:not(.small)[data-index="2"] {
  filter: brightness(1.08);
  transform: translateZ(var(--step));
  z-index: 4;
}
business-card-widget-view .business-cards-wrapper .business-card:not(.small)[data-index="3"] {
  filter: brightness(1.16);
  transform: translateZ(calc(2 * var(--step)));
  z-index: 3;
}
business-card-widget-view .business-cards-wrapper .business-card:not(.small)[data-index="4"] {
  filter: brightness(1.24);
  transform: translateZ(calc(3 * var(--step)));
  z-index: 2;
}
business-card-widget-view .business-cards-wrapper .business-card:not(.small)[data-index="5"] {
  filter: brightness(1.8);
  transform: translateZ(calc(4 * var(--step)));
  z-index: 1;
}
business-card-widget-view .business-cards-wrapper .business-card.small .event-info-wrapper {
  flex-basis: 100%;
  flex-shrink: 0;
}
business-card-widget-view .business-cards-wrapper .business-card.large .event-info-wrapper {
  flex-grow: 0;
  flex-basis: auto;
}
business-card-widget-view .business-cards-wrapper .business-card.large .event-info-wrapper .event-info .event-text {
  display: none;
}
business-card-widget-view .business-cards-wrapper .business-card.large .user-info-wrapper {
  flex-direction: column;
  overflow: hidden;
}
business-card-widget-view .business-cards-wrapper .business-card.large .user-info-wrapper .event-text {
  padding-bottom: 0;
  display: flex;
  flex-grow: 0;
  flex-shrink: 0;
}
business-card-widget-view .business-cards-wrapper .business-card.large .user-info-wrapper .event-text .event-time-with-icon {
  flex-basis: 26px;
  align-items: flex-end;
  justify-content: flex-start;
}
business-card-widget-view .business-cards-wrapper .business-card.large .user-info-wrapper .event-text .event-time-with-icon .event-appliance,
business-card-widget-view .business-cards-wrapper .business-card.large .user-info-wrapper .event-text .event-time-with-icon .event-time {
  line-height: 1.75;
}
business-card-widget-view .business-cards-wrapper .business-card.large .user-info-wrapper .event-text .event-time-with-icon .event-appliance {
  padding-right: 5px;
}
business-card-widget-view .business-cards-wrapper .business-card.large .user-info-wrapper .event-text .event-time-with-icon .event-icon {
  flex-grow: 1;
  justify-content: flex-end;
}
business-card-widget-view .business-cards-wrapper .business-card.large .user-info-wrapper .user-info {
  margin-top: 15px;
  flex-shrink: 1;
}
business-card-widget-view .business-cards-wrapper .business-card.medium .card-image {
  max-height: 128px;
}
business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper {
  max-width: 100%;
  flex: 1 1 50%;
  display: flex;
}
business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}
business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .card-image {
  height: 100%;
  flex-shrink: 0;
  display: flex;
  width: auto;
}
business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .card-image.default-image img {
  border: 20px solid transparent;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
}
business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .card-image.reset-width {
  width: 0;
}
business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .card-image img {
  height: 100%;
  width: 100%;
}
business-card-widget-view .business-cards-wrapper .business-card .event-text {
  padding: var(--info-padding);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-grow: 1;
  overflow: hidden;
}
business-card-widget-view .business-cards-wrapper .business-card .event-text .user-name {
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
business-card-widget-view .business-cards-wrapper .business-card .event-text .user-name span {
  font-size: 2em;
  font-weight: bold;
  white-space: nowrap;
  line-height: 1.3;
}
business-card-widget-view .business-cards-wrapper .business-card .event-text .event-description,
business-card-widget-view .business-cards-wrapper .business-card .event-text .event-time,
business-card-widget-view .business-cards-wrapper .business-card .event-text .event-date,
business-card-widget-view .business-cards-wrapper .business-card .event-text .event-appliance {
  line-height: 1.3;
  font-size: 1.25em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
business-card-widget-view .business-cards-wrapper .business-card .event-text .event-description {
  flex-grow: 1;
  white-space: normal;
}
business-card-widget-view .business-cards-wrapper .business-card .event-text .event-time-with-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
business-card-widget-view .business-cards-wrapper .business-card .event-text .event-time-with-icon .event-icon {
  --image-size: 32px;
  height: var(--image-size);
  width: var(--image-size);
}
business-card-widget-view .business-cards-wrapper .business-card .event-text .event-time-with-icon .event-icon img {
  height: 100%;
}
@media screen and (max-width: 720px) {
  business-card-widget-view .business-cards-wrapper .business-card .event-text {
    padding: 25px var(--info-padding);
  }
}
business-card-widget-view .business-cards-wrapper .business-card .user-info-wrapper {
  display: flex;
  flex: 1 0 50%;
}
business-card-widget-view .business-cards-wrapper .business-card .user-info-wrapper .event-text {
  display: none;
}
business-card-widget-view .business-cards-wrapper .business-card .user-info-wrapper .user-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin: var(--info-padding);
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: auto;
}
business-card-widget-view .business-cards-wrapper .business-card .user-info-wrapper .user-info .field-data {
  --field-size: 22px;
  display: flex;
  height: var(--field-size);
  font-size: 1.25em;
  flex-shrink: 0;
}
business-card-widget-view .business-cards-wrapper .business-card .user-info-wrapper .user-info .field-data .field-value {
  line-height: var(--field-size);
}
business-card-widget-view .business-cards-wrapper .business-card .user-info-wrapper .user-info .field-data .field-value.email {
  white-space: nowrap;
  flex: 1;
  width: var(--field-size);
  overflow: hidden;
  text-overflow: ellipsis;
}
business-card-widget-view .business-cards-wrapper .business-card .user-info-wrapper .user-info .field-data .field-name {
  white-space: nowrap;
  color: #90969A;
  min-width: 160px;
  height: var(--field-size);
  line-height: var(--field-size);
}
@media screen and (max-width: 1700px) and (min-height: 850px) {
  business-card-widget-view .business-cards-wrapper .business-card {
    --info-padding: 10px;
  }
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .user-name span {
    font-size: 1.3em;
  }
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .event-description,
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .event-time,
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .event-date,
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .event-appliance {
    font-size: 1.1em;
    line-height: 1.2;
  }
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .event-time-with-icon .event-icon {
    --image-size: 28px;
  }
  business-card-widget-view .business-cards-wrapper .business-card:not(.large) .user-info-wrapper .user-info .field-data {
    font-size: 1.1em;
  }
}
@media screen and (max-height: 850px) {
  business-card-widget-view .business-cards-wrapper .business-card {
    --info-padding: 10px;
  }
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .user-name span {
    font-size: 1.3em;
  }
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .event-description,
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .event-time,
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .event-date,
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .event-appliance {
    font-size: 1.1em;
    line-height: 1.2;
  }
  business-card-widget-view .business-cards-wrapper .business-card .event-info-wrapper .event-info .event-text .event-time-with-icon .event-icon {
    --image-size: 28px;
  }
  business-card-widget-view .business-cards-wrapper .business-card:not(.large) .user-info-wrapper .user-info .field-data {
    font-size: 1.1em;
  }
}
business-card-widget-view .business-cards-wrapper.enlarged {
  flex-basis: 32%;
  flex-grow: 0;
  flex-shrink: 0;
}
business-card-widget-view .business-cards-wrapper.enlarged .business-card {
  --margin: 1px;
}
business-card-widget-view .business-cards-wrapper.enlarged .business-card.medium .card-image {
  max-height: 192px;
}
business-card-widget-view .business-cards-wrapper.enlarged .hover-buttons-wrapper {
  display: none !important;
}
business-card-widget-view .business-cards-wrapper.enlarged .event-info-wrapper {
  flex-basis: 40%;
}
business-card-widget-view .business-cards-wrapper.enlarged .user-info-wrapper {
  flex-basis: 60%;
}
@media screen and (max-width: 1700px) and (min-height: 850px) {
  business-card-widget-view .business-cards-wrapper.enlarged .event-info-wrapper {
    flex-basis: 30%;
  }
  business-card-widget-view .business-cards-wrapper.enlarged .user-info-wrapper {
    flex-basis: 70%;
  }
}
business-card-widget-view .business-cards-wrapper.smallest-size .business-card .user-info {
  display: none;
}
business-card-widget-view .business-cards-wrapper.vertical .business-card {
  flex-direction: column;
}
business-card-widget-view .business-cards-wrapper:not(.vertical) .business-card.medium .event-info-wrapper {
  max-width: 50%;
}
business-card-widget-view .business-cards-wrapper.show-as-new .business-card.new[data-index="1"] {
  animation: newEventAnimation var(--defaultAnimationDuration) 0.2s cubic-bezier(0.17, 0.67, 0.2, 0.95) both;
}
business-card-widget-view .event-report-wrapper {
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
  overflow-x: auto;
}
business-card-widget-view .nav-buttons {
  --scale: 0.9;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(2 * var(--navButtonSize));
}
business-card-widget-view .nav-buttons .buttons-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-around;
}
business-card-widget-view .nav-buttons .buttons-wrapper button {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  border-top: 0;
  border-left: var(--navButtonSize) solid transparent;
  border-right: var(--navButtonSize) solid transparent;
  border-bottom: 20px solid #56aa1c;
  background-color: transparent;
  transition: transform ease-in-out 0.15s;
  filter: drop-shadow(0 0 1px #36740b);
  cursor: pointer;
}
business-card-widget-view .nav-buttons .buttons-wrapper button:focus {
  box-shadow: none;
}
business-card-widget-view .nav-buttons .buttons-wrapper button:active {
  transform: scale(var(--scale));
}
business-card-widget-view .nav-buttons .buttons-wrapper button[disabled] {
  border-bottom-color: #ededed;
  cursor: default;
}
business-card-widget-view .nav-buttons .buttons-wrapper .next {
  transform: rotate(180deg);
}
business-card-widget-view .nav-buttons .buttons-wrapper .next:active {
  transform: rotate(180deg) scale(var(--scale));
}
business-card-widget-view .nav-buttons .new-card-notification-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --size: calc(2 * var(--navButtonSize));
  position: relative;
}
business-card-widget-view .nav-buttons .new-card-notification-wrapper.small {
  justify-content: flex-start;
}
business-card-widget-view .nav-buttons .new-card-notification-wrapper.small .circle {
  top: -7px;
  position: absolute;
  height: var(--size);
}
business-card-widget-view .nav-buttons .new-card-notification-wrapper .circle {
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  width: var(--size);
  flex-basis: var(--size);
  border-radius: calc(var(--size) / 2);
  z-index: 10;
  background-color: #f91919;
  box-shadow: 0 0 5px #f91919;
  will-change: transform;
}
@keyframes blink {
  from {
    box-shadow: 0 0 10px #f91919;
  }
  to {
    box-shadow: none;
  }
}
business-card-widget-view .nav-buttons .new-card-notification-wrapper .circle.new {
  animation: blink 0.5s linear infinite alternate;
}
business-card-widget-view .nav-buttons .new-card-notification-wrapper .circle.shown {
  visibility: visible;
  cursor: pointer;
}
business-card-widget-view .nav-buttons .new-card-notification-wrapper .circle .text {
  font-size: 1.3em;
  text-align: center;
  color: white;
  font-weight: bold;
}
system-activity-widget-edit {
  flex-direction: column;
}
system-activity-widget-edit .time-periods {
  display: flex;
  flex-direction: column;
  flex-basis: 5%;
  padding: 10px;
  justify-content: space-around;
}
system-activity-widget-edit .time-periods-wrapper {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  padding: 0 10px;
}
system-activity-widget-edit .time-periods-wrapper label {
  margin-right: 20px;
}
system-activity-widget-edit .time-periods-wrapper select {
  width: 100%;
  min-width: auto;
}
system-activity-widget-edit .events-widget-edit {
  flex-grow: 1;
  flex-shrink: 1;
}
site-graphic-widget-view {
  overflow: hidden;
  perspective: 5000px;
  position: relative;
}
site-graphic-widget-view .image-sg-wrapper {
  background: #ededed center no-repeat;
  position: absolute;
  height: 100% !important;
  width: 100% !important;
  top: 0;
  left: 0;
}
site-graphic-widget-view article.site-graphic {
  width: 100%;
}
site-graphic-widget-view .site-graphic-widget-view {
  display: flex;
  flex-grow: 1;
}
site-graphic-widget-view old-component-wrapper {
  display: flex;
  flex-grow: 1;
}
site-graphic-widget-view ribbon-button {
  --button-size: 30px;
  --margin: 5px;
  position: absolute;
  width: var(--button-size) !important;
  height: var(--button-size);
  margin: 0 var(--margin) var(--margin) var(--margin);
  bottom: 0;
  z-index: 9999;
}
site-graphic-widget-view ribbon-button .ribbon-button {
  width: var(--button-size);
  height: var(--button-size);
  margin: 0;
  background: transparent;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  cursor: pointer;
}
site-graphic-widget-view ribbon-button .ribbon-button:focus {
  outline: none;
  box-shadow: none;
}
site-graphic-widget-view ribbon-button .ribbon-button:hover {
  filter: drop-shadow(0 0 2px #89c377);
}
site-graphic-widget-view ribbon-button .ribbon-button:active {
  filter: none;
}
site-graphic-widget-view ribbon-button .ribbon-button img {
  width: 100%;
  height: 100%;
}
site-graphic-widget-view ribbon-button .ribbon-button figcaption {
  display: none;
}
site-graphic-widget-view ribbon-button[data-direction="left"] {
  right: calc(var(--button-size) + var(--margin));
}
site-graphic-widget-view ribbon-button[data-direction="left"] .ribbon-button:active:not(.wrong-button) img {
  animation: rotate-anti-clockwise 2s 0.3s linear infinite;
}
site-graphic-widget-view ribbon-button[data-direction="right"] {
  right: 0;
}
site-graphic-widget-view ribbon-button[data-direction="right"] .ribbon-button:active:not(.wrong-button) img {
  animation: rotate-clockwise 2s 0.3s linear infinite;
}
site-graphic {
  display: flex;
  flex-grow: 1;
}
site-graphic .small-view-events {
  display: flex;
  z-index: 15;
  flex-direction: column;
  width: 250px;
  height: 100%;
  position: absolute;
}
site-graphic .small-view-events .sg-event-item {
  animation: slide-fade-in 0.2s ease-out both;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  height: 26px;
  padding: 3px;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
}
site-graphic .small-view-events .sg-event-item.removing {
  animation: resize-fade-out 0.2s both;
  transform-origin: 10px 10px;
}
site-graphic .small-view-events .sg-event-item .event {
  display: flex;
  flex-direction: row;
  animation: resize-fade-in 0.2s 0.2s ease-out both;
  flex: 1 1 100%;
  transform-origin: 10px 10px;
}
site-graphic .small-view-events .sg-event-item .event img {
  width: 20px;
  height: 20px;
  margin: 0;
}
site-graphic .small-view-events .sg-event-item .event span {
  font-size: 0.95em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  line-height: 20px;
  margin-left: 7px;
  font-weight: bold;
}
.permissions a.disabled {
  pointer-events: none;
  cursor: default;
  color: #3c3c3b;
  opacity: 0.5;
}
/**
 * Contains styles for the ribbon bar.
 */
#desktopSearch {
  width: 158px;
  padding-right: 20px;
  line-height: 1.5;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.mobile #desktopSearch {
  -webkit-user-select: none !important;
}
#desktopSearch::-webkit-search-decoration {
  -webkit-appearance: none;
}
#desktopSearch::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
#filterSearch {
  -webkit-appearance: textfield;
}
#filterSearch::-webkit-search-decoration {
  -webkit-appearance: none;
}
#filterSearch::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.disabled {
  color: #a7a9ac;
}
.disabled:hover {
  background-color: transparent;
}
#addBlock {
  position: relative;
  float: left;
  width: 100px;
}
#addBlock .btn-dropdown:hover {
  background-color: #89c377;
}
#addBlock.disabled:hover {
  background-color: transparent;
}
#addBlock.disabled:hover .btn-dropdown {
  background-color: transparent;
}
#addBlock:hover {
  background-color: #d9ead2;
}
.columns-menu {
  background-color: #ffffff;
  border: 1px solid #a7a9ac;
  border-top: 3px solid #56aa1c;
  border-bottom: 3px solid #56aa1c;
  padding-top: 5px;
  position: absolute;
  width: 400px;
  z-index: 30;
  display: none;
  overflow: hidden;
  flex-direction: row;
  flex-wrap: wrap;
  pointer-events: auto;
}
.columns-menu .standardFieldsTitle {
  position: relative;
  top: 6px;
  display: inline-flex;
  padding: 0 14px;
  min-width: 180px;
}
.columns-menu .customFieldsTitle {
  position: relative;
  top: 6px;
  display: inline-flex;
  margin-bottom: 17px;
  padding: 0 7px;
}
.columns-menu ul {
  border-top: 1px solid #a7a9ac;
  max-height: 310px;
  min-height: 310px;
  padding-top: 5px;
  flex: 1 1 50%;
  overflow-y: auto;
}
.columns-menu li {
  list-style: none;
  padding: 0 10px;
}
.columns-menu li label {
  display: inline-block;
  max-width: 170px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.columns-menu li input {
  margin-right: 5px;
  vertical-align: middle;
  margin-top: 0;
}
.columns-menu .columnsList {
  flex: 1 1 50%;
}
.svg-container {
  position: absolute;
}
#ribbonBar #currentToolbox,
.timeline-container #currentToolbox,
.new-timeline-container #currentToolbox,
#ribbonBar .time-line-buttons,
.timeline-container .time-line-buttons,
.new-timeline-container .time-line-buttons {
  transition: height 0.3s ease-out, padding 0.3s ease-out;
  height: 100px;
  animation: ribbon-animation 0.3s ease-out both;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}
#ribbonBar #currentToolbox.overlay,
.timeline-container #currentToolbox.overlay,
.new-timeline-container #currentToolbox.overlay,
#ribbonBar .time-line-buttons.overlay,
.timeline-container .time-line-buttons.overlay,
.new-timeline-container .time-line-buttons.overlay {
  position: fixed;
  background-color: white;
  border-bottom: 2px solid #3c3c3b;
  width: 100%;
}
#ribbonBar #currentToolbox .scroll-button,
.timeline-container #currentToolbox .scroll-button,
.new-timeline-container #currentToolbox .scroll-button,
#ribbonBar .time-line-buttons .scroll-button,
.timeline-container .time-line-buttons .scroll-button,
.new-timeline-container .time-line-buttons .scroll-button {
  display: none;
}
#ribbonBar #currentToolbox .ribbon-content,
.timeline-container #currentToolbox .ribbon-content,
.new-timeline-container #currentToolbox .ribbon-content,
#ribbonBar .time-line-buttons .ribbon-content,
.timeline-container .time-line-buttons .ribbon-content,
.new-timeline-container .time-line-buttons .ribbon-content {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
#ribbonBar #currentToolbox .ribbon-content .ribbon-favourites-container,
.timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container,
.new-timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container,
#ribbonBar .time-line-buttons .ribbon-content .ribbon-favourites-container,
.timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container,
.new-timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container {
  display: flex;
  flex: 1;
  position: relative;
  min-height: 52px;
}
#ribbonBar #currentToolbox .ribbon-content .ribbon-favourites-container.hidden,
.timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container.hidden,
.new-timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container.hidden,
#ribbonBar .time-line-buttons .ribbon-content .ribbon-favourites-container.hidden,
.timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container.hidden,
.new-timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container.hidden {
  display: none;
}
#ribbonBar #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items,
.timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items,
.new-timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items,
#ribbonBar .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items,
.timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items,
.new-timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items {
  display: flex;
  flex: 1;
  justify-content: flex-start;
  box-sizing: border-box;
  border-right: 1px solid #ededed;
  margin-right: 5px;
}
#ribbonBar #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item,
.timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item,
.new-timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item,
#ribbonBar .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item,
.timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item,
.new-timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item {
  display: flex;
  max-width: 100px;
  height: 80px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  margin: 0;
}
#ribbonBar #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item,
.timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item,
.new-timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item,
#ribbonBar .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item,
.timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item,
.new-timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item {
  height: 80px;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
}
#ribbonBar #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .favourite-box,
.timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .favourite-box,
.new-timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .favourite-box,
#ribbonBar .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .favourite-box,
.timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .favourite-box,
.new-timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .favourite-box {
  margin: 0;
}
#ribbonBar #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .image-wrapper,
.timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .image-wrapper,
.new-timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .image-wrapper,
#ribbonBar .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .image-wrapper,
.timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .image-wrapper,
.new-timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .image-wrapper {
  height: auto;
}
#ribbonBar #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .lighting,
.timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .lighting,
.new-timeline-container #currentToolbox .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .lighting,
#ribbonBar .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .lighting,
.timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .lighting,
.new-timeline-container .time-line-buttons .ribbon-content .ribbon-favourites-container .ribbon-favourites-items .ribbon-favourites-item .favourites-item .lighting {
  top: 5px;
  right: 0;
}
#ribbonBar #currentToolbox.with-scroll-buttons,
.timeline-container #currentToolbox.with-scroll-buttons,
.new-timeline-container #currentToolbox.with-scroll-buttons,
#ribbonBar .time-line-buttons.with-scroll-buttons,
.timeline-container .time-line-buttons.with-scroll-buttons,
.new-timeline-container .time-line-buttons.with-scroll-buttons {
  position: relative;
}
#ribbonBar #currentToolbox.with-scroll-buttons .scroll-button,
.timeline-container #currentToolbox.with-scroll-buttons .scroll-button,
.new-timeline-container #currentToolbox.with-scroll-buttons .scroll-button,
#ribbonBar .time-line-buttons.with-scroll-buttons .scroll-button,
.timeline-container .time-line-buttons.with-scroll-buttons .scroll-button,
.new-timeline-container .time-line-buttons.with-scroll-buttons .scroll-button {
  display: none;
  position: absolute;
  top: 10px;
  width: 10px;
  height: 80px;
  background: #ffffff no-repeat center;
  border: 1px solid #a7a9ac;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 999999989;
  will-change: transform;
}
#ribbonBar #currentToolbox.with-scroll-buttons .scroll-button:hover,
.timeline-container #currentToolbox.with-scroll-buttons .scroll-button:hover,
.new-timeline-container #currentToolbox.with-scroll-buttons .scroll-button:hover,
#ribbonBar .time-line-buttons.with-scroll-buttons .scroll-button:hover,
.timeline-container .time-line-buttons.with-scroll-buttons .scroll-button:hover,
.new-timeline-container .time-line-buttons.with-scroll-buttons .scroll-button:hover {
  background-color: #d9ead2;
}
#ribbonBar #currentToolbox.with-scroll-buttons .scroll-button.right,
.timeline-container #currentToolbox.with-scroll-buttons .scroll-button.right,
.new-timeline-container #currentToolbox.with-scroll-buttons .scroll-button.right,
#ribbonBar .time-line-buttons.with-scroll-buttons .scroll-button.right,
.timeline-container .time-line-buttons.with-scroll-buttons .scroll-button.right,
.new-timeline-container .time-line-buttons.with-scroll-buttons .scroll-button.right {
  right: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0IDgiIHdpZHRoPSI0IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0wLDAgTDQsNCBMIDAsOCBaIiBmaWxsPSIjODI4MjgyIi8+PC9zdmc+);
}
#ribbonBar #currentToolbox.with-scroll-buttons .scroll-button.right::before,
.timeline-container #currentToolbox.with-scroll-buttons .scroll-button.right::before,
.new-timeline-container #currentToolbox.with-scroll-buttons .scroll-button.right::before,
#ribbonBar .time-line-buttons.with-scroll-buttons .scroll-button.right::before,
.timeline-container .time-line-buttons.with-scroll-buttons .scroll-button.right::before,
.new-timeline-container .time-line-buttons.with-scroll-buttons .scroll-button.right::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 60px;
  height: 80px;
  margin: -1px 1px -1px -1px;
  background: linear-gradient(to right, #ffffff00 20%, #ededed);
}
#ribbonBar #currentToolbox.with-scroll-buttons .scroll-button.left,
.timeline-container #currentToolbox.with-scroll-buttons .scroll-button.left,
.new-timeline-container #currentToolbox.with-scroll-buttons .scroll-button.left,
#ribbonBar .time-line-buttons.with-scroll-buttons .scroll-button.left,
.timeline-container .time-line-buttons.with-scroll-buttons .scroll-button.left,
.new-timeline-container .time-line-buttons.with-scroll-buttons .scroll-button.left {
  left: 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0IDgiIHdpZHRoPSI0IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik00LDAgTDAsNCBMIDQsOCBaIiBmaWxsPSIjODI4MjgyIi8+PC9zdmc+);
}
#ribbonBar #currentToolbox.with-scroll-buttons .scroll-button.left::after,
.timeline-container #currentToolbox.with-scroll-buttons .scroll-button.left::after,
.new-timeline-container #currentToolbox.with-scroll-buttons .scroll-button.left::after,
#ribbonBar .time-line-buttons.with-scroll-buttons .scroll-button.left::after,
.timeline-container .time-line-buttons.with-scroll-buttons .scroll-button.left::after,
.new-timeline-container .time-line-buttons.with-scroll-buttons .scroll-button.left::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 60px;
  height: 80px;
  margin: -1px 0 -1px 1px;
  background: linear-gradient(to left, #ffffff00 20%, #ededed);
}
#ribbonBar #currentToolbox.with-scroll-buttons.with-right-button .scroll-button.right,
.timeline-container #currentToolbox.with-scroll-buttons.with-right-button .scroll-button.right,
.new-timeline-container #currentToolbox.with-scroll-buttons.with-right-button .scroll-button.right,
#ribbonBar .time-line-buttons.with-scroll-buttons.with-right-button .scroll-button.right,
.timeline-container .time-line-buttons.with-scroll-buttons.with-right-button .scroll-button.right,
.new-timeline-container .time-line-buttons.with-scroll-buttons.with-right-button .scroll-button.right {
  display: block;
}
#ribbonBar #currentToolbox.with-scroll-buttons.with-left-button .scroll-button.left,
.timeline-container #currentToolbox.with-scroll-buttons.with-left-button .scroll-button.left,
.new-timeline-container #currentToolbox.with-scroll-buttons.with-left-button .scroll-button.left,
#ribbonBar .time-line-buttons.with-scroll-buttons.with-left-button .scroll-button.left,
.timeline-container .time-line-buttons.with-scroll-buttons.with-left-button .scroll-button.left,
.new-timeline-container .time-line-buttons.with-scroll-buttons.with-left-button .scroll-button.left {
  display: block;
}
#ribbonBar #currentToolbox.no-animation,
.timeline-container #currentToolbox.no-animation,
.new-timeline-container #currentToolbox.no-animation,
#ribbonBar .time-line-buttons.no-animation,
.timeline-container .time-line-buttons.no-animation,
.new-timeline-container .time-line-buttons.no-animation {
  animation: none;
  overflow: visible;
}
#ribbonBar #currentToolbox.collapsed,
.timeline-container #currentToolbox.collapsed,
.new-timeline-container #currentToolbox.collapsed,
#ribbonBar .time-line-buttons.collapsed,
.timeline-container .time-line-buttons.collapsed,
.new-timeline-container .time-line-buttons.collapsed {
  height: 0;
  padding: 0 10px;
  overflow: hidden;
}
#ribbonBar #currentToolbox button:focus,
.timeline-container #currentToolbox button:focus,
.new-timeline-container #currentToolbox button:focus,
#ribbonBar .time-line-buttons button:focus,
.timeline-container .time-line-buttons button:focus,
.new-timeline-container .time-line-buttons button:focus,
#ribbonBar #currentToolbox button:active,
.timeline-container #currentToolbox button:active,
.new-timeline-container #currentToolbox button:active,
#ribbonBar .time-line-buttons button:active,
.timeline-container .time-line-buttons button:active,
.new-timeline-container .time-line-buttons button:active {
  outline: none;
  box-shadow: none;
}
#ribbonBar #currentToolbox .ribbon-button,
.timeline-container #currentToolbox .ribbon-button,
.new-timeline-container #currentToolbox .ribbon-button,
#ribbonBar .time-line-buttons .ribbon-button,
.timeline-container .time-line-buttons .ribbon-button,
.new-timeline-container .time-line-buttons .ribbon-button,
#ribbonBar #currentToolbox .ribbon-dropdown,
.timeline-container #currentToolbox .ribbon-dropdown,
.new-timeline-container #currentToolbox .ribbon-dropdown,
#ribbonBar .time-line-buttons .ribbon-dropdown,
.timeline-container .time-line-buttons .ribbon-dropdown,
.new-timeline-container .time-line-buttons .ribbon-dropdown,
#ribbonBar #currentToolbox .ribbon-select,
.timeline-container #currentToolbox .ribbon-select,
.new-timeline-container #currentToolbox .ribbon-select,
#ribbonBar .time-line-buttons .ribbon-select,
.timeline-container .time-line-buttons .ribbon-select,
.new-timeline-container .time-line-buttons .ribbon-select,
#ribbonBar #currentToolbox .ribbon-toggle,
.timeline-container #currentToolbox .ribbon-toggle,
.new-timeline-container #currentToolbox .ribbon-toggle,
#ribbonBar .time-line-buttons .ribbon-toggle,
.timeline-container .time-line-buttons .ribbon-toggle,
.new-timeline-container .time-line-buttons .ribbon-toggle {
  height: 80px;
  background: transparent;
  border: 1px solid transparent;
  margin: 0;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  max-width: 100px;
  min-width: 75px;
  color: #3c3c3b;
  cursor: pointer;
}
#ribbonBar #currentToolbox .ribbon-button.wide-button,
.timeline-container #currentToolbox .ribbon-button.wide-button,
.new-timeline-container #currentToolbox .ribbon-button.wide-button,
#ribbonBar .time-line-buttons .ribbon-button.wide-button,
.timeline-container .time-line-buttons .ribbon-button.wide-button,
.new-timeline-container .time-line-buttons .ribbon-button.wide-button,
#ribbonBar #currentToolbox .ribbon-dropdown.wide-button,
.timeline-container #currentToolbox .ribbon-dropdown.wide-button,
.new-timeline-container #currentToolbox .ribbon-dropdown.wide-button,
#ribbonBar .time-line-buttons .ribbon-dropdown.wide-button,
.timeline-container .time-line-buttons .ribbon-dropdown.wide-button,
.new-timeline-container .time-line-buttons .ribbon-dropdown.wide-button,
#ribbonBar #currentToolbox .ribbon-select.wide-button,
.timeline-container #currentToolbox .ribbon-select.wide-button,
.new-timeline-container #currentToolbox .ribbon-select.wide-button,
#ribbonBar .time-line-buttons .ribbon-select.wide-button,
.timeline-container .time-line-buttons .ribbon-select.wide-button,
.new-timeline-container .time-line-buttons .ribbon-select.wide-button,
#ribbonBar #currentToolbox .ribbon-toggle.wide-button,
.timeline-container #currentToolbox .ribbon-toggle.wide-button,
.new-timeline-container #currentToolbox .ribbon-toggle.wide-button,
#ribbonBar .time-line-buttons .ribbon-toggle.wide-button,
.timeline-container .time-line-buttons .ribbon-toggle.wide-button,
.new-timeline-container .time-line-buttons .ribbon-toggle.wide-button {
  max-width: 110px;
}
#ribbonBar #currentToolbox .ribbon-button.active,
.timeline-container #currentToolbox .ribbon-button.active,
.new-timeline-container #currentToolbox .ribbon-button.active,
#ribbonBar .time-line-buttons .ribbon-button.active,
.timeline-container .time-line-buttons .ribbon-button.active,
.new-timeline-container .time-line-buttons .ribbon-button.active,
#ribbonBar #currentToolbox .ribbon-dropdown.active,
.timeline-container #currentToolbox .ribbon-dropdown.active,
.new-timeline-container #currentToolbox .ribbon-dropdown.active,
#ribbonBar .time-line-buttons .ribbon-dropdown.active,
.timeline-container .time-line-buttons .ribbon-dropdown.active,
.new-timeline-container .time-line-buttons .ribbon-dropdown.active,
#ribbonBar #currentToolbox .ribbon-select.active,
.timeline-container #currentToolbox .ribbon-select.active,
.new-timeline-container #currentToolbox .ribbon-select.active,
#ribbonBar .time-line-buttons .ribbon-select.active,
.timeline-container .time-line-buttons .ribbon-select.active,
.new-timeline-container .time-line-buttons .ribbon-select.active,
#ribbonBar #currentToolbox .ribbon-toggle.active,
.timeline-container #currentToolbox .ribbon-toggle.active,
.new-timeline-container #currentToolbox .ribbon-toggle.active,
#ribbonBar .time-line-buttons .ribbon-toggle.active,
.timeline-container .time-line-buttons .ribbon-toggle.active,
.new-timeline-container .time-line-buttons .ribbon-toggle.active,
#ribbonBar #currentToolbox .ribbon-button:active,
.timeline-container #currentToolbox .ribbon-button:active,
.new-timeline-container #currentToolbox .ribbon-button:active,
#ribbonBar .time-line-buttons .ribbon-button:active,
.timeline-container .time-line-buttons .ribbon-button:active,
.new-timeline-container .time-line-buttons .ribbon-button:active,
#ribbonBar #currentToolbox .ribbon-dropdown:active,
.timeline-container #currentToolbox .ribbon-dropdown:active,
.new-timeline-container #currentToolbox .ribbon-dropdown:active,
#ribbonBar .time-line-buttons .ribbon-dropdown:active,
.timeline-container .time-line-buttons .ribbon-dropdown:active,
.new-timeline-container .time-line-buttons .ribbon-dropdown:active,
#ribbonBar #currentToolbox .ribbon-select:active,
.timeline-container #currentToolbox .ribbon-select:active,
.new-timeline-container #currentToolbox .ribbon-select:active,
#ribbonBar .time-line-buttons .ribbon-select:active,
.timeline-container .time-line-buttons .ribbon-select:active,
.new-timeline-container .time-line-buttons .ribbon-select:active,
#ribbonBar #currentToolbox .ribbon-toggle:active,
.timeline-container #currentToolbox .ribbon-toggle:active,
.new-timeline-container #currentToolbox .ribbon-toggle:active,
#ribbonBar .time-line-buttons .ribbon-toggle:active,
.timeline-container .time-line-buttons .ribbon-toggle:active,
.new-timeline-container .time-line-buttons .ribbon-toggle:active {
  border-color: #89c377;
  background-color: #d9ead2;
  color: #56aa1c;
}
#ribbonBar #currentToolbox .ribbon-button:hover,
.timeline-container #currentToolbox .ribbon-button:hover,
.new-timeline-container #currentToolbox .ribbon-button:hover,
#ribbonBar .time-line-buttons .ribbon-button:hover,
.timeline-container .time-line-buttons .ribbon-button:hover,
.new-timeline-container .time-line-buttons .ribbon-button:hover,
#ribbonBar #currentToolbox .ribbon-dropdown:hover,
.timeline-container #currentToolbox .ribbon-dropdown:hover,
.new-timeline-container #currentToolbox .ribbon-dropdown:hover,
#ribbonBar .time-line-buttons .ribbon-dropdown:hover,
.timeline-container .time-line-buttons .ribbon-dropdown:hover,
.new-timeline-container .time-line-buttons .ribbon-dropdown:hover,
#ribbonBar #currentToolbox .ribbon-select:hover,
.timeline-container #currentToolbox .ribbon-select:hover,
.new-timeline-container #currentToolbox .ribbon-select:hover,
#ribbonBar .time-line-buttons .ribbon-select:hover,
.timeline-container .time-line-buttons .ribbon-select:hover,
.new-timeline-container .time-line-buttons .ribbon-select:hover,
#ribbonBar #currentToolbox .ribbon-toggle:hover,
.timeline-container #currentToolbox .ribbon-toggle:hover,
.new-timeline-container #currentToolbox .ribbon-toggle:hover,
#ribbonBar .time-line-buttons .ribbon-toggle:hover,
.timeline-container .time-line-buttons .ribbon-toggle:hover,
.new-timeline-container .time-line-buttons .ribbon-toggle:hover {
  background-color: #d9ead2;
  color: #56aa1c;
}
#ribbonBar #currentToolbox .ribbon-button:disabled,
.timeline-container #currentToolbox .ribbon-button:disabled,
.new-timeline-container #currentToolbox .ribbon-button:disabled,
#ribbonBar .time-line-buttons .ribbon-button:disabled,
.timeline-container .time-line-buttons .ribbon-button:disabled,
.new-timeline-container .time-line-buttons .ribbon-button:disabled,
#ribbonBar #currentToolbox .ribbon-dropdown:disabled,
.timeline-container #currentToolbox .ribbon-dropdown:disabled,
.new-timeline-container #currentToolbox .ribbon-dropdown:disabled,
#ribbonBar .time-line-buttons .ribbon-dropdown:disabled,
.timeline-container .time-line-buttons .ribbon-dropdown:disabled,
.new-timeline-container .time-line-buttons .ribbon-dropdown:disabled,
#ribbonBar #currentToolbox .ribbon-select:disabled,
.timeline-container #currentToolbox .ribbon-select:disabled,
.new-timeline-container #currentToolbox .ribbon-select:disabled,
#ribbonBar .time-line-buttons .ribbon-select:disabled,
.timeline-container .time-line-buttons .ribbon-select:disabled,
.new-timeline-container .time-line-buttons .ribbon-select:disabled,
#ribbonBar #currentToolbox .ribbon-toggle:disabled,
.timeline-container #currentToolbox .ribbon-toggle:disabled,
.new-timeline-container #currentToolbox .ribbon-toggle:disabled,
#ribbonBar .time-line-buttons .ribbon-toggle:disabled,
.timeline-container .time-line-buttons .ribbon-toggle:disabled,
.new-timeline-container .time-line-buttons .ribbon-toggle:disabled {
  opacity: 0.5;
  cursor: default;
  background-color: transparent;
}
#ribbonBar #currentToolbox .ribbon-button:disabled:hover,
.timeline-container #currentToolbox .ribbon-button:disabled:hover,
.new-timeline-container #currentToolbox .ribbon-button:disabled:hover,
#ribbonBar .time-line-buttons .ribbon-button:disabled:hover,
.timeline-container .time-line-buttons .ribbon-button:disabled:hover,
.new-timeline-container .time-line-buttons .ribbon-button:disabled:hover,
#ribbonBar #currentToolbox .ribbon-dropdown:disabled:hover,
.timeline-container #currentToolbox .ribbon-dropdown:disabled:hover,
.new-timeline-container #currentToolbox .ribbon-dropdown:disabled:hover,
#ribbonBar .time-line-buttons .ribbon-dropdown:disabled:hover,
.timeline-container .time-line-buttons .ribbon-dropdown:disabled:hover,
.new-timeline-container .time-line-buttons .ribbon-dropdown:disabled:hover,
#ribbonBar #currentToolbox .ribbon-select:disabled:hover,
.timeline-container #currentToolbox .ribbon-select:disabled:hover,
.new-timeline-container #currentToolbox .ribbon-select:disabled:hover,
#ribbonBar .time-line-buttons .ribbon-select:disabled:hover,
.timeline-container .time-line-buttons .ribbon-select:disabled:hover,
.new-timeline-container .time-line-buttons .ribbon-select:disabled:hover,
#ribbonBar #currentToolbox .ribbon-toggle:disabled:hover,
.timeline-container #currentToolbox .ribbon-toggle:disabled:hover,
.new-timeline-container #currentToolbox .ribbon-toggle:disabled:hover,
#ribbonBar .time-line-buttons .ribbon-toggle:disabled:hover,
.timeline-container .time-line-buttons .ribbon-toggle:disabled:hover,
.new-timeline-container .time-line-buttons .ribbon-toggle:disabled:hover {
  background-color: transparent;
  color: #3c3c3b;
}
#ribbonBar #currentToolbox .ribbon-button:disabled:active,
.timeline-container #currentToolbox .ribbon-button:disabled:active,
.new-timeline-container #currentToolbox .ribbon-button:disabled:active,
#ribbonBar .time-line-buttons .ribbon-button:disabled:active,
.timeline-container .time-line-buttons .ribbon-button:disabled:active,
.new-timeline-container .time-line-buttons .ribbon-button:disabled:active,
#ribbonBar #currentToolbox .ribbon-dropdown:disabled:active,
.timeline-container #currentToolbox .ribbon-dropdown:disabled:active,
.new-timeline-container #currentToolbox .ribbon-dropdown:disabled:active,
#ribbonBar .time-line-buttons .ribbon-dropdown:disabled:active,
.timeline-container .time-line-buttons .ribbon-dropdown:disabled:active,
.new-timeline-container .time-line-buttons .ribbon-dropdown:disabled:active,
#ribbonBar #currentToolbox .ribbon-select:disabled:active,
.timeline-container #currentToolbox .ribbon-select:disabled:active,
.new-timeline-container #currentToolbox .ribbon-select:disabled:active,
#ribbonBar .time-line-buttons .ribbon-select:disabled:active,
.timeline-container .time-line-buttons .ribbon-select:disabled:active,
.new-timeline-container .time-line-buttons .ribbon-select:disabled:active,
#ribbonBar #currentToolbox .ribbon-toggle:disabled:active,
.timeline-container #currentToolbox .ribbon-toggle:disabled:active,
.new-timeline-container #currentToolbox .ribbon-toggle:disabled:active,
#ribbonBar .time-line-buttons .ribbon-toggle:disabled:active,
.timeline-container .time-line-buttons .ribbon-toggle:disabled:active,
.new-timeline-container .time-line-buttons .ribbon-toggle:disabled:active,
#ribbonBar #currentToolbox .ribbon-button:disabled.active,
.timeline-container #currentToolbox .ribbon-button:disabled.active,
.new-timeline-container #currentToolbox .ribbon-button:disabled.active,
#ribbonBar .time-line-buttons .ribbon-button:disabled.active,
.timeline-container .time-line-buttons .ribbon-button:disabled.active,
.new-timeline-container .time-line-buttons .ribbon-button:disabled.active,
#ribbonBar #currentToolbox .ribbon-dropdown:disabled.active,
.timeline-container #currentToolbox .ribbon-dropdown:disabled.active,
.new-timeline-container #currentToolbox .ribbon-dropdown:disabled.active,
#ribbonBar .time-line-buttons .ribbon-dropdown:disabled.active,
.timeline-container .time-line-buttons .ribbon-dropdown:disabled.active,
.new-timeline-container .time-line-buttons .ribbon-dropdown:disabled.active,
#ribbonBar #currentToolbox .ribbon-select:disabled.active,
.timeline-container #currentToolbox .ribbon-select:disabled.active,
.new-timeline-container #currentToolbox .ribbon-select:disabled.active,
#ribbonBar .time-line-buttons .ribbon-select:disabled.active,
.timeline-container .time-line-buttons .ribbon-select:disabled.active,
.new-timeline-container .time-line-buttons .ribbon-select:disabled.active,
#ribbonBar #currentToolbox .ribbon-toggle:disabled.active,
.timeline-container #currentToolbox .ribbon-toggle:disabled.active,
.new-timeline-container #currentToolbox .ribbon-toggle:disabled.active,
#ribbonBar .time-line-buttons .ribbon-toggle:disabled.active,
.timeline-container .time-line-buttons .ribbon-toggle:disabled.active,
.new-timeline-container .time-line-buttons .ribbon-toggle:disabled.active {
  border-color: transparent;
}
#ribbonBar #currentToolbox .ribbon-button figure,
.timeline-container #currentToolbox .ribbon-button figure,
.new-timeline-container #currentToolbox .ribbon-button figure,
#ribbonBar .time-line-buttons .ribbon-button figure,
.timeline-container .time-line-buttons .ribbon-button figure,
.new-timeline-container .time-line-buttons .ribbon-button figure,
#ribbonBar #currentToolbox .ribbon-dropdown figure,
.timeline-container #currentToolbox .ribbon-dropdown figure,
.new-timeline-container #currentToolbox .ribbon-dropdown figure,
#ribbonBar .time-line-buttons .ribbon-dropdown figure,
.timeline-container .time-line-buttons .ribbon-dropdown figure,
.new-timeline-container .time-line-buttons .ribbon-dropdown figure,
#ribbonBar #currentToolbox .ribbon-select figure,
.timeline-container #currentToolbox .ribbon-select figure,
.new-timeline-container #currentToolbox .ribbon-select figure,
#ribbonBar .time-line-buttons .ribbon-select figure,
.timeline-container .time-line-buttons .ribbon-select figure,
.new-timeline-container .time-line-buttons .ribbon-select figure,
#ribbonBar #currentToolbox .ribbon-toggle figure,
.timeline-container #currentToolbox .ribbon-toggle figure,
.new-timeline-container #currentToolbox .ribbon-toggle figure,
#ribbonBar .time-line-buttons .ribbon-toggle figure,
.timeline-container .time-line-buttons .ribbon-toggle figure,
.new-timeline-container .time-line-buttons .ribbon-toggle figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  -webkit-user-select: none;
}
#ribbonBar #currentToolbox .ribbon-button figure > div,
.timeline-container #currentToolbox .ribbon-button figure > div,
.new-timeline-container #currentToolbox .ribbon-button figure > div,
#ribbonBar .time-line-buttons .ribbon-button figure > div,
.timeline-container .time-line-buttons .ribbon-button figure > div,
.new-timeline-container .time-line-buttons .ribbon-button figure > div,
#ribbonBar #currentToolbox .ribbon-dropdown figure > div,
.timeline-container #currentToolbox .ribbon-dropdown figure > div,
.new-timeline-container #currentToolbox .ribbon-dropdown figure > div,
#ribbonBar .time-line-buttons .ribbon-dropdown figure > div,
.timeline-container .time-line-buttons .ribbon-dropdown figure > div,
.new-timeline-container .time-line-buttons .ribbon-dropdown figure > div,
#ribbonBar #currentToolbox .ribbon-select figure > div,
.timeline-container #currentToolbox .ribbon-select figure > div,
.new-timeline-container #currentToolbox .ribbon-select figure > div,
#ribbonBar .time-line-buttons .ribbon-select figure > div,
.timeline-container .time-line-buttons .ribbon-select figure > div,
.new-timeline-container .time-line-buttons .ribbon-select figure > div,
#ribbonBar #currentToolbox .ribbon-toggle figure > div,
.timeline-container #currentToolbox .ribbon-toggle figure > div,
.new-timeline-container #currentToolbox .ribbon-toggle figure > div,
#ribbonBar .time-line-buttons .ribbon-toggle figure > div,
.timeline-container .time-line-buttons .ribbon-toggle figure > div,
.new-timeline-container .time-line-buttons .ribbon-toggle figure > div {
  width: 32px;
  height: 32px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-shrink: 0;
  -webkit-user-select: none;
}
#ribbonBar #currentToolbox .ribbon-button figure > div img,
.timeline-container #currentToolbox .ribbon-button figure > div img,
.new-timeline-container #currentToolbox .ribbon-button figure > div img,
#ribbonBar .time-line-buttons .ribbon-button figure > div img,
.timeline-container .time-line-buttons .ribbon-button figure > div img,
.new-timeline-container .time-line-buttons .ribbon-button figure > div img,
#ribbonBar #currentToolbox .ribbon-dropdown figure > div img,
.timeline-container #currentToolbox .ribbon-dropdown figure > div img,
.new-timeline-container #currentToolbox .ribbon-dropdown figure > div img,
#ribbonBar .time-line-buttons .ribbon-dropdown figure > div img,
.timeline-container .time-line-buttons .ribbon-dropdown figure > div img,
.new-timeline-container .time-line-buttons .ribbon-dropdown figure > div img,
#ribbonBar #currentToolbox .ribbon-select figure > div img,
.timeline-container #currentToolbox .ribbon-select figure > div img,
.new-timeline-container #currentToolbox .ribbon-select figure > div img,
#ribbonBar .time-line-buttons .ribbon-select figure > div img,
.timeline-container .time-line-buttons .ribbon-select figure > div img,
.new-timeline-container .time-line-buttons .ribbon-select figure > div img,
#ribbonBar #currentToolbox .ribbon-toggle figure > div img,
.timeline-container #currentToolbox .ribbon-toggle figure > div img,
.new-timeline-container #currentToolbox .ribbon-toggle figure > div img,
#ribbonBar .time-line-buttons .ribbon-toggle figure > div img,
.timeline-container .time-line-buttons .ribbon-toggle figure > div img,
.new-timeline-container .time-line-buttons .ribbon-toggle figure > div img {
  margin: auto;
  width: 32px;
  height: 32px;
  -webkit-user-select: none;
}
#ribbonBar #currentToolbox .ribbon-button figure figcaption,
.timeline-container #currentToolbox .ribbon-button figure figcaption,
.new-timeline-container #currentToolbox .ribbon-button figure figcaption,
#ribbonBar .time-line-buttons .ribbon-button figure figcaption,
.timeline-container .time-line-buttons .ribbon-button figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-button figure figcaption,
#ribbonBar #currentToolbox .ribbon-dropdown figure figcaption,
.timeline-container #currentToolbox .ribbon-dropdown figure figcaption,
.new-timeline-container #currentToolbox .ribbon-dropdown figure figcaption,
#ribbonBar .time-line-buttons .ribbon-dropdown figure figcaption,
.timeline-container .time-line-buttons .ribbon-dropdown figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-dropdown figure figcaption,
#ribbonBar #currentToolbox .ribbon-select figure figcaption,
.timeline-container #currentToolbox .ribbon-select figure figcaption,
.new-timeline-container #currentToolbox .ribbon-select figure figcaption,
#ribbonBar .time-line-buttons .ribbon-select figure figcaption,
.timeline-container .time-line-buttons .ribbon-select figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-select figure figcaption,
#ribbonBar #currentToolbox .ribbon-toggle figure figcaption,
.timeline-container #currentToolbox .ribbon-toggle figure figcaption,
.new-timeline-container #currentToolbox .ribbon-toggle figure figcaption,
#ribbonBar .time-line-buttons .ribbon-toggle figure figcaption,
.timeline-container .time-line-buttons .ribbon-toggle figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-toggle figure figcaption {
  text-align: center;
  margin: 2px -2px 0;
  line-height: 15px;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  max-height: 30px;
  display: block;
  font-size: 95%;
  display: -webkit-box;
  display: -ms-box;
  display: box;
  -webkit-line-clamp: 2;
  -ms-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -ms-box-orient: vertical;
  box-orient: vertical;
  -webkit-user-select: none;
}
#ribbonBar #currentToolbox .ribbon-toggle ribbon-button,
.timeline-container #currentToolbox .ribbon-toggle ribbon-button,
.new-timeline-container #currentToolbox .ribbon-toggle ribbon-button,
#ribbonBar .time-line-buttons .ribbon-toggle ribbon-button,
.timeline-container .time-line-buttons .ribbon-toggle ribbon-button,
.new-timeline-container .time-line-buttons .ribbon-toggle ribbon-button {
  flex-grow: 1;
}
#ribbonBar #currentToolbox .ribbon-carousel-button,
.timeline-container #currentToolbox .ribbon-carousel-button,
.new-timeline-container #currentToolbox .ribbon-carousel-button,
#ribbonBar .time-line-buttons .ribbon-carousel-button,
.timeline-container .time-line-buttons .ribbon-carousel-button,
.new-timeline-container .time-line-buttons .ribbon-carousel-button {
  min-width: auto;
}
#ribbonBar #currentToolbox .ribbon-carousel-button figure div,
.timeline-container #currentToolbox .ribbon-carousel-button figure div,
.new-timeline-container #currentToolbox .ribbon-carousel-button figure div,
#ribbonBar .time-line-buttons .ribbon-carousel-button figure div,
.timeline-container .time-line-buttons .ribbon-carousel-button figure div,
.new-timeline-container .time-line-buttons .ribbon-carousel-button figure div {
  margin: 0 !important;
}
#ribbonBar #currentToolbox #autoPlay.lang-es,
.timeline-container #currentToolbox #autoPlay.lang-es,
.new-timeline-container #currentToolbox #autoPlay.lang-es,
#ribbonBar .time-line-buttons #autoPlay.lang-es,
.timeline-container .time-line-buttons #autoPlay.lang-es,
.new-timeline-container .time-line-buttons #autoPlay.lang-es {
  max-width: 160px;
}
#ribbonBar #currentToolbox #autoPlay.lang-fr,
.timeline-container #currentToolbox #autoPlay.lang-fr,
.new-timeline-container #currentToolbox #autoPlay.lang-fr,
#ribbonBar .time-line-buttons #autoPlay.lang-fr,
.timeline-container .time-line-buttons #autoPlay.lang-fr,
.new-timeline-container .time-line-buttons #autoPlay.lang-fr {
  max-width: 140px;
}
#ribbonBar #currentToolbox #autoPlay.lang-nl,
.timeline-container #currentToolbox #autoPlay.lang-nl,
.new-timeline-container #currentToolbox #autoPlay.lang-nl,
#ribbonBar .time-line-buttons #autoPlay.lang-nl,
.timeline-container .time-line-buttons #autoPlay.lang-nl,
.new-timeline-container .time-line-buttons #autoPlay.lang-nl,
#ribbonBar #currentToolbox #autoPlay.lang-de,
.timeline-container #currentToolbox #autoPlay.lang-de,
.new-timeline-container #currentToolbox #autoPlay.lang-de,
#ribbonBar .time-line-buttons #autoPlay.lang-de,
.timeline-container .time-line-buttons #autoPlay.lang-de,
.new-timeline-container .time-line-buttons #autoPlay.lang-de {
  max-width: 125px;
}
#ribbonBar #currentToolbox #eventsWindow.lang-es,
.timeline-container #currentToolbox #eventsWindow.lang-es,
.new-timeline-container #currentToolbox #eventsWindow.lang-es,
#ribbonBar .time-line-buttons #eventsWindow.lang-es,
.timeline-container .time-line-buttons #eventsWindow.lang-es,
.new-timeline-container .time-line-buttons #eventsWindow.lang-es {
  max-width: 140px;
}
#ribbonBar #currentToolbox #addNewEntity > .ribbon-button,
.timeline-container #currentToolbox #addNewEntity > .ribbon-button,
.new-timeline-container #currentToolbox #addNewEntity > .ribbon-button,
#ribbonBar .time-line-buttons #addNewEntity > .ribbon-button,
.timeline-container .time-line-buttons #addNewEntity > .ribbon-button,
.new-timeline-container .time-line-buttons #addNewEntity > .ribbon-button {
  min-width: 82px;
}
#ribbonBar #currentToolbox #addNewEntity.lang-de,
.timeline-container #currentToolbox #addNewEntity.lang-de,
.new-timeline-container #currentToolbox #addNewEntity.lang-de,
#ribbonBar .time-line-buttons #addNewEntity.lang-de,
.timeline-container .time-line-buttons #addNewEntity.lang-de,
.new-timeline-container .time-line-buttons #addNewEntity.lang-de {
  min-width: 120px;
  max-width: 162px;
}
#ribbonBar #currentToolbox #addNewEntity.lang-de > .ribbon-button,
.timeline-container #currentToolbox #addNewEntity.lang-de > .ribbon-button,
.new-timeline-container #currentToolbox #addNewEntity.lang-de > .ribbon-button,
#ribbonBar .time-line-buttons #addNewEntity.lang-de > .ribbon-button,
.timeline-container .time-line-buttons #addNewEntity.lang-de > .ribbon-button,
.new-timeline-container .time-line-buttons #addNewEntity.lang-de > .ribbon-button {
  min-width: 140px;
}
#ribbonBar #currentToolbox #addNewEntity.lang-nl,
.timeline-container #currentToolbox #addNewEntity.lang-nl,
.new-timeline-container #currentToolbox #addNewEntity.lang-nl,
#ribbonBar .time-line-buttons #addNewEntity.lang-nl,
.timeline-container .time-line-buttons #addNewEntity.lang-nl,
.new-timeline-container .time-line-buttons #addNewEntity.lang-nl {
  min-width: 120px;
  max-width: 165px;
}
#ribbonBar #currentToolbox #addNewEntity.lang-nl > .ribbon-button,
.timeline-container #currentToolbox #addNewEntity.lang-nl > .ribbon-button,
.new-timeline-container #currentToolbox #addNewEntity.lang-nl > .ribbon-button,
#ribbonBar .time-line-buttons #addNewEntity.lang-nl > .ribbon-button,
.timeline-container .time-line-buttons #addNewEntity.lang-nl > .ribbon-button,
.new-timeline-container .time-line-buttons #addNewEntity.lang-nl > .ribbon-button {
  min-width: 145px;
}
#ribbonBar #currentToolbox .ribbon-dropdown,
.timeline-container #currentToolbox .ribbon-dropdown,
.new-timeline-container #currentToolbox .ribbon-dropdown,
#ribbonBar .time-line-buttons .ribbon-dropdown,
.timeline-container .time-line-buttons .ribbon-dropdown,
.new-timeline-container .time-line-buttons .ribbon-dropdown,
#ribbonBar #currentToolbox .ribbon-select,
.timeline-container #currentToolbox .ribbon-select,
.new-timeline-container #currentToolbox .ribbon-select,
#ribbonBar .time-line-buttons .ribbon-select,
.timeline-container .time-line-buttons .ribbon-select,
.new-timeline-container .time-line-buttons .ribbon-select,
#ribbonBar #currentToolbox .ribbon-toggle,
.timeline-container #currentToolbox .ribbon-toggle,
.new-timeline-container #currentToolbox .ribbon-toggle,
#ribbonBar .time-line-buttons .ribbon-toggle,
.timeline-container .time-line-buttons .ribbon-toggle,
.new-timeline-container .time-line-buttons .ribbon-toggle {
  padding: 0;
  flex-direction: row;
  position: relative;
  border: none;
}
#ribbonBar #currentToolbox .ribbon-dropdown.disabled:hover,
.timeline-container #currentToolbox .ribbon-dropdown.disabled:hover,
.new-timeline-container #currentToolbox .ribbon-dropdown.disabled:hover,
#ribbonBar .time-line-buttons .ribbon-dropdown.disabled:hover,
.timeline-container .time-line-buttons .ribbon-dropdown.disabled:hover,
.new-timeline-container .time-line-buttons .ribbon-dropdown.disabled:hover,
#ribbonBar #currentToolbox .ribbon-select.disabled:hover,
.timeline-container #currentToolbox .ribbon-select.disabled:hover,
.new-timeline-container #currentToolbox .ribbon-select.disabled:hover,
#ribbonBar .time-line-buttons .ribbon-select.disabled:hover,
.timeline-container .time-line-buttons .ribbon-select.disabled:hover,
.new-timeline-container .time-line-buttons .ribbon-select.disabled:hover,
#ribbonBar #currentToolbox .ribbon-toggle.disabled:hover,
.timeline-container #currentToolbox .ribbon-toggle.disabled:hover,
.new-timeline-container #currentToolbox .ribbon-toggle.disabled:hover,
#ribbonBar .time-line-buttons .ribbon-toggle.disabled:hover,
.timeline-container .time-line-buttons .ribbon-toggle.disabled:hover,
.new-timeline-container .time-line-buttons .ribbon-toggle.disabled:hover {
  background-color: transparent;
  color: #3c3c3b;
}
#ribbonBar #currentToolbox .ribbon-dropdown .toggle-options,
.timeline-container #currentToolbox .ribbon-dropdown .toggle-options,
.new-timeline-container #currentToolbox .ribbon-dropdown .toggle-options,
#ribbonBar .time-line-buttons .ribbon-dropdown .toggle-options,
.timeline-container .time-line-buttons .ribbon-dropdown .toggle-options,
.new-timeline-container .time-line-buttons .ribbon-dropdown .toggle-options,
#ribbonBar #currentToolbox .ribbon-select .toggle-options,
.timeline-container #currentToolbox .ribbon-select .toggle-options,
.new-timeline-container #currentToolbox .ribbon-select .toggle-options,
#ribbonBar .time-line-buttons .ribbon-select .toggle-options,
.timeline-container .time-line-buttons .ribbon-select .toggle-options,
.new-timeline-container .time-line-buttons .ribbon-select .toggle-options,
#ribbonBar #currentToolbox .ribbon-toggle .toggle-options,
.timeline-container #currentToolbox .ribbon-toggle .toggle-options,
.new-timeline-container #currentToolbox .ribbon-toggle .toggle-options,
#ribbonBar .time-line-buttons .ribbon-toggle .toggle-options,
.timeline-container .time-line-buttons .ribbon-toggle .toggle-options,
.new-timeline-container .time-line-buttons .ribbon-toggle .toggle-options {
  width: 22px;
  min-width: 10px;
  border: 1px solid transparent;
  padding: 0;
  position: relative;
  background: transparent;
}
#ribbonBar #currentToolbox .ribbon-dropdown .toggle-options:hover,
.timeline-container #currentToolbox .ribbon-dropdown .toggle-options:hover,
.new-timeline-container #currentToolbox .ribbon-dropdown .toggle-options:hover,
#ribbonBar .time-line-buttons .ribbon-dropdown .toggle-options:hover,
.timeline-container .time-line-buttons .ribbon-dropdown .toggle-options:hover,
.new-timeline-container .time-line-buttons .ribbon-dropdown .toggle-options:hover,
#ribbonBar #currentToolbox .ribbon-select .toggle-options:hover,
.timeline-container #currentToolbox .ribbon-select .toggle-options:hover,
.new-timeline-container #currentToolbox .ribbon-select .toggle-options:hover,
#ribbonBar .time-line-buttons .ribbon-select .toggle-options:hover,
.timeline-container .time-line-buttons .ribbon-select .toggle-options:hover,
.new-timeline-container .time-line-buttons .ribbon-select .toggle-options:hover,
#ribbonBar #currentToolbox .ribbon-toggle .toggle-options:hover,
.timeline-container #currentToolbox .ribbon-toggle .toggle-options:hover,
.new-timeline-container #currentToolbox .ribbon-toggle .toggle-options:hover,
#ribbonBar .time-line-buttons .ribbon-toggle .toggle-options:hover,
.timeline-container .time-line-buttons .ribbon-toggle .toggle-options:hover,
.new-timeline-container .time-line-buttons .ribbon-toggle .toggle-options:hover {
  background: #89c377;
}
#ribbonBar #currentToolbox .ribbon-dropdown .toggle-options:active,
.timeline-container #currentToolbox .ribbon-dropdown .toggle-options:active,
.new-timeline-container #currentToolbox .ribbon-dropdown .toggle-options:active,
#ribbonBar .time-line-buttons .ribbon-dropdown .toggle-options:active,
.timeline-container .time-line-buttons .ribbon-dropdown .toggle-options:active,
.new-timeline-container .time-line-buttons .ribbon-dropdown .toggle-options:active,
#ribbonBar #currentToolbox .ribbon-select .toggle-options:active,
.timeline-container #currentToolbox .ribbon-select .toggle-options:active,
.new-timeline-container #currentToolbox .ribbon-select .toggle-options:active,
#ribbonBar .time-line-buttons .ribbon-select .toggle-options:active,
.timeline-container .time-line-buttons .ribbon-select .toggle-options:active,
.new-timeline-container .time-line-buttons .ribbon-select .toggle-options:active,
#ribbonBar #currentToolbox .ribbon-toggle .toggle-options:active,
.timeline-container #currentToolbox .ribbon-toggle .toggle-options:active,
.new-timeline-container #currentToolbox .ribbon-toggle .toggle-options:active,
#ribbonBar .time-line-buttons .ribbon-toggle .toggle-options:active,
.timeline-container .time-line-buttons .ribbon-toggle .toggle-options:active,
.new-timeline-container .time-line-buttons .ribbon-toggle .toggle-options:active {
  border-color: #89c377;
  background-color: #89c377;
}
#ribbonBar #currentToolbox .ribbon-dropdown .toggle-options:disabled,
.timeline-container #currentToolbox .ribbon-dropdown .toggle-options:disabled,
.new-timeline-container #currentToolbox .ribbon-dropdown .toggle-options:disabled,
#ribbonBar .time-line-buttons .ribbon-dropdown .toggle-options:disabled,
.timeline-container .time-line-buttons .ribbon-dropdown .toggle-options:disabled,
.new-timeline-container .time-line-buttons .ribbon-dropdown .toggle-options:disabled,
#ribbonBar #currentToolbox .ribbon-select .toggle-options:disabled,
.timeline-container #currentToolbox .ribbon-select .toggle-options:disabled,
.new-timeline-container #currentToolbox .ribbon-select .toggle-options:disabled,
#ribbonBar .time-line-buttons .ribbon-select .toggle-options:disabled,
.timeline-container .time-line-buttons .ribbon-select .toggle-options:disabled,
.new-timeline-container .time-line-buttons .ribbon-select .toggle-options:disabled,
#ribbonBar #currentToolbox .ribbon-toggle .toggle-options:disabled,
.timeline-container #currentToolbox .ribbon-toggle .toggle-options:disabled,
.new-timeline-container #currentToolbox .ribbon-toggle .toggle-options:disabled,
#ribbonBar .time-line-buttons .ribbon-toggle .toggle-options:disabled,
.timeline-container .time-line-buttons .ribbon-toggle .toggle-options:disabled,
.new-timeline-container .time-line-buttons .ribbon-toggle .toggle-options:disabled {
  opacity: 0.5;
}
#ribbonBar #currentToolbox .ribbon-dropdown .toggle-options:disabled:hover,
.timeline-container #currentToolbox .ribbon-dropdown .toggle-options:disabled:hover,
.new-timeline-container #currentToolbox .ribbon-dropdown .toggle-options:disabled:hover,
#ribbonBar .time-line-buttons .ribbon-dropdown .toggle-options:disabled:hover,
.timeline-container .time-line-buttons .ribbon-dropdown .toggle-options:disabled:hover,
.new-timeline-container .time-line-buttons .ribbon-dropdown .toggle-options:disabled:hover,
#ribbonBar #currentToolbox .ribbon-select .toggle-options:disabled:hover,
.timeline-container #currentToolbox .ribbon-select .toggle-options:disabled:hover,
.new-timeline-container #currentToolbox .ribbon-select .toggle-options:disabled:hover,
#ribbonBar .time-line-buttons .ribbon-select .toggle-options:disabled:hover,
.timeline-container .time-line-buttons .ribbon-select .toggle-options:disabled:hover,
.new-timeline-container .time-line-buttons .ribbon-select .toggle-options:disabled:hover,
#ribbonBar #currentToolbox .ribbon-toggle .toggle-options:disabled:hover,
.timeline-container #currentToolbox .ribbon-toggle .toggle-options:disabled:hover,
.new-timeline-container #currentToolbox .ribbon-toggle .toggle-options:disabled:hover,
#ribbonBar .time-line-buttons .ribbon-toggle .toggle-options:disabled:hover,
.timeline-container .time-line-buttons .ribbon-toggle .toggle-options:disabled:hover,
.new-timeline-container .time-line-buttons .ribbon-toggle .toggle-options:disabled:hover {
  background: transparent;
}
#ribbonBar #currentToolbox .ribbon-dropdown .toggle-options.active,
.timeline-container #currentToolbox .ribbon-dropdown .toggle-options.active,
.new-timeline-container #currentToolbox .ribbon-dropdown .toggle-options.active,
#ribbonBar .time-line-buttons .ribbon-dropdown .toggle-options.active,
.timeline-container .time-line-buttons .ribbon-dropdown .toggle-options.active,
.new-timeline-container .time-line-buttons .ribbon-dropdown .toggle-options.active,
#ribbonBar #currentToolbox .ribbon-select .toggle-options.active,
.timeline-container #currentToolbox .ribbon-select .toggle-options.active,
.new-timeline-container #currentToolbox .ribbon-select .toggle-options.active,
#ribbonBar .time-line-buttons .ribbon-select .toggle-options.active,
.timeline-container .time-line-buttons .ribbon-select .toggle-options.active,
.new-timeline-container .time-line-buttons .ribbon-select .toggle-options.active,
#ribbonBar #currentToolbox .ribbon-toggle .toggle-options.active,
.timeline-container #currentToolbox .ribbon-toggle .toggle-options.active,
.new-timeline-container #currentToolbox .ribbon-toggle .toggle-options.active,
#ribbonBar .time-line-buttons .ribbon-toggle .toggle-options.active,
.timeline-container .time-line-buttons .ribbon-toggle .toggle-options.active,
.new-timeline-container .time-line-buttons .ribbon-toggle .toggle-options.active {
  border-color: #89c377;
  background: transparent;
}
#ribbonBar #currentToolbox .ribbon-dropdown .toggle-options.active:hover,
.timeline-container #currentToolbox .ribbon-dropdown .toggle-options.active:hover,
.new-timeline-container #currentToolbox .ribbon-dropdown .toggle-options.active:hover,
#ribbonBar .time-line-buttons .ribbon-dropdown .toggle-options.active:hover,
.timeline-container .time-line-buttons .ribbon-dropdown .toggle-options.active:hover,
.new-timeline-container .time-line-buttons .ribbon-dropdown .toggle-options.active:hover,
#ribbonBar #currentToolbox .ribbon-select .toggle-options.active:hover,
.timeline-container #currentToolbox .ribbon-select .toggle-options.active:hover,
.new-timeline-container #currentToolbox .ribbon-select .toggle-options.active:hover,
#ribbonBar .time-line-buttons .ribbon-select .toggle-options.active:hover,
.timeline-container .time-line-buttons .ribbon-select .toggle-options.active:hover,
.new-timeline-container .time-line-buttons .ribbon-select .toggle-options.active:hover,
#ribbonBar #currentToolbox .ribbon-toggle .toggle-options.active:hover,
.timeline-container #currentToolbox .ribbon-toggle .toggle-options.active:hover,
.new-timeline-container #currentToolbox .ribbon-toggle .toggle-options.active:hover,
#ribbonBar .time-line-buttons .ribbon-toggle .toggle-options.active:hover,
.timeline-container .time-line-buttons .ribbon-toggle .toggle-options.active:hover,
.new-timeline-container .time-line-buttons .ribbon-toggle .toggle-options.active:hover {
  background: #89c377;
}
#ribbonBar #currentToolbox .ribbon-dropdown .toggle-options::after,
.timeline-container #currentToolbox .ribbon-dropdown .toggle-options::after,
.new-timeline-container #currentToolbox .ribbon-dropdown .toggle-options::after,
#ribbonBar .time-line-buttons .ribbon-dropdown .toggle-options::after,
.timeline-container .time-line-buttons .ribbon-dropdown .toggle-options::after,
.new-timeline-container .time-line-buttons .ribbon-dropdown .toggle-options::after,
#ribbonBar #currentToolbox .ribbon-select .toggle-options::after,
.timeline-container #currentToolbox .ribbon-select .toggle-options::after,
.new-timeline-container #currentToolbox .ribbon-select .toggle-options::after,
#ribbonBar .time-line-buttons .ribbon-select .toggle-options::after,
.timeline-container .time-line-buttons .ribbon-select .toggle-options::after,
.new-timeline-container .time-line-buttons .ribbon-select .toggle-options::after,
#ribbonBar #currentToolbox .ribbon-toggle .toggle-options::after,
.timeline-container #currentToolbox .ribbon-toggle .toggle-options::after,
.new-timeline-container #currentToolbox .ribbon-toggle .toggle-options::after,
#ribbonBar .time-line-buttons .ribbon-toggle .toggle-options::after,
.timeline-container .time-line-buttons .ribbon-toggle .toggle-options::after,
.new-timeline-container .time-line-buttons .ribbon-toggle .toggle-options::after {
  content: '';
  display: block;
  border-color: #000000 transparent transparent transparent;
  border-width: 4px 4px 0 4px;
  border-style: solid;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -4px;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul,
.timeline-container #currentToolbox .ribbon-dropdown > ul,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul,
.timeline-container .time-line-buttons .ribbon-dropdown > ul,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul,
#ribbonBar #currentToolbox .ribbon-select > ul,
.timeline-container #currentToolbox .ribbon-select > ul,
.new-timeline-container #currentToolbox .ribbon-select > ul,
#ribbonBar .time-line-buttons .ribbon-select > ul,
.timeline-container .time-line-buttons .ribbon-select > ul,
.new-timeline-container .time-line-buttons .ribbon-select > ul,
#ribbonBar #currentToolbox .ribbon-toggle > ul,
.timeline-container #currentToolbox .ribbon-toggle > ul,
.new-timeline-container #currentToolbox .ribbon-toggle > ul,
#ribbonBar .time-line-buttons .ribbon-toggle > ul,
.timeline-container .time-line-buttons .ribbon-toggle > ul,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul {
  list-style: none;
  z-index: 9999;
  position: absolute;
  top: 100%;
  left: 0;
  overflow: hidden;
  width: 190px;
  border: 1px solid #a7a9ac;
  margin-top: -1px;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button,
.timeline-container #currentToolbox .ribbon-select > ul .option-button,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button {
  height: 32px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  opacity: 1;
  background: #ffffff;
  color: #3c3c3b;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button path:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button path:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button path:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button path:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button path:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button path:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-select > ul .option-button path:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-select > ul .option-button path:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button path:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button path:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-select > ul .option-button path:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button path:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button path:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button path:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button path:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button path:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button path:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button path:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button polygon:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button polygon:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button polygon:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button polygon:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button polygon:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button polygon:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-select > ul .option-button polygon:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-select > ul .option-button polygon:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button polygon:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button polygon:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-select > ul .option-button polygon:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button polygon:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button polygon:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button polygon:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button polygon:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button polygon:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button polygon:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button polygon:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button circle:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button circle:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button circle:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button circle:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button circle:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button circle:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-select > ul .option-button circle:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-select > ul .option-button circle:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button circle:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button circle:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-select > ul .option-button circle:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button circle:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button circle:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button circle:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button circle:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button circle:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button circle:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button circle:not(.unchangeable) {
  fill: #6d6e71 !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button .invert-exception,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button .invert-exception,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button .invert-exception,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button .invert-exception,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button .invert-exception,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button .invert-exception,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button .invert-exception,
.timeline-container #currentToolbox .ribbon-select > ul .option-button .invert-exception,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button .invert-exception,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button .invert-exception,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button .invert-exception,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button .invert-exception,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button .invert-exception,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button .invert-exception,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button .invert-exception,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button .invert-exception,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button .invert-exception,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button .invert-exception {
  fill: #6d6e71 !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button .invert-exception.stroke,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button .invert-exception.stroke,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button .invert-exception.stroke,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button .invert-exception.stroke,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button .invert-exception.stroke,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button .invert-exception.stroke,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button .invert-exception.stroke,
.timeline-container #currentToolbox .ribbon-select > ul .option-button .invert-exception.stroke,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button .invert-exception.stroke,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button .invert-exception.stroke,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button .invert-exception.stroke,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button .invert-exception.stroke,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button .invert-exception.stroke,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button .invert-exception.stroke,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button .invert-exception.stroke,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button .invert-exception.stroke,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button .invert-exception.stroke,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button .invert-exception.stroke {
  fill: transparent!important;
  stroke: #6d6e71 !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button .active-exception,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button .active-exception,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button .active-exception,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button .active-exception,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button .active-exception,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button .active-exception,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button .active-exception,
.timeline-container #currentToolbox .ribbon-select > ul .option-button .active-exception,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button .active-exception,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button .active-exception,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button .active-exception,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button .active-exception,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button .active-exception,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button .active-exception,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button .active-exception,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button .active-exception,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button .active-exception,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button .active-exception {
  fill:  !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button.default,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button.default,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button.default,
.timeline-container #currentToolbox .ribbon-select > ul .option-button.default,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button.default,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button.default,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button.default,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button.default,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button.default,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button.default,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default {
  background: #56aa1c;
  color: #ffffff;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button.default path:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default path:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default path:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button.default path:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default path:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default path:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-select > ul .option-button.default path:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-select > ul .option-button.default path:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button.default path:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button.default path:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-select > ul .option-button.default path:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button.default path:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button.default path:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default path:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default path:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button.default path:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default path:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default path:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button.default polygon:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default polygon:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default polygon:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button.default polygon:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default polygon:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default polygon:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-select > ul .option-button.default polygon:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-select > ul .option-button.default polygon:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button.default polygon:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button.default polygon:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-select > ul .option-button.default polygon:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button.default polygon:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button.default polygon:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default polygon:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default polygon:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button.default polygon:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default polygon:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default polygon:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button.default circle:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default circle:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default circle:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button.default circle:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default circle:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default circle:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-select > ul .option-button.default circle:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-select > ul .option-button.default circle:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button.default circle:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button.default circle:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-select > ul .option-button.default circle:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button.default circle:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button.default circle:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default circle:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default circle:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button.default circle:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default circle:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default circle:not(.unchangeable) {
  fill: #ffffff !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button.default .invert-exception,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default .invert-exception,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default .invert-exception,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button.default .invert-exception,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default .invert-exception,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default .invert-exception,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button.default .invert-exception,
.timeline-container #currentToolbox .ribbon-select > ul .option-button.default .invert-exception,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button.default .invert-exception,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button.default .invert-exception,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button.default .invert-exception,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button.default .invert-exception,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button.default .invert-exception,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default .invert-exception,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default .invert-exception,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button.default .invert-exception,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default .invert-exception,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default .invert-exception {
  fill: #56aa1c !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button.default .invert-exception.stroke,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default .invert-exception.stroke,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default .invert-exception.stroke,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button.default .invert-exception.stroke,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default .invert-exception.stroke,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default .invert-exception.stroke,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button.default .invert-exception.stroke,
.timeline-container #currentToolbox .ribbon-select > ul .option-button.default .invert-exception.stroke,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button.default .invert-exception.stroke,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button.default .invert-exception.stroke,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button.default .invert-exception.stroke,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button.default .invert-exception.stroke,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button.default .invert-exception.stroke,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default .invert-exception.stroke,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default .invert-exception.stroke,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button.default .invert-exception.stroke,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default .invert-exception.stroke,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default .invert-exception.stroke {
  fill: transparent!important;
  stroke: #ffffff !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button.default .active-exception,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default .active-exception,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button.default .active-exception,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button.default .active-exception,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default .active-exception,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button.default .active-exception,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button.default .active-exception,
.timeline-container #currentToolbox .ribbon-select > ul .option-button.default .active-exception,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button.default .active-exception,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button.default .active-exception,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button.default .active-exception,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button.default .active-exception,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button.default .active-exception,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default .active-exception,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button.default .active-exception,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button.default .active-exception,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default .active-exception,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button.default .active-exception {
  fill: #ffffff !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button:hover,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button:hover,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button:hover,
.timeline-container #currentToolbox .ribbon-select > ul .option-button:hover,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button:hover,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button:hover,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button:hover,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button:hover,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover {
  background: #d9ead2;
  color: #3c3c3b;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button:hover path:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover path:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover path:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button:hover path:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover path:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover path:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-select > ul .option-button:hover path:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-select > ul .option-button:hover path:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button:hover path:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button:hover path:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover path:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover path:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button:hover path:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover path:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover path:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button:hover path:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover path:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover path:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button:hover polygon:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover polygon:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover polygon:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button:hover polygon:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover polygon:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover polygon:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-select > ul .option-button:hover polygon:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-select > ul .option-button:hover polygon:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button:hover polygon:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button:hover polygon:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover polygon:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover polygon:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button:hover polygon:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover polygon:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover polygon:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button:hover polygon:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover polygon:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover polygon:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button:hover circle:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover circle:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover circle:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button:hover circle:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover circle:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover circle:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-select > ul .option-button:hover circle:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-select > ul .option-button:hover circle:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button:hover circle:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button:hover circle:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover circle:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover circle:not(.unchangeable),
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button:hover circle:not(.unchangeable),
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover circle:not(.unchangeable),
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover circle:not(.unchangeable),
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button:hover circle:not(.unchangeable),
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover circle:not(.unchangeable),
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover circle:not(.unchangeable) {
  fill: #6d6e71 !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button:hover .invert-exception,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover .invert-exception,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover .invert-exception,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button:hover .invert-exception,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover .invert-exception,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover .invert-exception,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button:hover .invert-exception,
.timeline-container #currentToolbox .ribbon-select > ul .option-button:hover .invert-exception,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button:hover .invert-exception,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button:hover .invert-exception,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover .invert-exception,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover .invert-exception,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button:hover .invert-exception,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover .invert-exception,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover .invert-exception,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button:hover .invert-exception,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover .invert-exception,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover .invert-exception {
  fill: #6d6e71 !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button:hover .invert-exception.stroke,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover .invert-exception.stroke,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover .invert-exception.stroke,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button:hover .invert-exception.stroke,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover .invert-exception.stroke,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover .invert-exception.stroke,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button:hover .invert-exception.stroke,
.timeline-container #currentToolbox .ribbon-select > ul .option-button:hover .invert-exception.stroke,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button:hover .invert-exception.stroke,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button:hover .invert-exception.stroke,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover .invert-exception.stroke,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover .invert-exception.stroke,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button:hover .invert-exception.stroke,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover .invert-exception.stroke,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover .invert-exception.stroke,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button:hover .invert-exception.stroke,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover .invert-exception.stroke,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover .invert-exception.stroke {
  fill: transparent!important;
  stroke: #6d6e71 !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button:hover .active-exception,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover .active-exception,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button:hover .active-exception,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button:hover .active-exception,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover .active-exception,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button:hover .active-exception,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button:hover .active-exception,
.timeline-container #currentToolbox .ribbon-select > ul .option-button:hover .active-exception,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button:hover .active-exception,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button:hover .active-exception,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover .active-exception,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button:hover .active-exception,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button:hover .active-exception,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover .active-exception,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button:hover .active-exception,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button:hover .active-exception,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover .active-exception,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button:hover .active-exception {
  fill:  !important;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button > figure,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button > figure,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button > figure,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button > figure,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button > figure,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button > figure,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button > figure,
.timeline-container #currentToolbox .ribbon-select > ul .option-button > figure,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button > figure,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button > figure,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button > figure,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button > figure,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button > figure,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button > figure,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button > figure,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button > figure,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button > figure,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button > figure {
  display: flex;
  height: 20px;
  flex-direction: row;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button > figure > div,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button > figure > div,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button > figure > div,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button > figure > div,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button > figure > div,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button > figure > div,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button > figure > div,
.timeline-container #currentToolbox .ribbon-select > ul .option-button > figure > div,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button > figure > div,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button > figure > div,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button > figure > div,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button > figure > div,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button > figure > div,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button > figure > div,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button > figure > div,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button > figure > div,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button > figure > div,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button > figure > div {
  width: 16px;
  height: 16px;
  margin: 2px 10px 2px 0;
  overflow: hidden;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button > figure > div svg,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button > figure > div svg,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button > figure > div svg,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button > figure > div svg,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button > figure > div svg,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button > figure > div svg,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button > figure > div svg,
.timeline-container #currentToolbox .ribbon-select > ul .option-button > figure > div svg,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button > figure > div svg,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button > figure > div svg,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button > figure > div svg,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button > figure > div svg,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button > figure > div svg,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button > figure > div svg,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button > figure > div svg,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button > figure > div svg,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button > figure > div svg,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button > figure > div svg,
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button > figure > div img,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button > figure > div img,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button > figure > div img,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button > figure > div img,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button > figure > div img,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button > figure > div img,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button > figure > div img,
.timeline-container #currentToolbox .ribbon-select > ul .option-button > figure > div img,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button > figure > div img,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button > figure > div img,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button > figure > div img,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button > figure > div img,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button > figure > div img,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button > figure > div img,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button > figure > div img,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button > figure > div img,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button > figure > div img,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button > figure > div img {
  width: 16px;
  height: 16px;
}
#ribbonBar #currentToolbox .ribbon-dropdown > ul .option-button > figure figcaption,
.timeline-container #currentToolbox .ribbon-dropdown > ul .option-button > figure figcaption,
.new-timeline-container #currentToolbox .ribbon-dropdown > ul .option-button > figure figcaption,
#ribbonBar .time-line-buttons .ribbon-dropdown > ul .option-button > figure figcaption,
.timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button > figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-dropdown > ul .option-button > figure figcaption,
#ribbonBar #currentToolbox .ribbon-select > ul .option-button > figure figcaption,
.timeline-container #currentToolbox .ribbon-select > ul .option-button > figure figcaption,
.new-timeline-container #currentToolbox .ribbon-select > ul .option-button > figure figcaption,
#ribbonBar .time-line-buttons .ribbon-select > ul .option-button > figure figcaption,
.timeline-container .time-line-buttons .ribbon-select > ul .option-button > figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-select > ul .option-button > figure figcaption,
#ribbonBar #currentToolbox .ribbon-toggle > ul .option-button > figure figcaption,
.timeline-container #currentToolbox .ribbon-toggle > ul .option-button > figure figcaption,
.new-timeline-container #currentToolbox .ribbon-toggle > ul .option-button > figure figcaption,
#ribbonBar .time-line-buttons .ribbon-toggle > ul .option-button > figure figcaption,
.timeline-container .time-line-buttons .ribbon-toggle > ul .option-button > figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-toggle > ul .option-button > figure figcaption {
  margin: 0;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
#ribbonBar #currentToolbox .ribbon-select > .ribbon-button::after,
.timeline-container #currentToolbox .ribbon-select > .ribbon-button::after,
.new-timeline-container #currentToolbox .ribbon-select > .ribbon-button::after,
#ribbonBar .time-line-buttons .ribbon-select > .ribbon-button::after,
.timeline-container .time-line-buttons .ribbon-select > .ribbon-button::after,
.new-timeline-container .time-line-buttons .ribbon-select > .ribbon-button::after {
  content: '';
  display: block;
  border-color: #000000 transparent transparent transparent;
  border-width: 4px 4px 0 4px;
  border-style: solid;
  margin: 0 auto 0;
  position: relative;
  top: 6px;
  width: 0;
}
#ribbonBar #currentToolbox .ribbon-select#setVideoSpeed > .ribbon-button::after,
.timeline-container #currentToolbox .ribbon-select#setVideoSpeed > .ribbon-button::after,
.new-timeline-container #currentToolbox .ribbon-select#setVideoSpeed > .ribbon-button::after,
#ribbonBar .time-line-buttons .ribbon-select#setVideoSpeed > .ribbon-button::after,
.timeline-container .time-line-buttons .ribbon-select#setVideoSpeed > .ribbon-button::after,
.new-timeline-container .time-line-buttons .ribbon-select#setVideoSpeed > .ribbon-button::after {
  top: 2px;
}
#ribbonBar #currentToolbox .ribbon-select#setVideoSpeed.lang-de > .ribbon-button figure,
.timeline-container #currentToolbox .ribbon-select#setVideoSpeed.lang-de > .ribbon-button figure,
.new-timeline-container #currentToolbox .ribbon-select#setVideoSpeed.lang-de > .ribbon-button figure,
#ribbonBar .time-line-buttons .ribbon-select#setVideoSpeed.lang-de > .ribbon-button figure,
.timeline-container .time-line-buttons .ribbon-select#setVideoSpeed.lang-de > .ribbon-button figure,
.new-timeline-container .time-line-buttons .ribbon-select#setVideoSpeed.lang-de > .ribbon-button figure {
  margin-bottom: -4px;
}
#ribbonBar #currentToolbox .ribbon-select#setVideoSpeed.lang-de > .ribbon-button::after,
.timeline-container #currentToolbox .ribbon-select#setVideoSpeed.lang-de > .ribbon-button::after,
.new-timeline-container #currentToolbox .ribbon-select#setVideoSpeed.lang-de > .ribbon-button::after,
#ribbonBar .time-line-buttons .ribbon-select#setVideoSpeed.lang-de > .ribbon-button::after,
.timeline-container .time-line-buttons .ribbon-select#setVideoSpeed.lang-de > .ribbon-button::after,
.new-timeline-container .time-line-buttons .ribbon-select#setVideoSpeed.lang-de > .ribbon-button::after {
  top: 6px;
}
#ribbonBar #currentToolbox .ribbon-group,
.timeline-container #currentToolbox .ribbon-group,
.new-timeline-container #currentToolbox .ribbon-group,
#ribbonBar .time-line-buttons .ribbon-group,
.timeline-container .time-line-buttons .ribbon-group,
.new-timeline-container .time-line-buttons .ribbon-group {
  padding-right: 3px;
  border-right: 1px solid #ededed;
  margin-right: 3px;
  display: flex;
}
#ribbonBar #currentToolbox .ribbon-group.hidden,
.timeline-container #currentToolbox .ribbon-group.hidden,
.new-timeline-container #currentToolbox .ribbon-group.hidden,
#ribbonBar .time-line-buttons .ribbon-group.hidden,
.timeline-container .time-line-buttons .ribbon-group.hidden,
.new-timeline-container .time-line-buttons .ribbon-group.hidden {
  display: none;
}
#ribbonBar #currentToolbox .ribbon-group:last-of-type,
.timeline-container #currentToolbox .ribbon-group:last-of-type,
.new-timeline-container #currentToolbox .ribbon-group:last-of-type,
#ribbonBar .time-line-buttons .ribbon-group:last-of-type,
.timeline-container .time-line-buttons .ribbon-group:last-of-type,
.new-timeline-container .time-line-buttons .ribbon-group:last-of-type {
  border: none;
  margin: 0;
}
#ribbonBar #currentToolbox .ribbon-group .ribbon-group,
.timeline-container #currentToolbox .ribbon-group .ribbon-group,
.new-timeline-container #currentToolbox .ribbon-group .ribbon-group,
#ribbonBar .time-line-buttons .ribbon-group .ribbon-group,
.timeline-container .time-line-buttons .ribbon-group .ribbon-group,
.new-timeline-container .time-line-buttons .ribbon-group .ribbon-group {
  padding-right: 0;
  border-right: none;
  margin-right: 0;
}
#ribbonBar #currentToolbox .ribbon-group:empty,
.timeline-container #currentToolbox .ribbon-group:empty,
.new-timeline-container #currentToolbox .ribbon-group:empty,
#ribbonBar .time-line-buttons .ribbon-group:empty,
.timeline-container .time-line-buttons .ribbon-group:empty,
.new-timeline-container .time-line-buttons .ribbon-group:empty {
  display: none;
}
#ribbonBar #currentToolbox .ribbon-group.horizontal,
.timeline-container #currentToolbox .ribbon-group.horizontal,
.new-timeline-container #currentToolbox .ribbon-group.horizontal,
#ribbonBar .time-line-buttons .ribbon-group.horizontal,
.timeline-container .time-line-buttons .ribbon-group.horizontal,
.new-timeline-container .time-line-buttons .ribbon-group.horizontal {
  flex-direction: row;
}
#ribbonBar #currentToolbox .ribbon-group.vertical,
.timeline-container #currentToolbox .ribbon-group.vertical,
.new-timeline-container #currentToolbox .ribbon-group.vertical,
#ribbonBar .time-line-buttons .ribbon-group.vertical,
.timeline-container .time-line-buttons .ribbon-group.vertical,
.new-timeline-container .time-line-buttons .ribbon-group.vertical {
  flex-direction: column;
}
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-button,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-button,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-dropdown,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-dropdown,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-select,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-select,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-toggle,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-toggle,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle {
  height: 26.66666667px;
  padding: 2px 5px;
  flex-direction: row;
  max-width: 140px;
}
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-button figure,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button figure,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button figure,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-button figure,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button figure,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button figure,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-select figure,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select figure,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select figure,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-select figure,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select figure,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select figure,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-toggle figure,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle figure,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle figure,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure {
  flex-direction: row;
}
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-button figure > div,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button figure > div,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button figure > div,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure > div,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure > div,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure > div,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure > div,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure > div,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure > div,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-select figure > div,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select figure > div,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select figure > div,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-select figure > div,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select figure > div,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select figure > div,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-toggle figure > div,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle figure > div,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle figure > div,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure > div,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure > div,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure > div {
  width: 16px;
  height: 16px;
  margin: 2px 7px 2px 0;
  overflow: hidden;
}
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-button figure > div svg,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button figure > div svg,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button figure > div svg,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div svg,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div svg,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div svg,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure > div svg,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure > div svg,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure > div svg,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure > div svg,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure > div svg,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure > div svg,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-select figure > div svg,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select figure > div svg,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select figure > div svg,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-select figure > div svg,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select figure > div svg,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select figure > div svg,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-toggle figure > div svg,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle figure > div svg,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle figure > div svg,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure > div svg,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure > div svg,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure > div svg,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-button figure > div img,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button figure > div img,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button figure > div img,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div img,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div img,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div img,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure > div img,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure > div img,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure > div img,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure > div img,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure > div img,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure > div img,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-select figure > div img,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select figure > div img,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select figure > div img,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-select figure > div img,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select figure > div img,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select figure > div img,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-toggle figure > div img,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle figure > div img,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle figure > div img,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure > div img,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure > div img,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure > div img {
  width: 16px;
  height: 16px;
}
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-button figure figcaption,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button figure figcaption,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-button figure figcaption,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-button figure figcaption,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-button figure figcaption,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure figcaption,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure figcaption,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown figure figcaption,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure figcaption,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown figure figcaption,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-select figure figcaption,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select figure figcaption,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select figure figcaption,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-select figure figcaption,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select figure figcaption,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-toggle figure figcaption,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle figure figcaption,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle figure figcaption,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure figcaption,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure figcaption,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle figure figcaption {
  text-align: left;
  margin-top: 0;
  line-height: 21px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 21px;
  display: block;
}
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-dropdown,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-dropdown,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-dropdown,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-dropdown,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-select,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-select,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-select,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-select,
#ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-toggle,
.timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle,
.new-timeline-container #currentToolbox .ribbon-group.vertical .ribbon-toggle,
#ribbonBar .time-line-buttons .ribbon-group.vertical .ribbon-toggle,
.timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .ribbon-toggle {
  padding: 0;
  position: relative;
  border: none;
}
#ribbonBar #currentToolbox .ribbon-group.vertical .option-button,
.timeline-container #currentToolbox .ribbon-group.vertical .option-button,
.new-timeline-container #currentToolbox .ribbon-group.vertical .option-button,
#ribbonBar .time-line-buttons .ribbon-group.vertical .option-button,
.timeline-container .time-line-buttons .ribbon-group.vertical .option-button,
.new-timeline-container .time-line-buttons .ribbon-group.vertical .option-button {
  width: 100%;
  max-width: 100%;
}
#ribbonBar .expanded,
.timeline-container .expanded,
.new-timeline-container .expanded {
  height: 100px;
  transition: height 0.3s ease-out;
}
#ribbonBar .collapsed,
.timeline-container .collapsed,
.new-timeline-container .collapsed {
  height: 0px;
  transition: height 0.3s ease-out;
}
#ribbonBar .ribbon-widget,
.timeline-container .ribbon-widget,
.new-timeline-container .ribbon-widget {
  padding: 0 3px;
}
#ribbonBar .ribbon-widget#timelineCalendar:hover,
.timeline-container .ribbon-widget#timelineCalendar:hover,
.new-timeline-container .ribbon-widget#timelineCalendar:hover {
  background-color: #ededed;
  cursor: pointer;
}
#ribbonBar .ribbon-widget#timelineCalendar:hover span,
.timeline-container .ribbon-widget#timelineCalendar:hover span,
.new-timeline-container .ribbon-widget#timelineCalendar:hover span {
  color: #36740b;
}
#ribbonBar #timeSlotOptions .controls,
.timeline-container #timeSlotOptions .controls,
.new-timeline-container #timeSlotOptions .controls,
#ribbonBar #timeCursorPosition .controls,
.timeline-container #timeCursorPosition .controls,
.new-timeline-container #timeCursorPosition .controls {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
#ribbonBar #timeSlotOptions .controls label,
.timeline-container #timeSlotOptions .controls label,
.new-timeline-container #timeSlotOptions .controls label,
#ribbonBar #timeCursorPosition .controls label,
.timeline-container #timeCursorPosition .controls label,
.new-timeline-container #timeCursorPosition .controls label {
  margin-right: 10px;
}
#ribbonBar #timeSlotOptions .controls .static-input,
.timeline-container #timeSlotOptions .controls .static-input,
.new-timeline-container #timeSlotOptions .controls .static-input,
#ribbonBar #timeCursorPosition .controls .static-input,
.timeline-container #timeCursorPosition .controls .static-input,
.new-timeline-container #timeCursorPosition .controls .static-input {
  display: block;
  width: 82px;
  line-height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#ribbonBar #eventsFilter,
.timeline-container #eventsFilter,
.new-timeline-container #eventsFilter {
  display: flex;
  flex-direction: column;
  width: auto;
  height: 80px;
  align-items: stretch;
}
#ribbonBar #eventsFilter button:disabled,
.timeline-container #eventsFilter button:disabled,
.new-timeline-container #eventsFilter button:disabled,
#ribbonBar #eventsFilter input:disabled + span,
.timeline-container #eventsFilter input:disabled + span,
.new-timeline-container #eventsFilter input:disabled + span {
  opacity: 0.5;
  cursor: default;
}
#ribbonBar #eventsFilter .checkboxes,
.timeline-container #eventsFilter .checkboxes,
.new-timeline-container #eventsFilter .checkboxes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
}
#ribbonBar #eventsFilter label,
.timeline-container #eventsFilter label,
.new-timeline-container #eventsFilter label {
  line-height: normal;
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  height: 17px;
}
#ribbonBar #eventsFilter label input[type="checkbox"],
.timeline-container #eventsFilter label input[type="checkbox"],
.new-timeline-container #eventsFilter label input[type="checkbox"] {
  margin-right: 5px;
  margin-left: 0;
}
#ribbonBar #eventsFilter label:first-of-type,
.timeline-container #eventsFilter label:first-of-type,
.new-timeline-container #eventsFilter label:first-of-type {
  margin-right: 8px;
}
#ribbonBar #eventsFilter .checkbox-btn-wrapper,
.timeline-container #eventsFilter .checkbox-btn-wrapper,
.new-timeline-container #eventsFilter .checkbox-btn-wrapper {
  display: flex;
}
#ribbonBar #eventsFilter .checkbox-btn-wrapper > button,
.timeline-container #eventsFilter .checkbox-btn-wrapper > button,
.new-timeline-container #eventsFilter .checkbox-btn-wrapper > button {
  background-color: #ffffff;
  cursor: pointer;
  padding: 0;
  text-align: left;
  border: 0;
  outline: 0;
  box-shadow: none;
  display: flex;
  white-space: nowrap;
  height: 17px;
}
#ribbonBar #eventsFilter .filter-search,
.timeline-container #eventsFilter .filter-search,
.new-timeline-container #eventsFilter .filter-search {
  width: 100%;
}
#ribbonBar #eventsFilter .filter-search input,
.timeline-container #eventsFilter .filter-search input,
.new-timeline-container #eventsFilter .filter-search input {
  padding-right: 20px;
  width: 100%;
}
#ribbonBar #eventsFilter .filter-search img,
.timeline-container #eventsFilter .filter-search img,
.new-timeline-container #eventsFilter .filter-search img {
  position: absolute;
  right: 4px;
  top: 4px;
}
#ribbonBar #filters,
.timeline-container #filters,
.new-timeline-container #filters {
  display: flex;
  flex-direction: row;
  padding-left: 0;
}
#ribbonBar #filters .group,
.timeline-container #filters .group,
.new-timeline-container #filters .group {
  margin-left: 3px;
  width: 120px;
  position: relative;
  -webkit-user-select: none;
}
#ribbonBar #filters .group .add-button,
.timeline-container #filters .group .add-button,
.new-timeline-container #filters .group .add-button {
  margin: 10px 20px;
  display: flex;
  align-items: center;
}
#ribbonBar #filters .group .add-button .expand-filter,
.timeline-container #filters .group .add-button .expand-filter,
.new-timeline-container #filters .group .add-button .expand-filter {
  border: 0;
  box-shadow: none;
  cursor: pointer;
  height: 16px;
  outline: 0;
  width: 16px;
  background: transparent;
}
#ribbonBar #filters .group .add-button .expand-filter img,
.timeline-container #filters .group .add-button .expand-filter img,
.new-timeline-container #filters .group .add-button .expand-filter img {
  margin-left: -10px;
}
#ribbonBar #filters .group .add-button .expand-filter:disabled,
.timeline-container #filters .group .add-button .expand-filter:disabled,
.new-timeline-container #filters .group .add-button .expand-filter:disabled {
  opacity: 0.5;
  cursor: default;
}
#ribbonBar #filters .group .expanded-list,
.timeline-container #filters .group .expanded-list,
.new-timeline-container #filters .group .expanded-list {
  border: 1px solid #a7a9ac;
  padding: 4px 0 4px 8px;
  color: #000000;
  display: flex;
  justify-content: space-between;
}
#ribbonBar #filters .group .expanded-list .open-list,
.timeline-container #filters .group .expanded-list .open-list,
.new-timeline-container #filters .group .expanded-list .open-list {
  padding-right: 5px;
}
#ribbonBar #filters .group .expanded-list .open-list :hover,
.timeline-container #filters .group .expanded-list .open-list :hover,
.new-timeline-container #filters .group .expanded-list .open-list :hover {
  cursor: pointer;
}
#ribbonBar #filters .group .expanded-list.disabled,
.timeline-container #filters .group .expanded-list.disabled,
.new-timeline-container #filters .group .expanded-list.disabled {
  background-color: #ededed;
}
#ribbonBar #filters .group .expanded-list.disabled div,
.timeline-container #filters .group .expanded-list.disabled div,
.new-timeline-container #filters .group .expanded-list.disabled div,
#ribbonBar #filters .group .expanded-list.disabled .open-list,
.timeline-container #filters .group .expanded-list.disabled .open-list,
.new-timeline-container #filters .group .expanded-list.disabled .open-list {
  opacity: 0.5;
}
#ribbonBar #filters .group .expanded-list.disabled div :hover,
.timeline-container #filters .group .expanded-list.disabled div :hover,
.new-timeline-container #filters .group .expanded-list.disabled div :hover,
#ribbonBar #filters .group .expanded-list.disabled .open-list :hover,
.timeline-container #filters .group .expanded-list.disabled .open-list :hover,
.new-timeline-container #filters .group .expanded-list.disabled .open-list :hover {
  cursor: auto;
}
#ribbonBar #filters .group .filter-list,
.timeline-container #filters .group .filter-list,
.new-timeline-container #filters .group .filter-list {
  position: absolute;
  border: 1px solid #a7a9ac;
  width: 100%;
  left: 0;
  background: white;
  color: #6d6e71;
  z-index: 99;
  box-sizing: border-box;
  margin-top: -1px;
}
#ribbonBar #filters .group .filter-list li,
.timeline-container #filters .group .filter-list li,
.new-timeline-container #filters .group .filter-list li {
  overflow: hidden;
  padding: 3px 8px;
}
#ribbonBar #filters .group .filter-list li.group-entity,
.timeline-container #filters .group .filter-list li.group-entity,
.new-timeline-container #filters .group .filter-list li.group-entity {
  font-weight: 700;
}
#ribbonBar .dateinput-container,
.timeline-container .dateinput-container,
.new-timeline-container .dateinput-container {
  position: relative;
}
#ribbonBar .dateinput-container input[type="date"].dateinput-widget,
.timeline-container .dateinput-container input[type="date"].dateinput-widget,
.new-timeline-container .dateinput-container input[type="date"].dateinput-widget {
  width: 80px;
  height: 80px;
  padding: 0;
  min-width: 0;
  border: none;
  cursor: pointer;
}
#ribbonBar .dateinput-container input[type="date"].dateinput-widget:hover,
.timeline-container .dateinput-container input[type="date"].dateinput-widget:hover,
.new-timeline-container .dateinput-container input[type="date"].dateinput-widget:hover {
  background-color: #d9ead2 !important;
}
#ribbonBar .dateinput-container input[type="date"].dateinput-widget::-webkit-calendar-picker-indicator,
.timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-calendar-picker-indicator,
.new-timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-calendar-picker-indicator {
  width: 80px;
  height: 80px;
  display: block;
  margin: 0;
  position: absolute;
  z-index: 2;
}
#ribbonBar .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-month-field,
.timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-month-field,
.new-timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-month-field {
  display: none;
}
#ribbonBar .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-day-field,
.timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-day-field,
.new-timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-day-field {
  display: none;
}
#ribbonBar .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-year-field,
.timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-year-field,
.new-timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-year-field {
  display: none;
}
#ribbonBar .dateinput-container input[type="date"].dateinput-widget::-webkit-inner-spin-button,
.timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-inner-spin-button,
.new-timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-inner-spin-button {
  display: none;
}
#ribbonBar .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-text,
.timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-text,
.new-timeline-container .dateinput-container input[type="date"].dateinput-widget::-webkit-datetime-edit-text {
  display: none;
}
#ribbonBar .dateinput-container .widget-title,
.timeline-container .dateinput-container .widget-title,
.new-timeline-container .dateinput-container .widget-title {
  position: relative;
  top: -20px;
  text-align: center;
  line-height: 0;
  z-index: 1;
}
#ribbonBar .dateinput-container #timelineCalendar,
.timeline-container .dateinput-container #timelineCalendar,
.new-timeline-container .dateinput-container #timelineCalendar {
  padding: 0;
}
#ribbonBar.mobile,
.timeline-container.mobile,
.new-timeline-container.mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  perspective: 1000px;
}
#ribbonBar.mobile.visible,
.timeline-container.mobile.visible,
.new-timeline-container.mobile.visible {
  display: flex;
}
#ribbonBar.mobile.no-animation #currentToolbox,
.timeline-container.mobile.no-animation #currentToolbox,
.new-timeline-container.mobile.no-animation #currentToolbox {
  visibility: hidden;
  animation: none;
}
#ribbonBar.mobile #currentToolbox,
.timeline-container.mobile #currentToolbox,
.new-timeline-container.mobile #currentToolbox {
  margin: auto;
  width: 85vw;
  max-width: 85vw;
  max-height: 90vh;
  height: auto;
  padding: 0;
  display: block;
  background: #ffffff;
  box-shadow: 0 0 20px #000000;
  animation: context-menu-fade-in 0.2s ease-out both;
  transition: height 0.2s linear;
  will-change: height;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  transform-origin: 50% 50%;
}
#ribbonBar.mobile #currentToolbox.hide-main-ribbon,
.timeline-container.mobile #currentToolbox.hide-main-ribbon,
.new-timeline-container.mobile #currentToolbox.hide-main-ribbon {
  animation: hide-ribbon-animation 0.3s ease-out both;
}
#ribbonBar.mobile #currentToolbox.show-main-ribbon,
.timeline-container.mobile #currentToolbox.show-main-ribbon,
.new-timeline-container.mobile #currentToolbox.show-main-ribbon {
  animation: show-ribbon-animation 0.3s ease-out both;
}
#ribbonBar.mobile #currentToolbox.show-child-ribbon,
.timeline-container.mobile #currentToolbox.show-child-ribbon,
.new-timeline-container.mobile #currentToolbox.show-child-ribbon {
  animation: show-options-ribbon-animation 0.3s ease-out both;
}
#ribbonBar.mobile #currentToolbox.hide-child-ribbon,
.timeline-container.mobile #currentToolbox.hide-child-ribbon,
.new-timeline-container.mobile #currentToolbox.hide-child-ribbon {
  animation: hide-options-ribbon-animation 0.3s ease-out both;
}
#ribbonBar.mobile #currentToolbox #mainRibbonOptions,
.timeline-container.mobile #currentToolbox #mainRibbonOptions,
.new-timeline-container.mobile #currentToolbox #mainRibbonOptions,
#ribbonBar.mobile #currentToolbox #ribbonChildOptions,
.timeline-container.mobile #currentToolbox #ribbonChildOptions,
.new-timeline-container.mobile #currentToolbox #ribbonChildOptions {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  overflow: hidden;
}
#ribbonBar.mobile #currentToolbox #ribbonChildOptions,
.timeline-container.mobile #currentToolbox #ribbonChildOptions,
.new-timeline-container.mobile #currentToolbox #ribbonChildOptions {
  background: #ffffff;
  z-index: 9;
  display: none;
}
#ribbonBar.mobile #currentToolbox #ribbonChildOptions.ios-old-device,
.timeline-container.mobile #currentToolbox #ribbonChildOptions.ios-old-device,
.new-timeline-container.mobile #currentToolbox #ribbonChildOptions.ios-old-device {
  animation: none !important;
  transition: none !important;
}
#ribbonBar.mobile #currentToolbox > .main-ribbon-group,
.timeline-container.mobile #currentToolbox > .main-ribbon-group,
.new-timeline-container.mobile #currentToolbox > .main-ribbon-group,
#ribbonBar.mobile #currentToolbox > .ribbon-group,
.timeline-container.mobile #currentToolbox > .ribbon-group,
.new-timeline-container.mobile #currentToolbox > .ribbon-group {
  will-change: transform;
}
#ribbonBar.mobile #currentToolbox > .main-ribbon-group .ribbon-control,
.timeline-container.mobile #currentToolbox > .main-ribbon-group .ribbon-control,
.new-timeline-container.mobile #currentToolbox > .main-ribbon-group .ribbon-control,
#ribbonBar.mobile #currentToolbox > .ribbon-group .ribbon-control,
.timeline-container.mobile #currentToolbox > .ribbon-group .ribbon-control,
.new-timeline-container.mobile #currentToolbox > .ribbon-group .ribbon-control {
  border-bottom: 1px solid #a7a9ac;
  margin-bottom: 0;
}
#ribbonBar.mobile #currentToolbox > .main-ribbon-group .ribbon-control.ribbon-group,
.timeline-container.mobile #currentToolbox > .main-ribbon-group .ribbon-control.ribbon-group,
.new-timeline-container.mobile #currentToolbox > .main-ribbon-group .ribbon-control.ribbon-group,
#ribbonBar.mobile #currentToolbox > .ribbon-group .ribbon-control.ribbon-group,
.timeline-container.mobile #currentToolbox > .ribbon-group .ribbon-control.ribbon-group,
.new-timeline-container.mobile #currentToolbox > .ribbon-group .ribbon-control.ribbon-group {
  padding: 0 !important;
  border-bottom: none;
}
#ribbonBar.mobile #currentToolbox > .main-ribbon-group .ribbon-control:active:not(.ribbon-group),
.timeline-container.mobile #currentToolbox > .main-ribbon-group .ribbon-control:active:not(.ribbon-group),
.new-timeline-container.mobile #currentToolbox > .main-ribbon-group .ribbon-control:active:not(.ribbon-group),
#ribbonBar.mobile #currentToolbox > .ribbon-group .ribbon-control:active:not(.ribbon-group),
.timeline-container.mobile #currentToolbox > .ribbon-group .ribbon-control:active:not(.ribbon-group),
.new-timeline-container.mobile #currentToolbox > .ribbon-group .ribbon-control:active:not(.ribbon-group) {
  background-color: rgba(0, 0, 0, 0.2);
}
#ribbonBar.mobile #currentToolbox > .main-ribbon-group:last-of-type > .ribbon-control:last-of-type,
.timeline-container.mobile #currentToolbox > .main-ribbon-group:last-of-type > .ribbon-control:last-of-type,
.new-timeline-container.mobile #currentToolbox > .main-ribbon-group:last-of-type > .ribbon-control:last-of-type,
#ribbonBar.mobile #currentToolbox > .ribbon-group:last-of-type > .ribbon-control:last-of-type,
.timeline-container.mobile #currentToolbox > .ribbon-group:last-of-type > .ribbon-control:last-of-type,
.new-timeline-container.mobile #currentToolbox > .ribbon-group:last-of-type > .ribbon-control:last-of-type,
#ribbonBar.mobile #currentToolbox > .main-ribbon-group:last-child > .ribbon-control:last-of-type,
.timeline-container.mobile #currentToolbox > .main-ribbon-group:last-child > .ribbon-control:last-of-type,
.new-timeline-container.mobile #currentToolbox > .main-ribbon-group:last-child > .ribbon-control:last-of-type,
#ribbonBar.mobile #currentToolbox > .ribbon-group:last-child > .ribbon-control:last-of-type,
.timeline-container.mobile #currentToolbox > .ribbon-group:last-child > .ribbon-control:last-of-type,
.new-timeline-container.mobile #currentToolbox > .ribbon-group:last-child > .ribbon-control:last-of-type {
  margin-bottom: 0;
}
#ribbonBar.mobile #currentToolbox .ribbon-toggle:active,
.timeline-container.mobile #currentToolbox .ribbon-toggle:active,
.new-timeline-container.mobile #currentToolbox .ribbon-toggle:active,
#ribbonBar.mobile #currentToolbox .ribbon-dropdown:active,
.timeline-container.mobile #currentToolbox .ribbon-dropdown:active,
.new-timeline-container.mobile #currentToolbox .ribbon-dropdown:active,
#ribbonBar.mobile #currentToolbox .ribbon-select:active,
.timeline-container.mobile #currentToolbox .ribbon-select:active,
.new-timeline-container.mobile #currentToolbox .ribbon-select:active,
#ribbonBar.mobile #currentToolbox .ribbon-toggle.active,
.timeline-container.mobile #currentToolbox .ribbon-toggle.active,
.new-timeline-container.mobile #currentToolbox .ribbon-toggle.active,
#ribbonBar.mobile #currentToolbox .ribbon-dropdown.active,
.timeline-container.mobile #currentToolbox .ribbon-dropdown.active,
.new-timeline-container.mobile #currentToolbox .ribbon-dropdown.active,
#ribbonBar.mobile #currentToolbox .ribbon-select.active,
.timeline-container.mobile #currentToolbox .ribbon-select.active,
.new-timeline-container.mobile #currentToolbox .ribbon-select.active {
  border-color: transparent transparent #a7a9ac;
}
#ribbonBar.mobile #currentToolbox .ribbon-toggle:active,
.timeline-container.mobile #currentToolbox .ribbon-toggle:active,
.new-timeline-container.mobile #currentToolbox .ribbon-toggle:active,
#ribbonBar.mobile #currentToolbox .ribbon-dropdown:active,
.timeline-container.mobile #currentToolbox .ribbon-dropdown:active,
.new-timeline-container.mobile #currentToolbox .ribbon-dropdown:active,
#ribbonBar.mobile #currentToolbox .ribbon-select:active,
.timeline-container.mobile #currentToolbox .ribbon-select:active,
.new-timeline-container.mobile #currentToolbox .ribbon-select:active,
#ribbonBar.mobile #currentToolbox .ribbon-toggle.active,
.timeline-container.mobile #currentToolbox .ribbon-toggle.active,
.new-timeline-container.mobile #currentToolbox .ribbon-toggle.active,
#ribbonBar.mobile #currentToolbox .ribbon-dropdown.active,
.timeline-container.mobile #currentToolbox .ribbon-dropdown.active,
.new-timeline-container.mobile #currentToolbox .ribbon-dropdown.active,
#ribbonBar.mobile #currentToolbox .ribbon-select.active,
.timeline-container.mobile #currentToolbox .ribbon-select.active,
.new-timeline-container.mobile #currentToolbox .ribbon-select.active,
#ribbonBar.mobile #currentToolbox .ribbon-toggle:hover,
.timeline-container.mobile #currentToolbox .ribbon-toggle:hover,
.new-timeline-container.mobile #currentToolbox .ribbon-toggle:hover,
#ribbonBar.mobile #currentToolbox .ribbon-dropdown:hover,
.timeline-container.mobile #currentToolbox .ribbon-dropdown:hover,
.new-timeline-container.mobile #currentToolbox .ribbon-dropdown:hover,
#ribbonBar.mobile #currentToolbox .ribbon-select:hover,
.timeline-container.mobile #currentToolbox .ribbon-select:hover,
.new-timeline-container.mobile #currentToolbox .ribbon-select:hover {
  background-color: transparent;
  color: initial;
}
#ribbonBar.mobile #currentToolbox .ribbon-button,
.timeline-container.mobile #currentToolbox .ribbon-button,
.new-timeline-container.mobile #currentToolbox .ribbon-button {
  padding: 0 10px !important;
}
#ribbonBar.mobile #currentToolbox .ribbon-button:active,
.timeline-container.mobile #currentToolbox .ribbon-button:active,
.new-timeline-container.mobile #currentToolbox .ribbon-button:active,
#ribbonBar.mobile #currentToolbox .ribbon-button.active,
.timeline-container.mobile #currentToolbox .ribbon-button.active,
.new-timeline-container.mobile #currentToolbox .ribbon-button.active {
  border-color: transparent transparent #a7a9ac;
}
#ribbonBar.mobile #currentToolbox .ribbon-button:active,
.timeline-container.mobile #currentToolbox .ribbon-button:active,
.new-timeline-container.mobile #currentToolbox .ribbon-button:active,
#ribbonBar.mobile #currentToolbox .ribbon-button:hover,
.timeline-container.mobile #currentToolbox .ribbon-button:hover,
.new-timeline-container.mobile #currentToolbox .ribbon-button:hover {
  background-color: transparent;
  color: initial;
}
#ribbonBar.mobile #currentToolbox .ribbon-button:hover,
.timeline-container.mobile #currentToolbox .ribbon-button:hover,
.new-timeline-container.mobile #currentToolbox .ribbon-button:hover,
#ribbonBar.mobile #currentToolbox .ribbon-toggle:hover,
.timeline-container.mobile #currentToolbox .ribbon-toggle:hover,
.new-timeline-container.mobile #currentToolbox .ribbon-toggle:hover,
#ribbonBar.mobile #currentToolbox .ribbon-dropdown:hover,
.timeline-container.mobile #currentToolbox .ribbon-dropdown:hover,
.new-timeline-container.mobile #currentToolbox .ribbon-dropdown:hover,
#ribbonBar.mobile #currentToolbox .ribbon-select:hover,
.timeline-container.mobile #currentToolbox .ribbon-select:hover,
.new-timeline-container.mobile #currentToolbox .ribbon-select:hover {
  background-color: transparent;
  color: initial;
}
#ribbonBar.mobile #currentToolbox .ribbon-group,
.timeline-container.mobile #currentToolbox .ribbon-group,
.new-timeline-container.mobile #currentToolbox .ribbon-group {
  padding: 0;
  margin: 0;
  border: none;
  flex-shrink: 0;
}
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-button,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-button,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-button,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-dropdown,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-dropdown,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-dropdown,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-toggle,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-toggle,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-toggle,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-select,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select {
  padding: 0;
  height: 55px;
  width: 100%;
  max-width: 100%;
  align-items: center;
}
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-button figure,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-button figure,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-button figure,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-dropdown figure,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-dropdown figure,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-dropdown figure,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-toggle figure,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-toggle figure,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-toggle figure,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-select figure,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select figure,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select figure {
  width: 100%;
  height: 28px;
}
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-button figure div,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-button figure div,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-button figure div,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-dropdown figure div,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-dropdown figure div,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-dropdown figure div,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-toggle figure div,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-toggle figure div,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-toggle figure div,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-select figure div,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select figure div,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select figure div {
  margin: 0 10px 0 0;
  width: 20px;
  height: 20px;
}
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-button figure div img,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-button figure div img,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-button figure div img,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-dropdown figure div img,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-dropdown figure div img,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-dropdown figure div img,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-toggle figure div img,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-toggle figure div img,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-toggle figure div img,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-select figure div img,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select figure div img,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select figure div img {
  width: 20px;
  height: 20px;
}
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-button figcaption,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-button figcaption,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-button figcaption,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-dropdown figcaption,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-dropdown figcaption,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-dropdown figcaption,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-toggle figcaption,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-toggle figcaption,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-toggle figcaption,
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-select figcaption,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select figcaption,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select figcaption {
  font-size: 11pt;
}
#ribbonBar.mobile #currentToolbox .ribbon-group .ribbon-select > .ribbon-button::after,
.timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select > .ribbon-button::after,
.new-timeline-container.mobile #currentToolbox .ribbon-group .ribbon-select > .ribbon-button::after {
  border-color: transparent transparent transparent #000000;
  border-width: 4px 0 4px 4px;
  height: 0;
  width: 0;
  top: 0;
}
body.desktop-view #ribbonBar #eventsFilter label input[type="checkbox"] {
  height: 15px;
}
body.desktop-view #ribbonBar #eventsFilter .filter-search input {
  -webkit-appearance: none;
}
body.desktop-view #ribbonBar #eventsFilter .only-video-events-filter {
  display: none;
}
/* buttons custom size for different locales   */
.lang-en-GB button.acknowledge-button,
.lang-en-US button.acknowledge-button,
.lang-en-GB .add-remove-favourites-button,
.lang-en-US .add-remove-favourites-button {
  min-width: 80px !important;
}
.lang-en-GB .add-new-entity-dropdown,
.lang-en-US .add-new-entity-dropdown {
  max-width: 110px !important;
}
.lang-fr-FR button.chooser-button,
.lang-fr-CA button.chooser-button {
  min-width: 85px !important;
}
.lang-fr-FR .add-new-entity-dropdown,
.lang-fr-CA .add-new-entity-dropdown {
  min-width: 140px !important;
  max-width: 150px !important;
}
.lang-fr-FR .add-new-entity-dropdown button.ribbon-button,
.lang-fr-CA .add-new-entity-dropdown button.ribbon-button {
  min-width: 124px !important;
}
.lang-es-ES .add-new-entity-dropdown,
.lang-es-MX .add-new-entity-dropdown {
  min-width: 140px !important;
  max-width: 150px !important;
}
.lang-es-ES .add-new-entity-dropdown button.ribbon-button,
.lang-es-MX .add-new-entity-dropdown button.ribbon-button {
  min-width: 120px !important;
}
.timeline-container .time-line-buttons .ribbon-dropdown > ul,
.timeline-container .time-line-buttons .ribbon-select > ul,
.timeline-container .time-line-buttons .ribbon-toggle > ul {
  width: 78px;
  top: initial;
  bottom: 100%;
  display: flex;
  flex-direction: column-reverse;
}
.sg-perspective {
  perspective: 5000px;
  background-color: #a7a9ac;
}
#siteGraphics {
  perspective: 5000px;
  background-color: #a7a9ac;
  flex-direction: column;
  flex-shrink: 0;
}
.three-dee-container {
  height: 100%;
}
#planPreview {
  width: auto;
  height: 100%;
}
#drawField {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 20px solid transparent;
  box-sizing: border-box;
  overflow: hidden;
}
#drawField.draw-mode {
  cursor: crosshair;
}
#drawField.edit-mode path {
  fill: rgba(255, 0, 0, 0.2);
  stroke: rgba(255, 0, 0, 0.5);
}
#drawField.edit-mode circle {
  visibility: hidden;
}
#drawAlarmArea .modal-body {
  position: relative;
  overflow: visible;
}
#drawAlarmArea .modal-body .hot-keys-tip {
  position: relative;
  bottom: -2px;
}
.drawAreaFooter {
  margin-top: 20px;
}
#sgElements {
  display: none;
  position: relative;
  z-index: 100;
  animation: opacity-fade-in 0.3s linear 0.5s 1 both;
}
#sgElements #buildingShape {
  visibility: hidden;
}
#sgElements #buildingShape polygon {
  fill: rgba(0, 255, 0, 0.2);
  stroke: #36740b;
}
.figure figure {
  visibility: hidden;
  position: absolute;
  padding: 5px;
}
.figure figure.placed {
  visibility: visible;
  margin: 0;
}
.figure figure.active {
  visibility: visible;
  margin: 0;
  cursor: default;
}
.figure figure.selected {
  background-color: #d9ead2;
  border: 1px solid #56aa1c;
  max-height: 150px !important;
}
.canvas-container {
  flex-grow: 1;
  width: auto !important;
}
.events-window-wrapper {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  height: 100%;
}
.new-soft-button {
  color: #fff;
  background-color: var(--color);
  border: 1px solid var(--color);
}
.new-soft-button:hover,
.new-soft-button:hover:active,
button.new-soft-button:hover:active {
  background-color: var(--hover-color);
  box-shadow: none;
  border-color: var(--color);
}
body.mobile .new-soft-button:hover,
body.mobile .new-soft-button:hover:active,
body.mobile button.new-soft-button:hover:active {
  background-color: var(--color);
}
.new-soft-button.active-animation {
  transition: background-color var(--duration) ease-out;
  border-color: transparent;
  background-color: var(--click-color);
  box-shadow: 0 0 var(--shadow-size) var(--color) !important;
}
body.mobile .new-soft-button.active-animation {
  background-color: var(--click-color);
}
.site-graphics,
site-graphic {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-color: #ededed;
  transform: translate3d(0, 0, 0);
  transition: transform 0.5s cubic-bezier(0.5, 0.5, 0, 1), opacity 0.35s linear;
}
.site-graphics.move-to-right,
site-graphic.move-to-right {
  transform: translate3d(100%, 0, 0);
}
.site-graphics.move-to-top-right,
site-graphic.move-to-top-right {
  transform: translate3d(100%, -100%, 0);
}
.site-graphics.move-to-left,
site-graphic.move-to-left {
  transform: translate3d(-100%, 0, 0);
}
.site-graphics.move-to-top-left,
site-graphic.move-to-top-left {
  transform: translate3d(-100%, -100%, 0);
}
.site-graphics.move-to-top,
site-graphic.move-to-top {
  transform: translate3d(0, -100%, 0);
}
.site-graphics.move-to-bottom,
site-graphic.move-to-bottom {
  transform: translate3d(0, 100%, 0);
}
.site-graphics.move-to-bottom-right,
site-graphic.move-to-bottom-right {
  transform: translate3d(100%, 100%, 0);
}
.site-graphics.move-to-bottom-left,
site-graphic.move-to-bottom-left {
  transform: translate3d(-100%, 100%, 0);
}
.site-graphics.move-to-up,
site-graphic.move-to-up {
  transform: translate3d(0, 0, 10000px);
  opacity: 0;
}
.site-graphics.move-to-down,
site-graphic.move-to-down {
  transform: translate3d(0, 0, -50000px);
  opacity: 0;
}
.site-graphics.fade-in,
site-graphic.fade-in {
  opacity: 0;
}
.site-graphics.fade-out,
site-graphic.fade-out {
  opacity: 0;
}
.site-graphics.editMode #siteGraphicsRibbon figure,
site-graphic.editMode #siteGraphicsRibbon figure {
  cursor: move;
}
.site-graphics.editMode #siteGraphicsRibbon figure.text,
site-graphic.editMode #siteGraphicsRibbon figure.text {
  cursor: move;
}
.site-graphics.editMode #siteGraphicsRibbon figure.navigation .object-icon .event-icon,
site-graphic.editMode #siteGraphicsRibbon figure.navigation .object-icon .event-icon {
  display: none;
}
.site-graphics.editMode #siteGraphicsRibbon figure.device,
site-graphic.editMode #siteGraphicsRibbon figure.device {
  cursor: move;
}
.site-graphics.editMode #siteGraphicsRibbon figure.softbutton,
site-graphic.editMode #siteGraphicsRibbon figure.softbutton {
  cursor: move;
}
.site-graphics.editMode .users-image,
site-graphic.editMode .users-image {
  display: none;
}
.site-graphics .full-height,
site-graphic .full-height {
  height: 100%;
}
.site-graphics figure,
site-graphic figure {
  display: inline-block;
  line-height: 0;
  margin: 0;
  vertical-align: top;
  max-height: 126px;
  width: 90px;
  box-sizing: border-box;
  border: 1px solid transparent;
  cursor: default;
  z-index: 100;
}
.site-graphics figure.softbutton,
site-graphic figure.softbutton {
  width: auto;
}
.site-graphics figure.largeTextLabel,
site-graphic figure.largeTextLabel {
  width: 127px;
  max-height: 150px;
}
.site-graphics figure.largeTextLabel figcaption,
site-graphic figure.largeTextLabel figcaption {
  font-size: 20px;
  line-height: 20px;
  height: 31px;
  padding: 5px 0;
  max-height: 45px;
}
.site-graphics figure.mediumTextLabel,
site-graphic figure.mediumTextLabel {
  width: 93px;
}
.site-graphics figure.mediumTextLabel figcaption,
site-graphic figure.mediumTextLabel figcaption {
  font-size: 14px;
  padding: 5px 1px;
}
.site-graphics figure.animated,
site-graphic figure.animated {
  animation: opacity-fade-in 0.3s linear 0.5s 1 both;
}
.site-graphics figure.on-drag,
site-graphic figure.on-drag {
  transition: none !important;
}
.site-graphics figure.on-drag::after,
site-graphic figure.on-drag::after {
  display: none !important;
}
.site-graphics figure[data-title]::after,
site-graphic figure[data-title]::after {
  content: attr(data-title);
  opacity: 0;
  display: none;
  visibility: hidden;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  color: #000000;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  border: 1px solid #6d6e71;
  box-shadow: 2px 2px 3px #6d6e71;
  white-space: nowrap;
  width: auto;
  transition: opacity 0.25s linear;
}
.site-graphics figure.hover::after,
site-graphic figure.hover::after {
  visibility: visible;
  transition-delay: 0.3s;
  opacity: 1;
}
.site-graphics .ico-soft-button,
site-graphic .ico-soft-button {
  margin: 0;
}
.site-graphics .ico-soft-button figcaption,
site-graphic .ico-soft-button figcaption {
  padding: 10px;
  color: #ffffff;
}
.site-graphics .ico-soft-button.ico-soft-button-16,
site-graphic .ico-soft-button.ico-soft-button-16 {
  height: 34px;
}
.site-graphics .ico-soft-button.ico-soft-button-16 figcaption,
site-graphic .ico-soft-button.ico-soft-button-16 figcaption {
  font-size: 13px;
  line-height: 13px;
  max-height: 34px;
  max-width: 292px;
}
.site-graphics .ico-soft-button.ico-soft-button-32,
site-graphic .ico-soft-button.ico-soft-button-32 {
  height: 40px;
}
.site-graphics .ico-soft-button.ico-soft-button-32 figcaption,
site-graphic .ico-soft-button.ico-soft-button-32 figcaption {
  font-size: 18px;
  line-height: 18px;
  max-height: 40px;
  max-width: 340px;
}
.site-graphics .ico-soft-button.ico-soft-button-64,
site-graphic .ico-soft-button.ico-soft-button-64 {
  height: 46px;
}
.site-graphics .ico-soft-button.ico-soft-button-64 figcaption,
site-graphic .ico-soft-button.ico-soft-button-64 figcaption {
  font-size: 24px;
  line-height: 24px;
  max-height: 46px;
  max-width: 618px;
}
.site-graphics .ico-soft-button .object-icon,
site-graphic .ico-soft-button .object-icon {
  margin: 8px auto;
}
.site-graphics .ico-soft-button .ico-entity-16,
site-graphic .ico-soft-button .ico-entity-16 {
  margin: 8px auto;
}
.site-graphics .ico-soft-button .ico-entity-32,
site-graphic .ico-soft-button .ico-entity-32 {
  margin: 8px auto;
}
.site-graphics .ico-soft-button .ico-entity-64,
site-graphic .ico-soft-button .ico-entity-64 {
  margin: 13px auto 5px auto;
}
.site-graphics .ico-soft-button .user-event-icon,
site-graphic .ico-soft-button .user-event-icon {
  width: 32px;
  height: 32px;
  margin: 8px auto;
}
.site-graphics .ico-soft-button figcaption,
site-graphic .ico-soft-button figcaption {
  box-sizing: border-box;
  height: auto;
  line-height: 16px;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 34px;
}
.site-graphics .ico-soft-button figcaption.small,
site-graphic .ico-soft-button figcaption.small {
  font-size: 13px;
}
.site-graphics .ico-soft-button figcaption.medium,
site-graphic .ico-soft-button figcaption.medium {
  font-size: 18px;
  line-height: 21px;
}
.site-graphics .ico-soft-button figcaption.large,
site-graphic .ico-soft-button figcaption.large {
  font-size: 24px;
  line-height: 26px;
}
.site-graphics .ico-soft-button.text figcaption.text-label-small,
site-graphic .ico-soft-button.text figcaption.text-label-small {
  font-size: 12px;
  line-height: 16px;
  max-height: 34px;
}
.site-graphics .ico-soft-button.text figcaption.text-label-medium,
site-graphic .ico-soft-button.text figcaption.text-label-medium {
  font-size: 14px;
  line-height: 20px;
  max-height: 56px;
}
.site-graphics .ico-soft-button.text figcaption.text-label-large,
site-graphic .ico-soft-button.text figcaption.text-label-large {
  font-size: 20px;
  line-height: 30px;
  max-height: 82px;
}
.site-graphics .ico-soft-button.text .object-icon,
site-graphic .ico-soft-button.text .object-icon {
  display: none;
}
.site-graphics .ico-soft-button.text.active figcaption,
site-graphic .ico-soft-button.text.active figcaption {
  visibility: visible;
}
.site-graphics .ico-soft-button.softbutton.active figcaption,
site-graphic .ico-soft-button.softbutton.active figcaption {
  visibility: visible;
}
.site-graphics .ico-soft-button.softbutton .ico-soft-button,
site-graphic .ico-soft-button.softbutton .ico-soft-button {
  box-shadow: 0 0 10px transparent;
  margin: 0;
}
.site-graphics .ico-soft-button.softbutton .ico-soft-button.ico-soft-button-16 figcaption,
site-graphic .ico-soft-button.softbutton .ico-soft-button.ico-soft-button-16 figcaption {
  font-size: 12px;
  line-height: 24px;
  max-height: 24px;
  min-width: 66px;
  max-width: 292px;
}
.site-graphics .ico-soft-button.softbutton .ico-soft-button.ico-soft-button-32 figcaption,
site-graphic .ico-soft-button.softbutton .ico-soft-button.ico-soft-button-32 figcaption {
  font-size: 14px;
  line-height: 32px;
  max-height: 32px;
  min-width: 76px;
  max-width: 340px;
}
.site-graphics .ico-soft-button.softbutton .ico-soft-button.ico-soft-button-64 figcaption,
site-graphic .ico-soft-button.softbutton .ico-soft-button.ico-soft-button-64 figcaption {
  font-size: 20px;
  line-height: 64px;
  max-height: 64px;
  min-width: 132px;
  max-width: 618px;
}
.site-graphics .ico-soft-button.softbutton .ico-soft-button figcaption,
site-graphic .ico-soft-button.softbutton .ico-soft-button figcaption {
  background: none;
  color: white;
  border: none;
}
.site-graphics #siteGraphicsRibbon,
site-graphic #siteGraphicsRibbon {
  position: absolute;
  bottom: 2.5%;
  left: 2.5%;
  height: 150px;
  width: 130px;
  line-height: 145px;
  text-align: center;
  overflow: visible;
  z-index: 100;
}
.site-graphics #siteGraphicsRibbon.ready-to-drop figure,
site-graphic #siteGraphicsRibbon.ready-to-drop figure {
  cursor: default;
}
.site-graphics #siteGraphicsRibbon.overlay,
site-graphic #siteGraphicsRibbon.overlay {
  background-color: rgba(135, 206, 250, 0.3);
}
.site-graphics #siteGraphicsRibbon figure,
site-graphic #siteGraphicsRibbon figure {
  display: inline-block;
  vertical-align: bottom;
  margin-bottom: 25px;
  visibility: hidden;
  animation: none;
  position: relative;
}
.site-graphics #siteGraphicsRibbon figure:first-of-type,
site-graphic #siteGraphicsRibbon figure:first-of-type {
  visibility: visible;
}
.site-graphics #siteGraphicsRibbon figure.softbutton,
site-graphic #siteGraphicsRibbon figure.softbutton {
  width: auto;
}
.site-graphics #siteGraphicsRibbon figure.softbutton .ico-soft-button.ico-soft-button-24 figcaption,
site-graphic #siteGraphicsRibbon figure.softbutton .ico-soft-button.ico-soft-button-24 figcaption {
  max-width: 90px;
}
.site-graphics #siteGraphicsRibbon figure.softbutton .ico-soft-button.ico-soft-button-32 figcaption,
site-graphic #siteGraphicsRibbon figure.softbutton .ico-soft-button.ico-soft-button-32 figcaption {
  max-width: 90px;
}
.site-graphics #siteGraphicsRibbon figure.softbutton .ico-soft-button.ico-soft-button-64 figcaption,
site-graphic #siteGraphicsRibbon figure.softbutton .ico-soft-button.ico-soft-button-64 figcaption {
  min-width: 90px;
  max-width: 90px;
}
.site-graphics #siteGraphicsRibbon figure.text,
site-graphic #siteGraphicsRibbon figure.text {
  max-width: 90px;
}
.site-graphics #siteGraphicsRibbon .label-count,
site-graphic #siteGraphicsRibbon .label-count {
  position: absolute;
  left: 40px;
  bottom: 5px;
  padding: 3px 0;
  color: #ffffff;
  font-weight: bold;
  background-color: #56aa1c;
  line-height: 13px;
  z-index: 5;
  width: 52px;
}
.site-graphics #siteGraphicsRibbon .label-count.hidden,
site-graphic #siteGraphicsRibbon .label-count.hidden {
  display: none;
}
.site-graphics #siteGraphicsRibbon .label-count.small,
site-graphic #siteGraphicsRibbon .label-count.small,
.site-graphics #siteGraphicsRibbon .label-count.medium,
site-graphic #siteGraphicsRibbon .label-count.medium {
  bottom: 10px;
}
.site-graphics #siteGraphicsRibbon .label-count.large,
site-graphic #siteGraphicsRibbon .label-count.large {
  bottom: -8px;
}
.site-graphic-widget-view site-graphic {
  background-color: transparent;
}
.site-graphic-widget-view site-graphic .three-dee-place {
  background-color: transparent;
}
.three-dee-place {
  text-align: center;
  background-color: #ededed;
  position: relative;
}
.three-dee-place canvas {
  position: relative;
  z-index: 2;
}
.three-dee-place .soft-buttons-container {
  height: 100%;
}
.three-dee-place .soft-buttons-container:not(.display-buttons) .softbutton {
  display: none;
}
.three-dee-place figure {
  visibility: hidden;
  position: absolute;
  padding: 5px;
}
.three-dee-place figure.placed {
  visibility: visible;
  margin: 0;
}
.three-dee-place figure.active {
  visibility: visible;
  margin: 0;
  cursor: default;
}
.three-dee-place figure.selected {
  background-color: #d9ead2;
  border: 1px solid #56aa1c;
  max-height: 150px !important;
}
.three-dee-place figure {
  padding: 0;
  cursor: pointer;
}
.three-dee-place figure.text {
  cursor: default;
}
.three-dee-place figure.softbutton {
  cursor: pointer;
  z-index: 10;
}
.three-dee-place figure.softbutton .ico-soft-button figcaption {
  color: white;
}
.three-dee-place {
  height: 100%;
}
.three-dee-place canvas {
  position: absolute;
  top: 0;
  left: 0;
}
#tooltip-3d {
  position: absolute;
  background-color: #ffffff;
  z-index: 100;
  margin: -15px 0 0 15px;
  display: block;
  top: 0;
  left: 0;
  color: #000000;
  height: 18px;
  line-height: 18px;
  padding: 0 5px;
  border: 1px solid #6d6e71;
  box-shadow: 2px 2px 3px #6d6e71;
  white-space: nowrap;
  width: auto;
  transition: opacity 0.25s linear;
}
.german-language {
  width: 400px;
}
.german-language form {
  margin-left: 149px !important;
}
.german-language form #saveAsSiteGraphic {
  margin-right: 7px !important;
}
.german-language .btn {
  max-width: 140px !important;
  width: 130px !important;
}
#enlargedWidgetWrapper + .tooltip-event {
  z-index: 999999995;
}
#controlappliance .modal-body {
  height: 400px;
}
#controlappliance .modal-body .controloutput ul li,
#controlappliance .modal-body .controlalarm ul li {
  cursor: default;
}
#controlappliance .modal-body .controloutput ul li label,
#controlappliance .modal-body .controlalarm ul li label {
  pointer-events: none;
}
#controlappliance .modal-body .controloutput ul li label input,
#controlappliance .modal-body .controlalarm ul li label input {
  pointer-events: auto;
}
#controlappliance .modal-body .tab-content {
  height: 100%;
  position: relative;
}
#controlappliance .modal-body .tab-content.advancedControl {
  display: flex;
}
#controlappliance .modal-body .tab-content .open-door-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#controlappliance .modal-body .tab-content .control-output-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#controlappliance .modal-body .tab-content .control-alarm-tab {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#controlappliance .modal-body .tab-content .split-panel {
  display: flex;
  width: 100%;
  height: 100%;
}
#controlappliance .modal-body .tree-headers {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  min-height: 20px;
  height: 20px;
  position: relative;
}
#controlappliance .modal-body .tree-headers .control-appliance-label {
  height: 20px;
  min-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
#controlappliance .custom-input--radio:disabled.selected:before {
  background-image: none;
}
body.mobile #controlappliance .modal-body .body-content {
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}
body.mobile #controlappliance .modal-body .control-alarm-tab .tree-headers .control-appliance-label {
  min-width: 74px;
}
body.mobile #controlappliance .modal-body .tree-headers {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  justify-content: flex-end;
  align-items: flex-end;
  min-height: 40px;
  height: 80px;
  padding: 0 20px 0 0;
  z-index: 1;
  background: #ffffff;
}
body.mobile #controlappliance .modal-body .tree-headers .control-appliance-label {
  height: 20px;
  min-width: 50px;
  font-size: 9pt;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
body.mobile #controlappliance .modal-body .tree-headers + .ui-tree-wrapper.search-enabled .search-component {
  margin-bottom: 40px;
}
@media only screen and (max-width: 410px) {
  body.mobile #controlappliance .modal-body .tab-content .tree-headers .control-appliance-label {
    min-width: 50px;
  }
  body.mobile #controlappliance .modal-body .tab-content .ui-tree-extension-right {
    width: 50px !important;
  }
}
.controls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 20px;
}
.controls-grid .controls-grid-item {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  margin-top: 5px;
}
.controls-grid .controls-grid-item.button-control {
  justify-content: flex-end;
}
.controls-grid .controls-grid-item .input-placeholder {
  min-width: auto;
}
.controls-grid .controls-grid-item fieldset-control,
.controls-grid .controls-grid-item checkable-fieldset-control {
  width: 100% !important;
  max-width: 100% !important;
}
.controls-grid .controls-grid-item number-control input[type='number'] {
  min-width: 50px;
  width: 50px;
}
#advancedControlModal .modal-body {
  --modal-body-padding: 10px;
  padding-bottom: var(--modal-body-padding);
  padding-right: var(--modal-body-padding);
}
#advancedControlModal .modal-body advanced-control-configuration > div {
  --wrapper-padding-top: 0;
  flex-grow: 1;
  border: none;
  margin: 0 calc(-1 * var(--modal-body-padding)) 0 -20px;
  padding-right: var(--modal-body-padding);
}
.advanced-control .ui-tree-wrapper {
  flex-grow: 1;
  overflow: auto;
}
advanced-control-configuration > div {
  --wrapper-padding-top: 10px;
  border-top: 1px solid #a7a9ac;
  margin: 0 -20px;
  padding: var(--wrapper-padding-top) 20px 0 20px;
}
advanced-control-configuration > div .device-configuration-wrapper {
  --apply-btn-height: 24px;
  --button-wrapper-margin: 10px;
  height: calc((var(--apply-btn-height) + var(--button-wrapper-margin) + 170px));
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
advanced-control-configuration > div .device-configuration-wrapper device-configuration {
  overflow: auto;
}
advanced-control-configuration > div .device-configuration-wrapper .button-wrapper {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  margin-top: calc(var(--button-wrapper-margin) / 2);
}
advanced-control-configuration > div .device-configuration-wrapper .button-wrapper .success-mark-wrapper {
  position: relative;
}
advanced-control-configuration > div .device-configuration-wrapper .button-wrapper .success-mark-wrapper .image-sizes {
  width: var(--apply-btn-height);
  height: var(--apply-btn-height);
}
advanced-control-configuration > div .device-configuration-wrapper .button-wrapper .success-mark-wrapper .upper-block {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ffffff;
  width: var(--apply-btn-height);
  height: var(--apply-btn-height);
}
advanced-control-configuration > div .device-configuration-wrapper .button-wrapper .success-mark-wrapper .upper-block.hide {
  left: 100%;
  transition: left ease-in-out 0.3s;
}
advanced-control-configuration > div .device-configuration-wrapper .button-wrapper .success-mark-wrapper [svg-image] {
  height: var(--apply-btn-height);
}
advanced-control-configuration > div .device-configuration-wrapper .button-wrapper .success-mark-wrapper [svg-image] img {
  width: var(--apply-btn-height);
  height: var(--apply-btn-height);
}
advanced-control-configuration > div .device-configuration-wrapper .button-wrapper .btn {
  height: var(--apply-btn-height);
  line-height: 1;
  z-index: 10;
}
advanced-control-configuration > div .device-configuration-wrapper fieldset {
  display: contents;
}
advanced-control-configuration > div .device-configuration-wrapper fieldset legend {
  display: none;
}
.fieldset-control {
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
}
.fieldset-control .input-group.new-appliance-field {
  width: 600px;
}
.fieldset-control .input-group.new-appliance-field > label {
  width: 260px;
}
.status {
  color: #56aa1c;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0;
  font-weight: bold;
}
.offline {
  color: #FF0000;
  font-weight: bold;
}
.amber {
  color: #f8ae00;
  font-weight: bold;
}
.blue {
  color: #0075FF;
  font-weight: bold;
}
.online,
.updating,
.onlineonbattery,
.reinstating {
  color: #56aa1c;
  font-weight: bold;
}
.applianceType {
  margin-left: 2px;
  color: #56aa1c;
  font-size: 15px;
  line-height: 25px;
}
.radio-field .input-group {
  width: 285px;
  margin-bottom: 0;
}
#manageCodesButton {
  margin-bottom: 10px;
  margin-left: 0;
}
body.mobile #manageCodesButton {
  margin: 10px;
  font-size: 11pt;
}
@media screen and (max-width: 680px) {
  body.mobile fieldset legend > label {
    display: block;
    line-height: 12px;
    white-space: normal;
  }
}
appliance-configuration {
  height: 100%;
  display: block;
  flex: auto;
}
#options > .modal-body {
  height: 600px;
}
#building-permission-details {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}
#building-permission-details #addAccessLevelButton {
  position: relative;
  right: 15px;
  float: right;
  top: 9px;
  margin-bottom: 9px;
}
.permissions-table {
  border-collapse: collapse;
  width: 100%;
  height: calc(100% - 50px);
}
.permissions-table.building-permissions {
  position: relative;
}
.permissions-table.building-permissions tr {
  border-bottom: 1px solid #a7a9ac;
}
.permissions-table.building-permissions td {
  vertical-align: top;
  width: 34%;
  padding: 15px;
}
.permissions-table.building-permissions td.combined-td {
  border-right: 1px solid #a7a9ac;
}
.permissions-table.building-permissions td a.disabled {
  color: #9b9b9b !important;
  cursor: default;
}
.permissions-table.building-permissions td .remove-access-level {
  position: absolute !important;
  top: 2px;
  right: 15px;
}
.permissions-table.building-permissions td .level-cell {
  position: relative;
  height: 100%;
  min-height: 100px;
  overflow: auto;
}
.permissions-table.building-permissions td .level-cell.appliance-block {
  border-right: 1px solid #a7a9ac;
}
.permissions-table.building-permissions td .level-cell h3 {
  margin-bottom: 14px;
}
.permissions-table.building-permissions td li {
  margin-bottom: 3px;
}
.permissions-table.building-permissions td li img {
  margin-right: 5px;
  margin-top: -2px;
}
.permissions-table.building-permissions td li:last-child {
  margin-bottom: 0;
}
.permissions-table.building-permissions td:first-child {
  width: 32%;
}
.permissions-table thead {
  font-weight: bold;
}
.permissions-table thead tr th {
  cursor: default;
  border-bottom: 1px solid #a7a9ac;
  border-right: 1px solid #a7a9ac;
  padding: 5px;
  text-align: start;
  width: 50%;
}
.permissions-table thead tr th:last-child {
  border-right: 0;
}
.permissions-table tbody tr td {
  border-right: 1px solid #a7a9ac;
  height: 20px;
  padding: 5px;
  vertical-align: middle;
  width: 50%;
  word-break: break-word;
}
.permissions-table tbody tr td:last-child {
  border-right: 0;
}
.permissions-table tbody tr:first-child {
  text-align: start;
}
.replace-device-table tbody tr:hover td {
  background-color: #d9ead2;
}
.replace-device-table tbody tr.active td {
  background-color: #89c377;
}
.print-server .input-placeholder {
  width: 310px;
  flex-direction: column;
  align-items: flex-start;
  flex-grow: 0;
}
.print-server .input-placeholder button {
  margin-top: 10px;
}
.printers-button {
  text-align: right;
  padding-right: 5px;
  margin-right: 40px;
  margin-top: 25px;
}
.print-server {
  width: 73%;
}
.print-server .input-group {
  margin: 10px 0 10px 20px;
}
.print-server .btn-group {
  text-align: right;
  padding-right: 5px;
}
#getLog .modal-body {
  height: 420px;
}
#getLog .modal-body .ui-tree-wrapper {
  width: 100%;
}
#testUserPassword .input-group {
  margin: 30px 20px;
}
#testUserPassword .input-group .input {
  width: 250px;
}
/*styles for user options*/
#user-options-help {
  padding: 0 20px;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}
#user-options-help #contacts h2 {
  font-weight: bold;
}
#user-options-help #contacts img {
  width: 770px;
  height: 610px;
  margin-top: 10px;
}
/**
 * Styles for forms in the people section.
 */
input.date-input,
.custom-date-input {
  width: 100%;
  font-size: 12px;
}
input.date-input {
  padding-right: 25px !important;
}
#permissionsTabs {
  box-sizing: border-box;
}
#permissionsTabs .tab-content {
  height: 100%;
}
#permissionsTabs .permissions fieldset {
  padding-right: initial;
}
.permissions {
  padding: 17px;
  height: 100%;
  position: relative;
}
.permissions .list-wrapper {
  width: 100%;
  overflow: auto;
  height: calc(100% - 17px - 5px);
}
.permissions .list-wrapper .static-list.groups,
.permissions .list-wrapper .static-list li {
  margin-bottom: 10px;
}
.permissions fieldset {
  position: static;
  margin: 0;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  padding-bottom: 0;
}
.permissions fieldset legend {
  top: 17px;
  left: auto;
}
.permissions fieldset legend.bold {
  font-size: 13px;
  font-weight: bold;
  line-height: 16px;
  margin-bottom: 5px;
}
.permissions .softwareElements {
  position: relative;
  top: 2px;
}
.permissions .checkboxOffset {
  padding-right: 60px;
}
.permissions .checkboxOffset-double {
  padding-right: 120px;
}
.permissions.time-profiles h3 {
  margin-bottom: 7px;
}
.disabled-behaviour {
  pointer-events: none !important;
  cursor: default !important;
  color: #a7a9ac !important;
}
.disabledLink {
  pointer-events: none !important;
  cursor: default !important;
  color: #a7a9ac !important;
}
.disabledLink a {
  pointer-events: none !important;
  cursor: default !important;
  color: #a7a9ac !important;
}
.draining,
.low {
  color: #FF0000;
  font-weight: bold;
}
.critical {
  color: #ff4634;
  font-weight: bold;
}
.charging,
.full {
  color: #56aa1c;
  font-weight: bold;
}
.discharging {
  color: #ff7601;
  font-weight: bold;
}
.deviceStatus {
  margin-top: 17px;
}
.dcu-list {
  box-sizing: border-box;
  border: 1px solid #a7a9ac;
  background-color: #ededed;
  padding: 20px;
  overflow: auto;
  height: calc(100% - 67px);
  width: 380px;
}
.dcu-list .input-group:last-child {
  margin-bottom: 0;
}
.mapping-number {
  width: 20px;
}
.device-info .tab-content {
  height: 100%;
  overflow: auto;
}
.device-info .tab-content #accordion .accordion-item .item-content .mapping-holder {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  align-items: center;
  min-height: 30px;
}
.device-info .tab-content #accordion .accordion-item .item-content .container {
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 17px;
}
.device-info .tab-content #accordion .accordion-item .item-content .container .peripheral-name {
  width: 200px;
  display: inline-block;
  margin-left: 25px;
}
.device-info .tab-content #accordion .accordion-item .item-content .container .peripheral-name span {
  width: auto;
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless {
  display: grid;
  grid-template-rows: auto [last-line];
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless fieldset {
  margin-top: 10px;
  padding-top: 10px;
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless > div,
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless fieldset > div {
  padding-left: 25px;
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless > div .device-data,
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless fieldset > div .device-data {
  margin-bottom: 5px;
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless > div .device-data label,
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless fieldset > div .device-data label {
  width: 218px;
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless > div .device-data span,
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless fieldset > div .device-data span {
  line-height: 26px;
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless .btn {
  margin-left: 0;
  margin-right: 4px;
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless .fieldset-grid {
  display: grid;
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless .advanced-buttons {
  width: 0;
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless .green {
  color: #56aa1c;
  font-weight: 700;
}
.device-info .tab-content #accordion .accordion-item .item-content .container.wireless .amber {
  color: #f8ae00;
  font-weight: 700;
}
.device-info .tab-content .menu-container {
  box-sizing: border-box;
  padding: 17px;
}
.device-info .tab-content .menu-container .menu {
  height: 100%;
  box-sizing: border-box;
}
.device-info .tab-content .menu-container .menu-content {
  height: 100%;
}
.device-info .tab-content .menu-container .menu-content .container {
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 17px;
}
.device-info .tab-content .menu-container .menu-content .container .entity-chooser {
  display: inline-block;
}
.device-info .tab-content .menu-container .menu-content .container .peripheral-name {
  width: 200px;
  display: inline-block;
  margin-bottom: 20px;
  margin-left: 25px;
}
.device-info .tab-content .menu-container .menu-content .container .peripheral-name span {
  width: auto;
}
.add-object-container {
  display: flex;
  width: 100%;
  height: 100%;
}
.add-object-container #removeObjectButton {
  margin-top: 1px;
}
.add-object-container .input-group > label {
  width: 140px;
}
.add-object-container .btn-group {
  text-align: end;
  margin-top: 10px;
}
.add-object-container .disabled {
  color: #9b9b9b;
}
.add-object-container .working-area {
  display: flex;
  flex-direction: column;
  flex: 2;
  width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 0 15px 0 0;
  border-right: 1px solid #a7a9ac;
}
.add-object-container .working-area .input-placeholder {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  min-width: 200px;
  max-width: 200px;
}
.add-object-container .working-area .input-placeholder .newErrorMessage {
  flex: 0 0 100%;
}
.add-object-container .working-area .not-permissions {
  display: flex;
  position: relative;
  flex: 1;
  color: #3c3c3b;
  width: 95%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}
.add-object-container .working-area .not-permissions .message {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  bottom: 0;
  width: auto;
  right: 0;
  margin: auto;
}
.add-object-container .working-area select {
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDAgTDgsMCBMIDQsNCBaIiBmaWxsPSIjODI4MjgyIj48L3BhdGg+PC9zdmc+);
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-grid__header-cell--sort-asc {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDQgTDgsNCBMIDQsMCBaIiBmaWxsPSIjODI4MjgyIi8+PC9zdmc+);
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-grid__header-cell--sort-desc {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDAgTDgsMCBMIDQsNCBaIiBmaWxsPSIjODI4MjgyIj48L3BhdGg+PC9zdmc+);
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-grid__header-cell--checkbox {
  max-width: 14px;
  background-image: initial;
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-grid__header-cell--icon {
  max-width: 16px;
  background-image: initial;
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-grid__header-cell--date {
  max-width: 200px;
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-grid__header-cell--where {
  max-width: 150px;
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-table__cell--checkbox {
  max-width: 14px;
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-table__cell--icon {
  max-width: 16px;
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-table__cell--icon div {
  height: 16px;
  background-size: contain;
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-table__cell--date {
  max-width: 200px;
}
#mark-as-safe-modal.modal-with-checkable-grid-and-notes .modal-table__cell--where {
  max-width: 150px;
}
#mobile-mark-as-safe-modal .mobile-mark-as-safe-modal-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
}
#acknowledge-alarms-modal.modal-with-checkable-grid-and-notes .modal-grid__header-cell--checkbox {
  max-width: 14px;
  background-image: initial;
}
#acknowledge-alarms-modal.modal-with-checkable-grid-and-notes .modal-grid__header-cell--icon {
  max-width: 16px;
  background-image: initial;
}
#acknowledge-alarms-modal.modal-with-checkable-grid-and-notes .modal-grid__header-cell--date {
  max-width: 200px;
}
#acknowledge-alarms-modal.modal-with-checkable-grid-and-notes .modal-grid__header-cell--where {
  max-width: 150px;
}
#acknowledge-alarms-modal.modal-with-checkable-grid-and-notes .modal-table__cell--checkbox {
  max-width: 14px;
}
#acknowledge-alarms-modal.modal-with-checkable-grid-and-notes .modal-table__cell--icon {
  max-width: 16px;
}
#acknowledge-alarms-modal.modal-with-checkable-grid-and-notes .modal-table__cell--date {
  max-width: 200px;
}
#acknowledge-alarms-modal.modal-with-checkable-grid-and-notes .modal-table__cell--where {
  max-width: 150px;
}
#mobile-acknowledge-alarms-modal .mobile-acknowledge-alarms-modal-form {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
}
.video-frame {
  --videoControlsSize: 90px;
  --enlarged-widget-border: none;
  background-color: #eee;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  width: 100%;
  border: var(--enlarged-widget-border);
}
.video-frame embed {
  position: absolute;
  left: 0;
  top: 0;
}
.video-frame figure {
  height: 100%;
}
body.mobile .video-frame figure {
  display: flex;
}
.video-frame .offline figure {
  min-height: 202px;
}
.video-frame .camera-settings {
  position: absolute;
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 2;
  max-width: calc(100% - var(--videoControlsSize));
  pointer-events: none;
}
.video-frame .camera-settings .camera-time {
  display: flex;
  flex-grow: 1;
  align-items: flex-end;
}
.video-frame .camera-settings .camera-time span,
.video-frame .camera-settings .camera-name {
  background: hsla(0, 0%, 100%, 0.5);
  padding: 5px;
}
.video-frame .camera-settings .camera-time,
.video-frame .camera-settings .camera-name {
  font-size: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
  width: fit-content;
}
.video-frame.no-border {
  border: none;
}
.video-frame:hover {
  cursor: pointer;
  outline: 1px solid #56aa1c;
  background-color: #d9ead2;
}
body.mobile .video-frame:hover {
  outline: none;
}
.video-frame.is_playing {
  background-color: #000000;
}
.video-frame.black-background {
  background-color: #000000;
}
.video-frame .image {
  width: 64px;
  height: 66px;
}
.video-frame .title {
  text-align: center;
  width: 200px;
  color: #6d6e71;
}
.video-frame .error-message-title {
  text-align: center;
  color: #ffffff;
  min-width: 200px;
  font-size: 14px;
  margin-top: 10px;
  background-color: rgba(70, 70, 70, 0.5);
  padding: 10px 30px;
  border-radius: 50px;
}
body.mobile .video-frame {
  grid-area: auto !important;
}
@media screen and (orientation: landscape) {
  body.mobile .video-frame {
    overflow: visible !important;
  }
}
@media screen and (orientation: portrait) {
  body.mobile .video-frame {
    height: fit-content;
    min-height: 202px;
  }
}
.video-frame.enlarge {
  border: none;
}
@media screen and (orientation: landscape) {
  body.mobile .video-frame.enlarge {
    height: 100%;
  }
}
.video-frame.empty {
  background-color: #ffffff;
}
.video-frame.empty .main-container {
  background: none;
}
.video-frame.empty .add-camera-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 66px;
  margin: -33px 0 0 -32px;
}
.video-frame.empty .add-camera-image.disabled {
  opacity: 0.5;
  cursor: default;
  background-color: transparent;
}
.video-frame.empty .add-camera-image .image {
  width: 64px;
  height: 66px;
}
.video-frame.empty .add-camera-image .title {
  line-height: 20px;
  display: inline-block;
  margin: 9px 0 0 -68px;
  text-align: center;
  width: 200px;
  color: #6d6e71;
}
.video-frame.empty.disabled:hover {
  cursor: default;
  border: 2px solid #aaa;
  outline: none;
}
.video-frame.empty:not(.disabled):hover {
  background-color: #d9ead2;
}
.video-frame.empty:not(.disabled):hover .add-camera-image .image {
  background-position: -64px 0;
}
.video-frame.empty:not(.disabled):hover #ico-add-camera-64 .camera-image {
  fill: #56aa1c !important;
}
.video-frame.offline:not(.active):hover {
  outline: 1px solid #6d6e71;
}
.video-frame .offline-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 66px;
  margin: -33px 0 0 -32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.video-frame .offline-msg .image {
  background-position: -192px 0;
}
.video-frame .fullscreen-overlay {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
}
.video-frame .fullScreenElementsStyles {
  left: 0;
  top: 0;
  position: absolute !important;
  border: none !important;
  cursor: default;
}
.video-frame .fullScreenElementsStyles .fullscreen-overlay {
  display: block;
}
.video-frame:-moz-full-screen {
  left: 0;
  top: 0;
  position: absolute !important;
  border: none !important;
  cursor: default;
}
.video-frame:-moz-full-screen .fullscreen-overlay {
  display: block;
}
.video-frame:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  left: 0;
  top: 0;
  position: absolute !important;
  border: none !important;
  cursor: default;
}
.video-frame:-webkit-full-screen .fullscreen-overlay {
  display: block;
}
.video-frame:-ms-fullscreen {
  left: 0;
  top: 0;
  position: absolute !important;
  border: none !important;
  cursor: default;
}
.video-frame:-ms-fullscreen .fullscreen-overlay {
  display: block;
}
.video-frame:fullscreen {
  left: 0;
  top: 0;
  position: absolute !important;
  border: none !important;
  cursor: default;
}
.video-frame:fullscreen .fullscreen-overlay {
  display: block;
}
.video-frame.is_playing:-moz-full-screen {
  background-color: #000000 !important;
}
.video-frame.is_playing:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  background-color: #000000 !important;
}
.video-frame.is_playing:-ms-fullscreen {
  background-color: #000000 !important;
}
.video-frame.is_playing:fullscreen {
  background-color: #000000 !important;
}
.video-frame .streaming-container {
  background-image: url(../df9e398bfc565bc7b071.svg);
  background-size: cover;
  background-color: #4b4b4b;
  visibility: visible;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.video-frame .streaming-container .iv-camera-video-view-video-wrapper {
  width: 99% !important;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.video-frame .streaming-container .pvs-player {
  position: relative;
  display: flex;
  flex-grow: 1;
}
.video-frame .event-icon {
  margin: 5px 0 0 20px;
}
.video-frame.name-showed .event-icon {
  margin: 35px 0 0 20px;
}
.video-frame.active {
  outline: 1px solid #56aa1c;
}
body.mobile .video-frame.active {
  outline: none;
}
.video-frame camera-events {
  display: inline-block;
  text-align: center;
  animation: opacity-fade-out 0.2s ease-out;
  opacity: 0;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
}
.video-frame camera-events span {
  display: block;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 3px 5px;
  white-space: nowrap;
}
.video-frame camera-events.show {
  animation: opacity-fade-in 0.2s ease-out;
  opacity: 1;
}
.video-frame .name-showed camera-events {
  top: 40px;
}
.event-report-type {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#videoReportContent {
  height: 100%;
}
#videoReportContent #video-report-timeline.hide {
  visibility: hidden;
}
#videoReportContent .no-cameras-message {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 1.2rem;
  text-transform: uppercase;
}
#videoReportContent,
#enlargedWidgetWrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#videoReportContent,
#enlargedWidgetWrapper,
#videoEventModal .modal-body,
camera-in-modal {
  --rowsSize: 1;
}
body.mobile #videoReportContent .video-players-container,
body.mobile #enlargedWidgetWrapper .video-players-container,
body.mobile #videoEventModal .modal-body .video-players-container,
body.mobile camera-in-modal .video-players-container {
  box-sizing: border-box;
  height: auto;
  padding: 0;
  margin: 5px;
  grid-template-rows: repeat(var(--rowsSize), fit-content(100%)) !important;
  grid-template-columns: repeat(1, 100%) !important;
  overflow: auto;
}
@media screen and (orientation: landscape) {
  body.mobile #videoReportContent .video-players-container,
  body.mobile #enlargedWidgetWrapper .video-players-container,
  body.mobile #videoEventModal .modal-body .video-players-container,
  body.mobile camera-in-modal .video-players-container {
    height: 100%;
    grid-template-rows: repeat(var(--rowsSize), 100%) !important;
    grid-template-columns: repeat(1, 100%) !important;
  }
}
#videoReportContent .video-players-container,
#enlargedWidgetWrapper .video-players-container,
#videoEventModal .modal-body .video-players-container,
camera-in-modal .video-players-container {
  --scrollWidth: 0px;
  padding: 5px;
  padding-bottom: 10px;
  display: grid;
  grid-gap: 3px;
  position: relative;
  height: calc(100% - 45px - 15px);
}
#videoReportContent .video-players-container.list-view,
#enlargedWidgetWrapper .video-players-container.list-view,
#videoEventModal .modal-body .video-players-container.list-view,
camera-in-modal .video-players-container.list-view {
  grid-template-rows: repeat(1, 100%);
  overflow: scroll;
}
#videoReportContent.single-mode .video-players-container,
#enlargedWidgetWrapper.single-mode .video-players-container,
#videoEventModal .modal-body.single-mode .video-players-container,
camera-in-modal.single-mode .video-players-container {
  grid-template-rows: repeat(1, 100%);
  grid-template-columns: repeat(1, 1fr);
}
#videoReportContent.twoWay-mode .video-players-container,
#enlargedWidgetWrapper.twoWay-mode .video-players-container,
#videoEventModal .modal-body.twoWay-mode .video-players-container,
camera-in-modal.twoWay-mode .video-players-container {
  grid-template-rows: repeat(2, 50%);
  grid-template-columns: repeat(1, 1fr);
}
#videoReportContent.twoWay-mode .video-players-container.list-view,
#enlargedWidgetWrapper.twoWay-mode .video-players-container.list-view,
#videoEventModal .modal-body.twoWay-mode .video-players-container.list-view,
camera-in-modal.twoWay-mode .video-players-container.list-view {
  grid-template-rows: repeat(1, 100%);
  grid-template-columns: repeat(2, 1fr);
}
#videoReportContent.threeWay-mode .video-players-container,
#enlargedWidgetWrapper.threeWay-mode .video-players-container,
#videoEventModal .modal-body.threeWay-mode .video-players-container,
camera-in-modal.threeWay-mode .video-players-container {
  grid-template-rows: repeat(2, 50%);
  grid-template-columns: repeat(2, 1fr);
}
#videoReportContent.threeWay-mode .video-players-container.list-view,
#enlargedWidgetWrapper.threeWay-mode .video-players-container.list-view,
#videoEventModal .modal-body.threeWay-mode .video-players-container.list-view,
camera-in-modal.threeWay-mode .video-players-container.list-view {
  grid-template-columns: repeat(3, 1fr);
}
#videoReportContent.threeWay-mode .video-players-container:not(.list-view) .video-frame:last-child,
#enlargedWidgetWrapper.threeWay-mode .video-players-container:not(.list-view) .video-frame:last-child,
#videoEventModal .modal-body.threeWay-mode .video-players-container:not(.list-view) .video-frame:last-child,
camera-in-modal.threeWay-mode .video-players-container:not(.list-view) .video-frame:last-child {
  grid-column-start: 1;
  grid-column-end: 3;
}
#videoReportContent.fourWay-mode .video-players-container,
#enlargedWidgetWrapper.fourWay-mode .video-players-container,
#videoEventModal .modal-body.fourWay-mode .video-players-container,
camera-in-modal.fourWay-mode .video-players-container {
  grid-template-rows: repeat(2, 50%);
  grid-template-columns: repeat(2, 1fr);
}
#videoReportContent.fourWay-mode .video-players-container.list-view,
#enlargedWidgetWrapper.fourWay-mode .video-players-container.list-view,
#videoEventModal .modal-body.fourWay-mode .video-players-container.list-view,
camera-in-modal.fourWay-mode .video-players-container.list-view {
  grid-template-rows: repeat(1, 100%);
  grid-template-columns: repeat(4, 1fr);
}
#videoReportContent.fiveWay-mode .video-players-container,
#enlargedWidgetWrapper.fiveWay-mode .video-players-container,
#videoEventModal .modal-body.fiveWay-mode .video-players-container,
camera-in-modal.fiveWay-mode .video-players-container {
  grid-template-rows: repeat(2, 50%);
}
#videoReportContent.fiveWay-mode .video-players-container.list-view,
#enlargedWidgetWrapper.fiveWay-mode .video-players-container.list-view,
#videoEventModal .modal-body.fiveWay-mode .video-players-container.list-view,
camera-in-modal.fiveWay-mode .video-players-container.list-view {
  grid-template-columns: repeat(5, 1fr);
}
#videoReportContent.fiveWay-mode .video-players-container:not(.list-view),
#enlargedWidgetWrapper.fiveWay-mode .video-players-container:not(.list-view),
#videoEventModal .modal-body.fiveWay-mode .video-players-container:not(.list-view),
camera-in-modal.fiveWay-mode .video-players-container:not(.list-view) {
  grid-template-areas: "first first second second third third" "fourth fourth fourth fifth fifth fifth";
}
body.mobile #videoReportContent.fiveWay-mode .video-players-container:not(.list-view),
body.mobile #enlargedWidgetWrapper.fiveWay-mode .video-players-container:not(.list-view),
body.mobile #videoEventModal .modal-body.fiveWay-mode .video-players-container:not(.list-view),
body.mobile camera-in-modal.fiveWay-mode .video-players-container:not(.list-view) {
  grid-template-areas: inherit;
}
#videoReportContent.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(1),
#enlargedWidgetWrapper.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(1),
#videoEventModal .modal-body.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(1),
camera-in-modal.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(1) {
  grid-area: first;
}
#videoReportContent.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(2),
#enlargedWidgetWrapper.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(2),
#videoEventModal .modal-body.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(2),
camera-in-modal.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(2) {
  grid-area: second;
}
#videoReportContent.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(3),
#enlargedWidgetWrapper.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(3),
#videoEventModal .modal-body.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(3),
camera-in-modal.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(3) {
  grid-area: third;
}
#videoReportContent.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(4),
#enlargedWidgetWrapper.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(4),
#videoEventModal .modal-body.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(4),
camera-in-modal.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(4) {
  grid-area: fourth;
}
#videoReportContent.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(5),
#enlargedWidgetWrapper.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(5),
#videoEventModal .modal-body.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(5),
camera-in-modal.fiveWay-mode .video-players-container:not(.list-view) .video-frame:nth-child(5) {
  grid-area: fifth;
}
#videoReportContent.sixWay-mode .video-players-container,
#enlargedWidgetWrapper.sixWay-mode .video-players-container,
#videoEventModal .modal-body.sixWay-mode .video-players-container,
camera-in-modal.sixWay-mode .video-players-container {
  grid-template-rows: repeat(2, 50%);
  grid-template-columns: repeat(3, 1fr);
}
#videoReportContent.sixWay-mode .video-players-container.list-view,
#enlargedWidgetWrapper.sixWay-mode .video-players-container.list-view,
#videoEventModal .modal-body.sixWay-mode .video-players-container.list-view,
camera-in-modal.sixWay-mode .video-players-container.list-view {
  grid-template-rows: repeat(1, 100%);
  grid-template-columns: repeat(6, 1fr);
}
#videoReportContent.nineWay-mode .video-players-container,
#enlargedWidgetWrapper.nineWay-mode .video-players-container,
#videoEventModal .modal-body.nineWay-mode .video-players-container,
camera-in-modal.nineWay-mode .video-players-container {
  grid-template-rows: repeat(3, 33%);
  grid-template-columns: repeat(3, 1fr);
}
#videoReportContent.nineWay-mode .video-players-container.list-view,
#enlargedWidgetWrapper.nineWay-mode .video-players-container.list-view,
#videoEventModal .modal-body.nineWay-mode .video-players-container.list-view,
camera-in-modal.nineWay-mode .video-players-container.list-view {
  grid-template-rows: repeat(3, 50%);
}
#videoReportContent.twelveWay-mode .video-players-container,
#enlargedWidgetWrapper.twelveWay-mode .video-players-container,
#videoEventModal .modal-body.twelveWay-mode .video-players-container,
camera-in-modal.twelveWay-mode .video-players-container {
  grid-template-rows: repeat(4, 25%);
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1px;
}
#videoReportContent.twelveWay-mode .video-players-container.list-view,
#enlargedWidgetWrapper.twelveWay-mode .video-players-container.list-view,
#videoEventModal .modal-body.twelveWay-mode .video-players-container.list-view,
camera-in-modal.twelveWay-mode .video-players-container.list-view {
  grid-template-rows: repeat(4, 50%);
}
#videoReportContent.sixTeenWay-mode .video-players-container,
#enlargedWidgetWrapper.sixTeenWay-mode .video-players-container,
#videoEventModal .modal-body.sixTeenWay-mode .video-players-container,
camera-in-modal.sixTeenWay-mode .video-players-container {
  grid-template-rows: repeat(4, 25%);
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
}
#videoReportContent.sixTeenWay-mode .video-players-container.list-view,
#enlargedWidgetWrapper.sixTeenWay-mode .video-players-container.list-view,
#videoEventModal .modal-body.sixTeenWay-mode .video-players-container.list-view,
camera-in-modal.sixTeenWay-mode .video-players-container.list-view {
  grid-template-rows: repeat(4, 50%);
}
#videoReportContent.twentyWay-mode .video-players-container,
#enlargedWidgetWrapper.twentyWay-mode .video-players-container,
#videoEventModal .modal-body.twentyWay-mode .video-players-container,
camera-in-modal.twentyWay-mode .video-players-container {
  grid-template-rows: repeat(5, 20%);
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1px;
}
#videoReportContent.twentyWay-mode .video-players-container.list-view,
#enlargedWidgetWrapper.twentyWay-mode .video-players-container.list-view,
#videoEventModal .modal-body.twentyWay-mode .video-players-container.list-view,
camera-in-modal.twentyWay-mode .video-players-container.list-view {
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(2, 50%);
}
#videoReportContent.single-mode .video-frame.active,
#enlargedWidgetWrapper.single-mode .video-frame.active,
#videoEventModal .modal-body.single-mode .video-frame.active,
camera-in-modal.single-mode .video-frame.active {
  display: block;
}
#videoReportContent .timeline-container,
#enlargedWidgetWrapper .timeline-container,
#videoEventModal .modal-body .timeline-container,
camera-in-modal .timeline-container {
  height: 110px;
  clear: both;
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  margin-bottom: 15px;
}
#videoReportContent .timeline-container.new-timeline,
#enlargedWidgetWrapper .timeline-container.new-timeline,
#videoEventModal .modal-body .timeline-container.new-timeline,
camera-in-modal .timeline-container.new-timeline {
  align-items: center;
  height: 65px;
}
#videoReportContent .timeline-container.new-timeline .btn-group.zoom-btn-group,
#enlargedWidgetWrapper .timeline-container.new-timeline .btn-group.zoom-btn-group,
#videoEventModal .modal-body .timeline-container.new-timeline .btn-group.zoom-btn-group,
camera-in-modal .timeline-container.new-timeline .btn-group.zoom-btn-group {
  margin: 5px 0 0 0;
}
#videoReportContent .timeline-container.new-timeline .btn-group.zoom-btn-group #timeLineZoomIn,
#enlargedWidgetWrapper .timeline-container.new-timeline .btn-group.zoom-btn-group #timeLineZoomIn,
#videoEventModal .modal-body .timeline-container.new-timeline .btn-group.zoom-btn-group #timeLineZoomIn,
camera-in-modal .timeline-container.new-timeline .btn-group.zoom-btn-group #timeLineZoomIn,
#videoReportContent .timeline-container.new-timeline .btn-group.zoom-btn-group #timeLineZoomOut,
#enlargedWidgetWrapper .timeline-container.new-timeline .btn-group.zoom-btn-group #timeLineZoomOut,
#videoEventModal .modal-body .timeline-container.new-timeline .btn-group.zoom-btn-group #timeLineZoomOut,
camera-in-modal .timeline-container.new-timeline .btn-group.zoom-btn-group #timeLineZoomOut {
  top: 7px;
}
#videoReportContent .timeline-container.new-timeline .time-line-buttons,
#enlargedWidgetWrapper .timeline-container.new-timeline .time-line-buttons,
#videoEventModal .modal-body .timeline-container.new-timeline .time-line-buttons,
camera-in-modal .timeline-container.new-timeline .time-line-buttons {
  position: relative;
  top: 0;
  padding: 0 10px;
}
#videoReportContent .timeline-container .sdk-calendar .hidden-image,
#enlargedWidgetWrapper .timeline-container .sdk-calendar .hidden-image,
#videoEventModal .modal-body .timeline-container .sdk-calendar .hidden-image,
camera-in-modal .timeline-container .sdk-calendar .hidden-image {
  position: absolute;
  width: 0;
  height: 0;
  display: none;
}
#videoReportContent .timeline-container .time-line-buttons,
#enlargedWidgetWrapper .timeline-container .time-line-buttons,
#videoEventModal .modal-body .timeline-container .time-line-buttons,
camera-in-modal .timeline-container .time-line-buttons {
  margin-top: 5px;
  overflow: visible;
}
#videoReportContent .timeline-container .time-line-buttons button:not(.pvs-calendar-month__day):not(.pvs-calendar-year__month):not(.pvs-calendar-years__year),
#enlargedWidgetWrapper .timeline-container .time-line-buttons button:not(.pvs-calendar-month__day):not(.pvs-calendar-year__month):not(.pvs-calendar-years__year),
#videoEventModal .modal-body .timeline-container .time-line-buttons button:not(.pvs-calendar-month__day):not(.pvs-calendar-year__month):not(.pvs-calendar-years__year),
camera-in-modal .timeline-container .time-line-buttons button:not(.pvs-calendar-month__day):not(.pvs-calendar-year__month):not(.pvs-calendar-years__year) {
  width: 80px;
}
#videoReportContent .timeline-container .time-line-buttons button:not(.pvs-calendar-month__day):not(.pvs-calendar-year__month):not(.pvs-calendar-years__year) figure > div,
#enlargedWidgetWrapper .timeline-container .time-line-buttons button:not(.pvs-calendar-month__day):not(.pvs-calendar-year__month):not(.pvs-calendar-years__year) figure > div,
#videoEventModal .modal-body .timeline-container .time-line-buttons button:not(.pvs-calendar-month__day):not(.pvs-calendar-year__month):not(.pvs-calendar-years__year) figure > div,
camera-in-modal .timeline-container .time-line-buttons button:not(.pvs-calendar-month__day):not(.pvs-calendar-year__month):not(.pvs-calendar-years__year) figure > div {
  margin: 6px auto 0;
}
#videoReportContent .timeline-container .video-timeline,
#enlargedWidgetWrapper .timeline-container .video-timeline,
#videoEventModal .modal-body .timeline-container .video-timeline,
camera-in-modal .timeline-container .video-timeline {
  margin: 0 0 0 10px;
  flex: 1;
}
#videoReportContent .timeline-container .zoom-btn-group,
#enlargedWidgetWrapper .timeline-container .zoom-btn-group,
#videoEventModal .modal-body .timeline-container .zoom-btn-group,
camera-in-modal .timeline-container .zoom-btn-group {
  width: 25px;
  max-width: 25px;
  min-width: 25px;
  height: 100%;
  margin: 8px 0 0 0;
}
#videoReportContent .timeline-container .zoom-btn-group .btn,
#enlargedWidgetWrapper .timeline-container .zoom-btn-group .btn,
#videoEventModal .modal-body .timeline-container .zoom-btn-group .btn,
camera-in-modal .timeline-container .zoom-btn-group .btn {
  display: block;
  float: none;
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 1px 6px;
  height: 23px;
  line-height: 21px;
  position: relative;
  border: none;
  min-width: inherit;
}
#videoReportContent .timeline-container .zoom-btn-group #timeLineZoomIn,
#enlargedWidgetWrapper .timeline-container .zoom-btn-group #timeLineZoomIn,
#videoEventModal .modal-body .timeline-container .zoom-btn-group #timeLineZoomIn,
camera-in-modal .timeline-container .zoom-btn-group #timeLineZoomIn {
  top: 20px;
}
#videoReportContent .timeline-container .zoom-btn-group #timeLineZoomOut,
#enlargedWidgetWrapper .timeline-container .zoom-btn-group #timeLineZoomOut,
#videoEventModal .modal-body .timeline-container .zoom-btn-group #timeLineZoomOut,
camera-in-modal .timeline-container .zoom-btn-group #timeLineZoomOut {
  top: 25px;
}
#videoReportContent.loading,
#enlargedWidgetWrapper.loading,
#videoEventModal .modal-body.loading,
camera-in-modal.loading {
  display: block;
  width: 100%;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
}
#videoReportContent.loading .video-frame,
#enlargedWidgetWrapper.loading .video-frame,
#videoEventModal .modal-body.loading .video-frame,
camera-in-modal.loading .video-frame {
  display: none !important;
}
#videoReportContent.loading::before,
#enlargedWidgetWrapper.loading::before,
#videoEventModal .modal-body.loading::before,
camera-in-modal.loading::before {
  content: "";
  display: block;
  background: #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
}
#videoReportContent.loading::after,
#enlargedWidgetWrapper.loading::after,
#videoEventModal .modal-body.loading::after,
camera-in-modal.loading::after {
  content: "";
  display: block;
  background: url(../2cd21886d4ceef201b08.svg) no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 20px;
  margin: -10px 0 0 -110px;
  z-index: 999999;
}
#videoReportContent.single-mode .video-frame,
#enlargedWidgetWrapper.single-mode .video-frame,
#videoEventModal .modal-body.single-mode .video-frame,
camera-in-modal.single-mode .video-frame {
  position: relative;
}
#videoReportContent.single-mode .video-frame.disabled,
#enlargedWidgetWrapper.single-mode .video-frame.disabled,
#videoEventModal .modal-body.single-mode .video-frame.disabled,
camera-in-modal.single-mode .video-frame.disabled {
  border: 2px solid #aaa;
  outline: none;
}
#videoReportContent.single-mode .video-frame.active,
#enlargedWidgetWrapper.single-mode .video-frame.active,
#videoEventModal .modal-body.single-mode .video-frame.active,
camera-in-modal.single-mode .video-frame.active {
  grid-row: 1;
  grid-column: 1 / 4;
}
#videoReportContent.single-mode .video-frame.active.empty:not(.disabled),
#enlargedWidgetWrapper.single-mode .video-frame.active.empty:not(.disabled),
#videoEventModal .modal-body.single-mode .video-frame.active.empty:not(.disabled),
camera-in-modal.single-mode .video-frame.active.empty:not(.disabled) {
  border: 1px solid #6d6e71;
}
#videoReportContent.single-mode .video-frame.hidden-player,
#enlargedWidgetWrapper.single-mode .video-frame.hidden-player,
#videoEventModal .modal-body.single-mode .video-frame.hidden-player,
camera-in-modal.single-mode .video-frame.hidden-player {
  display: none;
}
#videoReportContent.fourWay-mode .video-frame.hidden-player,
#enlargedWidgetWrapper.fourWay-mode .video-frame.hidden-player,
#videoEventModal .modal-body.fourWay-mode .video-frame.hidden-player,
camera-in-modal.fourWay-mode .video-frame.hidden-player {
  display: none;
}
#videoReportContent.fourWay-mode .video-frame.active .add-camera-image .title,
#enlargedWidgetWrapper.fourWay-mode .video-frame.active .add-camera-image .title,
#videoEventModal .modal-body.fourWay-mode .video-frame.active .add-camera-image .title,
camera-in-modal.fourWay-mode .video-frame.active .add-camera-image .title {
  color: #36740b;
}
#videoReportContent.fourWay-mode .video-frame.active #ico-add-camera-64 .camera-image,
#enlargedWidgetWrapper.fourWay-mode .video-frame.active #ico-add-camera-64 .camera-image,
#videoEventModal .modal-body.fourWay-mode .video-frame.active #ico-add-camera-64 .camera-image,
camera-in-modal.fourWay-mode .video-frame.active #ico-add-camera-64 .camera-image {
  fill: #56aa1c !important;
}
#videoReportContent.fourWay-mode.thin-border .video-frame,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame,
camera-in-modal.fourWay-mode.thin-border .video-frame {
  outline: none;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.red,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.red,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.red,
camera-in-modal.fourWay-mode.thin-border .video-frame.red {
  border-color: #d47d7e;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.red:hover,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.red:hover,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.red:hover,
camera-in-modal.fourWay-mode.thin-border .video-frame.red:hover {
  outline: 1px solid #d47d7e;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.green,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.green,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.green,
camera-in-modal.fourWay-mode.thin-border .video-frame.green {
  border-color: #89c377;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.green:hover,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.green:hover,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.green:hover,
camera-in-modal.fourWay-mode.thin-border .video-frame.green:hover {
  outline: 1px solid #89c377;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.blue,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.blue,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.blue,
camera-in-modal.fourWay-mode.thin-border .video-frame.blue {
  border-color: #0075FF;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.blue:hover,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.blue:hover,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.blue:hover,
camera-in-modal.fourWay-mode.thin-border .video-frame.blue:hover {
  outline: 1px solid #0075FF;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.brown,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.brown,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.brown,
camera-in-modal.fourWay-mode.thin-border .video-frame.brown {
  border-color: #facc3c;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.brown:hover,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.brown:hover,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.brown:hover,
camera-in-modal.fourWay-mode.thin-border .video-frame.brown:hover {
  outline: 1px solid #facc3c;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.purple,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.purple,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.purple,
camera-in-modal.fourWay-mode.thin-border .video-frame.purple {
  border-color: #a580c1;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.purple:hover,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.purple:hover,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.purple:hover,
camera-in-modal.fourWay-mode.thin-border .video-frame.purple:hover {
  outline: 1px solid #a580c1;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.turquoise,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.turquoise,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.turquoise,
camera-in-modal.fourWay-mode.thin-border .video-frame.turquoise {
  border-color: #edb28a;
}
#videoReportContent.fourWay-mode.thin-border .video-frame.turquoise:hover,
#enlargedWidgetWrapper.fourWay-mode.thin-border .video-frame.turquoise:hover,
#videoEventModal .modal-body.fourWay-mode.thin-border .video-frame.turquoise:hover,
camera-in-modal.fourWay-mode.thin-border .video-frame.turquoise:hover {
  outline: 1px solid #edb28a;
}
#videoReportContent.sixWay-mode.thin-border .video-frame,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame,
camera-in-modal.sixWay-mode.thin-border .video-frame {
  border: 2px solid #aaa;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.empty:not(.disabled):hover,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.empty:not(.disabled):hover,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.empty:not(.disabled):hover,
camera-in-modal.sixWay-mode.thin-border .video-frame.empty:not(.disabled):hover {
  cursor: pointer;
  border-color: #56aa1c;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.red,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.red,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.red,
camera-in-modal.sixWay-mode.thin-border .video-frame.red {
  border-color: #d47d7e;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.red:hover,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.red:hover,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.red:hover,
camera-in-modal.sixWay-mode.thin-border .video-frame.red:hover {
  outline: 1px solid #d47d7e;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.green,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.green,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.green,
camera-in-modal.sixWay-mode.thin-border .video-frame.green {
  border-color: #89c377;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.green:hover,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.green:hover,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.green:hover,
camera-in-modal.sixWay-mode.thin-border .video-frame.green:hover {
  outline: 1px solid #89c377;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.blue,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.blue,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.blue,
camera-in-modal.sixWay-mode.thin-border .video-frame.blue {
  border-color: #0075FF;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.blue:hover,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.blue:hover,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.blue:hover,
camera-in-modal.sixWay-mode.thin-border .video-frame.blue:hover {
  outline: 1px solid #0075FF;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.brown,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.brown,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.brown,
camera-in-modal.sixWay-mode.thin-border .video-frame.brown {
  border-color: #facc3c;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.brown:hover,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.brown:hover,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.brown:hover,
camera-in-modal.sixWay-mode.thin-border .video-frame.brown:hover {
  outline: 1px solid #facc3c;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.purple,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.purple,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.purple,
camera-in-modal.sixWay-mode.thin-border .video-frame.purple {
  border-color: #a580c1;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.purple:hover,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.purple:hover,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.purple:hover,
camera-in-modal.sixWay-mode.thin-border .video-frame.purple:hover {
  outline: 1px solid #a580c1;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.turquoise,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.turquoise,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.turquoise,
camera-in-modal.sixWay-mode.thin-border .video-frame.turquoise {
  border-color: #edb28a;
}
#videoReportContent.sixWay-mode.thin-border .video-frame.turquoise:hover,
#enlargedWidgetWrapper.sixWay-mode.thin-border .video-frame.turquoise:hover,
#videoEventModal .modal-body.sixWay-mode.thin-border .video-frame.turquoise:hover,
camera-in-modal.sixWay-mode.thin-border .video-frame.turquoise:hover {
  outline: 1px solid #edb28a;
}
#videoReportContent .main-container,
#enlargedWidgetWrapper .main-container,
#videoEventModal .modal-body .main-container,
camera-in-modal .main-container {
  margin: 0 auto;
  flex-direction: row;
  min-height: 202px;
}
.video-timeline .iv-timeline {
  height: 110px;
}
body:not(.mobile) .video-timeline .pvs-timeline {
  height: 35px;
}
.video-timeline .pvs-timeline .pvs-timeline-tooltip {
  padding: 0;
}
.video-timeline .pvs-timeline .pvs-timeline-tooltip .pvs-timeline-tooltip__date {
  display: none;
}
body.mobile .video-timeline .pvs-timeline .pvs-timeline-tooltip .pvs-timeline-tooltip__date {
  display: block;
}
.video-timeline .pvs-timeline .pvs-timeline-tooltip .pvs-timeline-tooltip__time {
  margin: 5px;
}
.video-timeline .iv-timeline-labels-style {
  color: transparent;
}
.iv-camera-video-view {
  display: flex;
  flex-grow: 1;
}
.iv-camera-video-view.m-video-error {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
.iv-camera-video-view.m-video-error .iv-camera-video-view-dialog-wrapper {
  background-color: #ffffff;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.iv-camera-video-view.m-video-error .iv-camera-video-view-dialog-wrapper .iv-camera-video-view-dialog {
  padding-top: 102px;
}
.iv-camera-video-view.m-video-error .iv-camera-video-view-dialog-wrapper .iv-camera-video-view-dialog-message {
  color: #c8c8c8;
  text-align: center;
}
.iv-camera-video-view.m-video-error .iv-camera-video-view-dialog-wrapper .iv-camera-video-view-dialog-message:before {
  content: ' ';
  display: block !important;
  width: 64px;
  height: 66px;
  background: #000000;
  position: absolute;
  left: 50%;
  top: -75px;
  margin-left: -33px;
}
.iv-camera-video-view.m-video-error .iv-camera-video-view-dialog-wrapper .iv-camera-video-view-dialog-message .iv-camera-video-view-dialog-header {
  font-size: 12px;
}
.iv-camera-video-view.m-video-error .iv-camera-video-view-dialog-wrapper .iv-camera-video-view-dialog-message .iv-camera-video-view-dialog-content {
  display: none;
  /* message "try again in a few minutes"*/
}
.iv-camera-video-view.m-video-error .iv-camera-video-view-dialog-wrapper .iv-camera-video-view-dialog-buttons {
  display: none;
}
.iv-camera-video-view.m-video-error .iv-camera-video-view-video-wrapper {
  height: 100%;
}
.iv-camera-video-view.m-video-error .iv-camera-stream-player-overlay-frame {
  background-color: #ffffff;
}
.iv-camera-video-view.m-video-error .iv-camera-stream-player {
  height: 150px;
  padding: 0 !important;
}
.eventIcon {
  transition: opacity 0.3s linear, transform 0.3s ease-in-out;
  opacity: 1;
  transform: scale(1);
  width: 64px;
  height: 64px;
  position: absolute;
  z-index: 1000;
  background-size: cover;
  margin-left: 5px;
  margin-top: 5px;
}
.eventIcon.icon-img-user {
  width: 64px;
  height: 64px;
}
.eventIcon.invisible {
  transform: scale(0.2);
  opacity: 0;
}
.eventIcon .user-name {
  background-color: #ffffff;
  width: 56px;
  line-height: 14px;
  position: absolute;
  top: 66px;
  left: 2px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border: solid 1px #89c377;
  padding: 1px;
}
.eventIcon-32 {
  transition: opacity 0.3s linear, transform 0.3s ease-in-out;
  opacity: 1;
  transform: scale(1);
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 1000;
  background-size: cover;
  margin-top: 15px;
}
.eventIcon-32.invisible {
  transform: scale(0.2);
  opacity: 0;
}
.eventIcon-32 .user-name {
  background-color: #ffffff;
  width: 56px;
  line-height: 14px;
  position: absolute;
  top: 36px;
  left: -45%;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border: solid 1px #89c377;
  padding: 1px;
}
#export-video-modal .export-container {
  display: flex;
  width: 100%;
}
#export-video-modal .export-container fieldset {
  flex: 1;
  padding: 10px;
}
#export-video-modal .export-container fieldset .input-group label {
  width: 190px;
}
#export-video-modal .export-container fieldset .input-group .input-placeholder {
  max-width: 370px;
}
#export-video-modal .export-container fieldset .input-group .input-placeholder input {
  flex: 1;
}
#export-video-modal .export-container fieldset .input-group .input-placeholder.flex-column {
  flex-direction: column;
}
#export-video-modal .export-container fieldset .input-group.invalid-input-message {
  color: #FF0000;
  margin-left: 190px;
}
#export-video-modal .export-container fieldset .primary-field {
  max-width: 200px;
  margin-right: 10px;
}
#export-video-modal .export-container fieldset .secondary-field {
  width: 110px;
}
#export-video-modal .export-container fieldset .secondary-field .date-input {
  min-width: 0;
}
.hide-controls {
  visibility: hidden;
}
table.grid tr.auto-play::after {
  animation: none;
}
@media (max-height: 800px) and (max-width: 1400px) {
  .pvs-player__time {
    font-size: 14px !important;
  }
}
#videoEventModal {
  height: 90%;
}
#videoEventModal:before {
  border-top: none;
}
#videoEventModal .timeline-wrapper {
  height: 45px;
  padding: 5px;
}
#videoEventModal .modal-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  border: 0;
  overflow: hidden;
}
#videoEventModal .modal-body .modal-body-player {
  width: 100%;
  height: calc(100% - 45px - 15px);
}
#videoEventModal .modal-body .video-players-container {
  max-width: 100%;
  height: 100%;
  padding: 0;
}
body.mobile figure .main-container {
  height: auto;
}
body.mobile #videoEventModal {
  height: 100%;
}
@media only screen and (max-width: 680px) {
  body.mobile #export-video-modal .export-container fieldset .input-group .input-placeholder {
    max-width: 285px;
  }
}
.new-timeline-container {
  height: 45px;
  clear: both;
  display: flex;
  flex-direction: row;
  flex-grow: 0;
}
body.mobile .new-timeline-container {
  height: auto;
  flex-grow: 1;
}
.new-timeline-container .small_btn {
  width: 32px;
  height: 24px;
}
.new-timeline-container .large_btn {
  width: 48px;
  height: 32px;
}
body.mobile .new-timeline-container {
  flex-direction: column;
  background-color: #292928;
}
.new-timeline-container.new-timeline {
  align-items: center;
}
.new-timeline-container.new-timeline #jumpToVideo button,
.new-timeline-container.new-timeline button#openVideoReport,
.new-timeline-container.new-timeline div#toggleCalendar {
  height: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.new-timeline-container.new-timeline #jumpToVideo button figure,
.new-timeline-container.new-timeline button#openVideoReport figure,
.new-timeline-container.new-timeline div#toggleCalendar figure {
  justify-content: center;
}
.new-timeline-container.new-timeline #jumpToVideo button:hover,
.new-timeline-container.new-timeline button#openVideoReport:hover,
.new-timeline-container.new-timeline div#toggleCalendar:hover {
  background-color: #d9ead2;
}
.new-timeline-container.new-timeline .time-line-buttons {
  position: relative;
  transition: none;
  animation: none;
  height: auto;
  overflow: visible;
  display: flex;
  align-items: center;
  margin-top: 0;
  padding: 0 10px 10px;
}
body.mobile .new-timeline-container.new-timeline .time-line-buttons {
  width: 100%;
  padding: 0 10px;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn {
  width: auto !important;
  padding: 0;
  margin: 0;
  height: auto;
  max-width: none;
  min-width: auto;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn button::after {
  display: none;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn.small-btn {
  width: 32px;
  height: 24px;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn.small-btn figure > div {
  margin: 0 !important;
  width: auto;
  height: auto;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn.small-btn figure > div > img,
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn.small-btn figure > div svg {
  width: 32px;
  height: 24px;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn.large-btn figure > div {
  margin: 0 !important;
  width: auto;
  height: auto;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn.large-btn figure > div > img,
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn.large-btn figure > div svg {
  width: 48px;
  height: 32px;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn > ul {
  bottom: 100%;
  top: unset;
  width: auto;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn > ul .option-button {
  min-width: 32px;
  background: #ffffff;
  color: #3c3c3b;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn > ul .option-button:hover {
  background: #d9ead2;
  color: #3c3c3b;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn > ul .option-button.default {
  background: #56aa1c;
  color: #ffffff;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn > ul .option-button.default path:not(.unchangeable),
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn > ul .option-button.default polygon:not(.unchangeable),
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn > ul .option-button.default circle:not(.unchangeable) {
  fill: #ffffff !important;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn > ul .option-button.default .invert-exception {
  fill: #56aa1c !important;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn > ul .option-button.default .invert-exception.stroke {
  fill: transparent!important;
  stroke: #ffffff !important;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn > ul .option-button.default .active-exception {
  fill: #ffffff !important;
}
.new-timeline-container.new-timeline .time-line-buttons .new-timeline-btn.gutter-left {
  margin-left: 10px;
}
.new-timeline-container .sdk-calendar .small-btn {
  width: 32px;
  height: 24px;
}
.new-timeline-container .sdk-calendar span {
  display: block;
}
.new-timeline-container .sdk-calendar span > img {
  width: 32px;
  height: 24px;
}
.new-timeline-container .sdk-calendar .hidden-image {
  position: absolute;
  top: 0;
  opacity: 0;
}
.new-timeline-container .sdk-calendar .pvs-calendar {
  display: none;
}
.new-timeline-container .video-timeline {
  flex: 1;
}
body.mobile .new-timeline-container .video-timeline {
  height: 100%;
  background-color: #292928;
}
#mobileRibbon .modal-header {
  justify-content: flex-start;
}
#mobileRibbon .modal-body {
  display: block;
}
#mobileRibbon .ribbon-group {
  width: 100%;
}
#mobileRibbon button.ribbon-button {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  color: #3c3c3b;
  cursor: pointer;
  align-items: center;
  border-bottom: 1px #ededed solid;
  padding: 15px 20px;
  font-size: 14px;
  line-height: 20px;
}
#mobileRibbon button.ribbon-button.active,
#mobileRibbon button.ribbon-button:active {
  border-color: #89c377;
  background-color: #d9ead2;
  color: #56aa1c;
  border-left: none;
}
#mobileRibbon button.ribbon-button:disabled {
  opacity: 0.5;
  cursor: default;
  background-color: transparent;
}
#mobileRibbon button.ribbon-button:disabled:hover {
  background-color: transparent;
  color: #3c3c3b;
}
#mobileRibbon button.ribbon-button:disabled:active,
#mobileRibbon button.ribbon-button:disabled.active {
  border-color: transparent;
}
#mobileRibbon button.ribbon-button figure {
  display: flex;
}
#mobileRibbon button.ribbon-button figure div {
  display: flex;
  align-items: center;
}
#mobileRibbon button.ribbon-button figure div img {
  height: 16px;
  width: 16px;
}
#mobileRibbon button.ribbon-button figcaption {
  padding-left: 10px;
  font-weight: bold;
}
#mobileRibbon .ribbon-dropdown {
  position: relative;
}
#mobileRibbon .mobile-dropdown {
  background-color: whitesmoke;
}
#mobileRibbon .mobile-dropdown li {
  padding: 0 0 0 20px;
}
#mobileRibbon .mobile-dropdown-arrow {
  font-size: 20px;
  position: absolute;
  top: 16px;
  right: 4%;
  transition: transform 0.3s ease-out;
}
#mobileRibbon .mobile-dropdown-arrow.animate-open {
  transform: rotate(90deg);
}
#enlargedWidgetWrapper {
  --enlarged-dashboard-shadow: 0 0 20px #6d6e71;
  --enlarged-dashboard-border: none;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999994;
  background-color: rgba(0, 0, 0, 0.3);
}
body.mobile #enlargedWidgetWrapper dashboard-widget.enlarged .dashboard-widget-wrapper {
  height: 100%;
  margin: 0;
}
#enlargedWidgetWrapper dashboard-widget.enlarged .dashboard-widget-wrapper .widget-view,
#enlargedWidgetWrapper dashboard-widget.enlarged .dashboard-widget-wrapper .widget-settings {
  box-shadow: var(--enlarged-dashboard-shadow);
  border: var(--enlarged-dashboard-border);
  --currentWidgetBorder: 0px;
}
#enlargedWidgetWrapper dashboard-widget.enlarged:hover .dashboard-widget-wrapper .widget-view,
#enlargedWidgetWrapper dashboard-widget.enlarged:hover .dashboard-widget-wrapper .widget-settings {
  border: var(--enlarged-dashboard-border);
  box-shadow: var(--enlarged-dashboard-shadow);
}
.large-number {
  font-size: 55px;
  color: #56aa1c;
}
.large-text {
  font-size: 30px;
}
body:not(.mobile) #dashboardView {
  background: url(../43df7c25630e824b5a12.png), #fff;
  background-size: 550px 550px;
  background-attachment: fixed;
}
body:not(.mobile) #dashboardView .dashboard-fullscreen {
  background: url(../43df7c25630e824b5a12.png), #fff;
  background-size: 550px 550px;
  background-attachment: fixed;
}
#dashboardView,
#enlargedWidgetWrapper {
  --gap: 10px;
  --gridSize: 4;
  --widgetPadding: 5px;
  --widgetBorder: 1px;
  --currentWidgetBorder: var(--widgetBorder);
  --backgroundColor: #ededed;
  --gridLineVertical: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAICAYAAADTLS5CAAAABHNCSVQICAgIfAhkiAAAAB5JREFUCJljfPfu3X8GBgYGlv///zOgMpiYmBiIBQBc3QnXx+9f+QAAAABJRU5ErkJggg==);
  --gridLineHorizontal: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAACCAYAAABllJ3tAAAABHNCSVQICAgIfAhkiAAAABlJREFUCJljfPv27X8GJCAsLMyIzGdiIAAA+yYEBE8LtlcAAAAASUVORK5CYII=);
  --settings-border: 1px solid #a7a9ac;
  --control-padding: 7px;
  --widget-header-height: 36px;
  --widget-small-header-height: 26px;
  height: 100%;
  position: relative;
}
body.mobile #dashboardView,
body.mobile #enlargedWidgetWrapper {
  min-width: auto;
}
#dashboardView mobile-dashboard-grid .dashboard-grid,
#enlargedWidgetWrapper mobile-dashboard-grid .dashboard-grid {
  height: 100%;
  overflow: auto;
}
#dashboardView dashboard-grid .dashboard-grid,
#enlargedWidgetWrapper dashboard-grid .dashboard-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--gridSize), calc((100% - calc((var(--gridSize) - 1) * var(--gap))) / var(--gridSize)));
  grid-template-rows: repeat(var(--gridSize), calc((100% - calc((var(--gridSize) - 1) * var(--gap))) / var(--gridSize)));
  grid-gap: var(--gap);
  padding: var(--gap);
  box-sizing: border-box;
  position: relative;
}
#dashboardView dashboard-grid .dashboard-grid .drop-target,
#enlargedWidgetWrapper dashboard-grid .dashboard-grid .drop-target {
  background-color: rgba(237, 237, 237, 0.075);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: transform 0.15s ease-out;
}
#dashboardView dashboard-grid .dashboard-grid .drop-target.removing,
#enlargedWidgetWrapper dashboard-grid .dashboard-grid .drop-target.removing {
  transition: opacity 0.2s linear;
  opacity: 0;
}
#dashboardView dashboard-grid .dashboard-grid.hide,
#enlargedWidgetWrapper dashboard-grid .dashboard-grid.hide {
  display: none;
}
#dashboardView dashboard-grid .show-grid,
#enlargedWidgetWrapper dashboard-grid .show-grid {
  background-image: var(--gridLineVertical), var(--gridLineVertical), var(--gridLineVertical), var(--gridLineHorizontal), var(--gridLineHorizontal), var(--gridLineHorizontal);
  background-repeat: repeat-y, repeat-y, repeat-y, repeat-x, repeat-x, repeat-x;
  background-position: 25% 0, 50% 0, 75% 0, 0 25%, 0 50%, 0 75%;
}
#dashboardView dashboard-grid .not-supported,
#enlargedWidgetWrapper dashboard-grid .not-supported {
  display: none;
  font-size: 1.5em;
  font-weight: bold;
}
#dashboardView dashboard-grid .not-supported.show,
#enlargedWidgetWrapper dashboard-grid .not-supported.show {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media screen and (max-height: 830px) {
  #dashboardView dashboard-grid .dashboard-grid,
  #enlargedWidgetWrapper dashboard-grid .dashboard-grid {
    --gap: 2px;
  }
}
.widget-controls-absolute .widget-view dashboard-widget-controls {
  position: absolute;
  width: calc(100% - var(--widgetPadding) * 2);
  box-sizing: border-box;
  z-index: 1000;
}
.widget-controls-hide-buttons .widget-view dashboard-widget-controls .dashboard-widget-controls .widget-enlarge-btn,
.widget-controls-hide-buttons .widget-view dashboard-widget-controls .dashboard-widget-controls .widget-settings-btn {
  visibility: hidden;
}
.widget-controls-show-buttons .widget-view dashboard-widget-controls .dashboard-widget-controls .widget-enlarge-btn,
.widget-controls-show-buttons .widget-view dashboard-widget-controls .dashboard-widget-controls .widget-settings-btn {
  visibility: visible;
}
.widget-controls-movable .widget-view {
  overflow: hidden;
}
.widget-controls-movable .widget-view dashboard-widget-controls {
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  width: calc(100% - var(--gap) * 2);
  padding: var(--widgetPadding) var(--widgetPadding) 0;
  z-index: 100;
  top: calc(-24px - var(--gap) * 3  - 2 * 1px);
  left: 0;
  transition: top 0.4s ease-in-out;
}
.mobile .widget-controls-movable .widget-view dashboard-widget-controls {
  display: none;
}
.widget-controls-movable .widget-view dashboard-widget-controls header {
  color: #ffffff;
}
.widget-controls-movable .widget-view:hover dashboard-widget-controls {
  top: 0;
}
.widget-controls-movable .widget-view:hover dashboard-widget-controls header {
  color: #ffffff !important;
}
.widget-controls-no-header .widget-view dashboard-widget-controls {
  position: absolute;
  width: calc(100% - var(--widgetPadding) * 2);
  box-sizing: border-box;
  z-index: 1000;
}
.widget-controls-no-header .widget-view dashboard-widget-controls header {
  color: transparent;
}
.widget-controls-thin-header .widget-view dashboard-widget-controls .dashboard-widget-controls {
  margin: 0;
}
.widget-without-padding .widget-view {
  padding: 0;
  overflow: hidden;
}
.widget-without-padding .widget-view .message-wrapper {
  padding: var(--widgetPadding);
}
.widget-without-padding .widget-view dashboard-widget-controls {
  width: 100% !important;
  box-sizing: border-box;
}
.widget-without-padding .widget-view dashboard-widget-controls .dashboard-widget-controls {
  margin: var(--widgetPadding);
}
.mobile dashboard-widget .dashboard-widget-wrapper[data-type-name="softButton"] .widget-view dashboard-widget-view .widget-view-wrapper {
  height: 0;
}
dashboard-widget {
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer */
  -khtml-user-select: none;
  /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none;
  /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none;
  /* Disable Android and iOS callouts*/
}
dashboard-widget.removing {
  animation: resize-fade-out 0.2s ease-out;
}
dashboard-widget.new {
  animation: opacity-fade-in 0.2s ease-out;
}
dashboard-widget.resizing.resize-end .dashboard-widget-wrapper .resize-area {
  animation: opacity-fade-out 0.1s linear;
}
dashboard-widget.resizing .dashboard-widget-wrapper .resize-area {
  display: flex;
}
dashboard-widget.resizing .dashboard-widget-wrapper .resize-area.fade-out {
  animation: opacity-fade-in 0.1s linear;
}
dashboard-widget.draggable-item .widget-view,
dashboard-widget.enlarged .widget-view,
dashboard-widget.background-move .widget-view,
dashboard-widget.draggable-item:hover .widget-view,
dashboard-widget.enlarged:hover .widget-view,
dashboard-widget.background-move:hover .widget-view,
dashboard-widget.draggable-item .widget-settings,
dashboard-widget.enlarged .widget-settings,
dashboard-widget.background-move .widget-settings,
dashboard-widget.draggable-item:hover .widget-settings,
dashboard-widget.enlarged:hover .widget-settings,
dashboard-widget.background-move:hover .widget-settings {
  box-shadow: var(--dashboard-shadow);
  border-color: #6d6e71;
}
dashboard-widget.draggable-item .widget-view,
dashboard-widget.draggable-item:hover .widget-view,
dashboard-widget.draggable-item .widget-settings,
dashboard-widget.draggable-item:hover .widget-settings {
  pointer-events: none;
}
dashboard-widget.draggable-item.not-allowed {
  cursor: not-allowed;
}
dashboard-widget.before-enlarge .widget-view {
  overflow: hidden !important;
}
dashboard-widget.dragging .dashboard-widget-wrapper:hover .widget-view,
dashboard-widget.dragging .dashboard-widget-wrapper:hover .widget-settings {
  box-shadow: 0 0 10px #0075FF;
}
dashboard-widget.enlarged {
  will-change: transform, width, height;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out, transform 0.4s ease-in-out;
}
dashboard-widget.enlarged dashboard-widget-controls .dashboard-widget-controls .widget-header {
  color: #6d6e71 !important;
  cursor: default !important;
}
dashboard-widget.enlarged dashboard-widget-controls .dashboard-widget-controls .widget-settings-btn,
dashboard-widget.enlarged dashboard-widget-controls .dashboard-widget-controls .widget-enlarge-btn {
  opacity: 1 !important;
}
dashboard-widget.enlarged.no-transition {
  transition: none;
}
dashboard-widget.enlarged .dashboard-widget-wrapper[data-type="3"] .widget-view {
  overflow: hidden;
}
dashboard-widget.background-move .widget-view,
dashboard-widget.background-move .widget-settings {
  box-shadow: 0 0 5px #a7a9ac;
}
dashboard-widget .dashboard-widget-wrapper {
  width: 100%;
  height: 100%;
  perspective: 1500px;
  position: relative;
  z-index: 1;
}
dashboard-widget .dashboard-widget-wrapper.rotate {
  z-index: 99999;
}
dashboard-widget .dashboard-widget-wrapper .mobile-portrait-to-landscape {
  display: none;
}
body.mobile dashboard-widget .dashboard-widget-wrapper {
  --mobile-gap: 5px;
  height: fit-content;
  margin: var(--mobile-gap);
  width: auto;
}
body.mobile dashboard-widget .dashboard-widget-wrapper,
body.mobile dashboard-widget .dashboard-widget-wrapper .widget-view {
  min-height: 50vmin;
}
body.mobile dashboard-widget .dashboard-widget-wrapper .widget-view {
  width: 100%;
}
body.mobile dashboard-widget .dashboard-widget-wrapper .widget-view .mobile-portrait-to-landscape {
  display: none;
  justify-content: center;
  align-items: center;
  background-color: #d2d2d2;
  color: #ededed;
  z-index: 999999;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (display-mode: fullscreen) and (orientation: portrait) {
  body.mobile dashboard-widget .dashboard-widget-wrapper .widget-view .mobile-portrait-to-landscape {
    display: flex;
  }
}
@media only screen and (orientation: landscape) {
  body.mobile dashboard-widget .dashboard-widget-wrapper {
    height: calc(100% - var(--mobile-gap) * 2);
  }
}
dashboard-widget .dashboard-widget-wrapper.vertical .rotate-first {
  animation: flip-vertical-first-step 0.2s linear;
}
dashboard-widget .dashboard-widget-wrapper.vertical .rotate-second {
  animation: flip-vertical-second-step 0.2s linear backwards;
}
dashboard-widget .dashboard-widget-wrapper.horizontal .rotate-first {
  animation: flip-horizontal-first-step 0.2s linear;
}
dashboard-widget .dashboard-widget-wrapper.horizontal .rotate-second {
  animation: flip-horizontal-second-step 0.2s linear backwards;
}
dashboard-widget .dashboard-widget-wrapper .hover-buttons-wrapper {
  display: none;
  font-size: 10pt;
  z-index: 10;
  flex-direction: row;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
}
dashboard-widget .dashboard-widget-wrapper .hover-buttons-wrapper .btn {
  margin: 0;
  flex-grow: 1;
}
dashboard-widget .dashboard-widget-wrapper[data-type="2"] .widget-view.red-widget,
dashboard-widget .dashboard-widget-wrapper[data-type="2"]:hover .widget-view.red-widget {
  border-color: #d47d7e;
  box-shadow: 0 0 5px #d47d7e;
}
dashboard-widget .dashboard-widget-wrapper:hover .widget-view,
dashboard-widget .dashboard-widget-wrapper:hover .widget-settings {
  border-color: #0075FF;
  box-shadow: 0 0 5px #0075FF;
}
dashboard-widget .dashboard-widget-wrapper:hover .widget-view .hover-buttons-wrapper,
dashboard-widget .dashboard-widget-wrapper:hover .widget-settings .hover-buttons-wrapper {
  display: flex;
}
dashboard-widget .dashboard-widget-wrapper .resize-area {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: var(--gap) solid #56aa1c;
  background-color: rgba(255, 255, 255, 0.7);
  display: none;
  animation: opacity-fade-in 0.1s linear;
}
dashboard-widget .dashboard-widget-wrapper .resize-area.animated {
  transition: width 0.2s ease-out, height 0.2s ease-out;
}
dashboard-widget .dashboard-widget-wrapper .resize-area::after {
  content: attr(data-size);
  margin: auto;
  display: block;
  padding: 10px 15px;
  background-color: #ffffff;
  border-radius: 5px;
  font-size: 2em;
  border: 2px solid #a7a9ac;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control {
  position: absolute;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.top,
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.bottom {
  width: 100%;
  height: var(--widgetPadding);
  cursor: ns-resize;
  left: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.top {
  top: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.bottom {
  bottom: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.right,
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.left {
  height: 100%;
  width: var(--widgetPadding);
  cursor: ew-resize;
  top: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.right {
  right: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.left {
  left: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.top-left,
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.top-right,
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.bottom-right,
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.bottom-left {
  width: var(--widgetPadding);
  height: var(--widgetPadding);
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.top-left,
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.bottom-right {
  cursor: nwse-resize;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.top-right,
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.bottom-left {
  cursor: nesw-resize;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.top-left {
  top: 0;
  left: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.top-right {
  top: 0;
  right: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.bottom-right {
  bottom: 0;
  right: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-resize-control.bottom-left {
  bottom: 0;
  left: 0;
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-view {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
dashboard-widget .dashboard-widget-wrapper .widget-view {
  padding: var(--widgetPadding);
}
dashboard-widget .dashboard-widget-wrapper .widget-view.no-margin {
  padding: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-view,
dashboard-widget .dashboard-widget-wrapper .widget-settings {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: var(--widgetBorder) solid #a7a9ac;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  transform-origin: 50% 50%;
  will-change: transform;
  transition: border-color 0.1s linear, box-shadow 0.1s linear;
  box-shadow: 0 0 5px #a7a9ac;
  position: relative;
}
dashboard-widget .dashboard-widget-wrapper .widget-view {
  width: inherit;
}
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view {
  width: inherit;
}
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper {
  width: inherit;
  display: flex;
  flex-grow: 1;
  height: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper.in-progress {
  position: relative;
}
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper.in-progress::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #ffffff;
  z-index: 4;
}
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper.in-progress::after {
  content: "";
  display: block;
  background: url(../2cd21886d4ceef201b08.svg) no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 20px;
  margin: -10px 0 0 -110px;
  z-index: 5;
}
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper > * {
  display: flex;
  width: 100%;
}
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper > * > * {
  display: flex;
  width: 100%;
}
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper events-widget-view,
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper alarm-events-widget-view,
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper who-is-in-today-widget-view,
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper system-activity-widget-view,
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper alarms-widget-view,
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper business-card-widget-view,
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper event-report,
dashboard-widget .dashboard-widget-wrapper .widget-view dashboard-widget-view .widget-view-wrapper .events-grid-wrapper {
  width: inherit;
}
dashboard-widget .dashboard-widget-wrapper .widget-view:hover dashboard-widget-controls .widget-header {
  color: #6d6e71;
}
dashboard-widget .dashboard-widget-wrapper .widget-view:hover dashboard-widget-controls .widget-settings-btn,
dashboard-widget .dashboard-widget-wrapper .widget-view:hover dashboard-widget-controls .widget-enlarge-btn {
  opacity: 1;
}
dashboard-widget .dashboard-widget-wrapper .widget-view .message-wrapper {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
dashboard-widget .dashboard-widget-wrapper .widget-view .message-wrapper span {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
}
dashboard-widget .dashboard-widget-wrapper .widget-view .message-wrapper span.name {
  text-transform: none;
  font-weight: initial;
}
@media screen and (max-width: 1600px) {
  dashboard-widget .dashboard-widget-wrapper .widget-view .message-wrapper span {
    font-size: 13px;
  }
}
@media screen and (max-width: 1500px) {
  dashboard-widget .dashboard-widget-wrapper .widget-view .message-wrapper span {
    font-size: 12px;
  }
}
dashboard-widget .dashboard-widget-wrapper .control-btn {
  --btn-margin: 5px;
  font-weight: bold;
  padding: 0 var(--control-padding);
  height: 26px;
  font-size: 11pt;
  margin: 0 var(--btn-margin) 0 0;
}
dashboard-widget .dashboard-widget-wrapper .control-btn:last-of-type {
  margin: 0 !important;
}
@media screen and (max-height: 814px) {
  dashboard-widget .dashboard-widget-wrapper .control-btn {
    height: 20px;
    font-size: 10pt;
  }
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings {
  border-top: var(--settings-border);
  height: calc(100% - var(--widget-header-height) - var(--widgetBorder) + var(--currentWidgetBorder));
}
@media screen and (max-height: 814px) {
  dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings {
    height: calc(100% - var(--widget-small-header-height) - var(--widgetBorder) + var(--currentWidgetBorder));
  }
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper > :not(footer) {
  display: flex;
  flex-grow: 1;
  width: 100%;
  height: calc(100% - var(--widget-header-height));
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper > :not(footer) > * {
  display: flex;
  width: 100%;
  height: 100%;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section-font-size {
  font-size: 10pt;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 50%;
  overflow: hidden;
  border-right: var(--settings-border);
  font-size: 10pt;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section:last-child,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section:last-child {
  border: none;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section .title-wrapper,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section .title-wrapper {
  height: 24px;
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--widgetPadding) + var(--control-padding));
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section .title-wrapper .title,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section .title-wrapper .title {
  font-weight: bold;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section .title-wrapper .edit-block,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section .title-wrapper .edit-block {
  border: none;
  background: transparent;
  text-transform: uppercase;
  padding: 0;
  margin: 0 0 0 7px;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
  color: #56aa1c;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section .title-wrapper .edit-block:focus,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section .title-wrapper .edit-block:focus {
  outline: none;
  box-shadow: none;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul {
  padding: 0 calc(var(--widgetPadding) + var(--control-padding));
  overflow: auto;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul li,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul li {
  --image-height: 18px;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding-bottom: 4px;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul li .action-buttons,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul li .action-buttons {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul li .action-buttons button,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul li .action-buttons button {
  height: var(--image-height);
  font-size: 10pt;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul li [svg-image],
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul li [svg-image] {
  margin-right: 5px;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul li [svg-image] img,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul li [svg-image] img {
  width: var(--image-height);
  height: var(--image-height);
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul li span,
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul li span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (max-height: 814px) {
  dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section,
  dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section {
    font-size: 9pt;
  }
  dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section .title-wrapper,
  dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section .title-wrapper {
    height: 20px;
  }
  dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul li,
  dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul li {
    padding-bottom: 2px;
  }
  dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul li [svg-image] img,
  dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul li [svg-image] img {
    width: 16px;
    height: 16px;
  }
}
dashboard-widget .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper footer {
  flex-grow: 0;
  flex-shrink: 0;
  text-align: right;
  display: flex;
  justify-content: flex-start;
  padding: var(--widgetPadding);
  border-top: var(--settings-border);
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls {
  flex-grow: 0;
  flex-shrink: 0;
  padding: var(--widgetPadding);
}
@media screen and (max-height: 814px) {
  dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls {
    padding: 3px var(--widgetPadding);
  }
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls {
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  align-items: center;
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .widget-header {
  flex-grow: 1;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  margin: 0;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15pt;
  color: #6d6e71;
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .draggable {
  cursor: move;
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .save-cancel-controls {
  position: absolute;
  bottom: var(--widgetPadding);
  right: var(--widgetPadding);
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls input.widget-header {
  cursor: text;
  outline: none;
  border: none;
  font-size: 11pt;
  padding: 2px var(--control-padding) 0 var(--control-padding);
  border-radius: 4px;
  color: #a7a9ac;
  background-color: #ededed;
}
@media screen and (max-height: 814px) {
  dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls input.widget-header {
    height: 18px;
    font-size: 10pt;
  }
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .widget-settings-btn,
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .widget-enlarge-btn {
  flex: 0 0 20px;
  height: 16px;
  padding: 0 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0.5;
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .widget-settings-btn.no-border,
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .widget-enlarge-btn.no-border {
  border: none;
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .widget-settings-btn:focus,
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .widget-enlarge-btn:focus {
  outline: none;
  box-shadow: none;
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .widget-settings-btn:hover img {
  animation: rotate-clockwise 3s infinite linear;
}
dashboard-widget .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .widget-enlarge-btn:hover img {
  animation: pulse 0.7s infinite linear;
}
dashboard-widget .dashboard-widget-wrapper .widget-view .dashboard-widget-controls {
  margin-bottom: 0;
  align-items: baseline;
}
dashboard-widget .dashboard-widget-wrapper .widget-view .dashboard-widget-controls .widget-header {
  height: 18px;
  line-height: 12px;
  font-size: 12pt;
  color: #a7a9ac;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-edit,
dashboard-widget .dashboard-widget-wrapper video-widget-edit {
  width: 100%;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-edit .grid-container,
dashboard-widget .dashboard-widget-wrapper video-widget-edit .grid-container {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiB2aWV3Qm94PSIwIDAgMSA1OCIgd2lkdGg9IjEiIGhlaWdodD0iNTgiPjxnPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjI5IiBmaWxsPSIjZmZmIi8+PHJlY3QgeD0iMCIgeT0iMjkiIHdpZHRoPSIxIiBoZWlnaHQ9IjI5IiBmaWxsPSIjZjZmNmY2Ii8+PC9nPjwvc3ZnPg==);
  background-attachment: local;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-edit fieldset {
  flex: 1 1 100%;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view {
  display: flex;
  flex-direction: column;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .alarm-icons {
  display: flex;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .alarm-icons .active {
  animation: video-report-blink 0.35s infinite ease-in-out alternate;
  filter: drop-shadow(0 0 5px #ff7974);
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper {
  display: flex;
  flex: 1 1 auto;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper > div {
  display: flex;
  justify-content: center;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarm-icons {
  position: relative;
  flex: 1 0 90px;
  flex-basis: 40%;
  flex-grow: 1;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarm-icons [svg-image] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarm-icons [svg-image] img {
  margin: auto;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list {
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 60%;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info .normal-alarm-status-span-size {
  font-size: 10.5pt;
  line-height: 1.3;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info .inline-alarm-status .alarm-status {
  flex-direction: row;
  align-items: center;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info .inline-alarm-status .alarm-status span {
  font-size: 10.5pt;
  line-height: 1.3;
  padding-right: 3px;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-count {
  font-size: 21pt;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-status {
  flex-direction: row;
  align-items: center;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-status span {
  font-size: 10.5pt;
  line-height: 1.3;
  padding-right: 3px;
}
@media screen and (max-height: 814px) {
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.three-statuses span.alarm-description .alarm-count,
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-count {
    width: 70px;
    font-size: 17pt;
  }
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.three-statuses span.alarm-description .alarm-status,
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-status {
    flex-direction: row;
    align-items: center;
  }
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.three-statuses span.alarm-description .alarm-status span,
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info.four-statuses span.alarm-description .alarm-status span {
    font-size: 10.5pt;
    line-height: 1.3;
    padding-right: 3px;
  }
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span {
  padding-left: 0;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description {
  display: flex;
  justify-content: center;
  border: 0 solid #a7a9ac;
  border-left-width: 2px;
}
@media screen and (max-width: 1366px) {
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description {
    flex-direction: column;
    align-items: center;
  }
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description > span {
  padding-bottom: 1px;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description.disarmed .alarm-count,
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description.inactive .alarm-count {
  color: #56aa1c;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description.active .alarm-count,
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description.armed .alarm-count {
  color: #d47d7e;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-count {
  font-size: 26pt;
  margin-right: 16px;
  font-weight: bold;
  text-align: center;
  color: #acacac;
}
@media screen and (max-width: 1366px) {
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-count {
    margin-right: 0;
    margin-bottom: 4px;
  }
}
@media screen and (min-width: 1920px) {
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-count {
    margin-right: 32px;
  }
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status span {
  font-size: 10.5pt;
  line-height: 1.3;
  font-weight: bold;
}
@media screen and (max-width: 1366px) {
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status {
    align-items: center;
  }
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status span {
    font-size: 10pt;
  }
}
@media screen and (max-width: 1024px) {
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status {
    align-items: center;
  }
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description .alarm-status span {
    font-size: 8pt;
  }
}
@media screen and (max-height: 814px) {
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarm-icons [svg-image] img {
    width: 48px;
  }
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view {
  flex-grow: 1;
  display: flex;
  height: 100%;
  overflow: auto;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .message-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .message-wrapper span {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .alarms-wrapper {
  display: grid;
  width: 100%;
  --grid-gap: 10px;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(var(--columns-count), calc((100% - (var(--grid-gap) * (var(--columns-count) - 1))) / var(--columns-count)));
  grid-template-rows: repeat(var(--rows-count), calc((100% - var(--grid-gap) * (var(--rows-count) - 1)) / var(--rows-count)));
  grid-auto-rows: calc((100% - var(--grid-gap) * (var(--rows-count) - 1)) / var(--rows-count));
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .alarms-wrapper .alarm-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: normal;
  gap: 10px;
  width: 100%;
  height: 100%;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-status {
  color: #9a9a9a;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-name,
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-status {
  width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-icons {
  max-height: 60%;
}
@media screen and (max-width: 1024px) {
  dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-icons {
    max-height: 50%;
  }
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-icons [svg-image] {
  display: flex;
  justify-content: center;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-icons [svg-image] img {
  display: block;
  object-fit: contain;
}
dashboard-widget .dashboard-widget-wrapper .alarms-widget-view .large-view .alarms-wrapper .alarm-container .alarm-icons [svg-image] img:hover {
  cursor: pointer;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings-wrapper .video-widget-edit .nothing-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}
dashboard-widget .dashboard-widget-wrapper .widget-settings-wrapper .video-widget-edit .settings {
  flex-direction: column;
  padding: 0 10px;
  overflow: auto;
}
@media screen and (max-height: 890px) {
  dashboard-widget .dashboard-widget-wrapper .widget-settings-wrapper .video-widget-edit .settings {
    display: block;
  }
  dashboard-widget .dashboard-widget-wrapper .widget-settings-wrapper .video-widget-edit .settings .radio-input {
    white-space: nowrap;
  }
  dashboard-widget .dashboard-widget-wrapper .widget-settings-wrapper .video-widget-edit .settings .radio-input input {
    flex-shrink: 0;
  }
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view {
  display: flex;
  flex-grow: 1;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view.hidden {
  display: none;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .camera-settings {
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .camera-settings .camera-time {
  min-width: fit-content;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .video-wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  max-width: 100%;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .video-wrapper .player-wrapper {
  display: flex;
  flex-grow: 1;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .video-wrapper .player-wrapper figure {
  display: flex;
  flex-grow: 1;
  border: none;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .video-wrapper .player-wrapper figure .streaming-container {
  transition: margin 0.5s;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .video-wrapper .timeline-wrapper {
  will-change: max-height;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .video-wrapper .timeline-wrapper .timeline-container {
  margin-bottom: 0;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .video-wrapper .timeline-wrapper.shown {
  max-height: 110px;
  transition: max-height 0.5s;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .video-wrapper .timeline-wrapper.shown.new {
  max-height: 45px;
}
dashboard-widget .dashboard-widget-wrapper .widget-view-wrapper .video-widget-view .video-wrapper .timeline-wrapper.shown .timeline-container {
  visibility: visible;
}
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper .widget-view dashboard-widget-controls .dashboard-widget-controls .widget-enlarge-btn,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper .widget-view dashboard-widget-controls .dashboard-widget-controls .widget-settings-btn {
  visibility: hidden;
}
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper:hover .widget-view dashboard-widget-controls .dashboard-widget-controls .widget-enlarge-btn,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper:hover .widget-view dashboard-widget-controls .dashboard-widget-controls .widget-settings-btn {
  visibility: visible;
}
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="1"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="2"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="4"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="5"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="6"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="7"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="8"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="9"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="10"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="11"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="12"] .widget-view dashboard-widget-controls,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="14"] .widget-view dashboard-widget-controls {
  position: absolute;
  width: calc(100% - var(--widgetPadding) * 2);
  box-sizing: border-box;
  z-index: 1000;
}
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="1"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="2"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="4"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="5"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="6"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="7"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="8"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="9"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="10"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="11"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="12"] .widget-view dashboard-widget-controls header,
dashboard-widget:not(.enlarged) .dashboard-widget-wrapper[data-type="14"] .widget-view dashboard-widget-controls header {
  color: transparent;
}
dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view,
dashboard-widget .dashboard-widget-wrapper[data-type="6"] .widget-view {
  padding: 0;
  overflow: hidden;
}
dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view .message-wrapper,
dashboard-widget .dashboard-widget-wrapper[data-type="6"] .widget-view .message-wrapper {
  padding: var(--widgetPadding);
}
dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view dashboard-widget-controls,
dashboard-widget .dashboard-widget-wrapper[data-type="6"] .widget-view dashboard-widget-controls {
  width: 100% !important;
  box-sizing: border-box;
}
dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view dashboard-widget-controls .dashboard-widget-controls,
dashboard-widget .dashboard-widget-wrapper[data-type="6"] .widget-view dashboard-widget-controls .dashboard-widget-controls {
  margin: var(--widgetPadding);
}
dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view {
  overflow: hidden;
}
dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view dashboard-widget-controls {
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  width: calc(100% - var(--gap) * 2);
  padding: var(--widgetPadding) var(--widgetPadding) 0;
  z-index: 100;
  top: calc(-24px - var(--gap) * 3  - 2 * 1px);
  left: 0;
  transition: top 0.4s ease-in-out;
}
.mobile dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view dashboard-widget-controls {
  display: none;
}
dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view dashboard-widget-controls header {
  color: #ffffff;
}
dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view:hover dashboard-widget-controls {
  top: 0;
}
dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view:hover dashboard-widget-controls header {
  color: #ffffff !important;
}
dashboard-widget .dashboard-widget-wrapper[data-type="3"] .widget-view dashboard-widget-controls .dashboard-widget-controls {
  margin: 0;
}
#enlargedWidgetWrapper .widget-resize-control {
  display: none;
}
#addWidgetModal {
  --widgetCardPadding: 5px;
}
#addWidgetModal .widget-list {
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--widgetCardPadding));
}
#addWidgetModal .widget-list li {
  width: calc(100% / 3);
  box-sizing: border-box;
  height: 200px;
  flex-shrink: 1;
  padding: var(--widgetCardPadding);
  display: flex;
}
#addWidgetModal .widget-list li button {
  flex-grow: 1;
  box-sizing: border-box;
  border: 1px solid #a7a9ac;
  background-color: #ffffff;
  padding: 10px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  width: 100%;
}
#addWidgetModal .widget-list li button.selected {
  border: 2px solid #56aa1c;
  margin: -1px;
  background-color: #d9ead2;
}
#addWidgetModal .widget-list li button.selected::after {
  content: '';
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 18px;
  height: 18px;
  border: 2px solid #56aa1c;
  border-radius: 50%;
  background: #d9ead2 url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxMSIgd2lkdGg9IjE0IiBoZWlnaHQ9IjExIj48cGF0aCBkPSJNMywzLjUgTDUuNzUsNi4yNSBMMTEsMSBMMTMsMyBMNS43NSwxMC4yNSBMMSw1LjUgWiIgZmlsbD0iIzU2YWExYyIvPjwvc3ZnPg==) no-repeat center;
  animation: context-menu-fade-in 0.2s linear;
}
#addWidgetModal .widget-list li button.not-selectable {
  opacity: 0.65;
  pointer-events: none;
}
#addWidgetModal .widget-list li button:focus {
  outline: none;
  box-shadow: none;
}
#addWidgetModal .widget-list li button:hover {
  background-color: #d9ead2;
  border-color: #89c377;
}
#addWidgetModal .widget-list li button figure {
  width: 100%;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
#addWidgetModal .widget-list li button figure img,
#addWidgetModal .widget-list li button figure i {
  flex-grow: 1;
  width: 220px;
  height: 137px;
  align-self: center;
}
#addWidgetModal .widget-list li button figure figcaption {
  flex-grow: 0;
  flex-shrink: 0;
  line-height: 20pt;
  font-size: 12pt;
  margin-top: var(--widgetCardPadding);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fav-wrapper,
.tour-presets {
  display: flex;
  margin: auto;
  border: 1px solid #a7a9ac;
  padding: 5px;
  position: relative;
  top: 10px;
}
.fav-wrapper.transition-items .reorder-item,
.tour-presets.transition-items .reorder-item {
  transition: transform 0.15s linear !important;
}
.fav-wrapper .fav-item,
.tour-presets .fav-item {
  width: 85px;
  height: 95px;
  float: left;
  border: 5px solid white;
  flex-direction: column;
}
.fav-wrapper .fav-item .ico-entity-32,
.tour-presets .fav-item .ico-entity-32 {
  margin: 10px auto 0;
}
.fav-wrapper .fav-item .title,
.tour-presets .fav-item .title {
  text-align: center;
  margin-top: 10px;
  display: -webkit-box;
}
.fav-wrapper .fav-item.for-insert,
.tour-presets .fav-item.for-insert {
  margin-left: 45px;
  margin-right: 0;
}
.fav-wrapper .fav-item.for-insert-right,
.tour-presets .fav-item.for-insert-right {
  margin-right: 45px;
  margin-left: 0;
}
.fav-wrapper .fav-item,
.tour-presets .fav-item {
  background-color: #d9ead2;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  position: relative;
}
.fav-wrapper .fav-item.no-transition,
.tour-presets .fav-item.no-transition {
  transition: none !important;
}
.fav-wrapper .fav-item:hover,
.tour-presets .fav-item:hover {
  background-color: #89c377;
}
.fav-wrapper .fav-item img,
.tour-presets .fav-item img {
  margin-left: 22px;
  margin-right: 22px;
  margin-top: 10px;
}
.fav-wrapper .fav-item .lightning-image,
.tour-presets .fav-item .lightning-image {
  position: absolute;
  top: 2px;
  right: 2px;
  margin: 0;
}
.fav-wrapper .fav-item .title,
.tour-presets .fav-item .title {
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  padding-left: 10px;
  padding-right: 10px;
  max-height: 30px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  user-select: none;
}
.fav-wrapper .reorder-item-empty,
.tour-presets .reorder-item-empty {
  width: 85px;
  height: 95px;
  float: left;
  background-color: #d9ead2;
  border: 5px solid white;
  box-sizing: border-box;
}
.fav-wrapper .reorder-item-empty.no-transition,
.tour-presets .reorder-item-empty.no-transition {
  transition: none !important;
}
.fav-wrapper .reorder-item-empty.for-insert,
.tour-presets .reorder-item-empty.for-insert {
  margin-left: 45px;
  margin-right: 0;
}
.fav-item.reorder-item-absolute {
  width: 75px;
  height: 85px;
  flex-direction: column;
}
.fav-item.reorder-item-absolute .ico-entity-32 {
  margin: 10px auto 0;
}
.fav-item.reorder-item-absolute .title {
  text-align: center;
  margin-top: 10px;
}
.fav-item img {
  margin-left: 22px;
  margin-right: 22px;
  margin-top: 10px;
}
.fav-item.reorder-item-absolute {
  border: 1px solid #a7a9ac;
  position: absolute;
  z-index: 999999996;
  top: 0;
  left: 0;
  background-color: #d9ead2;
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.4);
  animation: fav-shadow-fade-in 0.3s linear !important;
  display: flex;
  cursor: move;
  will-change: transform, box-shadow, border-color;
}
.fav-item.reorder-item-absolute.transition {
  transition: transform 0.3s cubic-bezier(0.24, 1.09, 0.55, 0.95) !important;
}
.fav-item.reorder-item-absolute.reverse-animation {
  animation: fav-shadow-fade-out 0.3s linear forwards !important;
}
.fav-item.reorder-item-absolute .lightning-image {
  position: absolute;
  top: 2px;
  right: 2px;
  margin: 0;
}
.fav-item.reorder-item-absolute .title {
  cursor: inherit;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  padding-left: 10px;
  padding-right: 10px;
  max-height: 30px;
  -webkit-line-clamp: 2;
  -ms-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -ms-box-orient: vertical;
  box-orient: vertical;
}
@media (min-width: 320px) and (max-width: 1024px) {
  body.mobile .fav-wrapper {
    flex-direction: column;
    width: calc(100% - 12px);
    height: auto;
  }
  body.mobile .fav-wrapper .fav-item {
    width: 100%;
    height: 55px;
    border: 1px solid white;
    flex-direction: row;
    justify-content: flex-start;
  }
  body.mobile .fav-wrapper .fav-item .ico-entity-32 {
    margin-left: 6px;
    margin-top: 10px;
  }
  body.mobile .fav-wrapper .fav-item .title {
    height: 30px;
    top: 50%;
    margin-top: -15px;
    position: absolute;
    display: flex;
    align-items: center;
  }
  body.mobile .fav-wrapper .fav-item.for-insert {
    margin-top: 35px;
  }
  body.mobile .fav-wrapper .fav-item.for-insert-right {
    margin-bottom: 35px;
  }
  body.mobile .fav-wrapper .reorder-item-empty {
    width: 100%;
    height: 55px;
    border: 1px solid white;
  }
  body.mobile .fav-item.reorder-item-absolute {
    width: 178px;
    height: 53px;
    justify-content: flex-start;
    flex-direction: row;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
  }
  body.mobile .fav-item.reorder-item-absolute .ico-entity-32 {
    margin-left: 6px;
    margin-top: 10px;
  }
  body.mobile .fav-item.reorder-item-absolute .title {
    height: 30px;
    top: 50%;
    margin-top: -15px;
    position: absolute;
    display: flex;
    align-items: center;
  }
}
@media only screen and (max-width: 1024px) {
  body.mobile .add-target-container .working-area {
    padding: 10px 5px 0;
  }
}
.create-new-box {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}
.favourite-item {
  display: flex;
  flex-direction: column;
  width: 75px !important;
  height: 90px;
  position: relative;
  background-color: #d9ead2;
  box-sizing: border-box;
  cursor: move;
  z-index: 999999999 !important;
  transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
}
.favourite-item.cdk-drag-preview {
  box-sizing: border-box;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.favourite-item .favourite-picture {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.favourite-item .favourite-title {
  display: -webkit-box;
  max-height: 30px;
  margin-top: 10px;
  padding: 0 10px;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  user-select: none;
}
.favourite-item .lightning {
  display: flex;
  flex-grow: 1;
  flex-direction: row-reverse;
  position: absolute;
  top: 5px;
  right: 0;
}
.favourite-item:hover {
  background-color: #89c377;
}
.container.menu-container {
  height: auto;
}
.working-area .container.menu-container {
  height: 100%;
}
body.rtl .manage-sof-buttons-wrapper manage-soft-buttons-button {
  left: 0;
  right: initial;
}
.manage-sof-buttons-wrapper {
  position: relative;
}
.manage-sof-buttons-wrapper manage-soft-buttons-button {
  position: absolute;
  z-index: 2;
  right: 0;
}
.custom-rules-content legend .legend-text.long-named {
  display: inline-block;
  width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-rules-content .explanatory-text {
  color: #a7a9ac;
}
.custom-rules-content .static-list {
  margin-top: 10px;
}
.custom-rules-content .static-list li {
  display: flex;
  padding: 1px 0;
}
.custom-rules-content .static-list li img {
  margin-top: 2px;
}
.custom-rules-content .static-list li span {
  text-overflow: ellipsis;
  overflow: hidden;
  flex: 1;
}
.custom-rule-body {
  overflow-y: hidden;
  padding-bottom: 15px;
}
.custom-rule-body .container {
  padding: 0;
}
.custom-rule-body .ui-tree-wrapper {
  flex: 1;
}
.custom-rule-body .horizontal-sep {
  margin: 10px 0;
  border-top: 1px solid #a7a9ac;
}
.custom-rule-body .language {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}
.custom-rule-body .language-message {
  grid-column: 1/3;
}
.custom-rule-body .message-preview-image {
  border: 1px solid #aaaaaaaa;
  grid-column: 1/3;
  margin-top: -10px;
  width: 85%;
  justify-self: center;
}
.custom-rule-body .language-selected {
  max-width: 200px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 4px;
  padding: 0 4px;
  background: #ffffff;
  border: 1px solid #a7a9ac;
}
.custom-rule-body .arrow {
  z-index: 100;
  height: 16px;
  width: 8px;
  margin: 0 10px;
  color: #a7a9ac;
  transform: scaleY(1) rotate(-90deg);
  transition: transform 0.3s ease-out;
}
.custom-rule-body .arrow.open {
  transform: scaleY(-1) rotate(-90deg);
}
.custom-rule-body .language-container {
  display: grid;
  position: absolute;
  min-width: 180px;
  background: #ffffff;
  border: 1px solid #a7a9ac;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.custom-rule-body .language-container :hover {
  color: white;
  background-color: #56aa1c;
}
.custom-rule-body .language-container .element {
  padding: 0 15px 0 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5px;
}
#customTimeRadio,
#defaultTime,
#holdDoor {
  align-self: center;
  margin: 0 5px;
}
.horizontal-sep {
  margin: 10px 0;
  border-top: 1px solid #a7a9ac;
}
.add-target-container {
  height: 100%;
}
.item-chooser {
  height: calc(100% - 1px);
  margin-top: 1px;
}
.container.menu-container {
  padding: 0;
}
.container.menu-container .menu {
  border-right: 1px solid #a7a9ac;
  height: 100%;
  float: left;
  padding-top: 10px;
  width: 129px;
}
.container.menu-container .menu li {
  border: 1px solid transparent;
  cursor: pointer;
  display: block;
  list-style: none;
  margin-right: -1px;
  padding: 8px 10px;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
}
.container.menu-container .menu li.active {
  border-color: #a7a9ac;
  border-right-color: #ffffff;
  color: #56aa1c;
}
.container.menu-container .menu-content {
  margin-left: 129px;
}
.container .btn-group {
  margin-top: 15px;
}
.container .btn-group {
  margin-top: 15px;
}
.trigger-rule .nodeTitle {
  max-width: 200px !important;
}
.radio-group .input-group {
  margin-bottom: 0;
}
.radio-group .input-group label {
  max-width: 250px;
}
#customRuleType {
  min-width: 190px;
}
.run-roll-call-report {
  position: absolute;
  top: 89px;
  right: 145px;
  left: inherit;
  z-index: 2;
}
.run-roll-call-report > div {
  margin-bottom: 10px;
}
.run-roll-call-report:hover {
  cursor: pointer;
  background-color: #e6f4dc;
  border-color: #97c579;
}
.anti-passback-configuration {
  margin-left: 10px;
}
.anti-passback-configuration .input-placeholder {
  align-items: center;
}
.anti-passback-configuration fieldset {
  margin-top: 20px;
  margin-left: 20px;
  width: 420px;
}
.anti-passback-configuration fieldset > .input-group label {
  min-width: 140px;
}
.anti-passback-configuration fieldset .checkbox-placeholder {
  padding-top: 4px;
  margin-left: -6px;
}
.anti-passback-configuration fieldset.timed-apb {
  margin-bottom: 20px;
}
.anti-passback-configuration .radio-group .input-group label {
  max-width: 280px;
  flex: 1;
}
.anti-passback-configuration .radio-group .input-group label input {
  margin: 0 10px 0 0;
  align-self: center;
}
.anti-passback-configuration .disabled:hover {
  background-color: transparent;
}
.anti-passback-configuration .inner-header {
  margin-top: 20px;
}
.anti-passback-configuration .input-group {
  flex-wrap: nowrap;
  margin-left: 55px;
  width: 90%;
}
.anti-passback-configuration legend .input-group {
  margin-left: 0;
  width: 100%;
}
.anti-passback-configuration.long-named fieldset {
  width: 465px;
}
.anti-passback-configuration.long-named fieldset .input-group > label {
  min-width: 230px;
  white-space: normal;
  overflow: visible;
  height: auto;
  line-height: normal;
}
.rollcall-configuration legend label {
  display: flex;
  align-items: center;
}
.rollcall-configuration .options-timepicker {
  margin-left: 4px;
}
.rollcall-time {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.customRuleType {
  color: #56aa1c;
  font-size: 15px;
  line-height: 25px;
  height: 25px;
  margin-right: 20px;
}
.roll-call-email-wrapper {
  height: 100%;
}
.roll-call-email-wrapper .target-chooser .ui-tree-wrapper {
  height: 100%;
}
.add-object-container .with-radio-section .radio-input {
  flex: 1;
}
.add-object-container .with-radio-section .radio-group .input-group label {
  min-width: 200px;
}
.add-object-container .with-radio-section .input-placeholder {
  min-width: 230px;
  max-width: 230px;
}
.roll-call-email input[type="search"]:disabled {
  background-color: #ffffff;
}
.roll-call-email #searchIcon {
  top: 3px;
}
.action-buttons {
  display: flex;
}
.action-buttons a {
  margin: 0 2px;
}
.already-added-area {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 0 0 0 15px;
}
.already-added-area .added-header {
  border: 1px solid #a7a9ac;
  box-sizing: border-box;
  height: 38px;
  margin: 0;
  overflow: hidden;
  padding: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.already-added-area ul {
  border-top: none;
  border: 1px solid #a7a9ac;
  box-sizing: border-box;
  flex: 1;
  overflow: auto;
}
.already-added-area ul li {
  cursor: pointer;
  display: flex;
  line-height: 16px;
  overflow: hidden;
  padding: 5px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #ffffff;
  color: #3c3c3b;
}
.already-added-area ul li span {
  align-items: center;
  margin-left: 5px;
}
.already-added-area ul li .icon-wrapper {
  margin-right: 5px;
}
.already-added-area ul li .alarm-area-icon {
  display: inline-block;
  float: left;
  height: 16px;
  margin-right: 7px;
  vertical-align: top;
  width: 16px;
}
.already-added-area ul li:hover {
  background: #d9ead2;
  color: #3c3c3b;
}
.already-added-area ul li.selected {
  background: #56aa1c;
  color: #ffffff;
}
.already-added-area ul li.selected path:not(.unchangeable),
.already-added-area ul li.selected polygon:not(.unchangeable),
.already-added-area ul li.selected circle:not(.unchangeable) {
  fill: #ffffff !important;
}
.already-added-area ul li.selected .invert-exception {
  fill: #56aa1c !important;
}
.already-added-area ul li.selected .invert-exception.stroke {
  fill: transparent!important;
  stroke: #ffffff !important;
}
.already-added-area ul li.selected .active-exception {
  fill: #ffffff !important;
}
.custom-rules .bordered-section {
  border: 1px solid #ddd;
  padding: 15px;
  margin: 15px;
  height: fit-content;
}
.custom-rules .bordered-section .checkbox-container {
  display: flex;
  align-items: center;
}
.custom-rules .bordered-section .checkbox-container .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.custom-rules .bordered-section .checkbox-container .checkbox-label input[type="checkbox"] {
  margin: 0;
}
.custom-rules .lockdown-configuration-wrapper {
  display: grid;
  height: calc(100% - 30px);
}
.logo {
  height: 100%;
  width: 100%;
}
#ribbon-new {
  border-bottom: #3c3c3b 2px solid;
  z-index: 4;
  background: #ffffff;
}
#ribbon-new.removed {
  display: none;
}
#banner-notification-group {
  z-index: 1;
  transition: transform 0.2s ease-out;
}
body.mobile .page-header .buttons-wrapper {
  justify-content: flex-end;
}
html,
body {
  height: 100%;
  overflow: hidden;
  position: relative;
  min-width: 320px;
  direction: ltr;
  background: #3c3c3b;
}
body {
  overflow: hidden !important;
}
html.desktop-view,
body.desktop-view {
  overflow: auto !important;
  height: calc(100% + 162px);
}
.wrapper {
  --grayscale: 1;
  --brightness: 0.6;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: filter 0.2s linear;
  will-change: filter;
}
.wrapper.unfocused {
  --filter: grayscale(var(--grayscale)) brightness(var(--brightness));
  filter: var(--filter) !important;
}
.wrapper.unfocused:-webkit-full-screen-ancestor {
  filter: var(--filter) !important;
}
.main-container {
  display: flex;
  flex-grow: 1;
  height: 100%;
  background-color: #000000;
}
iframe {
  flex: 1;
  width: 100%;
  height: 100%;
}
iframe.cache-helper {
  display: none;
}
.on-top {
  overflow: visible !important;
  z-index: 999999989 !important;
}
.on-top .breadcrumbs-wrapper {
  overflow: hidden !important;
}
#content {
  display: flex;
  flex-grow: 1;
  width: calc(100% - 90px);
  background-color: #ffffff;
  z-index: 2;
}
#content .main-article-wrapper {
  display: flex;
  flex-grow: 1;
  flex-flow: column;
  position: relative;
  overflow: hidden;
}
#content .article-wrapper {
  display: flex;
  flex-flow: column;
  flex-grow: 12;
  flex-shrink: 12;
  width: 100%;
  height: 0;
}
#content .article-wrapper:-webkit-full-screen {
  background-color: white;
  z-index: 9 !important;
}
#content .article-wrapper.general-page {
  top: 0;
  border: 0;
}
#content .article-wrapper.invisible-top-border {
  border-top: none;
}
#content .article-wrapper .full-article {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}
#content .breadcrumbs-wrapper {
  width: 100%;
}
#content article {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  height: 100%;
}
#content article.listing {
  flex-direction: row;
}
#content article > form {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.blocker {
  pointer-events: none;
}
#main {
  flex: 1 1 auto;
  flex-direction: column;
  display: flex;
  min-height: 175px;
  height: 100%;
}
#main.height-max {
  height: calc(100% - 60px);
}
#main.height-min {
  height: calc(100% - 160px);
}
#logo {
  cursor: pointer;
  display: block;
  height: 38px;
  position: absolute;
  top: 10px;
  right: 15px;
  width: 100px;
  z-index: 1;
}
#menu {
  height: 57px;
  position: relative;
}
#twoDeeContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#twoDeeContainer .lower-canvas {
  background: url(../43df7c25630e824b5a12.png), #fff;
  background-size: 550px 550px;
  background-attachment: fixed;
}
.two-dee-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.two-dee-container .lower-canvas {
  background-color: #ededed;
}
.display-flex {
  display: flex;
  flex-grow: 1;
}
.flex-row {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}
.flex-column {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
.file-mode #content,
.file-mode #splitter {
  top: 59px;
}
.container {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 17px;
  height: 100%;
}
.page-footer {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid #a7a9ac;
  padding: 10px 20px;
  position: absolute;
  text-align: right;
  width: 100%;
  bottom: 175px;
}
.users-info .page-footer,
.device-info .page-footer,
.timeprofile .page-footer {
  bottom: 0;
}
.static-list {
  line-height: 20px;
}
.static-list .group-entity {
  font-weight: bold;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.static-list li:not(.custom-rule-property) {
  display: flex;
  align-items: center;
  flex-direction: row;
  position: relative;
}
.static-list .permission-appliances,
.static-list .permission-time-profile {
  padding: 3px 0;
}
.selectable-permissions li {
  padding: 3px 5px;
  cursor: pointer;
}
.selectable-permissions li:hover {
  background-color: #d9ead2;
}
.selectable-permissions li.active {
  background-color: #89c377;
  font-weight: bold;
}
.no-selectable-permissions li {
  padding: 3px 5px;
  cursor: text;
}
.clear-fix {
  clear: both;
  display: block;
  float: none;
  height: 0;
  width: 0;
}
.flex-container {
  display: flex;
  flex-flow: column;
  flex-grow: 1;
}
[data-with-tooltip]:disabled::after {
  content: '';
  opacity: 0;
  transition: opacity 0.01s linear;
}
[data-with-tooltip]:disabled:hover::after {
  opacity: 0.1;
}
.app-left-block {
  z-index: 3;
  display: flex;
  flex-direction: column;
}
.tab-with-arrow {
  float: none !important;
  background: #d9ead2;
  margin-top: 3px;
  position: relative;
  height: 34px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 11pt;
  padding: 0;
  flex-shrink: 0;
}
.tab-with-arrow span {
  flex-grow: 1;
  padding-left: 10px;
  color: #000000;
}
.tab-with-arrow img {
  width: 16px;
  height: 28px;
  padding: 0 7px 0 0;
}
.tab-with-arrow:first-child.active {
  margin-left: -1px;
}
.tab-with-arrow.active {
  border: 1px solid #a7a9ac;
  color: inherit;
}
.mobile .page-header {
  min-height: 120px;
}
.page-header {
  display: flex;
  flex-shrink: 0;
  background-color: #ededed;
  border-bottom: 1px solid #a7a9ac;
  min-height: 129px;
  position: relative;
  box-sizing: border-box;
}
.page-header .controls {
  display: flex;
  padding: 30px 10px 10px;
  flex-grow: 12;
  flex-shrink: 0;
}
.page-header .icon-wrapper {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  flex-direction: row-reverse;
}
.page-header .inputs-wrapper {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  max-width: 300px;
}
.page-header .inputs-wrapper.wide {
  max-width: 600px;
}
.page-header .inputs-wrapper input,
.page-header .inputs-wrapper select {
  margin-bottom: 5px;
  width: 100%;
}
.page-header .asterisk-wrapper {
  width: calc(100% - 20px);
}
.page-header select {
  background-color: white;
}
.page-header input[type="text"] {
  height: 24px;
  font-weight: bold;
  min-width: 170px;
}
.page-header input[type="text"] + input[type="text"] {
  margin-left: 8px;
}
.page-header .entity-icon {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.page-header .entity-icon .custom-barred {
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPiAgPGxpbmUgeDE9IjAiIHkxPSIwIiB4Mj0iNjQiIHkyPSI2NCIgc3R5bGU9InN0cm9rZTpyZ2IoMjU1LDAsMCk7c3Ryb2tlLXdpZHRoOjQiPjwvbGluZT4gIDxsaW5lIHgxPSI2NCIgeTE9IjAiIHgyPSIwIiB5Mj0iNjQiIHN0eWxlPSJzdHJva2U6cmdiKDI1NSwwLDApO3N0cm9rZS13aWR0aDo0Ij48L2xpbmU+PC9zdmc+) no-repeat;
  background-size: contain;
  height: 128px;
  position: absolute;
  width: 128px;
  top: 0;
}
.page-header .entity-icon .label-change-image {
  display: block;
  position: absolute;
  z-index: 10;
  width: 128px;
  height: 20px;
  line-height: 20px;
  bottom: 0;
  color: white;
  font-size: 14px;
  text-align: center;
  background: rgba(96, 96, 96, 0.8);
}
.page-header .entity-icon .label-change-image:not(.readonly) {
  cursor: pointer;
}
.page-header .entity-icon .label-change-image:not(.readonly):hover {
  background: #89c377;
  transform: translateZ(0);
  transition-duration: 0.3s;
  transition-property: background;
}
.page-header img.read-only,
.page-header .entity-icon.read-only {
  cursor: default;
}
.page-header img.read-only + img,
.page-header .entity-icon.read-only + img {
  cursor: default;
}
.page-header img {
  width: 128px;
}
.page-header .buttons-wrapper {
  flex-wrap: nowrap;
  display: flex;
  min-width: 200px;
  max-width: 300px;
  flex-grow: 1;
}
.page-header .buttons-wrapper .btn.primary {
  margin-left: 0;
}
.page-header .applianceType {
  margin-right: 20px;
}
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-overflow-scrolling: touch;
}
body input[type="search"]::-webkit-search-cancel-button {
  display: none;
}
body.mobile input:not(input[type="radio"], input[type="checkbox"], input[type="range"]) {
  -webkit-appearance: none;
}
body.mobile input[type="date"] {
  -webkit-appearance: none;
}
body.mobile input[type="text"] {
  -webkit-user-select: auto;
}
body.mobile #content {
  overflow-y: auto;
  transform: none;
  transition: transform 0.2s ease-out;
}
body.mobile #content .breadcrumbs-wrapper {
  margin-top: 3px;
}
body.mobile #content .article-wrapper {
  border: none;
}
body.mobile #ribbon-new {
  border-bottom: none;
}
body.mobile *:not(input, textarea) {
  -webkit-user-select: none;
}
body.mobile figure:hover {
  background-color: rgba(0, 0, 0, 0);
}
body.mobile .vm-blocker {
  position: fixed;
  width: 15vw;
  height: 100vh;
  right: 0;
  top: 0;
  z-index: 3;
  background: rgba(0, 0, 0, 0);
}
body.mobile #desktop-ribbon {
  display: none;
}
body.mobile #ribbon-new {
  z-index: 3;
  position: relative;
  transform: none;
  transition: transform 0.2s ease-out;
  border: none;
  flex-shrink: 0;
}
body.mobile #currentToolbox.toolBox-mobile {
  position: relative;
  background-color: #6d6e71;
  width: 100%;
  z-index: 2;
  right: 0;
}
body.mobile .app-left-block {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  width: 85%;
  background-color: #3c3c3b;
  z-index: 0;
  display: block;
  overflow: auto;
}
body.mobile .input-group {
  flex-wrap: wrap;
  flex-shrink: 0;
}
body.mobile .input-group .input-placeholder {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 1;
}
body.mobile .input-group .input-placeholder--with-validation-messages {
  flex-direction: column;
  align-items: flex-start;
}
body.mobile .input-group .input-placeholder .entity-chooser input {
  min-width: 120px;
}
body.mobile .page-header {
  display: flex;
  flex-grow: 0;
  height: auto;
  min-height: auto;
}
body.mobile .page-header.mobileSection {
  height: auto !important;
}
body.mobile .page-header .icon-wrapper img,
body.mobile .page-header .entity-icon .custom-barred {
  width: calc(100% - 2 * 10px);
  max-width: 55px;
  max-height: 55px;
}
body.mobile .page-header .icon-wrapper img {
  padding: 10px;
}
body.mobile .page-header .icon-wrapper .label-change-image {
  display: none;
}
body.mobile .page-header .entity-icon .custom-barred {
  position: initial;
  margin-top: calc(-100% + 10px);
  margin-left: 10px;
}
@media only screen and (min-width: 681px) and (max-width: 1024px) {
  body.mobile .article-wrapper .tabbed-content .tabs {
    width: 200px;
  }
  body.mobile .article-wrapper .tabbed-content.page-content .tabs {
    margin-top: 0;
  }
  body.mobile .article-wrapper .tabbed-content.page-content .tab-content-block {
    position: absolute;
    top: 0;
    left: 200px;
    width: calc(100% - 200px);
    margin-top: 0;
  }
  body.mobile .article-wrapper .tabbed-content.page-content .tab-content {
    clear: none;
  }
}
@media only screen and (max-width: 680px) and (orientation: portrait), only screen and (max-width: 736px) and (orientation: landscape) {
  body.mobile .breadcrumbs-wrapper {
    display: none;
  }
}
@media only screen and (min-width: 681px) {
  body.mobile .tabbed-content .modal-tabs {
    height: auto !important;
  }
}
body.mobile .article-wrapper .tabbed-content .tabs li {
  float: none !important;
  background: #d9ead2;
  margin-top: 3px;
  position: relative;
  height: 34px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 11pt;
  padding: 0;
  flex-shrink: 0;
}
body.mobile .article-wrapper .tabbed-content .tabs li span {
  flex-grow: 1;
  padding-left: 10px;
  color: #000000;
}
body.mobile .article-wrapper .tabbed-content .tabs li img {
  width: 16px;
  height: 28px;
  padding: 0 7px 0 0;
}
body.mobile .article-wrapper .tabbed-content .tabs li:first-child.active {
  margin-left: -1px;
}
body.mobile .article-wrapper .tabbed-content .tabs li.active {
  border: 1px solid #a7a9ac;
  color: inherit;
}
@media only screen and (max-width: 680px) {
  body.mobile .container {
    padding: 5px;
  }
  body.mobile .input-group .input-placeholder {
    width: auto;
  }
  body.mobile .input-group.new-appliance-field .input-placeholder {
    flex-grow: 1;
    flex-shrink: 0;
  }
  body.mobile .article-wrapper .tabbed-content #articleUser {
    flex-direction: column !important;
  }
  body.mobile .article-wrapper .tabbed-content .tabs li {
    float: none !important;
    background: #d9ead2;
    margin-top: 3px;
    position: relative;
    height: 34px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 11pt;
    padding: 0;
    flex-shrink: 0;
  }
  body.mobile .article-wrapper .tabbed-content .tabs li span {
    flex-grow: 1;
    padding-left: 10px;
    color: #000000;
  }
  body.mobile .article-wrapper .tabbed-content .tabs li img {
    width: 16px;
    height: 28px;
    padding: 0 7px 0 0;
  }
  body.mobile .article-wrapper .tabbed-content .tabs li:first-child.active {
    margin-left: -1px;
  }
  body.mobile .article-wrapper .tabbed-content .tabs li.active {
    border: 1px solid #a7a9ac;
    color: inherit;
  }
  body.mobile .article-wrapper .tabbed-content.page-content .tabs {
    margin-top: 0;
  }
  body.mobile .article-wrapper .tabbed-content.page-content .tab-content-block {
    position: absolute;
    top: 0;
    z-index: 99;
    background-color: #ffffff;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    margin-top: 0;
    width: 100%;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
  }
  body.mobile .article-wrapper .tabbed-content.page-content .tab-content-block.visible {
    transform: none;
  }
  body.mobile .article-wrapper .tabbed-content.page-content .tab-content-block.invisible {
    transform: translateX(100%);
  }
  body.mobile .article-wrapper .tabbed-content .back-button {
    display: flex;
  }
  body.mobile .article-wrapper .tabbed-content .tab-content {
    -webkit-text-size-adjust: 100%;
  }
  body.mobile .article-wrapper .tabbed-content .tab-content .container.permissions fieldset {
    border: none;
    padding: 0;
  }
  body.mobile .article-wrapper .tabbed-content .tab-content .container.permissions fieldset legend {
    white-space: nowrap;
  }
  body.mobile .article-wrapper .open-tabs-button {
    display: block;
  }
  body.mobile .article-wrapper .modal-tabs {
    width: 200px;
    top: 29px;
    background-color: #d9ead2;
    z-index: 999;
    left: -65%;
  }
  body.mobile .article-wrapper .modal-tabs li {
    float: none;
    text-align: left;
  }
  body.mobile .article-wrapper .modal-tabs li.active {
    background-color: #d9ead2;
    color: inherit;
    height: auto;
    border-bottom: 1px solid #a7a9ac;
    margin-top: 0;
  }
  body.mobile .article-wrapper .modal-tabs li.active::after {
    content: '\203A';
    font-size: 55px;
    line-height: 0;
    position: absolute;
    right: 10px;
    color: #56aa1c;
  }
  body.mobile .article-wrapper .modal-tabs.visible {
    animation: showModalContent 0.5s linear forwards;
  }
  body.mobile .article-wrapper .modal-tabs.invisible {
    animation: hideModalContent 0.5s linear forwards;
  }
  body.mobile .article-wrapper .modal-body {
    margin-left: 0;
  }
  body.mobile .article-wrapper .modal-body.ease-left {
    animation: easeLeft 0.45s linear forwards;
  }
  body.mobile .article-wrapper .modal-body.ease-right {
    animation: easeRight 0.45s linear forwards;
  }
  body.mobile .article-wrapper .modal-header {
    padding-bottom: 6px;
  }
}
@media only screen and (max-width: 739px) {
  body.mobile .page-header .inputs-wrapper {
    flex-direction: column;
    max-width: 300px;
  }
  body.mobile .page-header .asterisk-wrapper {
    flex-direction: column;
  }
  body.mobile .page-header input[type="text"]:invalid:not(.ng-pristine) + .newErrorMessage,
  body.mobile .page-header input[type="number"]:invalid:not(.ng-pristine) + .newErrorMessage,
  body.mobile .page-header input[type="email"]:invalid:not(.ng-pristine) + .newErrorMessage,
  body.mobile .page-header select:invalid:not(.ng-pristine) + .newErrorMessage {
    position: relative;
    top: -2px;
    left: 0;
  }
  body.mobile form[name="userInfo"] .page-header .icon-wrapper img,
  body.mobile form[name="userInfo"] .page-header .entity-icon .custom-barred {
    max-width: 90px;
    max-height: 90px;
  }
}
@media only screen and (max-width: 530px) {
  body.mobile .page-header .buttons-wrapper {
    margin-left: 0;
    margin-right: 0 !important;
    justify-content: flex-start !important;
  }
  body.mobile .page-header .asterisk-wrapper {
    width: auto !important;
    margin-right: 0;
    margin-left: 0 !important;
  }
  body.mobile .page-header .controls {
    flex-direction: column;
    padding: 10px;
    justify-content: center;
    max-width: 300px;
    padding-right: 10px / 2;
  }
  body.mobile .page-header .controls .buttons-wrapper {
    display: flex;
  }
  body.mobile .page-header .controls .buttons-wrapper button:not(.back) {
    flex-grow: 1;
    margin-right: 0;
  }
  body.mobile .page-header .controls .thin {
    flex-grow: 0;
  }
  body.mobile .page-header .applianceType {
    flex-grow: 1;
  }
  body.mobile .page-header .icon-wrapper img,
  body.mobile .page-header .entity-icon .custom-barred {
    max-width: 100px !important;
    max-height: 100px !important;
  }
}
body.mobile .page-header .controls .buttons-wrapper button {
  height: 30px;
  font-size: 11pt;
}
body.mobile .page-header .controls .inputs-wrapper input {
  height: 30px;
  font-size: 11pt;
}
body.mobile article:not(.users-info) .page-header .buttons-wrapper {
  min-width: initial;
}
fieldset.hidden-legend > div {
  padding-top: 5px;
  align-items: flex-start;
}
fieldset.hidden-legend .bold {
  font-weight: bold;
}
fieldset.hidden-legend .text {
  white-space: normal;
  line-height: 13px;
  height: auto;
}
div[svg-image] {
  display: flex;
}
div[svg-image].green-pencil {
  cursor: pointer;
}
div[svg-image].green-pencil img {
  height: 15px;
}
body.mobile fieldset.hidden-legend legend {
  display: none;
}
body.mobile fieldset.hidden-legend > div {
  display: flex;
}
body.mobile fieldset.hidden-legend.entity-list-chooser .chooser-content {
  margin-top: initial;
}
body.mobile .modal-overlay .modal#renameGroupModal,
body.mobile .modal-overlay .modal#changePasswordModal {
  display: block;
}
.guide-overlay {
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  transition: all 0.3s;
  z-index: 10000;
}
.guide-target-overlay {
  box-shadow: 0 0 5px 10px #ffffff;
  position: absolute;
  transition: all 0.3s;
  z-index: 10001;
}
.guide-target-overlay.dark {
  box-shadow: 0 0 15px 8px rgba(0, 0, 0, 0.4);
}
.clickable-point {
  border-radius: 50%;
  cursor: pointer;
  height: 10px;
  opacity: 1;
  position: absolute;
  transition: opacity 0.5s;
  width: 10px;
  z-index: 10001;
}
.clickable-point:hover {
  transform: scale(1.3);
}
.clickable-point.invisible {
  opacity: 0;
}
.clickable-point::after {
  content: '';
  display: block;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  background: #ffffff;
  box-shadow: 0 0 2px 2px #ffffff;
}
.clickable-control {
  position: absolute;
  transition: box-shadow 0.2s;
  z-index: 999999997;
}
.clickable-control.active {
  box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.7);
}
.clickable-control .helper-question {
  pointer-events: auto;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 27px;
  height: 27px;
  font-weight: bold;
  position: absolute;
  right: 2px;
  top: 2px;
  z-index: 10004;
  display: inline-block;
  transition: background-color 0.2s, transform 0.2s;
  animation: question-icon-pulse 2s infinite;
}
.clickable-control .helper-question::after {
  content: '?';
  position: absolute;
  left: 9.5px;
  top: 2px;
  font-size: 22px;
  color: #ffffff;
}
.clickable-control .helper-question:hover {
  background: rgba(255, 255, 255, 0.4);
}
.monospaced {
  font-family: 'Roboto Mono', monospace;
}
.copy-to-clipboard::after {
  content: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBpZD0iY29weVRvQ2xpcGJvYXJkIiB2aWV3Qm94PSIwIDAgMTYgMTYiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGc+PHBhdGggZD0iTTEuNSw0LjUgdjggaDEwIHYtMTIgaC02IGwtNCw0IGg0IHYtNCIgc3Ryb2tlPSIjMzYzNjM2IiBmaWxsPSIjZmZmIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PHBhdGggZD0iTTQuNSw3LjUgdjggaDEwIHYtMTIgaC02IGwtNCw0IGg0IHYtNCIgc3Ryb2tlPSIjMzYzNjM2IiBmaWxsPSIjZmZmIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PC9nPjwvc3ZnPg==);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-left: 5px;
  cursor: pointer;
}
.copy-to-clipboard:active::after {
  transform: scale(0.95);
}
.copy-to-clipboard:hover::after {
  filter: drop-shadow(0 0 1px #56aa1c);
}
.copied-message {
  position: fixed;
  width: 80px;
  height: 20px;
  margin: -10px 0 0 -40px;
  background: rgba(0, 0, 0, 0.4);
  color: #ffffff;
  border-radius: 4px;
  animation: popup 0.6s ease-out;
  font-weight: bold;
  text-align: center;
  line-height: 20px;
  z-index: 999999999;
}
body[data-cursor-type="move"],
body[data-cursor-type="move"] figure,
body[data-cursor-type="move"] div,
body[data-cursor-type="move"] li {
  cursor: grabbing !important;
}
body[data-cursor-type="link"],
body[data-cursor-type="link"] figure,
body[data-cursor-type="link"] div,
body[data-cursor-type="link"] li {
  cursor: alias !important;
}
body[data-cursor-type="copy"],
body[data-cursor-type="copy"] figure,
body[data-cursor-type="copy"] div,
body[data-cursor-type="copy"] li {
  cursor: copy !important;
}
.expandable.expanded .expand-icon {
  transform: rotateX(180deg);
}
.expand-icon {
  cursor: pointer;
  transform: rotateX(0);
  transition: transform var(--animation-duration) ease-in-out;
}
.item-to-collapse {
  overflow: hidden;
  transition: max-height var(--animation-duration) ease-in-out;
}
.input-group.form-control {
  --head-error: 3px;
  --input-size: 24px;
}
.input-group.form-control input[type="number"]::-webkit-input-placeholder {
  color: #3c3c3b;
}
.input-group.form-control.error-absolute .newErrorMessage {
  position: absolute;
  left: initial;
  top: calc(100% + var(--head-error));
}
.input-group.form-control.reversed {
  flex-direction: row-reverse;
}
.input-group.form-control.reversed .input-placeholder {
  flex-grow: 0;
}
.input-group.form-control.reversed label {
  flex-grow: 1;
  max-width: initial;
  padding-left: 5px;
}
.input-group.form-control.input-50 input,
.input-group.form-control input.input-50 {
  --input-size: 50px;
  width: var(--input-size);
  min-width: var(--input-size);
  max-width: var(--input-size);
}
.input-group.form-control.inline-error .input-placeholder {
  flex-direction: row;
  justify-content: flex-start;
}
.input-group.form-control.inline-error .input-placeholder .newErrorMessage {
  margin-left: 5px;
  margin-right: 5px;
}
.input-group.form-control.dynamic-field {
  --labelMargin: 10px;
}
.input-group.form-control.dynamic-field:not(.checkbox) {
  --size: 235px;
}
.input-group.form-control.dynamic-field:not(.checkbox) .input-wrapper {
  width: var(--size);
  min-width: var(--size);
  max-width: var(--size);
}
.input-group.form-control.dynamic-field .dynamic-input-wrapper {
  min-width: 190px;
}
.input-group.form-control.small-label .dynamic-input-wrapper {
  min-width: 60px;
}
.input-group.form-control.input-60 input,
.input-group.form-control.input-60:not(.checkbox) .input-wrapper,
.input-group.form-control input.input-60 {
  --input-size: 60px;
  width: var(--input-size);
  min-width: var(--input-size);
  max-width: var(--input-size);
}
.input-group.form-control.full-size {
  flex-grow: 1;
}
.input-group.form-control.short-input {
  --size: 160px;
}
.input-group.form-control.short-input .input-wrapper {
  width: var(--size);
  min-width: var(--size);
  max-width: var(--size);
}
.input-group.form-control.standard-input {
  --size: 235px;
}
.input-group.form-control.standard-input .input-wrapper {
  width: var(--size);
  min-width: var(--size);
  max-width: var(--size);
}
@media only screen and (max-width: 680px) {
  .input-group.form-control.standard-input {
    --size: 160px;
  }
  .input-group.form-control.standard-input .input-wrapper {
    width: var(--size);
    min-width: var(--size);
    max-width: var(--size);
  }
}
.input-group.form-control.text-area {
  flex-direction: column;
}
.input-group.form-control.absolute-postfix .asterisk {
  position: absolute;
}
.input-group.form-control .sized-input {
  width: var(--input-size);
  min-width: var(--input-size);
  max-width: var(--input-size);
}
.input-group.form-control .sized-wrapper .input-wrapper {
  width: var(--size);
  min-width: var(--size);
  max-width: var(--size);
}
.input-group.form-control .input-wrapper {
  display: flex;
  flex-grow: 1;
  width: 100%;
  position: relative;
}
.input-group.form-control .input-wrapper.postfix-margin {
  margin-right: 20px;
}
.input-group.form-control .input-wrapper.postfix-margin input {
  width: 100%;
}
.input-group.form-control .input-wrapper input {
  align-self: center;
}
.input-group.form-control .input-wrapper input[type="range"] {
  flex: 1;
}
.input-group.form-control .asterisk {
  position: initial;
}
.input-group.form-control .postfix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  position: absolute;
  left: 100%;
  align-self: center;
  white-space: nowrap;
}
.input-group.form-control .newErrorMessage {
  display: block;
  position: relative;
  top: var(--head-error);
}
.input-group.form-control .dynamic-input-wrapper {
  min-width: 140px;
  padding-right: var(--labelMargin);
  overflow: hidden;
}
.input-group.form-control .dynamic-input-wrapper label {
  min-width: auto;
  margin-right: 0;
}
.input-group.form-control .centered {
  align-self: center;
}
.pretty-scroll {
  --scrollWidth: 6px;
  --scrollHeight: 5px;
}
.pretty-scroll::-webkit-scrollbar {
  width: var(--scrollWidth) !important;
  height: var(--scrollWidth) !important;
}
.pretty-scroll::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: var(--scrollHeight) !important;
}
.pretty-scroll::-webkit-scrollbar-button,
.pretty-scroll::-webkit-scrollbar-track-piece,
.pretty-scroll::-webkit-scrollbar-corner,
.pretty-scroll::-webkit-resizer {
  display: none !important;
}
.pretty-scroll:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.loader {
  background: url(../2cd21886d4ceef201b08.svg) 50% 50% no-repeat transparent;
  bottom: 55px;
  left: 0;
  position: absolute;
  right: 0;
  top: 60px;
}
.cdk-overlay-container {
  position: fixed;
  z-index: 999999996;
}
.cdk-global-overlay-wrapper {
  display: flex;
  position: absolute;
}
.cdk-global-overlay-wrapper:has(div.dialog-panel-no-close) {
  pointer-events: bounding-box;
}
.cdk-global-overlay-wrapper,
.cdk-overlay-container {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
  opacity: 1;
}
.cdk-overlay-dark-backdrop {
  background: rgba(0, 0, 0, 0.32);
}
.cdk-overlay-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0;
}
.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
}
.cdk-dialog-container {
  display: block;
  background: #fff;
  border-top: 2px solid #00AA00;
  will-change: transition, filter;
  box-shadow: 0 0 20px #6d6e71;
  transition: filter 0.2s linear;
  animation: modal-fade-in 0.2s ease-out;
}
.modal-header:hover {
  cursor: move;
}
fieldset legend.bold {
  font-weight: bold;
}
fieldset legend {
  background-color: transparent;
  padding: 0 10px;
}
.dialog-bd-no-close {
  pointer-events: none;
}
.draggable-entity {
  position: relative;
  will-change: transform;
}
.draggable-entity.on-top {
  z-index: 999999996;
}
.draggable-entity.draggable-item,
.draggable-entity.enlarged,
.draggable-entity.background-move {
  position: absolute;
  grid-area: none !important;
  z-index: 999;
  will-change: transform;
}
.draggable-entity.draggable-item {
  cursor: move;
  z-index: 1000;
}
.draggable-entity.draggable-item * {
  cursor: inherit;
}
.draggable-entity.draggable-item.not-allowed {
  cursor: not-allowed;
}
.draggable-entity.animated {
  z-index: 999;
  transition: transform 0.2s ease-out;
}
/* used to manipulate right-to-left layout */
body.rtl {
  direction: rtl;
}
body.rtl span,
body.rtl div.modal-body,
body.rtl figcaption {
  unicode-bidi: plaintext;
}
body.rtl #tooltip img {
  float: right;
  margin: 0 0 5px 10px;
}
body.rtl #tooltip p {
  text-align: right;
}
body.rtl #currentToolbox .ribbon-dropdown > ul,
body.rtl #currentToolbox .ribbon-toggle > ul,
body.rtl #currentToolbox .ribbon-select > ul {
  right: 0;
}
body.rtl #currentToolbox .ribbon-dropdown > ul .option-button > figure > div,
body.rtl #currentToolbox .ribbon-toggle > ul .option-button > figure > div,
body.rtl #currentToolbox .ribbon-select > ul .option-button > figure > div {
  margin: 2px 0 2px 10px;
}
body.rtl .events-grid-wrapper .save-form-wrapper {
  right: inherit;
  left: 0;
}
@media all and (max-width: 1024px) {
  body.rtl.mobile .page-header .entity-icon .custom-barred {
    right: initial;
    left: 10px;
  }
}
body.rtl .accordion-item.opened .item-title .icon {
  transform: rotate3d(0, 0, 0, 0);
}
body.rtl .accordion-item.closed .item-title .icon {
  transform: rotate3d(0, 0, 1, 90deg);
}
body.rtl .accordion-item .item-title .icon {
  transform: rotate3d(0, 0, 1, 90deg);
  margin: 0 0 0 10px;
}
body.rtl .accordion-item .item-content .accordion-content .remove-connector {
  margin: 0 -30px;
  float: left;
}
body.rtl .entity-chooser input {
  margin-right: 0;
  margin-left: 5px;
  padding: 3px 5px 1px 20px;
}
body.rtl .entity-chooser .clear-search {
  right: initial;
  left: 6px;
}
body.rtl .entity-chooser.appliance-field-input .clear-search {
  left: 2px;
}
body.rtl .time-field .time-item {
  margin-right: 0;
  margin-left: 7px;
}
body.rtl .time-field .time-item::after {
  margin-left: 0;
  margin-right: 3px;
}
body.rtl .context-menu > li.has-menu > button::after {
  border-width: 4px 4px 4px 0;
  border-color: transparent #000000 transparent transparent;
  margin: 9px 0 0 20px;
  padding: 0;
}
body.rtl .context-menu > li.has-menu > ul {
  right: 100%;
}
body.rtl .context-menu > li.has-menu > ul.to-left {
  left: 100%;
  right: initial;
}
body.rtl .context-menu li.has-menu:hover > button::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
}
body.rtl .context-menu li.has-menu > button {
  position: relative;
}
body.rtl .context-menu li.has-menu > button:disabled::after {
  border-right-color: #a7a9ac;
  border-left-color: transparent;
}
body.rtl .context-menu li.has-menu > button:disabled:hover::after {
  border-right-color: #a7a9ac;
  border-left-color: transparent;
}
body.rtl .context-menu li.has-menu > button:hover::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
}
body.rtl .context-menu li.has-menu > button:focus::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
}
body.rtl .context-menu li button .context-menu-title {
  flex-grow: 1;
  text-align: right;
}
body.rtl .context-menu li button::after {
  padding-right: 0;
  padding-left: 16px;
}
body.rtl .context-menu li button.sg-menu {
  padding-right: 40px;
}
.rtl .number-input-wrapper .number-input input[type="text"] {
  padding-right: 5px;
  padding-left: 20px;
}
.rtl .number-input-wrapper .number-input .input-addon {
  right: initial;
  left: 3px;
}
body.rtl .camera-configurator .camera-configurator-container .clear-zones {
  left: -110px;
}
@media screen and (max-width: 680px) {
  body.rtl.mobile .tabbed-content.page-content .container fieldset.entity-list-chooser legend .edit-block {
    right: initial;
    left: 4px;
  }
}
body.rtl #manageCodesButton {
  margin-right: 0;
}
body.rtl.mobile #manageCodesButton {
  margin: 10px;
  font-size: 11pt;
}
body.rtl fieldset legend {
  right: 15px;
  left: initial;
}
body.rtl fieldset li span:nth-child(2) {
  margin-left: 0;
  margin-right: 4px;
}
body.rtl .input .input-addon {
  left: 1px;
  right: initial;
}
body.rtl .input input[type="text"],
body.rtl .input input[type="password"],
body.rtl .input input[type="search"],
body.rtl .input input[type="number"],
body.rtl .input input[type="email"],
body.rtl .input input[type="tel"],
body.rtl .input output {
  padding-left: 0;
  padding-right: 5px;
}
body.rtl input[type="date"],
body.rtl input[type="month"],
body.rtl input[type="week"] {
  background-position: 4px;
}
body.rtl input[type="date"]::-webkit-calendar-picker-indicator,
body.rtl input[type="month"]::-webkit-calendar-picker-indicator,
body.rtl input[type="week"]::-webkit-calendar-picker-indicator {
  margin: -1px -21px 2px 2px;
}
body.rtl input[type="number"]::-webkit-outer-spin-button,
body.rtl input[type="time"]::-webkit-outer-spin-button,
body.rtl input[type="number"]::-webkit-inner-spin-button,
body.rtl input[type="time"]::-webkit-inner-spin-button {
  margin: -2px 0 0 -5px;
}
body.rtl input:invalid:not(.ng-pristine) + .newErrorMessage {
  right: 2px;
}
body.rtl input:invalid:not(.ng-pristine) + .newErrorMessage[data-id="newDayDate"] {
  right: 10px;
}
body.rtl select {
  padding-left: 20px;
  padding-right: 5px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4IDQiIHdpZHRoPSI4IiBoZWlnaHQ9IjQiPjxwYXRoIGQ9Ik0wLDAgTDgsMCBMIDQsNCBaIiBmaWxsPSIjODI4MjgyIj48L3BhdGg+PC9zdmc+);
  background-position-x: 7px;
  background-position-y: center;
  background-repeat: no-repeat;
}
body.rtl fieldset legend input[type="checkbox"] {
  margin: 3px 4px 3px 10px;
}
body.rtl .newErrorMessage {
  text-align: right;
}
body.rtl .asterisk-wrapper {
  margin-right: 0;
  margin-left: 20px;
}
body.rtl .asterisk {
  right: 100%;
  left: initial;
}
body.rtl .save-form-wrapper {
  left: 0;
  right: initial;
}
body.rtl .save-form-wrapper .save-form button {
  margin: 0 5px 0 0;
}
body.rtl .input-group .radio-input input[type="radio"],
body.rtl .input-group .radio-input input[type="checkbox"] {
  margin: 0 0 0 5px;
}
body.rtl #useInternetTime {
  margin-right: 26px;
  margin-left: 5px;
}
body.rtl #saveToControllerCameras,
body.rtl #saveToNetworkCameras,
body.rtl #saveToController,
body.rtl #saveToNetwork {
  margin-right: 7px;
  margin-left: 5px;
}
body.rtl #emailReport,
body.rtl #printReport {
  margin-right: 5px;
  margin-left: 5px;
}
body.rtl .btn {
  margin-right: 5px;
  margin-left: initial;
}
@media all and (max-width: 1024px) {
  body.rtl.mobile .page-header .applianceType {
    margin-right: 0;
    margin-left: 5px;
  }
  body.rtl.mobile .page-header .buttons-wrapper button:first-child {
    margin-right: 0;
  }
}
body.rtl.mobile .save-form-wrapper #closeButton {
  margin-right: 5px;
  margin-left: 10px;
}
body.rtl.mobile .checkbox-with-label-wrapper--label {
  padding: 0 0 0 60px;
  text-align: right;
}
body.rtl.mobile .checkbox-with-label-wrapper--label::before,
body.rtl.mobile .checkbox-with-label-wrapper--label::after {
  left: 0;
  right: auto;
}
.rtl .modal-header h6 {
  padding: 10px 15px 0 35px;
}
.rtl .modal-header .close {
  background-position-x: 10px;
}
.rtl .modal#addToHomeScreenModal .info-message {
  margin-left: 0;
  margin-right: 10px;
}
.rtl .modal#addToHomeScreenModal .info-message .add-to-home {
  margin-left: 0;
  margin-right: 4px;
  text-indent: 9999em;
}
.rtl .modal.new-modal .modal-header .close {
  background-position-x: 15px;
}
.rtl.mobile .modal.mobile.complex-mobile .modal-header .header-content .left-control,
.rtl.mobile .modal.mobile.complex-mobile .modal-header .header-content .close-modal,
.rtl.mobile .modal.mobile.complex-mobile .modal-header .header-content .right-control,
.rtl.mobile .modal.mobile.complex-mobile .modal-header .header-content .back-button {
  margin: 0 -20px 0 0;
}
.rtl.mobile .modal.mobile.complex-mobile .modal-header .header-content h6 {
  margin-right: 0;
}
.rtl.mobile .modal.mobile.complex-mobile .modal-header .header-content h6:last-child {
  margin-left: 55px;
}
.rtl.mobile .modal.mobile .modal-header h6 {
  padding: 10px 20px 10px 0;
  text-align: right;
}
.rtl.mobile .modal.mobile .modal-header img {
  transform: rotate(180deg);
}
.rtl.mobile .modal.mobile .modal-body .ui-tree-item .ui-tree-item-left-extension-wrapper .ui-tree-checkbox input {
  margin: 8.5px 3px 6.5px 16px;
}
.rtl.mobile .modal.mobile .modal-body .ui-tree-item .ui-tree-item-left-extension-wrapper .ui-tree-item-content .ui-tree-item-icon {
  margin: 8px 0 8px 8px;
}
.rtl.mobile .modal.mobile .modal-footer button + button,
.rtl.mobile .modal.mobile .modal-footer .bth + button,
.rtl.mobile .modal.mobile .modal-footer button + .btn,
.rtl.mobile .modal.mobile .modal-footer .bth + .btn {
  margin: 0 10px 0 0;
}
.rtl.mobile .modal.static:not(#editGroupMembershipModal) .modal-footer .btn + .btn {
  border-right: 1px solid #a7a9ac;
  border-left: none;
}
.rtl #selectSoftButtonsModal manage-soft-buttons-button {
  right: initial;
  left: 20px;
}
.rtl .tabbed-content .modal-header .tabs {
  left: initial;
  right: 0;
}
.rtl .tabbed-content .tabs li {
  float: right;
  margin-right: -1px;
  margin-left: 0;
}
.rtl .ui-tree-wrapper .search-component .search-wrapper .search-icon {
  top: 3px;
  left: 1px;
  right: initial;
}
.rtl .ui-tree-wrapper .search-component .return-link {
  margin-right: 10px;
}
.rtl .ui-tree-wrapper .ui-tree input[type=checkbox]:before {
  margin: -2px -1px 0 0;
  background: url(../3f794da4a858b57dd624.svg) no-repeat 1px 0;
}
.rtl .ui-tree-wrapper .ui-tree input[type=checkbox].radio:before {
  margin: -1px -1px 0 0;
  background: #eaeaea;
}
.rtl .ui-tree-wrapper .ui-tree input[type=checkbox].radio.selected:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 xmlns:xlink=%27http://www.w3.org/1999/xlink%27 width=%2711%27 height=%2711%27%3E%3Ccircle cx=%275.5%27 cy=%275.5%27 r=%273%27 fill=%27black%27 /%3E%3C/svg%3E");
}
.rtl .ui-tree-wrapper .ui-tree .ui-tree-item .expand-button svg {
  transition: transform 0.2s linear;
  transform: rotate3d(0, 0, 1, 178deg);
}
.rtl .ui-tree-wrapper .ui-tree .ui-tree-item.expanded .expand-button svg {
  transform: rotate3d(0, 0, 1, 135deg);
}
.rtl .ui-tree-wrapper .ui-tree .ui-tree-item.expanded .expand-button svg polygon {
  fill: #000000;
}
.rtl.mobile .ui-tree-wrapper .search-component .search-wrapper .input-addon {
  left: 3px;
  right: auto;
}
.rtl.mobile .ui-tree-wrapper .ui-tree input[type=checkbox]:before {
  background: url(../93d372931ca535b718ea.svg) no-repeat 100% 0;
}
.rtl.mobile .ui-tree-wrapper .ui-tree input[type=checkbox].radio:before {
  margin: -1px 0 0 -1px;
}
.rtl.mobile .ui-tree-wrapper .ui-tree .ui-tree-item.expanded .expand-button svg {
  transform: rotate3d(0, 0, 1, -45deg);
}
.rtl.mobile .ui-tree-wrapper .ui-tree .ui-tree-item.expanded .expand-button .sub-menu-arrow {
  transform: rotate3d(0, 0, 1, -90deg);
}
.rtl .timepicker .hours input[type="text"],
.rtl .timepicker .minutes input[type="text"] {
  padding-left: 20px;
  padding-right: 5px;
}
.rtl .timepicker .hours .inc,
.rtl .timepicker .minutes .inc {
  top: 1px;
  left: 6px;
  right: initial;
}
.rtl .timepicker .hours .dec,
.rtl .timepicker .minutes .dec {
  bottom: -4px;
  left: 6px;
  right: initial;
}
.rtl .timepicker .minutes {
  right: -20px;
  left: initial;
}
.rtl .timepicker .minutes input[type="text"] {
  border: 1px solid #a7a9ac;
  border-right: none;
}
.rtl .timepicker .minutes::before {
  right: -3px;
  left: initial;
}
.rtl .modal-body .timepicker[type="hours"] .minutes .input-addon {
  left: 6px;
  right: initial;
}
.rtl input.date-input {
  padding-left: 25px !important;
  padding-right: 5px !important;
}
.rtl .datepicker table .controls th button.iconed.previous {
  background-position: 0 50%;
  float: right;
}
.rtl .datepicker table .controls th button.iconed.next {
  background-position: 100% 50%;
  float: left;
}
.rtl #newDayDate {
  padding-left: 30px;
  padding-right: 0;
}
body.rtl .grid th,
body.rtl .grid-reorder-wrapper > table th {
  border-right: none;
  border-left: 1px solid #a7a9ac;
  text-align: right;
}
body.rtl .grid th.sort .title,
body.rtl .grid-reorder-wrapper > table th.sort .title {
  background-position: left 50%;
}
body.rtl .grid th.sort.asc .title,
body.rtl .grid-reorder-wrapper > table th.sort.asc .title,
body.rtl .grid th.sort.desc .title,
body.rtl .grid-reorder-wrapper > table th.sort.desc .title {
  padding-left: var(--sort-padding);
  padding-right: 0;
}
body.rtl .grid th .splitter.left-direction,
body.rtl .grid-reorder-wrapper > table th .splitter.left-direction {
  display: none;
}
body.rtl .grid th .splitter.right-direction,
body.rtl .grid-reorder-wrapper > table th .splitter.right-direction {
  display: block;
}
body.rtl .grid .iconed .camera-event-icon,
body.rtl .grid-reorder-wrapper > table .iconed .camera-event-icon {
  margin-right: 10px;
  margin-left: auto;
}
body.rtl .events-grid-wrapper .grid-header {
  padding-right: 0;
}
body.rtl .table-button-wrapper .open-filter-btn {
  right: auto;
  left: 1px;
}
body.rtl.mobile .tabbed-content .back-button span {
  text-align: right;
  padding-right: 10px;
}
.rtl .filter-chips li span {
  padding: 8px 8px 9px 0;
}
.rtl .mobile-grid .mobile-grid__row-icon-container {
  padding-left: 4px;
  padding-right: 0;
  margin-right: -16px;
  margin-left: 0;
}
.rtl .mobile-grid .mobile-grid__cell-label {
  padding: 2px 0 2px 10px;
}
body.rtl #desktopSearch {
  padding-left: 20px;
  padding-right: 5px;
}
body.rtl #ribbonBar #filters {
  padding-left: 3px;
  padding-right: 0;
}
body.rtl #ribbonBar #filters .group .expanded-list {
  padding: 4px 8px 4px 8px;
}
body.rtl #ribbonBar #filters .group .add-button .expand-filter img {
  margin-right: -10px;
  margin-left: auto;
}
body.rtl #ribbonBar #filters .group .filter-list {
  right: 0;
}
body.rtl #ribbonBar #eventsFilter label input[type="checkbox"] {
  margin-right: auto;
  margin-left: 5px;
}
body.rtl #ribbonBar #eventsFilter label:first-of-type {
  margin-left: 8px;
  margin-right: 0;
}
body.rtl #ribbonBar #eventsFilter > button {
  padding: 5px 0 3px 3px;
}
body.rtl #ribbonBar #eventsFilter .filter-search img {
  right: initial;
  left: 4px;
}
body.rtl #ribbonBar #currentToolbox .ribbon-group,
body.rtl .time-line-buttons .ribbon-group {
  border-right: none;
  border-left: 1px solid #ededed;
  padding-left: 3px;
  padding-right: initial;
  margin-left: 3px;
  margin-right: initial;
}
body.rtl #ribbonBar #currentToolbox .ribbon-group:last-of-type,
body.rtl .time-line-buttons .ribbon-group:last-of-type {
  border: none;
}
body.rtl #ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-button figure > div,
body.rtl .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div {
  margin-right: initial;
  margin-left: 7px;
}
body.rtl #ribbonBar #currentToolbox #timeCursorPosition .controls label,
body.rtl .time-line-buttons #timeCursorPosition .controls label,
body.rtl #ribbonBar #currentToolbox #timeSlotOptions .controls label,
body.rtl .time-line-buttons #timeSlotOptions .controls label {
  margin-right: initial;
  margin-left: 10px;
}
body.rtl #ribbonBar #currentToolbox.with-scroll-buttons .scroll-button.right,
body.rtl .time-line-buttons.with-scroll-buttons .scroll-button.right {
  left: 0;
  right: auto;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0IDgiIHdpZHRoPSI0IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik00LDAgTDAsNCBMIDQsOCBaIiBmaWxsPSIjODI4MjgyIi8+PC9zdmc+);
}
body.rtl #ribbonBar #currentToolbox.with-scroll-buttons .scroll-button.right::after,
body.rtl .time-line-buttons.with-scroll-buttons .scroll-button.right::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 60px;
  height: 82px;
  margin: -1px 0 -1px 1px;
  background: linear-gradient(to right, #ffffff 20%, transparent);
}
body.rtl #ribbonBar #currentToolbox.with-scroll-buttons .scroll-button.right::before,
body.rtl .time-line-buttons.with-scroll-buttons .scroll-button.right::before {
  display: none;
}
body.rtl #ribbonBar #currentToolbox.with-scroll-buttons .scroll-button.left,
body.rtl .time-line-buttons.with-scroll-buttons .scroll-button.left {
  right: 0;
  left: auto;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0IDgiIHdpZHRoPSI0IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0wLDAgTDQsNCBMIDAsOCBaIiBmaWxsPSIjODI4MjgyIi8+PC9zdmc+);
}
body.rtl #ribbonBar #currentToolbox.with-scroll-buttons .scroll-button.left::before,
body.rtl .time-line-buttons.with-scroll-buttons .scroll-button.left::before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 60px;
  height: 82px;
  margin: -1px 1px -1px -1px;
  background: linear-gradient(to left, #ffffff 20%, transparent);
}
body.rtl #ribbonBar #currentToolbox.with-scroll-buttons .scroll-button.left::after,
body.rtl .time-line-buttons.with-scroll-buttons .scroll-button.left::after {
  display: none;
}
body.rtl.mobile #ribbonBar #currentToolbox .ribbon-group,
body.rtl.mobile .time-line-buttons .ribbon-group {
  padding-left: 0;
  margin-left: 0;
}
body.rtl.mobile #ribbonBar #currentToolbox .ribbon-group.vertical .ribbon-button figure > div,
body.rtl.mobile .time-line-buttons .ribbon-group.vertical .ribbon-button figure > div {
  margin: 0 0 0 10px;
}
body.rtl.mobile #ribbonBar #currentToolbox .ribbon-group .ribbon-select > .ribbon-button::after,
body.rtl.mobile .time-line-buttons .ribbon-group .ribbon-select > .ribbon-button::after {
  border-color: transparent #3c3c3b transparent transparent;
  border-width: 4px 4px 4px 0;
}
.rtl .permissions-table thead tr th {
  border-left: 1px solid #a7a9ac;
  border-right: 0;
}
.rtl .permissions-table thead tr th:last-child {
  border-right: 1px solid #a7a9ac;
  border-left: 0;
}
.rtl .permissions-table tbody tr th {
  border-left: 1px solid #a7a9ac;
  border-right: 0;
}
.rtl .permissions-table tbody tr th:last-child {
  border-right: 1px solid #a7a9ac;
  border-left: 0;
}
.table-style tr th {
  border-left: 1px solid #a7a9ac;
  border-right: 0;
}
.table-style tr th:last-child {
  border-right: 1px solid #a7a9ac;
  border-left: 0;
}
.rtl .add-object-container .working-area {
  padding-left: 15px;
  padding-right: 0;
  border-left: 1px solid #a7a9ac;
  border-right: 0;
}
.rtl .add-object-container .already-added-area {
  float: right;
  padding-left: 0;
  padding-right: 15px;
}
.rtl .add-object-container .already-added-area ul li.display-block img {
  margin-right: 0;
  margin-left: 5px;
  float: right;
}
.rtl .add-object-container .already-added-area ul li .entity-icon {
  float: right;
  margin-left: 7px;
  margin-right: 0;
}
.rtl #siteGraphics .save-form-wrapper {
  left: 0;
  right: inherit;
}
.rtl #siteGraphics .save-report-form button {
  margin: 3px 5px 0 0;
}
.rtl #editPermissionsModal .tree-wrapper .tree-column-titles {
  right: initial;
  left: 22px;
}
.rtl .permissions .checkboxOffset {
  padding-right: 0;
  padding-left: 60px;
}
.rtl .permissions .checkboxOffset-double {
  padding-right: 0;
  padding-left: 120px;
}
.rtl #permissionsTabs .permissions fieldset {
  padding-right: 18px;
  padding-left: initial;
}
.rtl #softwareElements .software-element,
.rtl #softwareElements .software-elements-header {
  padding: 0 0 0 43px;
}
.rtl #buildingPermissionsSection .bp-members fieldset.bp-time-profiles {
  margin-right: 30px;
  margin-left: 0;
}
.rtl #building-permission-details .permissions-table.building-permissions .remove-access-level {
  right: initial;
  left: 15px;
}
.rtl #building-permission-details .permissions-table.building-permissions .level-cell.appliance-block,
.rtl #building-permission-details .permissions-table.building-permissions .combined-td {
  border-left: 1px solid #a7a9ac;
  border-right: none;
}
.rtl #building-permission-details .permissions-table.building-permissions li img {
  margin-right: initial;
  margin-left: 5px;
}
.rtl #building-permission-details #addAccessLevelButton {
  float: left;
  right: initial;
  left: 15px;
  margin-right: initial;
}
.rtl .custom-rule-body .container.menu-container .menu {
  border-left: 1px solid #a7a9ac;
  border-right: 0;
  float: right;
}
.rtl .custom-rule-body .container.menu-container .menu li {
  margin-left: -1px;
  margin-right: 0;
}
.rtl .custom-rule-body .container.menu-container .menu li.active {
  border-color: #a7a9ac;
  border-left-color: #ffffff;
}
.rtl .custom-rule-body .container.menu-container .menu-content {
  margin-right: 129px;
  margin-left: 0;
}
.rtl .anti-passback-configuration {
  margin-right: 10px;
  margin-left: 0;
}
.rtl .anti-passback-configuration fieldset {
  margin-right: 20px;
  margin-left: 0;
}
.rtl .anti-passback-configuration fieldset legend input {
  margin-left: 10px;
  margin-right: 0;
}
.rtl .anti-passback-configuration .radio-group .input-group label input {
  margin-left: 10px;
  margin-right: 0;
}
.rtl .anti-passback-configuration .input-group {
  margin-right: 55px;
  margin-left: 0;
}
body.rtl #videoReportContent .video-frame.empty .add-camera-image .title {
  text-align: right;
}
body.rtl #videoReportContent .save-form-wrapper {
  left: 0;
  right: inherit;
}
body.rtl #videoReportContent .save-form-wrapper .save-report-form button {
  margin: 3px 5px 0 0;
}
body.rtl .video-controls {
  left: 0 !important;
  right: auto;
}
body.rtl #videoEventModal .grid tr.auto-play:after {
  background-position-x: -100%;
}
body.rtl #export-video-modal .export-container fieldset .primary-field {
  margin: 0 0 0 10px;
}
body.rtl #dashboardView .dashboard-widget-item .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section,
body.rtl #enlargedWidgetWrapper .dashboard-widget-item .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section,
body.rtl #dashboardView .dashboard-widget-item .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section,
body.rtl #enlargedWidgetWrapper .dashboard-widget-item .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section {
  border-left: var(--settings-border);
  border-right: none;
}
body.rtl #dashboardView .dashboard-widget-item .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul li [svg-image],
body.rtl #enlargedWidgetWrapper .dashboard-widget-item .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper edit-section ul li [svg-image],
body.rtl #dashboardView .dashboard-widget-item .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul li [svg-image],
body.rtl #enlargedWidgetWrapper .dashboard-widget-item .dashboard-widget-wrapper .widget-settings dashboard-widget-settings .widget-settings-wrapper .edit-section ul li [svg-image] {
  margin-right: 0;
  margin-left: 5px;
}
body.rtl #dashboardView .dashboard-widget-item .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .save-cancel-controls,
body.rtl #enlargedWidgetWrapper .dashboard-widget-item .dashboard-widget-wrapper dashboard-widget-controls .dashboard-widget-controls .save-cancel-controls {
  right: initial;
  left: var(--widgetPadding);
}
body.rtl #dashboardView .dashboard-widget-item .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info,
body.rtl #enlargedWidgetWrapper .dashboard-widget-item .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info {
  text-align: right;
}
body.rtl #dashboardView .dashboard-widget-item .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description,
body.rtl #enlargedWidgetWrapper .dashboard-widget-item .dashboard-widget-wrapper .alarms-widget-view .small-view .alarms-wrapper .alarms-list .alarms-info span.alarm-description {
  border-left-width: 0;
  border-right-width: 2px;
}
body.rtl #dashboardView .dashboard-widget-item .dashboard-widget-wrapper site-graphic-widget-view ribbon-button[data-direction="left"],
body.rtl #enlargedWidgetWrapper .dashboard-widget-item .dashboard-widget-wrapper site-graphic-widget-view ribbon-button[data-direction="left"] {
  right: initial;
  left: 0;
}
body.rtl #dashboardView .dashboard-widget-item .dashboard-widget-wrapper site-graphic-widget-view ribbon-button[data-direction="right"],
body.rtl #enlargedWidgetWrapper .dashboard-widget-item .dashboard-widget-wrapper site-graphic-widget-view ribbon-button[data-direction="right"] {
  right: initial;
  left: calc(var(--button-size) + var(--margin));
}
body.rtl #dashboardView .dashboard-widget-item .dashboard-widget-wrapper .control-btn,
body.rtl #enlargedWidgetWrapper .dashboard-widget-item .dashboard-widget-wrapper .control-btn {
  margin: 0 0 0 var(--btn-margin);
}
body.rtl.mobile .vm-blocker {
  left: 0;
  right: auto;
}
body.rtl.mobile #userOptionsMobile .user-options-mobile .current-user img.user-image,
body.rtl.mobile #userOptionsMobile .user-options-mobile .current-user .entity-icon {
  margin: 0 20px 0 0;
}
body.rtl.mobile #userOptionsMobile .user-options-mobile .current-user .user-name {
  padding: 16px 10px 4px 0;
  margin-right: 0;
}
body.rtl.mobile #userOptionsMobile #search-container .input .input-addon {
  right: 4px;
  -webkit-user-select: none;
}
body.rtl.mobile #userOptionsMobile #search-container .input #mobileSearch {
  padding: 4px 30px 4px 4px;
}
body.rtl.mobile .article-wrapper .tabbed-content .tabs li span {
  padding-right: 10px;
  padding-left: 0;
}
body.rtl.mobile .article-wrapper .tabbed-content .tabs li img {
  transform: rotate(180deg);
}
body.rtl.mobile .article-wrapper .tabbed-content .tabs li:first-child.active {
  margin-left: initial;
  margin-right: -1px;
}
@media only screen and (max-width: 530px) {
  body.rtl.mobile .page-header .controls {
    padding: 10px;
    padding-left: 10px / 2;
  }
  body.rtl.mobile .page-header .controls .buttons-wrapper #closeButton {
    margin-right: 5px;
  }
}
@media only screen and (max-width: 680px) {
  body.rtl.mobile .article-wrapper .tabbed-content.page-content .tab-content-block.visible {
    transform: none;
  }
  body.rtl.mobile .article-wrapper .tabbed-content.page-content .tab-content-block.invisible {
    transform: translateX(-100%);
  }
  body.rtl.mobile .article-wrapper .tabbed-content .back-button img {
    transform: rotate(180deg);
  }
}
@media only screen and (min-width: 681px) and (max-width: 1024px) {
  body.rtl.mobile .article-wrapper .tabbed-content.page-content .tab-content-block {
    left: initial;
    right: 200px;
  }
}
html {
  -webkit-touch-callout: none;
  user-select: none;
}
body {
  transform: none;
  backface-visibility: hidden;
}
input[type="checkbox"] {
  min-height: 13px;
  min-width: 13px;
}
#loader {
  background-color: #ffffff;
  bottom: 0;
  left: 0;
  position: fixed;
  text-align: center;
  top: 0;
  right: 0;
  z-index: 5;
  opacity: 1;
  transition: opacity 0.5s linear;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#loader.fade-out {
  opacity: 0;
}
#loader.hidden {
  display: none;
}
#loader .logo {
  height: 75px;
  width: 266px;
}
#loader .spinner {
  margin-top: 10px;
}
.okTick {
  display: inline-block;
  background-image: url(../a8064f3414acd21ebf74.svg);
  background-repeat: no-repeat;
  outline: 1px solid transparent;
  width: 16px;
  height: 10px;
  margin-left: 3px;
}
.loading {
  --width: 220px;
  background: url(../2cd21886d4ceef201b08.svg) no-repeat 0 0;
  height: 40px;
  left: calc(50vw - 110px);
  position: absolute;
  top: 20px;
  width: var(--width);
  z-index: 4;
}
.loading.small-inline {
  --scale: 0.4;
  --padding: 5px;
  transform: scale(var(--scale));
  top: 0;
  left: calc(var(--width) * (1 - var(--scale)) * -1 / 2 + var(--padding));
  margin-left: 0;
  height: 17px;
}
.loading.black {
  background: #3c3c3b none;
  -webkit-mask: url(../2cd21886d4ceef201b08.svg) no-repeat 0 0;
  mask: url(../2cd21886d4ceef201b08.svg) no-repeat 0 0;
}
.loading-wrapper {
  position: relative;
  width: 100%;
}
#desktopReaderMessage {
  background-color: #fff2e6;
  border: 1px solid #ff7601;
  border-top: 0;
  color: #ffb06c;
  display: none;
  font-size: 16px;
  left: 50%;
  margin-left: -100px;
  padding: 10px 20px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 200px;
}
/* do not remove, this is for jira collector */
.atlwdg-trigger {
  z-index: 10;
}
.disabled-animations * {
  transition: none !important;
  animation: none !important;
}
.no-pointer-events {
  pointer-events: none;
}
.no-pointer-events video {
  background-color: #1a1a1a;
}
.auto-pointer-events {
  pointer-events: auto;
}
* {
  --scrollWidth: 6px;
  --scrollHeight: 5px;
}
*::-webkit-scrollbar {
  width: var(--scrollWidth) !important;
  height: var(--scrollWidth) !important;
}
*::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: var(--scrollHeight) !important;
}
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-track-piece,
*::-webkit-scrollbar-corner,
*::-webkit-resizer {
  display: none !important;
}
*:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3) !important;
}
.paxlockSpinner {
  animation: rotate 2s linear infinite;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 90%;
  margin: -25px 0 0 -40px;
  width: 25px;
  height: 50px;
}
.paxlockSpinner .infoPath {
  stroke: hsl(107, 49%, 47%);
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
.paxlockSpinnerCirclePositive {
  stroke-dashoffset: 45px;
  stroke-dasharray: 87px;
  stroke-width: 3px;
  stroke: #56aa1c;
}
.paxlockSpinnerCircleNegative {
  stroke: #a1a1a1;
}
.paxlockProgressSpinnerCircleNegative {
  stroke: #a1a1a1;
}
.paxlockProgressSpinnerCirclePositive {
  stroke: #56aa1c;
}
svg.progress {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  transform: rotate(-90deg);
  stroke-dasharray: 50;
  /* (2PI * R) */
}
.circle-p-1 {
  stroke-dashoffset: calc(50 - (50 * (1/100)));
}
.circle-p-2 {
  stroke-dashoffset: calc(50 - (50 * (2/100)));
}
.circle-p-3 {
  stroke-dashoffset: calc(50 - (50 * (3/100)));
}
.circle-p-4 {
  stroke-dashoffset: calc(50 - (50 * (4/100)));
}
.circle-p-5 {
  stroke-dashoffset: calc(50 - (50 * (5/100)));
}
.circle-p-6 {
  stroke-dashoffset: calc(50 - (50 * (6/100)));
}
.circle-p-7 {
  stroke-dashoffset: calc(50 - (50 * (7/100)));
}
.circle-p-8 {
  stroke-dashoffset: calc(50 - (50 * (8/100)));
}
.circle-p-9 {
  stroke-dashoffset: calc(50 - (50 * (9/100)));
}
.circle-p-10 {
  stroke-dashoffset: calc(50 - (50 * (10/100)));
}
.circle-p-11 {
  stroke-dashoffset: calc(50 - (50 * (11/100)));
}
.circle-p-12 {
  stroke-dashoffset: calc(50 - (50 * (12/100)));
}
.circle-p-13 {
  stroke-dashoffset: calc(50 - (50 * (13/100)));
}
.circle-p-14 {
  stroke-dashoffset: calc(50 - (50 * (14/100)));
}
.circle-p-15 {
  stroke-dashoffset: calc(50 - (50 * (15/100)));
}
.circle-p-16 {
  stroke-dashoffset: calc(50 - (50 * (16/100)));
}
.circle-p-17 {
  stroke-dashoffset: calc(50 - (50 * (17/100)));
}
.circle-p-18 {
  stroke-dashoffset: calc(50 - (50 * (18/100)));
}
.circle-p-19 {
  stroke-dashoffset: calc(50 - (50 * (19/100)));
}
.circle-p-20 {
  stroke-dashoffset: calc(50 - (50 * (20/100)));
}
.circle-p-21 {
  stroke-dashoffset: calc(50 - (50 * (21/100)));
}
.circle-p-22 {
  stroke-dashoffset: calc(50 - (50 * (22/100)));
}
.circle-p-23 {
  stroke-dashoffset: calc(50 - (50 * (23/100)));
}
.circle-p-24 {
  stroke-dashoffset: calc(50 - (50 * (24/100)));
}
.circle-p-25 {
  stroke-dashoffset: calc(50 - (50 * (25/100)));
}
.circle-p-26 {
  stroke-dashoffset: calc(50 - (50 * (26/100)));
}
.circle-p-27 {
  stroke-dashoffset: calc(50 - (50 * (27/100)));
}
.circle-p-28 {
  stroke-dashoffset: calc(50 - (50 * (28/100)));
}
.circle-p-29 {
  stroke-dashoffset: calc(50 - (50 * (29/100)));
}
.circle-p-30 {
  stroke-dashoffset: calc(50 - (50 * (30/100)));
}
.circle-p-31 {
  stroke-dashoffset: calc(50 - (50 * (31/100)));
}
.circle-p-32 {
  stroke-dashoffset: calc(50 - (50 * (32/100)));
}
.circle-p-33 {
  stroke-dashoffset: calc(50 - (50 * (33/100)));
}
.circle-p-34 {
  stroke-dashoffset: calc(50 - (50 * (34/100)));
}
.circle-p-35 {
  stroke-dashoffset: calc(50 - (50 * (35/100)));
}
.circle-p-36 {
  stroke-dashoffset: calc(50 - (50 * (36/100)));
}
.circle-p-37 {
  stroke-dashoffset: calc(50 - (50 * (37/100)));
}
.circle-p-38 {
  stroke-dashoffset: calc(50 - (50 * (38/100)));
}
.circle-p-39 {
  stroke-dashoffset: calc(50 - (50 * (39/100)));
}
.circle-p-40 {
  stroke-dashoffset: calc(50 - (50 * (40/100)));
}
.circle-p-41 {
  stroke-dashoffset: calc(50 - (50 * (41/100)));
}
.circle-p-42 {
  stroke-dashoffset: calc(50 - (50 * (42/100)));
}
.circle-p-43 {
  stroke-dashoffset: calc(50 - (50 * (43/100)));
}
.circle-p-44 {
  stroke-dashoffset: calc(50 - (50 * (44/100)));
}
.circle-p-45 {
  stroke-dashoffset: calc(50 - (50 * (45/100)));
}
.circle-p-46 {
  stroke-dashoffset: calc(50 - (50 * (46/100)));
}
.circle-p-47 {
  stroke-dashoffset: calc(50 - (50 * (47/100)));
}
.circle-p-48 {
  stroke-dashoffset: calc(50 - (50 * (48/100)));
}
.circle-p-49 {
  stroke-dashoffset: calc(50 - (50 * (49/100)));
}
.circle-p-50 {
  stroke-dashoffset: calc(50 - (50 * (50/100)));
}
.circle-p-51 {
  stroke-dashoffset: calc(50 - (50 * (51/100)));
}
.circle-p-52 {
  stroke-dashoffset: calc(50 - (50 * (52/100)));
}
.circle-p-53 {
  stroke-dashoffset: calc(50 - (50 * (53/100)));
}
.circle-p-54 {
  stroke-dashoffset: calc(50 - (50 * (54/100)));
}
.circle-p-55 {
  stroke-dashoffset: calc(50 - (50 * (55/100)));
}
.circle-p-56 {
  stroke-dashoffset: calc(50 - (50 * (56/100)));
}
.circle-p-57 {
  stroke-dashoffset: calc(50 - (50 * (57/100)));
}
.circle-p-58 {
  stroke-dashoffset: calc(50 - (50 * (58/100)));
}
.circle-p-59 {
  stroke-dashoffset: calc(50 - (50 * (59/100)));
}
.circle-p-60 {
  stroke-dashoffset: calc(50 - (50 * (60/100)));
}
.circle-p-61 {
  stroke-dashoffset: calc(50 - (50 * (61/100)));
}
.circle-p-62 {
  stroke-dashoffset: calc(50 - (50 * (62/100)));
}
.circle-p-63 {
  stroke-dashoffset: calc(50 - (50 * (63/100)));
}
.circle-p-64 {
  stroke-dashoffset: calc(50 - (50 * (64/100)));
}
.circle-p-65 {
  stroke-dashoffset: calc(50 - (50 * (65/100)));
}
.circle-p-66 {
  stroke-dashoffset: calc(50 - (50 * (66/100)));
}
.circle-p-67 {
  stroke-dashoffset: calc(50 - (50 * (67/100)));
}
.circle-p-68 {
  stroke-dashoffset: calc(50 - (50 * (68/100)));
}
.circle-p-69 {
  stroke-dashoffset: calc(50 - (50 * (69/100)));
}
.circle-p-70 {
  stroke-dashoffset: calc(50 - (50 * (70/100)));
}
.circle-p-71 {
  stroke-dashoffset: calc(50 - (50 * (71/100)));
}
.circle-p-72 {
  stroke-dashoffset: calc(50 - (50 * (72/100)));
}
.circle-p-73 {
  stroke-dashoffset: calc(50 - (50 * (73/100)));
}
.circle-p-74 {
  stroke-dashoffset: calc(50 - (50 * (74/100)));
}
.circle-p-75 {
  stroke-dashoffset: calc(50 - (50 * (75/100)));
}
.circle-p-76 {
  stroke-dashoffset: calc(50 - (50 * (76/100)));
}
.circle-p-77 {
  stroke-dashoffset: calc(50 - (50 * (77/100)));
}
.circle-p-78 {
  stroke-dashoffset: calc(50 - (50 * (78/100)));
}
.circle-p-79 {
  stroke-dashoffset: calc(50 - (50 * (79/100)));
}
.circle-p-80 {
  stroke-dashoffset: calc(50 - (50 * (80/100)));
}
.circle-p-81 {
  stroke-dashoffset: calc(50 - (50 * (81/100)));
}
.circle-p-82 {
  stroke-dashoffset: calc(50 - (50 * (82/100)));
}
.circle-p-83 {
  stroke-dashoffset: calc(50 - (50 * (83/100)));
}
.circle-p-84 {
  stroke-dashoffset: calc(50 - (50 * (84/100)));
}
.circle-p-85 {
  stroke-dashoffset: calc(50 - (50 * (85/100)));
}
.circle-p-86 {
  stroke-dashoffset: calc(50 - (50 * (86/100)));
}
.circle-p-87 {
  stroke-dashoffset: calc(50 - (50 * (87/100)));
}
.circle-p-88 {
  stroke-dashoffset: calc(50 - (50 * (88/100)));
}
.circle-p-89 {
  stroke-dashoffset: calc(50 - (50 * (89/100)));
}
.circle-p-90 {
  stroke-dashoffset: calc(50 - (50 * (90/100)));
}
.circle-p-91 {
  stroke-dashoffset: calc(50 - (50 * (91/100)));
}
.circle-p-92 {
  stroke-dashoffset: calc(50 - (50 * (92/100)));
}
.circle-p-93 {
  stroke-dashoffset: calc(50 - (50 * (93/100)));
}
.circle-p-94 {
  stroke-dashoffset: calc(50 - (50 * (94/100)));
}
.circle-p-95 {
  stroke-dashoffset: calc(50 - (50 * (95/100)));
}
.circle-p-96 {
  stroke-dashoffset: calc(50 - (50 * (96/100)));
}
.circle-p-97 {
  stroke-dashoffset: calc(50 - (50 * (97/100)));
}
.circle-p-98 {
  stroke-dashoffset: calc(50 - (50 * (98/100)));
}
.circle-p-99 {
  stroke-dashoffset: calc(50 - (50 * (99/100)));
}
.circle-p-100 {
  stroke-dashoffset: calc(50 - (50 * (100/100)));
}
.paxlock-progress-guide-cell {
  position: absolute;
  margin-top: 3px;
  height: 24px;
  width: 24px;
}
/* @exclude */
/**
 * IMPORTANT!
 * Put debug styles in this file.
 * They will be cut off during build process. 
 */
/* @endexclude */