.header-navbar
  .navbar-container
  ul.nav
  li.dropdown-user
  .dropdown-menu-right
  .dropdown-item:hover,
.header-navbar
  .navbar-container
  ul.nav
  li.dropdown-user
  .dropdown-menu-right
  .dropdown-item:active {
  background: #6b34ab;
}

#main-menu-navigation .nav-item:hover {
  background: #5649de;
  margin: 5px 20px;
  border-radius: 10px;
}

html body.bg-full-screen-image {
  background: url(/assets/backend/images/pages/vuesax-login-bg.jpg) no-repeat
    center center;
  background-size: cover;
}

.has-icon-left .form-control-position {
  top: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swal-modal {
  border-radius: 30px;
  width: 370px;
}

.main-menu.menu-dark .navigation > li > ul {
  background: unset;
}

.main-menu.menu-dark .navigation > li.open > a,
.main-menu.menu-dark .navigation > li.sidebar-group-active > a {
  background: #5649de;
}

.swal-text {
  text-align: center;
}

.dataTables_filter {
  display: none;
}

.dt-buttons.btn-group {
  margin-bottom: 20px;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #ddd;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: unset;
}

.pagination .page-item.active .page-link {
  background-color: unset;
  color: unset;
}

table.dataTable thead th.ui-state-default,
table.dataTable tfoot th.ui-state-default {
  text-align: center;
}

.yadcf-filter-wrapper-inner {
  border: unset;
}

.yadcf-filter-wrapper {
  margin-top: 5px;
  display: block;
}

thead th.ui-state-default {
  background-image: linear-gradient(to top, #dedede 0%, #ffffff 74%);
}

button .fa {
  padding: 4px;
}

.yadcf-filter-range-date {
  padding-left: 5px;
  height: 27px;
}

.yadcf-filter-reset-button {
  height: 24px;
}

.yadcf-filter-reset-button i {
  color: #7d7d7d;
}

button.mb-1 {
  margin-bottom: 0.5rem !important;
}

.inuse,
.ui-slider-range .inuse,
.yadcf-filter-range-number-slider .inuse {
  background: #fff8ea;
}

.dataTables_length {
  display: none;
}

.dropdown.dropdown-user.nav-item {
  display: flex;
}

/* Loader */
.loader-screen {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 999999;
  background-color: rgba(255, 255, 255, 0.79) !important;
}

.loader-screen img {
  width: 250px;
}

.laoderhorizontal {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}

.laoderhorizontal div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #808080;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.laoderhorizontal div:nth-child(1) {
  left: 6px;
  animation: laoderhorizontal1 0.6s infinite;
}

.laoderhorizontal div:nth-child(2) {
  left: 6px;
  animation: laoderhorizontal2 0.6s infinite;
}

.laoderhorizontal div:nth-child(3) {
  left: 26px;
  animation: laoderhorizontal2 0.6s infinite;
}

.laoderhorizontal div:nth-child(4) {
  left: 45px;
  animation: laoderhorizontal3 0.6s infinite;
}

@keyframes laoderhorizontal1 {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes laoderhorizontal3 {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(0);
  }
}

@keyframes laoderhorizontal2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(19px, 0);
  }
}

.header-navbar .search-input .search-input-close i {
  color: #b5b5b5;
}

.three-row {
  display: block;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 60px;
  line-height: 20px;
}

.main-menu.menu-dark .navigation > li .active {
  background: #7367f0;
  border-radius: 10px;
}

.main-menu.menu-dark .navigation > li .active:hover {
  background: unset;
}

.btn-group.action button {
  width: 65px;
  padding: 8px 5px;
}

.btn.status {
  width: 85px;
  padding: 0;
}

.table-responsive::-webkit-scrollbar {
  -webkit-appearance: none;
}

.table-responsive::-webkit-scrollbar:vertical {
  width: 12px;
}

.table-responsive::-webkit-scrollbar:horizontal {
  height: 12px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 2px solid #ffffff;
}

.table-responsive::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff;
}

.input-group-text {
  padding: 0 15px !important;
}

.form-group.error .input-group {
  margin-bottom: 5px;
}

.help-block {
  margin-top: 8px;
}

.menu-title,
.menu-item {
  font-size: 13px;
}

.yadcf-filter {
  border: 1px solid white;
}
.yadcf-filter-reset-button {
  border: 1px solid #f0f0f0;
}

.yadcf-filter-range-date {
  border: 1px solid white;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu {
  width: 235px;
}

html body .content {
  margin-left: 235px;
}

.main-menu .navbar-header {
  width: 235px;
}

.header-navbar.floating-nav {
  width: -webkit-calc(100% - -webkit-calc(2.2rem * 2) - 235px);
  width: -moz-calc(100% - -moz-calc(2.2rem * 2) - 235px);
  width: calc(100% - calc(2.2rem * 2) - 235px);
}

.main-menu.menu-dark .navigation li a {
  padding: 8px 15px;
}

.main-menu .navbar-header .navbar-brand .brand-text {
  font-size: 1rem;
}

.main-menu.menu-dark .navigation li a {
  padding: 8px 15px;
}

body.vertical-layout.vertical-menu-modern
  .main-menu
  .navigation
  .menu-content
  > li
  > a
  > i {
  margin-right: 0.3rem;
}

tbody tr td {
  font-size: 12px;
}