/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification\ 
for details on configuring this project to bundle and minify static web assets. */

/*
Z-index reference list
Main body                  0
Footer                     3
HelvarNetError            99  ?? is this still used?? commented out ATM
DiscoveryingDiv          101  (custom)(TODO rename: is the blocking screen )
FullscreenAlertsPage     500  (custom)
Navbar                  1030  (custom)
Normal BSModal Backdrop 1050  (default)
Normal BSModal          1055  (default)
Toast Messages          1090  (default)
DiscoveryModal          2020  ?? why was this needed; commented out atm below

*/ 
/*+++++++++++++++*/
/*MAIN PAGE SETUP*/
/*+++++++++++++++*/
a {
  text-decoration: none;
}

/*Overwrite for checkmarks in virtual select widget*/
.vscomp-option.selected .checkbox-icon::after {
  border-color: #59bb15 !important;
  border-top-color: rgba(0,0,0,0) !important;
  border-left-color: rgba(0,0,0,0) !important;
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v12-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url('../fonts/montserrat-v12-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('fonts/Montserrat/montserrat-v12-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('fonts/Montserrat/montserrat-v12-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('fonts/Montserrat/montserrat-v12-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('fonts/Montserrat/montserrat-v12-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}

.modal-backdrop {
  display: none;
}

.modal {
  background: rgba(0, 0, 0, 0.7);
}

body {
  padding-top: 100px;
  padding-bottom: 60px;
  background-color: var(--site_background_color, #F7F7F7);
  font-family: Montserrat;
  color: var(--site_color, #404358);
  overflow: auto !important; /*Bootstrap XL Modal doesn't reset the scrollable after modal close*/
}

.BodyMinWidth {
  min-width: 1400px;
}

.footer {
  position: fixed;
  left: 0;
  height: 50px;
  bottom: 0;
  width: 100%;
  color: var(--site_color, #404358);
  text-align: left;
  background-color: var(--site_background_color, #F7F7F7);
  padding: 0px;
  margin: 0px;
  z-index: 3;
}

:root {
  /* System tokens */
  /* For material design components (ATM only slider widgets)*/
  /* Set color on all "normal" sliders*/
  --md-sys-color-primary: #31C580;
  /*For bootstrap 5 */
  --uc-primary: #31C580;
  --bs-primary: var(--uc-primary);
}

.bg-tag-color {
  background-color: var(--uc-primary);
}

input[type='checkbox']:checked {
  background-color: #31C580;
  border-color: #31C580;
}

#theme-overwrite .btn-default {
  background-color: var(--site_btn_default, #DDDDDD)
}

#theme-overwrite .primary {
  background-color: var(--site_btn_primary, #28a745) !important;
}

#theme-overwrite .btn-primary {
  background-color: var(--site_btn_primary, #28a745);
  border-color: var(--site_btn_primary, #28a745);
}

#theme-overwrite a {
  color: var(--site_color, #404358);
}

#virtualSelectDefaultFont {
  font-family: Montserrat;
  color: #404358;
  font-size: 20px;
}

.grabbable {
  cursor: move; /* fallback if grab cursor is unsupported */
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}

  /* (Optional) Apply a "closed-hand" cursor during drag operation. */
  .grabbable:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
  }

.cursor-pointer {
  cursor: pointer;
}

.border-2 {
  border-width: 2px !important;
}

/*Alle velden die labels gebruiken zitten in de settings, denk ik */
label {
  font-size: 16px;
  color: #404358;
  font-family: Montserrat;
}

.PincodeCirle {
  border-radius: 50%;
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: var(--switch_control_background, #D9DADE);
  margin: 10px;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
}

.PincodeCirleSubmit {
  border-radius: 50%;
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: var(--switch_control_background_active, #00c576);
  margin: 10px;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
}


.PincodeCirle:active {
  background: var(--switch_control_background_active, #00c576);
}

/*++++++++++++++++++*/
/*lOGIN PAGE RELATED*/
/*++++++++++++++++++*/
#login-overwrite {
  background-size: auto;
  height: 100vh;
  /* Corner positions (x y) */
  --tl-x: 20%;
  --tl-y: 5%; /* top-left */
  --tr-x: 80%;
  --tr-y: 10%; /* top-right */
  --bl-x: 30%;
  --bl-y: 90%; /* bottom-left */
  --br-x: 90%;
  --br-y: 80%; /* bottom-right */
  /* Fade radii (how far each gradient spreads before transparent) */
  --tl-radius: 60%;
  --tr-radius: 80%;
  --bl-radius: 80%;
  --br-radius: 40%;
  background: radial-gradient(circle at var(--tl-x) var(--tl-y), rgb(35,35,47) 0%, rgba(35,35,47,0) var(--tl-radius)),
  /* top-right */
  radial-gradient(circle at var(--tr-x) var(--tr-y), rgb(68,70,91) 0%, rgba(68,70,91,0) var(--tr-radius)),
  /* bottom-left */
  radial-gradient(circle at var(--bl-x) var(--bl-y), rgb(79,182,127) 0%, rgba(79,182,127,0) var(--bl-radius)),
  /* bottom-right */
  radial-gradient(circle at var(--br-x) var(--br-y), rgb(43,49,61) 0%, rgba(43,49,61,0) var(--br-radius));
  background-blend-mode: normal;
  background-color: rgb(43,49,61); /* fallback */
  background-attachment: fixed;
}

#loginBox {
  background-color: white;
  border-radius: 25px;
  width: 350px;
  text-align: center;
}

  #loginBox label {
    font-family: Montserrat;
    color: #404358;
    font-size: 11px
  }

.login-box-text {
  color: #404358;
  font-size: 11px
}

#loginBox a {
  font-family: Montserrat;
  color: #404358;
  font-size: 11px
}

.vertical-center {
  min-height: 60%; /* Fallback for browsers do NOT support vh unit */
  min-height: 60vh; /* These two lines are counted as one 🙂       */
  display: flex;
  align-items: center;
}

#loginLogo {
  width: 200px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
  padding-left: 15px;
  padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
  font-size: 20px;
  line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
  width: 100%;
}

/* QR code generator */
#qrCode {
  margin: 15px;
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
  /* Hide captions */
  .carousel-caption {
    display: none;
  }
}

/*++++++++++++++++++++++++++*/
/*STATUS & DISCOVERY RELATED*/
/*++++++++++++++++++++++++++*/

.blink {
  background-color: #404358;
  transition: background-color color 1s;
}

/*.helvarneterror {
  position: fixed;
  bottom: 10px;
  left: 33%;
  width: 33%;
  height: auto;
  border: 2px solid #ba122b;
  border-radius: 15px;
  background-color: rgba(245, 1, 1, 0.36);
  color: white;
  vertical-align: central;
  font-size: x-large;
  z-index: 99;
}*/

/*.statusMessage {
  text-align: center;
  font-size: medium;
}

.message {
  position: fixed;
  top: 85px;
  left: 40%;
  width: 20%;
  height: auto;
  border: 2px solid #17c500;
  border-radius: 3px;
  background-color: rgba(23, 197, 0, 0.37);
  color: white;
  vertical-align: central;
  font-size: x-large;
  padding: 5px;
  z-index: 99;
}*/

/*TODO ALARMS Should be renamed; is the blocking screen with custom text */
#discoveringDiv {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 101;
  background-color: rgba(158, 158, 158, 0.75);
}

#FullscreenAlertsPage {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  overflow-y: scroll;
  background-color: #404358;
}
#FullscreenAlertsPage .card{
  border-color:none;
}

#discoveringModal {
  /*z-index: 2020;*/
}

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.8);
  border-right: 1.1em solid rgba(255, 255, 255, 0.8);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.8);
  border-left: 1.1em solid #47B47D;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.load-container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  margin-top: -7em;
  margin-left: -150px;
  text-align: center;
  color: white;
  text-decoration: double;
  font-size: 22px;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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



