/* 
    Created on : 22/07/2024, 04:44:00 PM
    Author     : David Flores Castillo
*/

:root {
    --primary: #1572E8 !important;
    --lightgray: #DDDDDD !important;
    --white: #FFFFFF !important;
    --black: #000000 !important;
    --dark: #212529;
    --red: #ef6461;
    --yellow: #f0ab00;
}

.login-container {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: -12px 17px 21px -12px rgba(0, 0, 0, 0.42);
    -webkit-box-shadow: -12px 17px 21px -12px rgba(0, 0, 0, 0.42);
    -moz-box-shadow: -12px 17px 21px -12px rgba(0, 0, 0, 0.42);
}


/* Estilos Generales */
.pointer {
    cursor: pointer;
}

.notif-box .notif-center a .notif-icon {
    min-width: 40px;
}

.no-resize {
    resize: none;
    /*text-area*/
}

.disabled-link {
    color: gray;
    cursor: not-allowed;
}

.enabled-link {
    color: var(--dark);
    cursor: pointer;
}


/* End Estilos Generales */



/*David Flores - Paginacion*/
.pagination {
    font-family: "Lato", sans-serif;
    font-size: 12px;
}

.pagination a {
    color: var(--primary);
    float: left;
    padding: 6px 10px;
    text-decoration: none;
}

.pagination .active {
    background-color: var(--primary);
}

.pagination .active a {
    color: var(--white);
}

.pagination li:hover:not(.active) {
    background-color: var(--lightgray);
}

/*Fin David Flores -  Paginacion*/


/* Establece el fondo blanco para los toasts */
.toast {
    opacity: 1 !important;
    background-color: var(--white) !important;
}

.toast,
.toast-close-button {
    color: #333 !important;
    /* Color de texto oscuro */
}

#toast-container>.toast {
    padding: 15px 15px 15px 50px !important;
    /* background-image: none !important; */
    background-size: 30px;
}

/* Para el tipo de toast success */
#toast-container>.toast-success {
    border-left: 5px solid #4caf50;
    background-image: url("../images/icons/check.png") !important;
}

/* Para el tipo de toast error */
#toast-container>.toast-error {
    border-left: 5px solid #f44336;
    background-image: url("../images/icons/close.png") !important;
}

/* Para el tipo de toast warning */
#toast-container>.toast-warning {
    border-left: 5px solid #ff9800;
    background-image: url("../images/icons/warning.png") !important;
}

/* Para el tipo de toast info */
#toast-container>.toast-info {
    border-left: 5px solid var(--primary);
    background-image: url("../images/icons/info.png") !important;
}

/* Para el tipo de toast success */
#toast-container>.toast-success .toast-progress {
    background-color: #4caf50;
}

/* Para el tipo de toast error */
#toast-container>.toast-error .toast-progress {
    background-color: #f44336;
}

/* Para el tipo de toast warning */
#toast-container>.toast-warning .toast-progress {
    background-color: #ff9800;
}

/* Para el tipo de toast info */
#toast-container>.toast-info .toast-progress {
    background-color: var(--primary);
}

/* END Establece el fondo blanco para los toasts */


/* Notificaciones del alta Configuraciones */

/* Notificaciones del alta Configuraciones */


.nav-link-1 {
    padding: 15px 5px;
    text-align: center;
    color: #333;
    cursor: pointer;
    background-color: #fff;
    border: none; /* Quitar todos los bordes por defecto */
    border-left: 1px solid #ddd; /* Borde izquierdo */
    border-right: 1px solid #ddd; /* Borde derecho */
    margin-bottom: 0;
    font-size: 13px;
}

.nav-link-1:first-child {
    border-top: 1px solid #ddd; /* Borde superior solo en el primero */
    border-radius: 5px 5px 0 0; /* Redondeado solo en la parte superior izquierda y derecha */
    border-bottom: 1px solid #ddd;
}

.nav-link-1:nth-child(2){
    border-bottom: 1px solid #ddd;
}

.nav-link-1:last-child {
    border-bottom: 1px solid #ddd; /* Borde inferior solo en el último */
    border-radius: 0 0 5px 5px; /* Redondeado solo en la parte inferior izquierda y derecha */
    border-top: 1px solid #ddd;
}

.nav-link-1.active {
    background-color: #6861ce; /* Color morado */
    color: #fff;
    font-weight: bold;
}

.nav-link-1:not(.active):hover {
    background-color: #e1e1e1;
    color: #626262;
    transition: 0.5s;
}

.inhabilitar {
    pointer-events: none; /* Evita la interacción con el select */
    background-color: #f0f0f0; /* Estilo visual para indicar que está en modo edición */
}


