/* --- Vars --- */
/* --- Global --- */
html,
body {
  min-height: 100%;
  background-color: #ecf0f1 !important;
}

main {
  min-height: 100vh;
}

a {
  color: #02A8F5;
  text-decoration: none !important;
}
a:hover {
  color: #424242;
}

/* --- Colours --- */
.bg-primary {
  background-color: #02A8F5 !important;
}

.btn-primary {
  background-color: #02A8F5 !important;
  border-color: #02A8F5 !important;
}

.btn-outline-primary {
  color: #02A8F5 !important;
  border-color: #02A8F5 !important;
}
.btn-outline-primary:hover {
  color: white !important;
  background-color: #02A8F5 !important;
}

.badge-primary {
  background-color: #02A8F5 !important;
}

.badge-muted {
  background-color: #6c757d !important;
}
.badge-muted:hover {
  color: white !important;
}

/* --- Brand colors --- */
.badge {
  font-size: 10px;
}

.badge-nebra {
  background-color: #02A8F5 !important;
  border-color: #02A8F5 !important;
}

.badge-rak {
  background-color: #006AC6;
}

.badge-sensecap {
  background: linear-gradient(90deg, #B8F655 0%, #03A537 100%);
}

.badge-controllino-conelcom {
  background-color: #D5D800;
}

.badge-pisces {
  background-color: #14542C;
}

.badge-linxdot {
  background-color: #1FCBE1;
}

.badge-helium {
  background-color: #474DFF;
}

.badge-pycom {
  background-color: #000;
}

.badge-cotx {
  background-color: #465ee6;
}

.badge-syncrobit {
  background-color: #fff;
  color: black;
  border: 2px solid black;
}

.badge-panther {
  background-color: #31DAA6;
}

.badge-finestra {
  background-color: #fff;
  color: black;
  border: 2px solid black;
}

.badge-risinghf {
  background-color: #2C72A8;
}

.badge-midas {
  background-color: #949494;
}

/* --- Inputs --- */
.input-group-text {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.nebra-image-sort label,
.nebra-image-sort #sort-by-filter,
.nebra-image-sort #search,
.search-bar label,
.search-bar #sort-by-filter,
.search-bar #search {
  font-size: 12px;
}

/* --- Buttons --- */
.btn-primary {
  border: 10px solid rgba(2, 168, 245, 0.5) !important;
  transition: border 0.3s ease !important;
}
.btn-primary:hover {
  border-width: 15px !important;
  transition: border 0.3s ease, margin 0.3s ease !important;
  color: white !important;
}

@media (max-width: 767px) {
  #modalDownloadButton {
    width: 100% !important;
  }
  .download-extra-info {
    text-align: center !important;
  }
}
/* --- Nav --- */
.navbar .nav-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

#brands,
#devices {
  border-bottom: 5px;
}
#brands .nav-item:hover,
#devices .nav-item:hover {
  cursor: pointer;
  background-color: var(--bs-card-cap-bg);
}
#brands .nav-item.list-group-item.active,
#devices .nav-item.list-group-item.active {
  background-color: #02A8F5;
  border-color: #02A8F5;
}
#brands .nav-item.list-group-item.active a,
#devices .nav-item.list-group-item.active a {
  color: white;
}
#brands .nav-link,
#devices .nav-link {
  color: #02A8F5;
}
#brands .nav-link.active,
#devices .nav-link.active {
  background-color: #02A8F5;
  color: white !important;
  border-radius: 5px;
}

/* --- Card --- */
.card {
  height: 100%;
}
.card:hover {
  box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.1) !important;
}
.card.nebraImage .list-group-item:not(:first-child) {
  font-size: 12px;
}
.card .card-header.bg-primary {
  border-bottom: 0 !important;
}
.card .card-body {
  color: #424242;
}
.card .card-footer {
  font-size: 12px;
}

/* --- Slider --- */
#carouselIndicators {
  border-radius: 5px;
  height: 300px;
}
#carouselIndicators .carousel-inner {
  border-radius: 5px;
  height: 300px;
}
#carouselIndicators .carousel-inner .carousel-item {
  height: 300px;
  background-position: center center;
  background-size: cover;
}
#carouselIndicators .carousel-inner .carousel-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
#carouselIndicators .carousel-inner .carousel-item .container-image img {
  width: 100% !important;
}
#carouselIndicators .carousel-inner .carousel-item .carousel-caption {
  text-align: center;
  bottom: 70px;
}

/* style rules for screens smaller than 768px */
@media (max-width: 576px) {
  .carousel-caption {
    bottom: 60px !important;
  }
}
@media (max-width: 768px) {
  p {
    font-size: 12px;
  }
}
/* --- Modal --- */
#nebraImageModal #modalLogo {
  max-width: 50px;
}
#nebraImageModal h2 {
  font-size: 1.5em;
}