/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

[v-cloak] {
  display: none;
}
.badge:empty {
  display: inherit;
}

.modal-dialog-scrollable .modal-body {
  position: unset;
}

/* FAB button */

.btn-fab {
  position: fixed;
  width: 50px;
  height: auto;
  right: 20px;
  bottom: 20px;
}

.btn-fab div {
  position: relative;
  height: auto;
}

.btn-fab .btn {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  display: block;
  margin-bottom: 4px;
  width: 40px;
  height: 40px;
  margin: 4px auto;
}

.btn-fab .btn-main {
  width: 50px;
  height: 50px;
  right: 50%;
  margin-right: -25px;
  z-index: 9;
}

/* datalist autocomplete */
.autocomplete-results {
  position: absolute;
  padding-inline-start: 0;
  padding: 0;
  margin-top: 0.5rem;
  z-index: 99;
  width: calc(100% - 2rem);
  max-height: 20em;
  overflow-y: auto;
  font-size: 13px;
  list-style: none;
  background: #fff;
  outline: 1px solid #e4e7ea;
  outline-offset: -1px;
  border-radius: 6px;
}

.c-dark-theme .autocomplete-results {
  background: #3d3e47;
  outline-color: rgba(255, 255, 255, 0.09);
}

.autocomplete-item {
  display: block;
  width: 100%;
  padding: 0.5rem;
  overflow: hidden;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background-color: inherit;
  border: 0;
}

.autocomplete-item:hover {
  background-color: #7367f0;
  color: #fff;
}

.autocomplete-item:hover > * {
  color: #fff;
}

.autocomplete-item:hover .text-muted {
  color: #ffffffd1 !important;
}

/* end autocomplete */

/* glass effect */
.glass {
  border: none;
  backdrop-filter: blur(var(--glass-blur, 40px));
  background-color: transparent;
  background-image: linear-gradient(
      135deg,
      rgb(255 255 255 / var(--glass-opacity, 30%)) 0,
      rgb(0 0 0 / 0) 100%
    ),
    linear-gradient(
      var(--glass-reflex-degree, 100deg),
      rgb(255 255 255 / var(--glass-reflex-opacity, 10%)) 25%,
      rgb(0 0 0 / 0) 25%
    );
  /* box-shadow: 0 0 0 1px rgb(255 255 255 / var(--glass-border-opacity,10%)) inset,0 0 0 2px rgb(0 0 0 / 5%); */
  box-shadow: none !important;
  text-shadow: 0 1px rgb(0 0 0 / var(--glass-text-shadow-opacity, 5%));
}

.input-transparent {
  background-color: rgba(0, 0, 0, 0) !important;
  /* color: black; */
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  height: inherit !important;
}

.input-transparent:focus {
  box-shadow: inherit !important;
}

/* Float Button */
.float-action {
  position: fixed;
  display: inline-block;
  bottom: 1rem;
  right: 1rem;
}

.float-action > button {
  width: 4rem;
  height: 4rem;
}

/* collapse timeline */
.collapse-abs-reverse {
  position: absolute;
  flex-direction: column-reverse;
  width: 100%;
  left: 0px;
  bottom: 0rem;
  padding: 1.5rem;
  background-color: rgb(255, 255, 255);
  z-index: 2;
  margin-bottom: 0px;
  border-width: 0px !important;
  border-top-width: 2px !important;
}

/* DataTable */

div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_length label {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

div.dataTables_wrapper .dataTables_info {
  padding-top: 0rem !important;
}

.filtDT > * {
  display: inline-block;
  margin-right: 5px;
}

.filtDateRange {
  padding: 0.6rem;
  border-radius: 0.357rem;
  border: 1px solid #d8d6de;
  cursor: pointer;
}

.card {
  margin-bottom: 1rem !important;
}

.modal.right .modal-dialog {
  transform: translate(10px, 0) !important;
  margin-right: 5px !important;
  margin-top: 5px !important;
}

.horizontal-layout.navbar-floating:not(.blank-page) .app-content {
  padding: calc(6rem) 0rem 0 !important;
}

.horizontal-menu .horizontal-menu-wrapper {
  position: static !important;
  top: 0 !important;
  padding-top: 0.25rem;
}
.horizontal-menu .horizontal-menu-wrapper.sticky {
  position: fixed !important;
}

.header-navbar.floating-nav {
  position: -webkit-static !important;
  position: static !important;
  top: 0 !important;
}

.vertical-overlay-menu .main-menu .navigation li.has-sub > a:after {
  top: auto !important;
}