.screen-saver-manager {
 display: flex;
 flex-wrap: wrap;
 padding: 10px 0px 0px 10px;
}

 .screen-saver-manager > div {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid black;
  margin: 0px 10px 10px 0px;
  justify-content: space-between;
  background-color: #373636;
  position: relative;
 }

 .screen-saver-manager > div > div {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 0px 5px 0px 5px;
  font-size: 1.2rem;
  background-color: white;
  color: black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
  cursor:pointer;
 }

 .screen-saver {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 9990;
  overflow: hidden;
  background-color: #373636;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
 }

 .screen-saver > div {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  overflow: hidden;
  -webkit-transition: background-image 0.5s ease-in-out;
  transition: background-image 0.5s ease-in-out;
  width: 100vw;
  height: 100vh;
 }

.service-mode-cover {
 position: fixed;
 top: 0;
 right: 0;
 width: 100%;
 height: 100vh;
 z-index: 9990;
 overflow: hidden;
 background-color: #373636;
 color: white;
 display:flex;
 align-items:center;
 justify-content:center;
}

 .service-mode-cover > div{
  display:grid;
  grid-template-columns:1fr;  
  align-items: center;
  justify-items: center;
 }

 .service-mode-cover .logo {
  width: 15rem;
  height: 15rem;
  border-radius: 50% 50%;
  background: url("../data/savee-logo-icon-loader.png");
  background-size: cover;    
 }

 .service-mode-cover .label {
  padding-top:1rem;
  font-size:2rem;
  font-weight:bold;  
 }

 .service-mode-cover .sublabel {
  font-size: 1.3rem;  
 }

  .service-mode-cover .logo > i{
  font-size: 3.75rem;
  color:black;
 }

  .logo-text {
 height: 2rem;
 float: left;
 transition: height 150ms ease-in;
}

.logo-icon {
 font-size: 2rem;
 font-weight: bold;
 vertical-align: middle;
 line-height: 2rem;
 padding-left: 22px;
 transition: padding-left 150ms ease-in;
}

nav[data-broken=true] .logo-icon {
 padding-left: 15px;
 transition: padding-left 150ms ease-in;
}

nav[data-broken=true] .logo-text {
 height: 0px;
 transition: height 150ms ease-in;
}

body {
 color: #e8e8e8;
 -ms-touch-action: none;
 touch-action: none;
}

#canvasWrapper {
 width: calc(100%-20px);
 margin: 10px 10px 10px 10px;
 overflow: hidden !important;
 border-width: 1px;
 border-style: solid;
 border-color: #373636;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 touch-action: none;
}

.users-grid-container {
 display: grid;
 grid-template-columns: max-content max-content max-content auto max-content;
 grid-gap: 1px 1px;
 padding: 1px;
 background-color: gray;
 margin: 10px;
 overflow-y: auto;
}

.users-grid-header {
 font-weight: bold;
}

.users-grid-container > * {
 background-color: #4A4A49;
 padding: 0.5rem;
}

.users-grid-container i {
 font-size:1.5rem;
 padding-left: 5px;
 padding-right: 5px;
 cursor:pointer;
}

.calendar-hour {
 display: flex;
 flex-wrap: wrap;
 left: 0px;
 right: 0px;
 color: black;
 background-color: #faefac;
 border: solid 1px lightgray;
 padding: 10px;
 user-select: none;
}

 .calendar-hour:hover {
  background-color: #f8dc80;
 }

.calendar-hour-time {
 align-self: flex-start;
 padding-right: 10px;
}

.calendar-event {
 cursor: pointer;
 padding: 5px;
 border-radius: 2px;
 margin-right: 5px;
 margin-bottom: 5px;
 -webkit-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.47);
 -moz-box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.47);
 box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.47);
}

 .calendar-event:hover {
  -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.47);
  -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.47);
  box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.47);
 }

.calendar-grid-wrapper {
 padding: 10px;
 width: auto;
 overflow: auto;
}

.calendar-container {
 min-width: 550px;
}

.calendar-month {
 position: relative;
 display: flex;
 justify-content: center;
 width: inherit;
 font-size: 1.75rem;
 text-align: center;
 user-select: none;
}

.calendar-grid-container {
 display: grid;
 grid-template-columns: repeat(8, 1fr);
 grid-gap: 1px 1px;
 padding: 1px;
 background-color: gray;
}

.calendar-grid-header {
 font-weight: bold;
}

.calendar-grid-container > *::before {
 content: "";
 display: inline-block;
 width: 1px;
 height: 0;
 padding-bottom: 75%;
}

