/* desktop nav bar */

.navbar.desktop {
  border-radius: 6px;
  margin: 0px;
  margin-top: 15px;
  max-width: 720px;
  top: 10px;
  background: var(--bs-light) !important;
  z-index: 99;
}

/* mobile nav bar */

.navbar.mobile {
  position: fixed;
  bottom: 0;
  width: 100%;
  /*border-top: 1px solid var(--bs-light);*/
  background: var(--bs-light);
  padding: 8px 0;
  z-index: 99;
  height: 85px;
  touch-action: none;
  overflow: hidden;
}

.navbar.mobile div {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  padding-top: 10px;
}

.navbar.mobile i {
  font-size: 1.5rem;
  margin-bottom: 4px;
}

.navbar.mobile a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  color: #495057;
  flex: 1;
  text-align: center;
  text-decoration: none;
}

.navbar.mobile a.active {
  color: #007bff !important;
}

/* Buttons global */

.btn-primary {
  color: white;
}

/* Notification container */

#notification-container {
  position: fixed;
  bottom: 90px;
  right: 1rem;
}

/* Loading Div */

#loading-container {
  width: 100px;
  height: 100px;
  background: var(--bs-light);
}

#loading-spinner {
  width: 3rem;
  height: 3rem;
}

/* CONTAINERS */

.container-sm {
  width: 95%;
  max-width: 720px;
  border-radius: 6px;
}

.container-sm.wide {
  max-width: 1200px;
}

.top {
  margin-top: 15px;
}

.bottom {
  margin-bottom: 200px;
}

/* Content Container */

.container-sm.content {
  padding-top: 12px;
  padding-bottom: 24px;
  background: var(--bs-light);
  margin-bottom: 10px;
}

.container-sm.full {
  background: var(--bs-light);
  padding: 0px;
}

/* Action Button Container */

.container-sm.action-buttons {
  position: relative;
}

.container-sm.action-buttons button.btn-secondary {
  left: 0px;
  position: absolute;
}

.container-sm.action-buttons button.btn-primary {
  right: 0px;
  position: absolute;
}

/* Header container */

.container-sm.header {
  display: flex;
  align-items: flex-end;
  margin-bottom: 5px;
}

.container-sm.header span {
  font-size: 20px;
}

.container-sm.header img {
  width: 50px;
  margin-right: 10px;
}

/* Accordian */

.accordion-item {
  border-bottom: none;
  background: var(--bs-light);
}

.accordion-button {
  background: var(--bs-light) !important;
  color: var(--bs-body-color) !important;
  height: 60px;
}

.accordion-button span {
  right: 50px;
  position: absolute;
}

/* Accordian with icons */

.accordion-button.content {
  padding-left: 50px;
}

.accordion-button.content i {
  font-size: 20px;
  position: absolute;
  left: 25px;
  transform: translateX(-50%);
}

/* Device Cards */

.device-card {
  width: 300px;
  height: 85px;
  background: var(--bs-light);
  border-radius: 6px;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  position: relative;
  text-decoration: none;
  color: var(--bs-body-color);
  margin-bottom: 10px;
}

@media (max-width:767px) {
  .device-card {
    max-width: 540px;
    margin-left: 0;
    margin-right: 0;
    width: 90vw;
  }
}

.device-card span {
  left: 105px;
  position: absolute;
}

.device-card span.name {
  top: 8px;
  font-size: 20px;
}

.device-card span.last-seen {
  top: 35px;
  font-size: 14px;
}

.device-card span.status-bar {
  top: 52px;
}

.device-card span.status-bar i {
  margin-right: 10px;
}

.device-card img.icon {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 85px;
}

.device-col {
  margin-bottom: 10px;
}

.view-box {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 85px;
  height: 64px;
  border: 2px solid black;
  overflow: hidden;
  position: relative;
}

.moving-image {
  width: 800px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  animation: moveImage 15s linear infinite;
}

@keyframes moveImage {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-715px);
  }
  100% {
    transform: translateX(0);
  }
}

/* pop-up components */

.pop-up-bg {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  overflow: hidden;
}

.pop-up-bg div.tall {
  overflow-y: auto;
  max-height: 90%;
  scrollbar-width: none;
}

.pop-up-bg div.action-buttons {
  position: relative;
  background-color: var(--bs-light);
  height: 50px;
  margin-top: 10px;
  border-radius: 6px;
}

.pop-up-bg div.action-buttons button.btn-primary {
  position: absolute;
  margin-right: 20px;
  right: 0px;
}

.pop-up-bg div.action-buttons button.btn-secondary {
  position: absolute;
  margin-left: 20px;
  left: 0px;
}

/* Radio Button */

.btn-outline-primary {
  background-color: var(--bs-light);
  border: 2px solid;
}

.btn-check:checked + .btn-outline-primary {
  background-color: var(--bs-primary);
  color: white;
}

/* User Images */

.user-image {
  width: 125px;
  height: 125px;
  object-fit: cover;
  object-position: center;
}

@media (max-width:767px) {
  .user-image {
    width: 40vw;
    height: 40vw;
    max-width: 125px;
    max-height: 125px;
  }
}

.user-image-col {
  margin-bottom: 10px;
}

.user-image-config-preview {
  object-fit: cover;
  filter: contrast(180%) saturate(125%);
  border: 10px solid white;
  background-color: rgb(200, 200, 200);
  width: 300px;
  height: 170px;
}