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;
}

.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: 80px;
 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: 5rem;
}

.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: 1;
}

.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: 1000;
 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);
 }
}

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

