body::-webkit-scrollbar {
    -webkit-appearance: none;
}
input:focus {
  outline: none!important;
}
.form-control:focus {
  outline: none!important;
}
body::-webkit-scrollbar:vertical {
    width:10px;
}
.awesomplete{
    width:75%!important;
}
.form-check-input:checked {
    background-color: #59d192!important;
    border-color: #59d192!important;
}
    #tabla2 thead th {
    /* Agrega un margen superior para posicionar el encabezado en y=56px */
    margin-top: 56px;
}
html{
  scroll-behavior: smooth;
}
.form-check-input{
    cursor:pointer;
}


#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #59d192!important;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



input:focus {
            box-shadow: none!important; /* Elimina la sombra de enfoque */
            border-color: #ced4da!important; /* Establece el color del borde de enfoque */
        }
body::-webkit-scrollbar-button:increment,body::-webkit-scrollbar-button {
    display: none;
} 

body::-webkit-scrollbar:horizontal {
    height: 10px;
}

body::-webkit-scrollbar-thumb {
    background-color: #59d192;
    border-radius: 20px;
    border: 2px solid #59d192;
}

body::-webkit-scrollbar-track {
    border-radius: 10px;  
}

section::-webkit-scrollbar {
    -webkit-appearance: none;
}

section::-webkit-scrollbar:vertical {
    width:10px;
}

section::-webkit-scrollbar-button:increment,section::-webkit-scrollbar-button {
    display: none;
} 

section::-webkit-scrollbar:horizontal {
    height: 10px;
}

section::-webkit-scrollbar-thumb {
    background-color: #59d192;
    border-radius: 20px;
    border: 2px solid #59d192;
}

section::-webkit-scrollbar-track {
    border-radius: 10px;  
}

.navbar-right::-webkit-scrollbar {
    -webkit-appearance: none;
}

.navbar-right::-webkit-scrollbar:vertical {
    width:10px;
}

.navbar-right::-webkit-scrollbar-button:increment,.navbar-right::-webkit-scrollbar-button {
    display: none;
} 
.input-form{
    width:100%;
    border:none;
    outline:none;
    background-color:#fff;
    height:48px;
}
.input-option-form{
    width:100%;
    border:none;
    outline:none;
    background-color:#fff;
    height:30px;
}
.textarea-form{
    width:100%;
    border:none;
    outline:none;
    background-color:#fff;
    height:60px;
}
.navbar-right::-webkit-scrollbar:horizontal {
    height: 10px;
}
.number-form{
    padding-top:2px;
    text-align: center;
    width:30px;
    height:30px;
    color:#fff;
    background-color:#8379aa;
}
.btn-lock-form{
    background-color:#e6e6e6;
    border:none;
    text-align:center;
    padding:6px;
}
.add-pay{
    border:1px solid #8379aa;
    background-color:#fff;
    color:#8379aa;
}
.save{
    border:1px solid #8379aa;
    background-color:#8379aa;
    color:#fff;
}
.btn-download{
    border:none;
    background-color:#8379aa;
    border-radius:15px;
    padding:1px 30px;
    color:#fff;
}
.btn-upload{
    border:1px solid #8379aa;
    background-color:#fff;
    border-radius:15px;
    padding:1px 46px;
    color:#8379aa;
}
.color-white{
    color:#fff;
}
.navbar-right::-webkit-scrollbar-thumb {
    background-color: #59d192;
    border-radius: 20px;
    border: 2px solid #59d192;
}

.navbar-right::-webkit-scrollbar-track {
    border-radius: 10px;  
}
.font-weight-bold{
    font-weight:bold;
}
.navbar-right-btn{
    margin-right:10px;
    cursor:pointer;
}
.bold{
    font-weight:bold;
}
.color-letter-form{
    color:#606060;
}
#nav{
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 99;
    background-color: #59d192!important;
}
.content{
    margin-top:50px;
    margin-left:25px;
}
.table.table-hover {
  width: auto !important;
  table-layout: auto !important;
}

