:root {
  --bs-primary: "#4F46E5";
  --bs-breadcrumb-divider: "\f105";
  --border-color: #E5E7EB;
}

body {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Satoshi-Variable', Helvetica, sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 36px;
  color: #4F46E5 !important;
}

/* border */
.border-color {
  border-color: var(--border-color) !important;
}

/* Font */
.font-satoshi {
  font-family: "Satoshi-Variable", Helvetica, sans-serif;
}

.fw-700 {
  font-weight: 700;
}

.fs-7 {
  font-size: 0.875rem;
}

.text-muted {
  color: #98A2B3 !important;
}

/** Input **/
input::placeholder {
  color: #999999 !important;
}

input:focus {
  border-color: #9795F9 !important;
  box-shadow: 0 0 0 0.1rem #9795F9 !important;
}

.form-control-lg {
  font-size: 0.875rem;
  padding: 0.8rem 1rem;
}

.btn-lg {
  padding: 0.8rem 1rem;
  font-weight: 700;
}

.btn {
  font-family: "Satoshi-Variable", Helvetica, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
}


/** Link **/
.link-muted {
  color: #4B5563;
  text-decoration: none;
}

/** Breadcrumb **/
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  content: var(--bs-breadcrumb-divider, ">");
  font-weight: 500;
  font-family: "FontAwesome";
  margin-right: 0.2rem;
}

.breadcrumb-item {
  margin-right: 0.2rem;
}

/** Card **/
.card {
  border-color: #E5E7EB;
}

.card .image-container {
  width: 290px;
  height: 200px;
  position: relative;
}

.card-img-top {
  width: 100%;
  height: 15vw;
  object-fit: contain;
}

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

/** Bav bar **/
.rounded-pill .nav-link {
  color: #4B5563;
  font-weight: 500;
}

.rounded-pill .nav-link.active {
  color: #4F46E5;
  font-weight: var(--bold-font-weight);
  background-color: #FFF;
  border-radius: 50rem;
}

/* Table */
table tr:last-child td {
  border-width: 0;
}

table thead th {
  background-color: #F9FAFB !important;
  font-weight: 700;
}


/* Dropdown */
.dropdown-menu {
  background-color: #FBFBFB;
  border: 1px solid #ced4da;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Customizing dropdown items */
.dropdown-item {
  padding: 8px 15px;
}

.dropdown-item:hover {
  background-color: #EEF2FF;
}


/* Search box */
.search-box {
  position: relative;
}

.search-box i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 25px;
  color: #999999;
}

.search-box input {
  background-color: #FBFBFB;
  height: 50px;
  padding-left: 55px;
}

/** Pagination **/
.pagination li.active a {
  background-color: #FFFFFF !important;
  border-color: #4F46E5 !important;
  color: #4F46E5 !important;
}

.pagination li a {
  margin: 0 6px;
  border-radius: 0.25rem;
}

.pagination li a.disabled {
  background-color: #FFF;
}