.calendar-grid-container > * {
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
}

 .calendar-grid-container > * > * {
  align-self: center;
  flex: 1;
  text-align: center;
 }

.calendar-grid-item-first {
 color: darkgray;
 text-align: center;
 align-self: center;
 font-size: 1.5rem;
 background-color: white;
}

.calendar-grid-item-today {
 color: black;
 text-align: center;
 align-self: center;
 font-size: 1.5rem;
 background-color: cornflowerblue;
 cursor: pointer;
}

.calendar-grid-item-selected {
 color: whitesmoke;
 text-align: center;
 align-self: center;
 font-size: 1.5rem;
 background-color: midnightblue;
 cursor: pointer;
}

.calendar-grid-item-overflow {
 color: darkgray;
 text-align: center;
 align-self: center;
 font-size: 1.5rem;
 background-color: lightgray;
 cursor: pointer;
}

.calendar-grid-item {
 color: black;
 text-align: center;
 align-self: center;
 font-size: 1.5rem;
 background-color: lightgray;
 cursor: pointer;
}

 .calendar-grid-item:hover, .calendar-grid-item-overflow:hover, .calendar-grid-item-selected:hover, .calendar-grid-item-today:hover {
  -webkit-box-shadow: 0px 0px 8px 2px rgba(105,105,105,1);
  -moz-box-shadow: 0px 0px 8px 2px rgba(105,105,105,1);
  box-shadow: 0px 0px 8px 2px rgba(105,105,105,1);
  z-index: 100;
 }

.grid-container-actions {
 display: grid;
 grid-template-columns: auto auto auto 1fr auto;
 grid-gap: 1px 1px;
 padding: 1px;
 background-color: lightgray;
}

.grid-actions-header {
 display: contents;
 font-weight: bold;
}

.grid-actions-iconitem > i {
 padding: 0.25rem;
 cursor: pointer;
 font-size: 1.5rem;
 color: darkgray;
}

 .grid-actions-iconitem > i:hover {
  color: black;
 }

.grid-actions-footer {
 display: contents;
 font-weight: bold;
}

 .grid-actions-footer > .grid-actions-item {
  grid-column: span 5;
  cursor: pointer;
  text-align: center;
 }

  .grid-actions-footer > .grid-actions-item:hover {
   background-color: #ededed;
  }

.grid-actions-item {
 padding: 0.5rem;
 background-color: white;
}

.grid-actions-iconitem {
 padding: 0.25rem;
 background-color: white;
}


.button-panel-grid {
 display: grid;
 grid-gap: 10px 10px;
 justify-items: stretch;
 align-items: stretch;
 margin: 10px;
}

 .button-panel-grid > * {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  cursor: pointer;
 }

  .button-panel-grid > * > i {
   cursor: pointer;
  }

  .button-panel-grid > * > * {
   align-self: center;
   flex: 1;
   text-align: center;
  }

  .button-panel-grid > *::before {
   content: "";
   display: inline-block;
   width: 1px;
   height: 0;
   padding-bottom: 75%;
  }

.floorplan-right-panel-toggle {
 position: fixed;
 z-index: 1;
 top: 0;
 height: 60px;
 width: 60px;
 font-size: 1.25rem;
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: #373636;
 color: #e8e8e8;
 overflow-x: hidden;
 transition: 0.5s;
 padding: 10px;
 cursor: pointer;
}

.floorplan-right-panel {
 position: fixed;
 z-index: 1;
 top: 0;
 right: 0;
 width: 250px;
 background-color: #373636;
 color: #e8e8e8;
 overflow-x: hidden;
 transition: 0.5s;
}

.floorplan-right-panel-btn {
 width: calc(100%-20px);
 height: 40px;
 margin: 10px;
 display: flex;
 align-items: center;
 justify-content: center;
 border: solid;
 border-color: #e8e8e8;
 border-width: 1px;
 cursor: pointer;
}

.right-panel-sort {
 width: calc(100%-50px);
 height: 20px;
 margin: 15px;
 display: flex;
 align-items: center;
 justify-content: left;
}


 .right-panel-sort > div > input {
  cursor: pointer;
 }

 .right-panel-sort > div > label {
  cursor: pointer;
  user-select: none;
 }

.right-panel-check {
 width: calc(100%-30px);
 height: 20px;
 margin: 15px;
 display: flex;
 align-items: center;
 justify-content: left;
}

 .right-panel-check > div > input {
  cursor: pointer;
 }

 .right-panel-check > div > label {
  cursor: pointer;
  user-select: none;
 }

