/* Add here all your CSS customizations */
.btn-header {
  margin-bottom: -10px;
  margin-top: -3px;
}

body {
  background-color: #f3f4f6;
}

.sidebar-left .sidebar-header .sidebar-toggle:hover i {
  /* color: #fff; */
  color: #2d7a89ff;
}

.page-header {
  background-color: transparent;
  border-bottom: none;
  box-shadow: none;
  border-left: none;
}

.page-header h2 {
  color: #111827;
}

@media only screen and (min-width: 768px) {
  html.fixed .page-header {
    /* left: 0;
    margin: -40px -40px 40px -40px; */
    background-color: #f3f4f6;
    background-color: #deebebff;
  }
}

.sidebar-left {
  background-color: transparent;
  background-color: #f3f4f6;
  background-color: #deebebff;
}

.sidebar-left .sidebar-header .sidebar-title {
  /* background: transparent; */
  background-color: #f3f4f6;
  background-color: #deebebff;
  color: #465162;
  color: #111827;
}

html.no-overflowscrolling .sidebar-left .nano {
  background-color: transparent;
  background-color: #f3f4f6;
  background-color: #deebebff;
  /* box-shadow: none; */
  box-shadow: -5px 0 0 #f3f4f6 inset;
  box-shadow: -5px 0 0 #deebebff inset;
}

ul.nav-main > li > a:hover,
ul.nav-main > li > a:focus {
  background-color: transparent;
  background-color: #f3f4f6;
}

ul.nav-main > li.nav-active > a:hover {
  color: #fff;
  opacity: 0.8;
  background-color: #2d7a89ff;
}

.nav-link:hover,
.nav-link:focus {
  /* color: transparent; */
  color: #2d7a89ff;
}

ul.nav-main > li.nav-active > a {
  /* box-shadow: none; */
  box-shadow: 2px 0 0 #2d7a89ff inset;
  background-color: #2d7a89ff;
  color: #fff;
}

ul.nav-main li a {
  color: #687280;
  color: #111827;
}

ul.nav-main {
  margin-right: 0;
}

.btn-primary {
  background-color: #2d7a89ff;
}

.sidebar-left .sidebar-header .sidebar-toggle i {
  color: #111827;
}

ul.nav-main li.nav-parent > a:after {
  color: #111827;
}

ul.nav-main > li.nav-active > a::after {
  color: #fff;
}

ul.nav-main li .nav-children {
  background: #f3f4f6;
  box-shadow: 0px -3px 3px -3px #f3f4f6 inset;
}

ul.nav-main li .nav-children li a:hover,
ul.nav-main li .nav-children li a:focus {
  background: #f3f4f6;
  color: #2d7a89ff;
}

/* SCROLL */
html.no-overflowscrolling .nano > .nano-pane > .nano-slider {
  background: #0f766b;
}

/* desglosable  */
ul.nav-main li .nav-children li.nav-active > a {
  color: #2d7a89ff;
}

ul.nav-main > li.nav-expanded > a {
  background-color: #2d7a89ff;
  color: #f3f4f6;
}

ul.nav-main > li.nav-expanded > a::after {
  color: #f3f4f6;
}

/* border blue  */
.page-header h2 {
  border-bottom: none;
}

.btn-info {
  background-color: #14b8a6ff;
  border-color: #14b8a6ff #14b8a6ff #14b8a6ff;
  color: #fff;
}

.btn-info:hover,
.btn-info.hover {
  background: #14b8a6ff;
  border-color: #14b8a6ff #14b8a6ff #14b8a6ff;
  opacity: 0.8;
  color: #fff;
}

.btn:hover {
  opacity: 0.8;
}

.btn-default {
  background-color: #1bcb5dff;
  color: #fff;
}

.btn-default:hover,
.btn-default:active,
.btn-default:focus {
  opacity: 0.8;
  background-color: #1bcb5dff;
  border-color: #1bcb5dff #1bcb5dff #1bcb5dff;
  color: #fff;
}

.btn-danger {
  background-color: #da2e2eff;
  border-color: #da2e2eff #da2e2eff #da2e2eff;
  color: #fff;
}

.btn-return {
  width: 80px;
  border-radius: 0.25rem;
  border: 1px solid #da2e2eff;
  color: #da2e2eff;
  background-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-return:hover {
  opacity: 0.8;
  color: white;
  background-color: #da2e2eff;
}

html .btn-secondary {
  background-color: #2563eb;
  border-color: #2563eb #2563eb #2563eb;
  color: #fff;
}

html .btn-secondary:hover,
html .btn-secondary.hover {
  background: #2563eb;
  border-color: #2563eb #2563eb #2563eb;
  opacity: 0.8;
  color: #fff;
}

/* my classes */
.btn-document {
  background-color: #0d9484;
  border-color: #0d9484 #0d9484 #0d9484;
  color: #fff;
}

.btn-document:hover,
.btn-document.hover {
  background: #0d9484;
  border-color: #0d9484 #0d9484 #0d9484;
  opacity: 0.8;
  color: #fff;
}

.header .toggle-sidebar-left {
  background: #14b8a6ff;
}

.table-container {
  overflow-x: auto;
  width: 100%;
  margin: 20px 0;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  /* border-collapse: separate; */
  border-collapse: collapse;
  border-spacing: 0;
  background-color: #f9fafb;
  text-align: left;
  min-width: 600px;
}

th,
td {
  padding: 12px 15px;
  border-bottom: 2px solid #d1d5db;
  border-right: 1px solid #e5e7eb;
  vertical-align: middle;
}

th:last-child,
td:last-child {
  border-right: none;
}

th {
  background-color: #0f766b;
  color: white;
}

tr:nth-child(even) {
  background-color: #f1f5f9;
}

tr:last-child td {
  border-bottom: none;
}

/* Responsive */
@media (max-width: 768px) {
  table {
    font-size: 14px;
  }

  th,
  td {
    padding: 8px 10px;
  }

  td {
    white-space: nowrap;
  }
}
/* 
@media (max-width: 576px) {
  th:nth-child(2),
  td:nth-child(2) {
    display: none;
  }
} */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.userbox .dropdown-menu a:hover {
  background: #0d9484;
}

.btn-close-service,
.btn-close-service:hover {
  background-color: transparent;
  border: #0d9484 solid 1px;
  color: #0d9484;
  cursor: default;
  opacity: 1;
}

/* .btn-close-service:hover {
  background-color: #0d9484 ;
  border: #0d9484 solid 1px ;
  color: #fff ;
} */

form .row {
  margin-bottom: 1rem;
}

@media screen and (width <= 800px) {
  form .row {
    gap: 1rem;
  }

  .btn-2 {
    flex-direction: column;
  }
}

@media screen and (width <= 900px) {
  .btn-2 {
    flex-direction: column;
  }
}