.sidebar-nav ul li a {
    font-size: 13px;
}

/* .fix-header .top-navbar .navbar-top-right {
   align-items: center;
} */

.label { 
    font-size: 100%;
    font-weight: 400;
}

* {
    font-weight: 400!important;
}

.navbar-header {
   padding-left: 0px!important;
}

.top-navbar {
   text-align: center;   
}





/** NOTIFICACIÓN FRANCHISES **/

#list-page-actions-container {
    display: flex;
}
#list-page-actions-container .alert {
    width: 97%;
}
#list-page-actions-container #list-page-actions {
    margin-left: auto;
}

/** PROGRESS BAR **/

.progress2 {
    display: -ms-flexbox;
    display: flex;
    height: 0.8rem;
    overflow: hidden;
    line-height: 0;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: .25rem; }

.progress {
    height: auto;
}

/** SCROLLEABLE OBJETIVOS DASHBOARD **/

.parent-container {
    position: relative;
    
}

.scrollable-container {
    overflow-x: hidden;
    white-space: nowrap;
    padding-bottom: 1rem;  /* Para espacio si aparece un scrollbar */
    padding-left: 0px;
    padding-right: 0px;
}

.arrow {
    font-size: 30px;
    position: absolute;
    right: 0px;
    padding-left: 10px;
    top: 50%;
    transform: translateY(-100%);
    z-index: 2;
    opacity: 1;
    pointer-events: none;
    font-weight: bolder;
    color: gray;
    animation: tintinear 1.5s infinite;
}

@keyframes tintinear {
    0%, 100% {
        color: lightgray;  /* gris claro al inicio y al final */
    }
    50% {
        color: gray;  /* gris oscuro en el punto medio */
    }
}

/** CARD PORCENTAJE **/