.floorplan-right-panel-btn:hover {
 background-color: #4a4a49;
}

.floorplan-select {
 margin: 10px;
 margin-bottom: 0px;
 width: 32rem;
 float: left;
}

.floorplan-group {
 position: absolute;
 width: 140px;
 height: 100px;
 padding: 0px 0px 5px 0px;
 border-style: solid;
 border-width: 4px;
 border-color: black;
 border-radius: 20px;
 color: whitesmoke;
 text-align: center;
}

.floorplan-group-label {
 display: flex;
 align-items: center;
 justify-content: center;
 padding-top: 5px;
 font-size: 15px;
 font-weight: bold;
 line-height: 17px;
 height: 40px;
 overflow-wrap: anywhere;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.floorplan-light {
 position: absolute;
 width: 50px;
 height: 50px;
 padding: 6px 0px 5px 0px;
 border-style: solid;
 border-width: 4px;
 border-color: black;
 border-radius: 50%;
 color: whitesmoke;
 text-align: center;
}

 .floorplan-light > i {
  font-size: 30px;
 }

 .floorplan-light:hover + .node-name {
  display: block;
 }

.node-name {
 display: none;
}

.floorplan-light > span {
 font-size: 20px;
 font-weight: bold;
 line-height: 27px;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

.floorplan-lux {
 position: absolute;
 width: 100px;
 height: 40px;
 padding: 1px 2px 0px 2px;
 border-style: solid;
 border-width: 4px;
 border-color: black;
 border-radius: 10px;
 text-align: center;
}

 .floorplan-lux > span {
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  vertical-align: middle;
  margin: 1px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
 }

 .floorplan-lux:hover + .node-name {
  display: block;
 }

.floorplan-add {
 margin: 10px;
 margin-bottom: 0px;
 float: right;
}

.custom-file-input:lang(en) ~ .custom-file-label::after {
 content: "Proch\0000E1zet";
}

.fit-to-page-icon {
 position: absolute;
 bottom: 20px;
 right: 20px;
 width: 50px;
 height: 50px;
 padding: 5px;
 background-color: #373636;
 color: #e8e8e8;
 text-align: center;
 cursor: pointer;
 border-style: solid;
 border-width: 1px;
 border-color: #e8e8e8;
}

 .fit-to-page-icon > div > i {
  font-size: 40px;
 }

.add-node-icon {
 position: absolute;
 bottom: 140px;
 right: 20px;
 width: 50px;
 height: 50px;
 padding: 5px;
 background-color: #373636;
 color: #e8e8e8;
 text-align: center;
 cursor: pointer;
 border-style: solid;
 border-radius: 50%;
 border-width: 1px;
 border-color: #e8e8e8;
}

 .add-node-icon > div > i {
  font-size: 30px;
  margin: 5px;
 }

.add-group-icon {
 position: absolute;
 bottom: 80px;
 right: 20px;
 width: 50px;
 height: 50px;
 padding: 5px;
 background-color: #373636;
 color: #e8e8e8;
 text-align: center;
 cursor: pointer;
 border-style: solid;
 border-radius: 10%;
 border-width: 1px;
 border-color: #e8e8e8;
}

 .add-group-icon > div > i {
  font-size: 30px;
  margin: 5px;
 }

.group-button-power {
 background-color: #0095d4;
 border-width: 1px;
 border-color: #e8e8e8;
 color: #e8e8e8;
 width: 7rem;
 margin-left: 12px;
}

 .group-button-power:hover {
  font-weight: bold;
  background-color: #41bbee;
  border-color: #e8e8e8;
  color: #e8e8e8;
  width: 7rem;
 }

.gateway-label {
 width: 7rem;
}

.gateway-input {
 width: 15rem;
}

.icon-save {
 font-size: 2rem;
 color: lime;
 cursor: pointer;
 margin-right: 6px;
}

.icon-cancel {
 font-size: 2rem;
 color: lightgray;
 cursor: pointer;
 margin-right: 6px;
}

.leaflet-container {
 background-color: #4a4a49;
}

.menu-shadow {
 box-shadow: 2px 0 2px rgba(0, 21, 41, 0.35);
}

.login {
 color: black;
}

.pointer {
 cursor: pointer;
}

.lux-uncalibrated {
 color: black;
 background-color: #fcaf5c;
 cursor: pointer;
}

.gateway-connected {
 color: black;
 background-color: #d4edda;
 cursor: pointer;
}

.gateway-disconnected {
 color: black;
 background-color: #f8d7da;
 cursor: pointer;
}

.group-nodes {
 background-color: #0095d4;
 cursor: pointer;
}

.card-group-nodes {
 background-color: #4a4a49;
 border-color: #0095d4;
 border-width: 2px;
}

.card-connected {
 background-color: #4a4a49;
 border-color: #d4edda;
 border-width: 2px;
}

.card-disconnected {
 background-color: #4a4a49;
 border-color: #f8d7da;
 border-width: 2px;
}

.card-uncalibrated {
 background-color: #4a4a49;
 border-color: #fcaf5c;
 border-width: 2px;
}

.b-bar-vertical-inline.b-bar-dark .b-bar-dropdown-menu .b-bar-dropdown-item.active,
.b-bar-vertical-inline.b-bar-dark .b-bar-link.active,
.b-bar-vertical-popout.b-bar-dark .b-bar-link.active,
.b-bar-vertical-small.b-bar-dark .b-bar-link.active {
 background-color: #4a4a49;
}

.nav-tabs .nav-link {
 color: #e8e8e8;
}

 .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  background-color: #676765;
  color: #e8e8e8;
 }

.tab-content > .active {
 background-color: #676765;
 color: #e8e8e8;
}

.card-spacing {
 margin-left: 20px;
 margin-right: 20px;
 margin-top: 10px;
 margin-bottom: 10px;
}

.nested {
 margin-left: 0px !important;
 margin-right: 0px !important;
 margin-top: 10px;
 margin-bottom: 10px;
}

.notification {
 padding-left: 20px;
 padding-right: 20px;
 white-space: nowrap;
 position: fixed;
 height: 50px;
 min-width: 300px;
 line-height: 50px;
 text-align: center;
 vertical-align: middle;
 border-radius: 3px;
 -webkit-box-shadow: 5px 5px 20px -6px rgba(0,0,0,1);
 -moz-box-shadow: 5px 5px 20px -6px rgba(0,0,0,1);
 box-shadow: 5px 5px 20px -6px rgba(0,0,0,1);
 right: 20px;
 z-index: 9999;
}

.notification-success {
 background-color: lightgreen;
 color: black;
}

.notification-info {
 background-color: lightgray;
 color: black;
}

.notification-warning {
 background-color: orange;
 font-weight: bold;
 color: White;
}

.notification-error {
 background-color: red;
 font-weight: bold;
 color: white;
}

#blazor-error-ui {
 background: lightyellow;
 bottom: 0;
 box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
 display: none;
 left: 0;
 padding: 0.6rem 1.25rem 0.7rem 1.25rem;
 position: fixed;
 width: 100%;
 z-index: 1000;
}

 #blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
 }

