@import 'dashboard/device_detail.css';
@import 'dashboard/device_as_cards.css';
@import 'dashboard/device_as_table.css';

:root {
  --text: rgb(30, 28, 28);
  --background: rgb(244, 245, 245);
  --primary: rgb(0, 46, 96);
  --primary-hover: rgba(0, 46, 96, 0.8);
  --primary-active: rgba(0, 46, 96, 0.7);
  --primary-text: var(--background);
  --secondary: rgb(213, 211, 224);
  --secondary-hover: rgba(213, 211, 224, 0.7);
  --secondary-active: rgba(213, 211, 224, 0.5);
  --secondary-text: rgb(61, 61, 61);
  --accent: rgb(227, 115, 35);

  --translucent: rgba(0, 0, 0, 0.175);
}

*,
*::before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--background);
}

/* navbar */
nav .container {
  border-bottom: 2px solid var(--primary);
}

nav a.navbar-brand img {
  height: 4rem; /* 80px */
}

nav .navbar-collapse {
  flex-grow: 0;
}

/* end navbar */

.page-header {
  font-weight: bold;
  font-size: xxx-large;
}

/* bashboard device detail */
body.dashboard-device-detail th {
  vertical-align: middle;
  text-align: center;
}

.status-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.25rem;
}

.card-img-top {
  height: 15rem;
  object-fit: cover;
}

.placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #7f7f7f;
  height: auto;
}

#column-char {
  height: 30rem;
  width: 100%;
}

#cake-char {
  height: 20rem;
  width: 20rem;
}

.sort-icon {
  height: 1.5rem;
}

.aligned {
  align-items: flex-start;
}

/* ICONS */
.green-check {
  color: #26a250;
}

.red-fault {
  color: #cf2532;
}

.yellow-warning {
  color: #debe3c;
}

.purple-environmental {
  color: #9c27b0;
}

.orange-park {
  color: #ff8100;
}

.btn-nps-primary {
  background-color: var(--primary);
  color: var(--background);
  border-color: var(--primary);
  border-radius: 0.5rem;
}

.btn-nps-primary:hover {
  background-color: var(--primary-hover);
  color: var(--primary-text);
  border-color: var(--primary-hover);
}

.btn-nps-primary:active {
  background-color: var(--primary-active);
  color: var(--primary-text);
  border-color: var(--primary-active);
}

.btn-nps-secondary {
  background-color: var(--secondary);
  color: var(--secondary-text);
  border-color: var(--secondary);
  border-radius: 0.5rem;
}

.btn-nps-secondary:hover {
  background-color: var(--secondary-hover);
  color: var(--secondary-text);
  border-color: var(--secondary-hover);
}

.btn-nps-secondary:active {
  background-color: var(--secondary-active);
  color: var(--secondary-text);
  border-color: var(--secondary-active);
}