.general-app-widget, .general-app-widget * {
    box-sizing: border-box;
    }
  .general-app-widget {
   background: var(--primary-dark, #007b55);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
   flex-shrink: 0;
    position: relative;
    box-shadow: var(--shadows-dark-card-box-shadow, 0px 12px 24px -4px rgba(0, 0, 0, 0.12), 0px 0px 2px 0px rgba(0, 0, 0, 0.20));
    overflow: hidden;
   }
  
  .chart-sparkline {
   flex-shrink: 0;
    width: 64px;
    height: 64px;
    position: relative;
   }
  
  .layer {
   border-radius: 50%;
    border-style: solid;
    border-color: var(--transparent-grey-16, rgba(145, 158, 171, 0.16));
    border-width: 4px;
    width: 60.8px;
    height: 60.8px;
    position: absolute;
    left: 1.6px;
   top: 1.6px;
   }
  
  .layer2 {
   position: absolute;
    left: 1.6px;
   top: 1.6px;
    overflow: visible;
   }
  
  .number-percent-rand {
   color: var(--common-white, #ffffff);
    text-align: center;
    font: var(--subtitle-2, 600 14px/22px 'Public Sans', sans-serif);
    position: absolute;
    left: 4.8px;
   top: calc(50% - 11px);
    width: 54.4px;
   }
  
  .text {
   display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    position: relative;
   }
  
  .number-long-rand {
   color: var(--common-white, #ffffff);
    text-align: left;
    font: var(--h-4, 700 24px/36px 'Public Sans', sans-serif);
    position: relative;
   }
  
  .conversion {
   color: var(--common-white, #ffffff);
    text-align: left;
    font: var(--subtitle-2, 600 14px/22px 'Public Sans', sans-serif);
    opacity: 0.7200000286102295;
    position: relative;
   }
  
  .icon {
   opacity: 0.11999999731779099;
    flex-shrink: 0;
    position: absolute;
    right: -40px;
   top: calc(50% - 60px);
    overflow: visible;
   }


   /** OBJETIVOS DASHBOARD **/

   .objective {
    font-size: .8em;
   }

   .objective-status {
    font-size: .7em;
        
    }

    .card-container {
        display: flex;
        align-items: stretch;  /* Hace que las tarjetas se estiren para ocupar el mismo alto */
        flex-wrap: wrap;  /* Permite que las tarjetas envuelvan a la siguiente línea si hay muchas de ellas */
    }
    
    .card {
        display: flex;
        flex-direction: column;  /* Establece la dirección principal como columna */
    }
    
    .card-body {
        flex: 1;  /* Ocupa todo el espacio disponible */
    }

    
   /** TARJETAS DUALES **/

   .general-booking-check-in, .general-booking-check-in * {
    box-sizing: border-box;
    }
.general-booking-check-in {
   background: var(--background-light-paper, #ffffff);
    border-radius: 16px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 900px;
    position: relative;
    box-shadow: var(--shadows-light-card-box-shadow, 0px 12px 24px -4px rgba(145, 158, 171, 0.12), 0px 0px 2px 0px rgba(145, 158, 171, 0.20));
    overflow: hidden;
    margin-bottom: 40px;
    margin-left: 400px;
    margin-top: 40px;
   }

.item-dual {
   border-style: dashed;
    border-color: var(--components-divider, rgba(145, 158, 171, 0.24));
    border-width: 0px 1px 0px 0px;
    padding: 40px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
   }

.chart-column {
   flex-shrink: 0;
    width: 80px;
    height: 80px;
    position: relative;
   }

.layer-dual {
   border-radius: 50%;
    border-style: solid;
    border-color: var(--transparent-grey-16, rgba(145, 158, 171, 0.16));
    border-width: 8px;
    width: 76px;
    height: 76px;
    position: absolute;
    left: 2px;
   top: 2px;
   }

.layer2-dual {
   position: absolute;
    left: 2px;
   top: 2px;
    overflow: visible;
   }

.number-percent-6 {
   color: var(--text-light-primary, #212b36);
    text-align: center;
    font: var(--subtitle-2, 600 14px/22px 'Public Sans', sans-serif);
    position: absolute;
    left: 12px;
   top: calc(50% - 11px);
    width: 56px;
   }

.text-dual {
   display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
   }

.number-long-1 {
   color: var(--text-light-primary, #212b36);
    text-align: center;
    font: var(--h-4, 700 24px/36px 'Public Sans', sans-serif);
    position: relative;
   }

.check-in {
   color: var(--text-light-secondary, #637381);
    text-align: center;
    font: var(--body-2, 400 14px/22px 'Public Sans', sans-serif);
    position: relative;
   }

.item2 {
   padding: 40px;
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
    justify-content: center;
    flex: 1;
    position: relative;
   }

.layer3 {
   position: absolute;
    left: 2px;
   top: 2px;
    overflow: visible;
   }

.number-percent-9 {
   color: var(--text-light-primary, #212b36);
    text-align: center;
    font: var(--subtitle-2, 600 14px/22px 'Public Sans', sans-serif);
    position: absolute;
    left: 12px;
   top: calc(50% - 11px);
    width: 56px;
   }

.number-long-2 {
   color: var(--text-light-primary, #212b36);
    text-align: center;
    font: var(--h-4, 700 24px/36px 'Public Sans', sans-serif);
    position: relative;
   }

.check-out {
   color: var(--text-light-secondary, #637381);
    text-align: center;
    font: var(--body-2, 400 14px/22px 'Public Sans', sans-serif);
    position: relative;
   }

/** GRAFICA CONVERSION **/

.general-analytics-conversion-rates, .general-analytics-conversion-rates * {
     box-sizing: border-box;
     }
.general-analytics-conversion-rates {
    background: var(--background-light-paper, #ffffff);
     border-radius: 16px;
     display: flex;
     flex-direction: column;
     gap: 0px;
     align-items: center;
     justify-content: flex-start;
     flex-shrink: 0;
     width: 712px;
     position: relative;
     box-shadow: var(--shadows-light-card-box-shadow, 0px 12px 24px -4px rgba(145, 158, 171, 0.12), 0px 0px 2px 0px rgba(145, 158, 171, 0.20));
     overflow: hidden;
    }

 .card-header {
    padding: 24px 16px 24px 24px;
     display: flex;
     flex-direction: row;
     gap: 16px;
     align-items: flex-start;
     justify-content: flex-start;
     align-self: stretch;
    flex-shrink: 0;
     position: relative;
    }

 .text {
    display: flex;
     flex-direction: column;
     gap: 4px;
     align-items: flex-start;
     justify-content: flex-start;
     flex: 1;
     position: relative;
     overflow: hidden;
    }

 .title {
    color: var(--text-light-primary, #212b36);
     text-align: left;
     font: var(--h-6, 700 18px/28px 'Public Sans', sans-serif);
     position: relative;
     align-self: stretch;
    }

 .subtitle {
    color: var(--text-light-secondary, #637381);
     text-align: left;
     font: var(--body-2, 400 14px/22px 'Public Sans', sans-serif);
     position: relative;
     align-self: stretch;
     height: 22px;
    }

 .chart {
    padding: 24px;
     display: flex;
     flex-direction: column;
     gap: 0px;
     align-items: center;
     justify-content: flex-start;
     align-self: stretch;
    flex-shrink: 0;
     position: relative;
    }

 .chart-grid {
    display: flex;
     flex-direction: row;
     gap: 20px;
     align-items: flex-start;
     justify-content: flex-start;
     align-self: stretch;
    flex-shrink: 0;
     position: relative;
    }

 .y {
    display: flex;
     flex-direction: column;
     gap: 41px;
     align-items: flex-end;
     justify-content: flex-start;
     flex-shrink: 0;
     height: 258px;
     position: relative;
    }

 .y-5 {
    display: flex;
     flex-direction: column;
     gap: 0px;
     align-items: flex-end;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
    }

 .space {
    flex-shrink: 0;
     width: 24px;
     height: 1px;
     position: relative;
    }

 .y-4 {
    display: flex;
     flex-direction: column;
     gap: 0px;
     align-items: flex-end;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
    }

 .y-3 {
    display: flex;
     flex-direction: column;
     gap: 0px;
     align-items: flex-end;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
    }

 .y-2 {
    display: flex;
     flex-direction: column;
     gap: 0px;
     align-items: flex-end;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
    }

 .y-1 {
    display: flex;
     flex-direction: column;
     gap: 0px;
     align-items: flex-end;
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
    }

 .stack {
    display: flex;
     flex-direction: column;
     gap: 12px;
     align-items: flex-start;
     justify-content: center;
     flex: 1;
     position: relative;
    }

 .lines {
    display: flex;
     flex-direction: column;
     gap: 42px;
     align-items: flex-start;
     justify-content: flex-start;
     align-self: stretch;
    flex-shrink: 0;
     position: relative;
    }

 .divider {
    align-self: stretch;
    flex-shrink: 0;
     position: relative;
     overflow: visible;
    }

 .divider2 {
    align-self: stretch;
    flex-shrink: 0;
     position: relative;
     overflow: visible;
    }

 .divider3 {
    align-self: stretch;
    flex-shrink: 0;
     position: relative;
     overflow: visible;
    }

 .divider4 {
    align-self: stretch;
    flex-shrink: 0;
     position: relative;
     overflow: visible;
    }

 .divider5 {
    align-self: stretch;
    flex-shrink: 0;
     position: relative;
     overflow: visible;
    }

 .x {
    display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     align-self: stretch;
    flex-shrink: 0;
     position: relative;
    }



 .chart-bar {
    display: flex;
     flex-direction: column;
     gap: 52px;
     align-items: flex-start;
     justify-content: flex-start;
     flex-shrink: 0;
     position: absolute;
     right: 71px;
     left: 121px;
    top: 272px;
     transform: translate(0px, -248px);
     overflow: visible;
    }

/** ROLES DE USUARIO **/

/** GRÁFICAS **/

.c3-legend-item-hidden {
    opacity: 0.6;
}


/** ESTRELLAS **/

.rating-star {
    width: 1642px;
    position: relative;
    background: #fff;
    padding: 25px 27px 35px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}  

.rating-star header{
   margin-bottom: 20px;
}

.rating-star .stars {
   display: flex;
   gap: 40px;
   }

.stars i {
   color: #e6e6e6;
   font-size: 35px;
   cursor: pointer;
   
}
 
/** COMENTARIOS ESTRELLAS **/

.comment-box {
   width: auto;
   margin: 20px auto;
   background-color: #fff;
   padding: 15px;
   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}

.comment {
   margin-bottom: 15px;
}

.comment .user {
   font-weight: bold;
   color: #333;
}

.comment .date {
   font-size: 12px;
   color: #888;
}

.comment .text {
   margin-top: 8px;
   color: #555;
}


/** Ratings**/

  
   .height-100{
       height:100vh;
   }
   
   .cardRating{
       width:380px;
       border:none;
       height:280px;
   }
   
   .ratings{
       margin-right:10px;
   }
   
   .ratings i{
       
       color:#cecece;
       font-size:32px;
   }
   
   .rating-color{
       color:#fbc634 !important;
   }
   
   .review-count{
       font-weight:400;
       margin-bottom:2px;
       font-size:24px !important;
   }
   
   .small-ratings i{
     color:#cecece;   
   }
   
   .review-stat{
       font-weight:300;
       font-size:18px;
       margin-bottom:2px;
   }


 /** MODALES **/ 

   .modal-dialog {
    max-width: 900px;
}



/** OBJETIVO **/

.objective-detail {
   width: 600px; /* Ancho del contenedor */
   height: 600px; /* Altura del contenedor */
   margin: 0 auto; /* Centrar horizontalmente */
   background-color: #fff; /* Color de fondo */
   border-radius: 10px; /* Radio del borde */
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Sombra */
   display: flex;
   
}

.active-status {
   justify-content: right;
}


/* CONVERSACIONES */


.header-conv {
   position: relative;
   width: 100%;
   background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
   linear-gradient(0deg, rgba(145, 158, 171, 0.24), rgba(145, 158, 171, 0.24));
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px;
}

.img-text-conv {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
}

.img-text-conv h4 {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.2em;
   margin-left: 15px;
   padding-top: 10px;
}


.chat-box-conv {
   position: relative;
   width: 100%;
   height: calc(100% - 3px);
   padding: 50px;
   overflow-y: auto;
}

.message-conv {
   position: relative;
   display: flex;
   width: 100%;
   margin: 5px 0;
}

.message-conv p {
   position: relative;
   right: 0;
   text-align: right;
   max-width: 65%;
   padding: 12px;
   background: #dcf8c6;
   border-radius: 10px;
   font-size: 0.9em;
}

.message-conv p::before {
   content: '';
   position: absolute;
   top: 0;
   right: -12px;
   width: 20px;
   height: 20px;
   background: linear-gradient(135deg, #dcf8c6 0%, #dcf8c6 50%, transparent 50%, transparent);
}

.my-message-conv {
   justify-content: flex-end;
}

.other-message-conv {
   justify-content: flex-start;
}

.other-message-conv p {
   background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
   linear-gradient(0deg, rgba(145, 158, 171, 0.24), rgba(145, 158, 171, 0.24));
   text-align: left;
}

.message-conv.other-message-conv p::before {
   content: '';
   position: absolute;
   top: 0;
   left: -12px;
   width: 20px;
   height: 20px;
   background: linear-gradient(225deg, #FFFFFF 0%, #FFFFFF 50%, transparent 50%, transparent);
}

.time-chat-act {
   position: relative;
   display: block;
   font-size: 0.75em;
   width: 100%;
   text-align: end;
   color: #aaa;       
}

.chatbox-input-conv { 
   position: relative;
   width: 100%;
   background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
   linear-gradient(0deg, rgba(145, 158, 171, 0.24), rgba(145, 158, 171, 0.24));
   padding: 15px;
   height: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.chatbox-input-conv i {
   cursor: pointer;
   font-size: 1.8em;
   color: #637381;
   margin-left: 22px;
}

.chatbox-input-conv input {
   position: relative;
   width: 90%;
   margin: 0 20px;
   padding: 10px 20px;
   border: none;
   outline: none;
   border-radius: 30px;
   font-size: 1em;
}

.chatbox-input-conv .send-button {
   outline: none;
   border: none;
   width: 55px;
   height: 35px;
   box-sizing: border-box;
   border-radius: 15%;
   background-color: rgb(0, 152, 179);
   color: white;
}



.userimg-conv {
   position: relative;
   width: 40px;
   height: 40px;
   overflow: hidden;
   border-radius: 50%;
   cursor: pointer;
}

.cover {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.nav-icons-conv {
   display: flex;
   padding-top: 10px;
}

.nav-icons-conv li{
   display: flex;
   list-style: none;
   cursor: pointer;
   color: #637381;
   font-size: 1.5em;
   margin-left: 22px;
}

.search-chat-conv {
   position: relative;
   width: 100%;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 0 15px;
   padding-top: 25px;
}

.search-chat-conv div {
   width: 100%;
}

.search-chat-conv div input {
   width: 100%;
   outline: none;
   border: 1px solid;
   background: #fff;
   padding: 6px;
   height: 38px;
   border-radius: 10px;
   font-size: 14px;
   padding-left: 40px;
}

.search-chat-conv div input::placeholder {
   color: #bbb;
}

.search-chat-conv div i {
   position: absolute;
   left: 30px;
   top: 35px;
   font-size: 1.2em;
}

.chatlist-conv {
   position: relative;
   height: 100%;
   overflow-y: auto;
   background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
   linear-gradient(0deg, rgba(145, 158, 171, 0.24), rgba(145, 158, 171, 0.24));
}

.chatlist-conv .block-conv {
   position: relative;
   width: 100%;
   height: 60px;
   display: flex;   
   align-items: center;
   padding: 5px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
   cursor: pointer;
}


.chatlist-conv .block-conv.active {
   background: rgb(0, 152, 179);
   color: white!important;
}

.active-text {
   color: white!important;
}

.chatlist-conv .block-conv:hover {
   background: #f5f5f5;
}

.chatlist-conv .block-conv .imgbox-conv {
   position: relative;
   min-width: 45px;
   height: 45px;
   overflow: hidden;
   border-radius: 50%;
   margin-right: 10px;
}

.chatlist-conv .block-conv .details-conv {
   position: relative;
   width: 100%;
   padding-top: 20px;
}

.chatlist-conv .block-conv .details-conv .list-head {
   display: flex;
   justify-content: space-between;
   margin-bottom: 1px;
   margin-top: 27px;
}

.chatlist-conv .block-conv .details-conv .list-head h7 {
   font-size: 1.1em;
   font-weight: 600;
   color: #111;
   
}

.chatlist-conv .block-conv .details-conv .list-head .time-conv {
   font-size: 0.75em;
   color: #aaa;
   padding-top: 4px;
   
}

.chatlist-conv .block-conv.unread .details-conv .list-head .time-conv {   
   color: #00B8D9;
}

.chatlist-conv .block-conv.unread .details-conv .message-p p {
   color: #111;
}

.message-p {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 25px;
}

.message-p p {
   color: #aaa;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   font-size: 0.9em;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   
}

.message-p b {
   background: #00B8D9;
   color: #fff;
   min-width: 20px;
   height: 20px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 0.75em;
   margin-bottom: 20px;
} **/
   


/** CHAT ADAPTAR **/

.general {

   height: 75vh;
}


.conversacion-abierta {
   background-color: #e8f8fc;
   height: 59.1vh;
}

.escribir-mensaje {
   height: 5.9vh;
}

.buscar {
   background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
   linear-gradient(0deg, rgba(145, 158, 171, 0.24), rgba(145, 158, 171, 0.24));
   height: 10vh;
}

.contactos {
   height: 65vh;
}

.message-img {
   max-width: 30%;

}

.imagen-conv {
   width: 100%;
   object-fit: cover!important;
}

/* scrollbar */

/* Estilo para el contenedor que tiene overflow-y */
.overflow-container {
   overflow-y: scroll; /* Puedes usar 'auto' en lugar de 'scroll' según tus necesidades */
   scrollbar-width: thin; /* Ancho del track de la barra de desplazamiento */
 }
 
 /* Estilo específico para navegadores basados en WebKit (como Chrome y Safari) */
 .overflow-container::-webkit-scrollbar {
   width: 8px; /* Ancho de la barra de desplazamiento */
 }
 
 /* Estilo del track de la barra de desplazamiento */
 .overflow-container::-webkit-scrollbar-track {
   background-color: transparent; /* Color del track de la barra de desplazamiento */
 }
 
 /* Estilo del mango (pulgares) de la barra de desplazamiento */
 .overflow-container::-webkit-scrollbar-thumb {
   background-color: transparent; /* Color del mango de la barra de desplazamiento */
   border-radius: 4px; /* Bordes redondeados del mango */
 }
 
 /* Estilo del borde de la barra de desplazamiento */
 .overflow-container::-webkit-scrollbar-thumb:hover {
   background-color: #a0a0a0; /* Color del mango al pasar el mouse sobre él */
 }
 
  .spinner-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh; 
   display: flex; 
   justify-content: center; 
   align-items: center; 
   backdrop-filter: blur(5px); 
   z-index: 1050; 
   background-color: rgba(255, 255, 255, 0.5);
}

.spinner-border {
   width: 3rem; 
   height: 3rem;
}