/*++++++++++++++*/
/*NAVBAR RELATED*/
/*++++++++++++++*/

.navbar-link-theme {
  color: var(--navbar_color, #404358) !important;
}

@media screen and (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block !important;
  }
}

.dropdown-menu li {
  position: relative;
}

@media screen and (min-width: 992px) {
  .dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 97%;
    top: 0px !important;
    width: max-content;
  }
}

@media screen and (max-width: 992px) {
  .dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 22px;
    top: 22px !important;
    /*width: max-content;*/
  }
}

.dropdown-menu .dropdown-submenu-left {
  right: 100%;
  left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
  display: block;
}


/*navbar text size*/
#theme-overwrite .navbar-nav .nav-link {
  font-size: medium;
}

/*Navbar Hamburger menu*/
#theme-overwrite .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/*Navbar Background Color*/
#theme-overwrite .navbar {
  background-color: var(--navbar_background, #FFF);
}

/*Location element in navbar*/
.navbar-location {
  color: var(--navbar_location_color, #404358);
  background-color: var(--navbar_location_background, #F7F7F7);
}

#theme-overwrite .btn-dark,
#theme-overwrite .btn-dark.disabled {
  background-color: var(--site_btn_dark, #404358);
  cursor: auto;
  opacity: 1;
}

#theme-overwrite .dropdown-menu {
  top: 38px
}

#theme-overwrite .dropdown-item {
  font-size: 14px;
  color: var(--site_dropdown_color, #404358);
  background-color: var(--site_dropdown_background, white);
}

  #theme-overwrite .dropdown-item:hover {
    color: var(--site_dropdown_color_active, #404358);
    background-color: var(--site_dropdown_background_active, #F7F7F7);
  }

#theme-overwrite .text-muted {
  color: #878D97;
  font-size: 10px;
}

.user-icon {
  font-size: 24px;
}

.navbar-icon-color-theme {
  color: var(--navbar_location_icon_color, white)
}
/*++++++++++++++++++++++++++*/
/*HOMEPAGE RELATED*/
/*++++++++++++++++++++++++++*/
.card-custom {
  min-height: 210px
}

.card-body {
  border-radius: inherit;
}

.card-header + .card-body {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

#theme-overwrite a.passedtests,
#theme-overwrite .passedtests {
  color: #31C580;
}

#theme-overwrite a.failedtests,
#theme-overwrite .failedtests {
  color: #BA122B;
}

