body {
  font-family: Arial, sans-serif !important;
}

.navbar-bg {
  background: rgb(64, 170, 241) !important;
}

.profile-image {
  height: 100px !important;
  width: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

#sidebar {
  background: rgb(64, 170, 241) !important;
  color: #fff;
  border: none !important;
  height: 100vh !important;
  width: 250px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 100;
  transition: transform 0.3s ease !important;
  display: block !important;
}

.bg-yellow-pink {
  background: linear-gradient(
    45deg,
    rgb(20, 143, 224),
    rgb(3, 209, 236)
  ) !important;
}

.form-select,
.form-control:focus {
  box-shadow: none !important;
}

.accordion-button {
  background-color: rgb(27, 160, 236) !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease !important;
}
/*
.toast {
  background-color: #cc0000 !important;
  color: white !important;
  border: 1px solid #ff4d4d !important;
}
*/
.toast-success {
  background-color: #198754 !important;
}
.toast-error {
  background-color: #be0404 !important;
}
.toast-info {
  background-color: #0dcaf0 !important;
}
.toast-warning {
  background-color: #f0ad4e !important;
}
.accordion-body {
  background-color: rgb(27, 160, 236) !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.accordion-body .list-group-item {
  background-color: rgb(27, 160, 236) !important;
  color: #fff !important;
  border: none !important;
}

.accordion-body .list-group-item:hover {
  color: #fff !important;
}

.accordion-button:not(.collapsed) {
  background: linear-gradient(
    45deg,
    rgb(20, 143, 224),
    rgb(3, 209, 236)
  ) !important;
  color: #fff !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed)::after {
  filter: invert(1) !important;
}

.accordion-button:focus {
  box-shadow: none !important;
  outline: none !important;
}

.offcanvas {
  width: 220px !important;
}

#page-content-wrapper {
  margin-left: 250px !important;
}

@media (max-width: 991px) {
  #page-content-wrapper {
    margin-left: 0 !important;
  }

  #sidebar {
    display: none !important;
    background: rgb(64, 170, 241) !important;
    color: #fff;
  }

  .modal-backdrop {
    z-index: 0 !important;
  }

  .offcanvas-body,
  .offcanvas-header {
    background-color: rgb(27, 160, 236) !important;
    color: #fff;
  }
}

::-webkit-scrollbar {
  width: 12px !important;
}

::-webkit-scrollbar-thumb {
  background-color: #888 !important;
  border-radius: 10px !important;
  border: 2px solid #fff !important;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555 !important;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1 !important;
}

* {
  scrollbar-width: thin !important;
  scrollbar-color: #888 #f1f1f1 !important;
}

html {
  scroll-behavior: smooth !important;
}