/* Establecer un ancho máximo para las celdas de la tabla */
.table.table-hover td, .table.table-hover th {
  max-width: none !important;
  width: auto !important;
  white-space: nowrap; /* Evita que el contenido se rompa en múltiples líneas */
}
section{
    margin-top:56px;
    overflow:auto;
    padding:25px;
    height: 95vh;
    background-color: #4e4a66;
    width: 350px;
    position: fixed;
    z-index: 1000000;
}
.hide{
    display:none!important;
    transition:1s;
}
.pointer{
    cursor:pointer;
}
.navbar-right-tittle{
    font-size: 18px;
    font-weight: bold;
    padding: 20px 0;
}
.text-center{
    text-align:center;
}
.disabled-color{
    color:#999999;
}
.color-green{
    color:#59d192!important;
    cursor:pointer;
}
.color-grey{
    background-color:#e6e6e6!important;
}
.color-purple{
    color:#8379aa!important;
}
.bc-purple{
    background-color:#8379aa!important;
}
input::placeholder {
    padding-left: 0px; /* Agrega padding al lado izquierdo del texto del placeholder */
    /* Otros estilos personalizados para el placeholder, como color y tamaño de fuente */
    color: #8379aa;
}
textarea::placeholder {
    padding-left: 0px; /* Agrega padding al lado izquierdo del texto del placeholder */
    /* Otros estilos personalizados para el placeholder, como color y tamaño de fuente */
    color: #8379aa;
}
.br-15{
    border-radius:15px;
}
.option-purple-content{
    padding: 10px 20px;
    
}
.b-b{
    border-bottom:1px solid #fff;
}
.cf{
    color:#fff;
}
th{
    padding-left: 20px!important;
    padding-right: 20px!important;
}
td{
    padding-left: 20px!important;
    padding-right: 20px!important;
}
.navbar-right-options{
    display:flex;
    justify-content:space-between;
    padding: 10px 15px;
}
.navbar-right-subtittle{
    padding: 10px 15px;
    background-color:#8379aa;
}
.fa-toggle-on{
    color:#59d192!important;
    cursor:pointer;
}
.fa-toggle-off{
    color:#999999!important;
    cursor:pointer;
}
.table {
    --bs-table-hover-bg: #8379aa;
    --bs-table-hover-color: #fff;
    --bs-table-border-color: #c5cce0;
}
.table-btn-view{
    border: 1px solid #8379aa;
    background-color: #fff;
    border-radius: 15px;
    padding: 0px 40px;
}
.form-btn-view{
    border: 1px solid #8379aa;
    background-color: #fff;
    border-radius: 30px;
    padding: 0px 40px;
}
.btn-add{
    border: 1px solid #8379aa;
    background-color: #fff;
    border-radius: 15px;
    color:#8379aa!important;
    padding: 0px 10px;
    font-size: 13px;
}
.table-btn-doc{
    border: 1px solid #8379aa;
    background-color: #fff;
    border-radius: 15px;
    padding: 0px 30px;
}
.toggle-element {
  transform: translateX(0); /* La posición inicial no se ha trasladado en el eje X */
  transition: transform 0.3s ease; /* Agrega una transición de traslado suave */
}
.hidden {
  transform: translateX(-100%);
}
.toggle-element:not(.hidden) {
  transition: transform 0.3s ease; /* Agrega una transición de traslado solo cuando no tiene la clase .hidden */
}

.navbar-right{
    padding: 25px;
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    height: 100%;
    background-color: #fff;
    transition: right 0.3s ease;
    overflow:auto;
}
.content-navbar-right{
    margin-top: 56px;
}
.toggle-element-right {
  transform: translateX(0); /* La posición inicial no se ha trasladado en el eje X */
  transition: transform 0.3s ease; /* Agrega una transición de traslado suave */
}
.hidden-right {
  transform: translateX(100%);
}
.toggle-element-right:not(.hidden) {
  transition: transform 0.3s ease; /* Agrega una transición de traslado solo cuando no tiene la clase .hidden */
}
.mostrar-navbar {
    right: 0;
}
.text-right{
    text-align:right;
}
.bar-purple{
    width: 100%;
    height: 40px;
    background-color: #8379aa;
    color:#fff;
    padding: 8px 15px 0 15px;
}
.color-letter-right{
    color:#4d4d4d;
}
.color-letter-right-light{
    color:#fff;
}
.suboption-right{
    width: 100%;
    height: 30px;
    padding: 6px 15px 27px 15px;
    border-bottom: 1px solid #8379aa;
}
.btn-green{
    border:none;
    margin-top: 20px;
    width: 100%;
    height: 40px;
    background-color: #59d192;
    color: #fff;
    text-align: center;
}
.btn-purple{
    border:none;
    margin-top: 20px;
    width: 100%;
    height: 40px;
    background-color: #8379aa;
    color: #fff;
    text-align: center;
}
.profile-circle{
    color:#fff!important;
    height:40px;
    width:40px;
    background-color:#8379aa;
    border-radius:50%;
    text-align: center;
    font-size: 24px;
}
.navbar-option-select{
    color: #59d192!important;
    font-weight: bold;
    border-bottom: 1px solid #59d192;
}
@media screen and (max-width: 767px) {
    section{
        width: 100%;
        height: 90vh;
    }
    .tables-content{
        overflow:auto;
    }
    .navbar-right{
        width:100%;
    }
}