/* NAVBAR SECTION */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
::-moz-selection {
  /* Code for Firefox */
  background: green;
}

::selection {
  background: lightgreen;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 0.5; /* Firefox */
}

:root {
  --bs-primary: #015989 !important;
  --bs-secondary: #049dbf !important;
  --bs-accent: #f2b705 !important;
  --bs-gray: #7e90a2 !important;
  --bs-bg-danger: #ffcdd2;
  --bs-danger: #c63737;
}

body {
  font-family: "Inter";
  background-color: #f3f6f9 !important;
}

.navbar {
  background-color: transparent !important;
  position: fixed;
  width: 95%;
  justify-content: center;
  z-index: 10;
  border-radius: 20px;
  transition: background-color 0.5s ease; /* Smooth transition for background-color */
}

.navbar-scrolled {
  background-color: #91b3c6 !important;
  border-radius: 20px;
}

.nav-item .nav-link {
  font-size: 1rem;
  font-weight: 200;
  color: black !important;
}

.custom-footer {
  color: green;
}

/* END NAVBAR SECTION */

/* DASHBOARD SECTION */

.img-box {
  width: 100%;
  height: auto;
}

.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-card {
  width: 100%;
  height: auto;
  border-top-left-radius: 3%;
  border-top-right-radius: 3%;
  transition: transform 0.5s;
  color: white;
  box-shadow: 0rem 0rem 0.3rem black;
}

.custom-card:hover {
  transform: scale(1.03);
}

.disable-anchor {
  pointer-events: none;
  cursor: default;
}

.box-icon {
  font-size: 3rem;
}

.box-square {
  padding: 1rem;
  box-shadow: 0rem 0rem 0.5rem black;
}

.br-20px {
  border-radius: 20px;
}

.br-10px {
  border-radius: 10px;
}

.a-none {
  text-decoration: none;
  color: black;
}

/* END DASHBOARD SECTION */

.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-accent {
  color: var(--bs-accent) !important;
}

.text-gray {
  color: var(--bs-gray) !important;
}

.bg-light-gradued {
  background-color: rgba(255, 255, 255, 0.336);
}

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-gray {
  background-color: var(--bs-gray) !important;
}

.custom-rounded-pill {
  border-radius: 15px !important;
}

.fw-100 {
  font-weight: 100 !important;
}

.fw-200 {
  font-weight: 200 !important;
}

.fw-300 {
  font-weight: 300 !important;
}

.fw-400 {
  font-weight: 400 !important;
}

.flex-basis-25 {
  flex-basis: 25%;
}

.flex-basis-75 {
  flex-basis: 75%;
}

.flex-basis-65 {
  flex-basis: 65%;
}

.flex-basis-25 {
  flex-basis: 25%;
}

.sidebar-container {
  background: linear-gradient(to right, var(--bs-primary) 70%, transparent 30%);
}

.sidebar-menu {
  align-self: center;
  justify-content: space-around;
  color: white;
  font-size: 1.5rem;
}

.sb-button {
  width: 3rem;
  height: 3rem;
  text-align: center;
  border-radius: 15px;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.sb-button.active {
  color: var(--bs-primary);
  background-color: white;
}

.sb-button:hover {
  background-color: rgba(255, 255, 255, 0.302);
}

.sb-button.active:hover {
  background-color: white;
}

.sidebar-panel {
  box-shadow: 10px 0 20px rgba(0, 0, 0, 0.109);
  border-radius: 50px;
}

.sidebar-item {
  color: var(--bs-gray);
  text-wrap: pretty;
  margin-bottom: 2rem;
}

.sidebar-item.active {
  color: var(--bs-primary);
}

.sidebar-item.active:hover {
  color: var(--bs-primary);
}

.sidebar-item:hover {
  color: var(--bs-secondary);
}

.cursor-pointer {
  cursor: pointer;
}

.custom-dropdown {
  width: 5rem;
}

.dropdown-toggle {
  color: white !important;
}

.dropdown-item:active {
  background-color: var(--bs-primary);
}

.notification {
  border-radius: 15px !important;
  padding: 1rem;
}

.notification-success {
  background-color: #39d98a !important;
  background: #39d98a !important;
}

.notification-error {
  background-color: #ff5c5c !important;
  background: #ff5c5c !important;
}

.kpi-bg-gray {
  background-color: color-mix(in srgb, var(--bs-gray) 10%, transparent);
}

.kpi-bg-secondary {
  background-color: color-mix(in srgb, var(--bs-secondary) 10%, transparent);
}

.kpi-bg-accent {
  background-color: color-mix(in srgb, var(--bs-accent) 10%, transparent);
}

.fw-500 {
  font-weight: 500 !important;
}

/* bs override button */
.btn-danger {
  background-color: var(--bs-bg-danger) !important;
  color: var(--bs-danger) !important;
  border: none;
}