:root {
    --primary:#F9B521;
    --secondary: #fff;
    --font:#13191D;
    --fontRGB: rgba(19,25,29,0.3);
    --radius: 0.375rem;
}

.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-font { background-color: var(--font); }
.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-font { color: var(--font); }

*::-webkit-scrollbar {
    width: 7px;
}
*::-webkit-scrollbar-track {
    background: #f1f1f1;
}
*::-webkit-scrollbar-thumb {
    background: var(--fontRGB);
    border-radius: 5px;
    border:1px solid white;
}
* {
    scrollbar-width: thin;
}
* {
    scrollbar-color: #888 #f1f1f1;
}

/*--------------------------*/

.main-menu::-webkit-scrollbar {
    width: 7px;
}
.main-menu::-webkit-scrollbar-track {
    background: var(--font);
}
.main-menu::-webkit-scrollbar-thumb {
    background: #3a474e;
    border-radius: 5px;
    border:1px solid #3a474e;
}
.main-menu {
    scrollbar-width: thin;
}
.main-menu {
    scrollbar-color: #888 rgb(87, 87, 87);
}


/*--------------------------*/

/* toggle-pill-color */
.toggle-pill-color input[type="checkbox"] {
  display: none;
}
.toggle-pill-color input[type="checkbox"] + label {
  display: block;
  position: relative;
  width: 3em;
  height: 1.6em;
  margin-bottom: 20px;
  border-radius: 1em;
  background: lightgrey;
  box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-transition: background 0.1s ease-in-out;
  transition: background 0.1s ease-in-out;
}
.toggle-pill-color input[type="checkbox"] + label:before {
  content: "";
  display: block;
  width: 1.2em;
  height: 1.2em;
  border-radius: 1em;
  background: #fff;
  box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 0.2em;
  top: 0.2em;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.toggle-pill-color input[type="checkbox"]:checked + label {
  background: var(--primary);
}
.toggle-pill-color input[type="checkbox"]:checked + label:before {
  box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.2);
  left: 1.6em;
}
/* toggle-pill-color end */

/*----DATATABLES----*/
table {
    width: 100%;
}
table td {
    padding: 8px 0 8px 8px;
}

.datatable {
    padding: 25px;
    width: 100%;
    z-index:1;
    position: relative;
}
.datatable input,
.datatable select {
    border:1px solid var(--primary);
    border-radius: var(--radius);
    font-size: 10pt;
    font-weight: 500;
}
.datatable input:disabled,
.datatable select:disabled {
    border:1px solid lightgrey;
    border-radius: var(--radius);
    background-color: #eeeeee;
}
.datatable input {
    width: 100%;
    padding: 4px 7px;
}
.datatable button.btn-secondary {
    background-color: var(--font);
    color: white;
    padding: 10px;
    border:0;
}
.datatable button.btn-secondary:hover {
    background-color: var(--primary);
    color: var(--font);
}
/* .datatable a,.datatable a:hover,.datatable a:focus {
    color: initial;
} */
.datatable .previous a,
.datatable .next a{
    border: 0;
    background-color: transparent;
}
.datatable .active a.page-link {
    background-color: var(--font) !important;
    border:0;
    color: white;
}
.datatable .datatable-top {
    display:flex;
    justify-content: flex-end;
}
.datatable thead tr th,
.datatable tfoot th {
    padding: 10px 8px;
}
.datatable thead tr:first-child th {
    background-color: var(--font);
    color:white;
}
.datatable thead tr:first-child th .datatable-sorter::before {
    border-top: 4px solid white;
    opacity:0.5;
    bottom:3px;
}
.datatable thead tr:first-child th .datatable-sorter::after {
    border-bottom: 4px solid white;
    opacity:0.5;
    top:3px;
}
.datatable td button {
    padding: 2px 6px;
}
.datatable td button i {
    font-size:10pt;
}
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before {
    background-color: var(--font) !important;
}
.datatable .pagination {
  display: flex;
  gap: 10px;
}
.datatable .pagination a.page-link {
  padding: 1px 8px 3px;
  border-radius: 50px;
  background-color: lightgrey;
}
.datatable .pagination .previous a.page-link,
.datatable .pagination .next a.page-link {
  background-color: transparent;
  color: rgb(185, 185, 185);
}