/*RECONNECT*/
.my-reconnect-modal > div {
 position: fixed;
 top: 0;
 right: 0;
 width: 100%;
 height: 100vh;
 z-index: 9999;
 overflow: hidden;
 background-color: lightgray;
 color: black;
}

.reconnect-loader {
 width: 100%;
 height: 50vh;
 padding-top: calc(50vh - 90px);
 padding-bottom: 110px;
 padding-left: calc((100vw / 2) - 50px);
 align-content: center;
}

.reconnect-desc {
 width: 100%;
 height: 50vh;
 text-align: center;
}

 .reconnect-desc.h5 {
  line-height: 1.5rem;
 }

.components-reconnect-hide > div {
 display: none;
}

.components-reconnect-show > div {
 display: none;
}

.components-reconnect-show > .show {
 display: block;
}

.components-reconnect-failed > div {
 display: none;
}

.components-reconnect-failed > .failed {
 display: block;
}

.components-reconnect-refused > div {
 display: none;
}

.components-reconnect-refused > .refused {
 display: block;
}

/* LOADER*/
.loader {
 border: 16px solid #f3f3f3;
 border-radius: 50%;
 border-top: 16px solid #3498db;
 width: 100px;
 height: 100px;
 -webkit-animation: spin 2s linear infinite; /* Safari */
 animation: spin 2s linear infinite;
}

.loader-gateway {
 border: 8px solid #f3f3f3;
 border-radius: 50%;
 border-top: 8px solid #3498db;
 width: 70px;
 height: 70px;
 -webkit-animation: spin 2s linear infinite; /* Safari */
 animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
 0% {
  -webkit-transform: rotate(0deg);
 }

 100% {
  -webkit-transform: rotate(360deg);
 }
}

@keyframes spin {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}

/*-----------------------------------------------------------------------------*/