.homepage-card-header-theme {
  background-color: var(--homepage_card_header_background, #00000008);
}

.homepage-card-header-color-theme {
  color: var(--homepage_card_header_color, #404358);
}

.homepage-card-theme {
  background-color: var(--homepage_card_background, #FFF);
}

.homepage-card-color-theme {
  color: var(--homepage_card_color, #404358);
}

.homepage-text-muted-theme {
  color: var(--homepage_text_muted_color, #6c757d);
  font-size: 10px;
}

.homepage-card-middle-border-color-theme {
  border-color: var(--homepage_card_middle_border, #dee2e6) !important;
}


/*++++++++++++++++++++++++++++*/
/*EMONITOR TABLE LAYOUT STUFF*/
/*++++++++++++++++++++++++++++*/
#e-table {
  word-wrap: break-word;
  overflow-wrap: break-word;
  --bs-table-bg: transparent;
}

  #e-table .e-table-head {
    background-color: var(--site_background_color, #F7F7F7);
    color: var(--site_color, #404358) !important;
  }


  #e-table .e-table-body {
    font-size: small;
  }

.e-table-row {
  font-size: small;
  background-color: white;
}

  .e-table-row:hover {
    background-color: #D9DADE;
  }

.e-table-row-expanded {
  font-size: small;
  background-color: #17c500;
}

.bgwhite {
  background-color: white;
}

.sortkey {
  font-size: 16px;
}
/*++++++++++++++++++++++++++++*/
/*ContactPage                 */
/*++++++++++++++++++++++++++++*/

#contactPage,
#contactPage a {
  font-size: 13px;
}

.fa-color {
  color: #00C576;
}

/*++++++++++++++*/
/*Dalidevices RELATED*/
/*++++++++++++++*/
#paginationDiv .page-item.active .page-link {
  background-color: #404358;
  border-color: #404358;
  margin-left: 0px;
}

#SearchBox {
  width: 200px;
}

#SearchClear {
  position: absolute;
  right: 100px;
  top: -7px;
  bottom: 0;
  height: 14px;
  margin: auto;
  font-size: 14px;
  cursor: pointer;
  color: #ccc;
}

.btn-outline-secondary-overwrite {
  border: 0.5px solid #D9DADE;
  border-radius: 3px;
  background-color: #FFFFFF;
  color: #404358;
  font-size: 10px;
}

.w-5 {
  width: 5%;
}

.w-10 {
  width: 10%;
}

.w-15 {
  width: 15%
}

.w-20 {
  width: 20%
}

.w-33 {
  width: 33%
}

/*++++++++++++++*/
/*GroupControl RELATED*/
/*++++++++++++++*/

.group-control-title-theme {
  color: var(--group_control_title, #404358);
}

.group-control-description-theme {
  color: var(--group_control_description, #878D97);
}

.groupcontrol-card-theme {
  background-color: var(--group_control_card_background, white);
  border-color: var(--group_control_card_border, #00000020);
}

.groupcontrol-card-text-color-theme {
  color: var(--group_control_card_text_color, #404358)
}

.scenebutton-theme {
  background-color: var(--scenebutton_background, #DDDDDD);
  color: var(--scenebutton_color, black);
}

  .scenebutton-theme:hover {
    background-color: var(--scenebutton_background, #DDDDDD);
    color: var(--scenebutton_color_hover, black);
  }


.constant-light-icon input[type='checkbox'] {
  display: none;
}

.constant-light-icon > label,
.allow-save-scene-icon > label {
  margin-bottom: 0px !important;
}

.constant-light-icon input[type='checkbox'] + label:after {
  font: var(--fa-font-regular);
  content: "\f6c4";
  color: var(--switch_control_background, #ccc);
  font-weight: 900;
  font-size: 20px;
}

.constant-light-icon input[type='checkbox']:checked + label::after {
  font: var(--fa-font-regular);
  content: "\f6c4";
  font-weight: 900;
  font-size: 20px;
  color: var(--switch_control_background_active, #00C576);
}

.allow-save-scene-icon input[type='checkbox'] {
  display: none;
}

  .allow-save-scene-icon input[type='checkbox'] + label:after {
    font: var(--fa-font-regular);
    content: "\f303";
    color: var(--switch_control_background, #ccc);
    font-weight: 900;
    font-size: 20px;
  }

  .allow-save-scene-icon input[type='checkbox']:checked + label::after {
    font: var(--fa-font-regular);
    content: "\f303";
    font-weight: 900;
    font-size: 20px;
    color: var(--switch_control_background_active, #00C576);
  }

@media (max-width: 575px) {
  #SearchClear.GroupControlSearchClearOverwrite {
    right: 120px;
    top: -10px;
    bottom: 0;
  }
}

@media (min-width: 576px) {
  #SearchClear.GroupControlSearchClearOverwrite {
    right: 160px;
    top: -22px;
    bottom: 0;
  }
}

@media (min-width: 768px) {
  #SearchClear.GroupControlSearchClearOverwrite {
    right: 110px;
    top: 0px;
    bottom: 0;
  }
}

@media (min-width: 992px) {
  #SearchClear.GroupControlSearchClearOverwrite {
    right: 85px;
    top: -22px;
    bottom: 0;
  }
}

@media (min-width: 1200px) {
  #SearchClear.GroupControlSearchClearOverwrite {
    right: 80px;
    top: -22px;
    bottom: 0;
  }
}

@media (min-width: 1500px) {
  #SearchClear.GroupControlSearchClearOverwrite {
    right: 100px;
    top: -22px;
    bottom: 0;
  }
}

@media (min-width: 1800px) {
  #SearchClear.GroupControlSearchClearOverwrite {
    right: 105px;
    top: -22px;
    bottom: 0;
  }
}

.iconbox {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

  /* Hide default HTML checkbox */
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--switch_control_background, #ccc);
  -webkit-transition: .4s;
  transition: .4s;
}

  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: var(--switch_control_thumb, white);
    -webkit-transition: .4s;
    transition: .4s;
  }

input:checked + .slider {
  background-color: var(--switch_control_background_active, #00C576);
}

input:focus + .slider {
  box-shadow: 0 0 1px #00C576;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

  .slider.round:before {
    border-radius: 50%;
  }

.auto-width {
  width: auto;
}

md-slider.tuneableWhite {
  --md-slider-active-track-color: linear-gradient( to right, #FFB630 0%, #FFFFFF 50%, #BFE6F9 100% );
  --md-slider-inactive-track-color: linear-gradient( to right, #FFB630 0%, #FFFFFF 50%, #BFE6F9 100% );
  --md-slider-handle-color: transparant;
  --md-sys-color-primary: rgba(210,210,210);
}

/*.selectpicker {
  pointer-events: none;
}*/

.custom-group-control-settings-ul {
  list-style-type: none;
  margin-left: -2.75em;
}

/*++++++++++++++*/
/*Qr RELATED    */
/*++++++++++++++*/
.qr-card-theme {
  background-color: var(--qr_control_card_background, white);
  border-color: var(--qr_control_card_border, #00000020);
}

.qr-card-text-color-theme {
  color: var(--qr_control_card_text_color, #404358)
}

/*++++++++++++++++++++*/
/*Kalender RELATED    */
/*++++++++++++++++++++*/


.fa-calendar-check.notEnabled {
  color: var(--switch_control_background, #ccc);
  font-weight: 400;
  font-size: 25px;
}

.fa-calendar-check.disabled {
  color: var(--switch_control_background, #f76174);
  font-weight: 400;
  font-size: 25px;
}

.fa-calendar-check.enabled {
  font-weight: 400;
  font-size: 25px;
  color: var(--switch_control_background_active, #00C576);
}

.tooltip, .tooltip-inner {
  min-width: 300px !important;
  background-color: var(--switch_control_background, #ccccccff);
  border-radius: 10px;
  color: var(--site_color, #404358);
  text-align: left;
  opacity: 1 !important;
}

.scheduler-icon-color {
  color: #b3b3b3;
}

.schedule-danger {
  background-color: #f76174;
}

.scheduler-sunrise {
  width: 20px;
  height: 20px;
}

.scheduler-sunset {
  width: 20px;
  height: 20px;
}

/*When printing(eg to pdf) a page don't print the toastr messages*/
@media print {
  body {
    margin-top: -20mm;
  }

  #toast-container {
    display: none !important;
    z-index: 1000 !important;
  }
}

.toast-message {
  color: black
}

.toast-container {
  /*z-index: 1054 !important;*/
}

#toast-container :hover {
  cursor: default !important;
}

#toast-container > div {
  padding: 15px 15px 15px 15px;
}

.toast-error {
  background-color: var(--site_background_color, #F7F7F7);
  color: var(--site_color, #404358);
  border: solid red 1px
}

.toast-warning {
  background-color: white;
  color: black;
  border: solid orange 1px;
}

.toast-success {
  background-color: white;
  color: black;
  border: solid green 1px;
}

.toast-info {
  background-color: white;
  color: black;
  border: solid light-blue 1px;
}

@media screen and (max-width: 1599.98px) {
  .table-responsive-xl-custom {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/*++++++++++++++++++++*/
/*Floorplan RELATED   */
/*++++++++++++++++++++*/
.floorplan-hover-background {
  color: var(--floorplan_hover_background, green);
}