/* .custom-modal-height {
    height: 90vh; 
    max-height: 90vh; 
} */

/* Estilo del contenedor del FilePond */
.filepond--root .filepond{
    border: 1px solid #e0e0e0; /* Cambia el color del borde si es necesario */
    border-radius: 20px; /* Ajusta los bordes redondeados si es necesario */
}

.filepond--drop-label {
    background-color: #f5f5f5; /* Cambia el fondo si es necesario */
    border-radius: 5px;
}
/* Fin del estilo de Filepond */

/* Estilo para la descripciones en las columnas */
.long-description{
    min-width: 390px;
    /* border: 1px red solid; */
}

.long-description2{
    min-width: 550px;
    /* border: 1px red solid; */
}

.short-description{
    min-width: 250px;
    /* border: 1px red solid; */
}

.short-description2{
    min-width: 220px;
    /* border: 1px red solid; */
}

.short-description3{
    min-width: 230px;
}

.short-description4{
    min-width: 200px;
}
/* Fin del estilos de la descripciones en las columnas */

/* Estilos contenedor picker Bitácora */
.container-date{
    /* border: 1px red solid; */
    display: flex;
    max-width: 350px;
    /* margin-left: 45px; */
    justify-content: space-between;
}

.input-date-custom-size{
    width: 230px;
}

/* Fin estilos contenedor picker Bitácora */


/*Estilos Píldoras */
.hidden_element {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}
  
.appear {
    opacity: 1;
}
  
.btn-small {
    width: 25px;
    height: 25px;
    margin-top: 10px;
}

.close_img{
    margin-left: 15px;
}

.close_img:hover {
  cursor: pointer;
}

.d-flex {
    display: flex;
    flex-wrap: wrap; 
    align-items: center; 
}

.d-flex.align-items-center {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.btn-outline-primary {
    margin-top: -3px;
    width: 35px;
    height: 35px;
    padding: 0;
}

.pill-config{
    padding: 12px 15px;
    font-size: 12px; 
    border-radius: 20px; 
    color: #000000;
    background-color: #f0f0f050;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    margin-top: 10px;
}

#pill{
    border: 1px greenyellow solid !important;
}

#btn-add-whatsappNotificationPhone {
    margin-left: 1em;
}

#input-whatsappNotificationPhone{
    margin-left: 1em;
}

#btn-add-close{
    display: flex;
    gap: 5px;
    margin-top: -5px;
    margin-left: 1.5em;
}

#validation-whatsappNotificationPhone{
    margin-left: 1.5em;
    margin-top: 0;
}
/* Fin estilo Pildoras */

/* Estilos de Admin Compañía */
.btn-options{
    display: flex !important;
    height: 47px !important;
    gap: 10px;
}

.name-not-subdomain{
    color: #ff0000;
}

.name-subdomain-not-authorized{
    color: #f0ab1a !important;
}

.switch-subdomain{
    margin-top: -20px;
}

.name-subdomain-authorized{
    color: #63cf38 !important;
}

.sudomain-label{
    margin-top: 37px;
}

.fade-out {
    opacity: 0 !important;
    transition: opacity 0.5s ease-in-out !important;
    height: 0 !important;
    overflow: hidden !important;
}

.fade-in {
    opacity: 1 !important;
    transition: opacity 0.5s ease-in-out;
}

.not-subdomain{
    margin-top: 100px;
    text-align: center;
}
/* Fin estilos de Admin Compañía */

/* Estilos Módulo de Subscripción */
/* .size-card{
    min-height: 80vh;
} */

.message-not-subscription{
    color: #ff0000;
    font-weight: 400;
}

.switch-renewal{
    margin-top: 5px;
}

.input-datepicker{
    cursor: pointer;
}

.form-select-type{
    padding: 8px 8px;
    border: 2px solid;
}

.btns{
    display: flex !important;
    width: 270px !important;
    gap: 10px !important;
}
/* .btn-options-subscriptions{
    height: 50px !important;
} */
/* 
.options{
    min-width: 200px;
    min-height: 150px;
} */
/* Fin estilos Módulo de Subscripción */

/*/ RESPONSIVE*/
/*========================================================================= /*/

/*/ Tablets en horizonal y escritorios normales*/
@media (min-width: 768px) and (max-width: 1199px) {}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {}

/*/ Móviles en horizontal o tablets en vertical*/
@media (max-width: 767px) {}

@media (max-width: 767px) and (orientation: landscape) {}

/*/ Móviles en vertical*/
@media (max-width: 480px) {}