body {
  background-color: #f5f5f5;
  color: #333;
  font-family: "Roboto", sans-serif, Arial;
}

.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

/*
 * Form
 */
body .form-control {
  background-color: #fff;
  border-color: #ddd;
  color: #333;
}

body .form-control:focus {
  background-color: #fff;
  border-color: #0dd3ff;
  box-shadow: 0 0 0 0.25rem rgba(13, 211, 255, 0.25);
  color: #333;
}

body .form-select {
  background-color: #fff;
  border-color: #ddd;
  color: #333;
}

body .form-select:focus {
  background-color: #fff;
  border-color: #0dd3ff;
  box-shadow: 0 0 0 0.25rem rgba(13, 211, 255, 0.25);
  color: #333;
}

/*
 * Sidebar
 */
@media (min-width: 768px) {
  .sidebar .offcanvas-lg {
    position: -webkit-sticky;
    position: sticky;
    top: 48px;
  }
  .navbar-search {
    display: block;
  }
}

.sidebar .nav-link {
  font-size: .875rem;
  font-weight: 500;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar-heading {
  font-size: .75rem;
}

/*
 * Navbar
 */
.navbar .form-control {
  padding: .75rem 1rem;
}

@media (max-width: 1399px) {
  #incomeForm div.btn-group label.btn {
    --bs-btn-padding-x: 0.375rem;
  }
}

@media (max-width: 991px) {
  #incomeForm div.btn-group label.btn {
    --bs-btn-padding-x: 0.25rem;
  }
}

@media (max-width: 390px) {
  .slogan {
    display: none;
  }
}

.cover-container {
  max-width: 60em;
}

/* PanelOS color scheme - Updated to blue theme */
a, a:link, a:visited {
  text-decoration-color: rgba(13, 211, 255, 0.5);
  transition: color .15s, text-decoration-color .15s;
}
a:hover, a:focus {
  color: #0ab8e6;
  text-decoration-color: rgba(10, 184, 230, 0.7);
}

.bg-panelos {
  background-color: #0dd3ff !important;
  color: #fff;
}

.bg-panelos-normal {
  background: rgb(10, 184, 230);
  background: linear-gradient(90deg, rgba(10, 184, 230, 1) 0%, rgba(13, 211, 255, 1) 50%);
  color: #fff;
}

.bg-panelos-light {
  background-color: #a3f0ff !important;
  color: #008cc0;
}

/* Text */
.text-panelos {
  color: #0dd3ff !important;
}
.text-panelos-emphasis {
  color: #0ab8e6 !important;
}
.text-bg-panelos {
  background-color: #0dd3ff !important;
  color: #fff !important;
}

/* Border */
.border-panelos {
  border-color: #0dd3ff !important;
}

/* Buttons */
.btn-panelos {
  color: #fff;
  background-color: #0dd3ff;
  border-color: #0dd3ff;
}
.btn-panelos:hover, .btn-panelos:focus {
  color: #fff;
  background-color: #0ab8e6;
  border-color: #008cc0;
}

/* Outline Button */
.btn-outline-panelos {
  color: #0dd3ff;
  background-color: transparent;
  border-color: #0dd3ff;
}
.btn-outline-panelos:hover, .btn-outline-panelos:focus {
  color: #fff;
  background-color: #0dd3ff;
  border-color: #0dd3ff;
}

/* Alerts */
.alert-panelos {
  color: #fff;
  background-color: #0dd3ff;
  border-color: #0dd3ff;
}
.alert-panelos-light {
  color: #008cc0;
  background-color: #a3f0ff;
  border-color: #5aa0b3;
}

/* Links */
a.panelos, .link-panelos {
  color: #0dd3ff;
}
a.panelos:hover, .link-panelos:hover, a.panelos:focus, .link-panelos:focus {
  color: #0ab8e6;
  text-decoration: underline;
}

/* Badge */
.badge-panelos {
  background-color: #0dd3ff;
  color: #fff;
}

/* List Group */
.list-group-item-panelos {
  color: #008cc0;
  background-color: #a3f0ff;
}
.list-group-item-panelos.active, .list-group-item-panelos.active:focus, .list-group-item-panelos.active:hover {
  color: #fff;
  background-color: #0dd3ff;
  border-color: #0dd3ff;
}

/* Progress */
.progress-bar-panelos {
  background-color: #0dd3ff;
}

/* Simple dark theme - header and sidebar */
.sidebar {
  background-color: #0f3460;
  color: #fff;
}

.navbar {
  background-color: #0f3460;
  color: #fff;
}

.sidebar .card {
  background-color: #16213e;
  border-color: #2a3a5a;
  color: #fff;
}

.sidebar .card-header {
  background-color: #1a2a4a;
  border-bottom: 1px solid #2a3a5a;
  color: #a3f0ff;
}

.sidebar .list-group {
  background-color: transparent;
  border-color: #2a3a5a;
}

.sidebar .list-group-item {
  background-color: #16213e;
  border-color: #2a3a5a;
  color: #a3f0ff;
}

.sidebar .list-group-item:hover {
  background-color: #1a2a4a;
  color: #0dd3ff;
}

.sidebar .list-group-item.active {
  background-color: #0dd3ff;
  border-color: #0dd3ff;
  color: #fff;
}

.sidebar .nav-link {
  color: #a3f0ff;
}

.sidebar .nav-link:hover {
  color: #0dd3ff;
}

.sidebar .nav-link.active {
  color: #0dd3ff;
}

.sidebar-heading {
  color: #5aa0b3;
}

/* Blue color definitions */
.blue1 {
  color: #0dd3ff;
}

.blue2 {
  color: #4ce0ff;
}

.blue3 {
  color: #a3f0ff;
}

.blue4 {
  color: #0ab8e6;
}

.blue5 {
  color: #008cc0;
}

.blue6 {
  color: #5aa0b3;
}