@charset "UTF-8";

#wrapper {
  overflow-x: hidden;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  transition: margin 0.25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#sidebar-wrapper .nav {
    width: 14rem;
  }

#page-content-wrapper {
  min-width: 100vw;
}

body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  body.sb-sidenav-toggled #wrapper #sidebar-wrapper {
    margin-left: -14rem;
  }

}

#overlay_cargando {
  position: fixed; /* Sit on top of the page content */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
 }

 
 #overlay, #overlay_progress {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
  }

#overlay_text, #overlay_progress_text{
  position: absolute;
  top: 40%;
  left: 50%;
  font-size: 20px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  }  

  #overlay_progress_bar{
    position: relative;
    top: 50%;
    left: 25%;
    width: 50%;
    }  

  .bootstrap-table .page-item.active .page-link {
    background-color: white !important;
    border: 1px solid #6C757D !important;
    color:#6C757D !important;
  }
  
  .bootstrap-table .page-item.active:hover .page-link {
    background-color: #6C757D !important;
    color: white !important;
  }

  .mark, mark {
    background-color: #f7f771 !important;
  }

/* **********************************************************
/* SWEETALERT TOAST  
/* **********************************************************/

.colored-toast.swal2-icon-success {
  background-color: #a5dc86 !important;
}

.colored-toast.swal2-icon-error {
  background-color: #f27474 !important;
}

.colored-toast.swal2-icon-warning {
  background-color: #f8bb86 !important;
}

.colored-toast.swal2-icon-info {
  background-color: #3fc3ee !important;
}

.colored-toast.swal2-icon-question {
  background-color: #87adbd !important;
}

.colored-toast .swal2-title {
  color: white;
}

.colored-toast .swal2-close {
  color: white;
}

.colored-toast .swal2-html-container {
  color: white;
}

/* Numerico alineado a la derecha */
.input-money,.input-money-negative, .input-integer {text-align: right;}

/* badge buttons */
.badge-sm {
  /*min-width: 1.8em;
  padding: .25em !important;
  margin-left: .1em;
  margin-right: .1em;
  color: white !important;*/
  cursor: pointer;
}

.btn-sml { 
  height: 4vh; 
  padding-top: 0;
  padding-bottom: 0;
  width: fit-content;
}

/* table header fixed */
.tableFixHead          { overflow: auto; min-height: 100px; }
.tableFixHead thead th { position: sticky; top: 0; z-index: 1; }

/* table column auto width */
table.table-fit {
  width: auto !important;
  table-layout: auto !important;
}
table.table-fit thead th,
table.table-fit tbody td,
table.table-fit tfoot th,
table.table-fit tfoot td {
  /* width: auto !important; */
  min-width: auto  !important;
}

.swal-columns-order-height {
  height: 70vh;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: var(--bs-nav-pills-link-active-color) !important;
  background-color: var(--bs-nav-pills-link-active-bg) !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search {
    background-color: black;
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #000000;
    background-color: rgb(247, 243, 243);
}

.select2-container--bootstrap-5 .select2-dropdown {
    width: 50vw  !important; /* Ancho deseado */
}