/*-----------BUTTONS-----------*/
.button-primary,
.button-secondary {
    background-color: var(--primary);
    border:0;
    border-radius: var(--radius);
    color: var(--font);
    padding: 5px 15px;
    font-weight: 600;
    cursor: pointer;
}
.button-primary:hover,
.button-form:hover,
.button-form2:hover,
.button-secondary:hover {
    opacity:0.7;
}
.button-form,
.button-form2 {
    background-color: lightgrey;
    border:0;
    border-radius: var(--radius);
    color: var(--font);
    padding: 5px 13px;
    font-weight: 600;
    cursor: pointer;
}
.button-form2 {
    background-color: #E5E7EB;
}
a.button-primary,
a.button-form,
a.button-form2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-secondary {
    background-color: var(--font);
    color:white;
}
/*--------CARDS-----------*/

.card-1 {
    background-color: var(--primary);
    padding: 3px 7px;
    border-radius: var(--radius);
}
.card-2 {
    background-color: rgb(127, 255, 127);
    padding: 3px 7px;
    border-radius: var(--radius);
}
.card-3 {
    background-color: rgb(255, 127, 53);
    padding: 3px 7px;
    border-radius: var(--radius);
}
.card-1:hover,
.card-2:hover,
.card-3:hover {
    opacity: 0.7;
}

/*--------CARDS SERVICES-----------*/

.card-s {
    background-color: var(--primary);
    padding: 1px 3px;
    font-weight: 500;
    border-radius: var(--radius);
}
.card-n {
    background-color: lightgrey;
    padding: 1px 3px;
    color: rgb(179, 179, 179);
    border-radius: var(--radius);
}

/*--------FORM---------*/
.input,.input-search,.input-currency {
    border: 2px solid lightgrey;
    border-radius: var(--radius);
    padding: 5px 10px;
}
.input-search {
    padding-left: 2.5rem;
}
.input-currency {
    padding-left: 1.7rem;
}
.input:focus,
.input-search:focus,
.input-currency:focus {
    border: 2px solid var(--primary);
}

@media (max-width: 700px) {
    .datatable {
        padding: 0;
    }
}

/*------------------------*/ 
.img-preview {
    width: 150px;
    height: 150px;
}
.img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-image,
.profile-image-g {
    width: 40px;
    height: 40px;
    display: block;
    border-radius: 25px;
    background-color: white;
}
.profile-image-g {
    width: 180px;
    height: 180px;
    border-radius: 15px;
}
.profile-image img,
.profile-image-g img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

.tooltip-container {
  position: relative;
}

.tooltip-trigger:hover {
    background-color: var(--primary);
}

.tooltip-trigger:hover::before {
  content: attr(title);
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  z-index: 1;
  top: -30px; /* Ajusta la posición vertical del tooltip */
  left: 0; /* Ajusta la posición horizontal del tooltip */
  white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
  display: block;
}

/* Ocultar el input file */
.no-count {
  display: none;
}
.w100 {
    width: 100%;
}
.h100 {
    height: 100%;
}
.icon-download {
    font-size: 13pt;
    color: #2164ff;
    cursor:pointer;
    margin-top:5px;
}
.icon-download:hover {
    color: var(--primary);
}
.icon-download:active {
    color: var(--font);
}
.disabled {
    pointer-events: none;
}
.select-disabled option{
    pointer-events: none;
}
.indent0 {
    margin-left: 10px;
    color:black;
}
.indent1 {
    margin-left: 20px;
    color: blue;
}
.indent2 {
    margin-left: 30px;
    color:darkred;
}
.indent3 {
    margin-left: 40px;
    color:purple;
}
.text-muted {
    color: rgb(165, 165, 165);
    font-size: 10pt;
}