:root {
  --primary: #0043ca;
  --dark-primary: #103178;
  --text-dark-foreground: #f0f6ff;
  --secondary: #F09F35;
  --success: #198754;
  --danger: #ea5455;
  --warning: #ffc107;
  --info: #0dcaf0;
  --light: #f8f9fa;
  --dark: #212529;


}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu {
  height: fit-content !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu.custom-scrollbar::-webkit-scrollbar-thumb, .page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu.custom-scrollbar::-webkit-scrollbar {
  color: #EFDCB1 !important;
}
body {
  font-family: "Geist", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px !important;
}

p {
  font-size: 16px
}

/* login */
.login-page {
  height: 100vh;
}

.login-page__content {
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center
}

.login-form-wrapper {
  background-color: #C0DFFF;
}

.login-form {
  border-radius: 16px;
  width: 70%;
  padding: 3rem
}

.login-page__one {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form-control {
  font-size: 18px !important;
  padding: 12px 24px;
  height: 52px;
  border-radius: 12px;
  color: #001845;
}

/* page */
.page-wrapper .page-body-wrapper .page-body {
  margin-top: 96px;
}

/* profile */
.profile .box {
  position: relative;
  border: 1px solid #e9ebf0;
  border-radius: 16px;

  padding: 24px;
  overflow: hidden;


  .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }



  .profile-detail {
    position: relative;
    margin-top: 48px;

    img {
      width: 120px;
      aspect-ratio: 1/1;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid #fff;
    }
  }
}

/* btn */
.btn {
  padding: 12px 16px;
  border-radius: 16px;
}

.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.btn-secondary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
}

.btn-success {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}

.btn-danger {
  background-color: var(--danger) !important;
  border-color: var(--danger) !important;
}

.btn-warning {
  background-color: var(--warning) !important;
  border-color: var(--warning) !important;
}

.btn-info {
  background-color: var(--info) !important;
  border-color: var(--info) !important;
}

.btn-light {
  background-color: var(--light) !important;
  border-color: var(--light) !important;
  color: #000 !important;
}

.btn-dark {
  background-color: var(--dark) !important;
  border-color: var(--dark) !important;
}

/* card */
.card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0px 0px 0px rgba(0, 23, 117, 0.01),
    0px 1px 1px rgba(0, 23, 117, 0.01),
    0px 2px 2px rgba(0, 23, 117, 0.02),
    0px 3px 4px rgba(0, 23, 117, 0.03);

}

/* datatable */
div.dataTables_wrapper {
  font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

/* topbar/header */
.page-wrapper .page-main-header {
  background-color: #f5f7fb;
  box-shadow: none;
}

.page-wrapper .page-body-wrapper .page-header .breadcrumb .breadcrumb-item a {
  color: var(--primary);
}

.page-main-header .main-header-right .nav-right.right-menu ul.nav-menus>li {
  margin-right: 4px;
  padding: 0;

  &:hover {
    background-color: transparent;
  }

  .item {
    display: flex;
    overflow: hidden;
    width: 56px;
    height: 56px;
    /* background: white; */
    border-radius: 999px;
    justify-content: center;
    align-items: center;
  }
}

.page-main-header .main-header-right .nav-right .chat-dropdown {
  width: 330px;
  top: 72px;
  right: 9px;
  left: unset;
  border-radius: 16px;
  overflow: hidden;
}

.chat-dropdown.chat-dropdown.onhover-show-div .dropdown-content .dropdown-item a {
  color: #242934;
}

.chat-dropdown.chat-dropdown.onhover-show-div .dropdown-content .dropdown-item:hover {
  background-color: #f6fcff;
}

.chat-dropdown.chat-dropdown.onhover-show-div .dropdown-content .dropdown-item:hover a {
  color: var(--primary);
}

/* sidebar */
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu>li .nav-link.active,
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu>li .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.125);
  color: #e4eefc;
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .sidebar-main-title>div h6 {
  color: var(--text-dark-foreground);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav {
  background-color: var(--dark-primary);
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu>li .nav-link {
  color: var(--text-dark-foreground);
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu>li i {
  margin-right: 8px;
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu>li span {
  font-weight: 500;
}

.page-wrapper .page-main-header .main-header-right .main-header-left {
  background-color: var(--dark-primary);
  height: 98px;
  box-shadow: none;
  padding: 24px;
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .sidebar-user {
  border-bottom: 0;
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .sidebar-main-title>div {
  border-bottom: 0;
  margin-bottom: 0rem;
}


.page-main-header .main-header-right .toggle-sidebar:hover {
  background-color: rgba(255, 255, 255, 0.125);
}

.page-main-header .main-header-right .toggle-sidebar svg {
  color: white;
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu>li .nav-submenu li a {
  color: white;
  padding: 12px 24px;
  border-radius: 12px;
  margin-inline-start: 16px;
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu .dropdown ul.nav-submenu li:hover a {
  color: white;
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu .dropdown ul.nav-submenu li a.active {
  color: white;
  background-color: rgba(255, 255, 255, 0.125);
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu>li .nav-submenu li a:hover {
  background-color: rgba(255, 255, 255, 0.125);
}

.page-wrapper.compact-wrapper .page-body-wrapper .according-menu i {
  color: white;
}

.page-wrapper.compact-wrapper .page-body-wrapper .according-menu {
  top: 8px;
}