#content-2,
#content-3,
#content-4,
#content-5,
#content-6,
#content-7,
#content-8,
#content-9,
#content-10,
#content-11,
#content-12,
#content-13,
#content-14,
#content-15 {
  display: none;
}

/* Style for the cursor when hovering over the remove button icon */
.remove-rank-btn {
  cursor: pointer;
}

.form-management-menu-bar {
  background-color: #15162157; /* Slightly lighter color than #17181f */
  border-radius: 10px;
}

#chart-pages-and-queries {
  height: 400px;
}

@media (max-width: 450px) {
  #chart-pages-and-queries {
    height: 300px;
  }
}

#pie-chart {
  height: 400px;
}

@media (max-width: 450px) {
  #pie-chart {
    height: 300px;
  }
}

.blurred-background {
  background-color: #17181f;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.text-custom-light-blue {
  color: #6398b1;
}

.portal-card-body-color {
  background-color: #2c2d37;
}

.portal-card-footer-color {
  background-color: #535564;
}

.card {
  position: relative;
  overflow: hidden;
  border: none;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, #1f2029, #30313d);
  opacity: 0.8;
  z-index: -1;
}

.card-body {
  position: relative;
  z-index: 1;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.card-text.display-3 {
  font-size: 4.5rem;
  font-weight: bold;
}

.progress {
  height: 10px;
}

.progress-bar {
  border-radius: 10px;
  animation-duration: 2s;
}

.d-flex.justify-content-between {
  align-items: center;
}

.badge {
  font-size: 0.6rem;
  border-radius: 0.5rem;
  text-transform: uppercase;
}

.clock {
  min-height: 4em;
  min-width: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--main-bg-color);
  background-image: url("https://imvpn22.github.io/analog-clock/clock.png");
  background-position: center center;
  background-size: cover;
  border-radius: 50%;
  border: 4px solid var(--main-bg-color);
  box-shadow:
    0 -7.5px 7.5px rgba(255, 255, 255, 0.05),
    inset 0 -7.5px 7.5px rgba(255, 255, 255, 0.05),
    0 7.5px 7.5px rgba(0, 0, 0, 0.3),
    inset 0 7.5px 7.5px rgba(0, 0, 0, 0.3);
  transition: all ease 0.2s;
}

.clock:before {
  content: "";
  height: 0.1875em;
  width: 0.1875em;
  background-color: var(--main-text-color);
  border: 2px solid var(--main-bg-color);
  position: absolute;
  border-radius: 50%;
  z-index: 1000;
  transition: all ease 0.2s;
}

.hour,
.min,
.sec {
  position: absolute;
  display: flex;
  justify-content: center;
  border-radius: 50%;
}

.hour {
  height: 2.5em;
  width: 2.5em;
}

.hour:before {
  content: "";
  position: absolute;
  height: 25%;
  width: 0.375em;
  background-color: var(--main-text-color);
  border-radius: 6px;
}

.min {
  height: 3em;
  width: 3em;
}

.min:before {
  content: "";
  height: 25%;
  width: 0.25em;
  background-color: var(--main-text-color);
  border-radius: 4px;
}

.sec {
  height: 3.25em;
  width: 3.25em;
}

.sec:before {
  content: "";
  height: 60%;
  width: 0.125em;
  background-color: #f00;
  border-radius: 2px;
}

.rank-draggable {
  background-color: #343a40; /* Dark gray background */
  padding: 10px;
  border-radius: 5px;
}

/* Stacked modal support: denial modal renders above application detail modal */
#denialModal {
  z-index: 1060;
}
#denialModal ~ .modal-backdrop,
.modal-backdrop + .modal-backdrop {
  z-index: 1055;
}
}