#groupwinLogin{

}

.LabelUserName {
    font-family: 'GothamBook';
    display: flex;
    position: absolute;
    top: 17px;
    right: 80px;
    color: var(--Selected-Color);
}

#butwinLogin {
    display: block;
    position: fixed;
    top: 6.5px;
    right: 26px;
    cursor: pointer;
}

    #butwinLogin img {
        width: 40px;
        height: 40px;
    }

.right-buttons {
    display: inline-block;
    float: right;
    position: absolute;
    top: 5px;
    right: 15px;
    height: 40px;
    /*width: 40px;*/
    /*border-radius: 50%;
    border: 2px solid #F78119;*/
    /*margin-left: 8px;
    margin-top: 12px;#003b7d*/
    /*background-color: #F78119;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;*/
}

.circle-button {
    font-size: 20px;
    padding: 5px 5px 5px 5px;
    display: inline-block;
    float: right;
    /* position: absolute; */
    /* top: 10px; */
    right: 15px;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    border: 2px solid var(--Selected-Color);
}

.nav-item {
    float: left;
    /*width: 50px;*/
}

.iconbar {
    background-color: transparent;
    color: white;
    font-size: 35px;
    padding: 1px 1px 1px 1px;
}

#MenuContainer {
    height: auto;
    width: auto;
    overflow-y: auto;
    padding-top: 55px;
    top: 0px;
    left: 0;
    bottom: 0;
    display: block;
    float: left;
    position: fixed;
    z-index: 100;
    background-color: var(--Back-Color);
    -webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
}

ul, li {
    list-style-type: none;
    /*margin: 5px 0 5px -10px;*/
}

/*#MenuMain {
    margin-top: 50px;
    margin-left: 0px;
    padding: 0 10px 0 50px;
    width: 310px;
}*/

#MenuMain {
    margin-top: 10px;
    margin-bottom: 10px;
    /*padding: 0 10px 0 10px;*/
    width: 53px;
    overflow-x: hidden;
}

.caretmenu {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
}

.caretmenu::before {
    transition: all 300ms ease;
    content: "\25B6";
    color: orange;
    display: inline-block;
    margin-right: 6px;
    margin-left: -18px;
}

.caretmenu-down::before {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);
}

.nestedmenu {
    transition: all 300ms ease;
    opacity: 1;
    height: 0;
    overflow:hidden;
}

.active {
    opacity: 1;
    height: auto;
}

.win-Login {
    background-color: var(--BackGroud-Color);
    border: 1px solid var(--Lines-Color);
    width: 300px;
    padding: 10px 0;
    position: fixed;
    float: right;
    right: 10px;
    /* -webkit-box-shadow: 0px 0px 20px 1px rgb(0 0 0 / 50%); */
    /*-moz-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.5);*/
    /* box-shadow: 0px 0px 20px 1px rgb(0 0 0 / 50%); */
}

.win-Login-info {
    font-family: 'GothamBook';
    height: auto;
    width: auto;
    /*background-color: white;*/
    font-size: 9pt;
    color: var(--labes-color-Soltum);
}

.win-Notify {
    background-color: var(--BackGroud-Color);
    border: 1px solid var(--Lines-Color);
    width: 300px;
    padding: 10px 0;
    position: fixed;
    float: right;
    right: 10px;
    /* -webkit-box-shadow: 0px 0px 20px 1px rgb(0 0 0 / 50%); */
    /*-moz-box-shadow: 0px 0px 20px 1px rgba(0,0,0,0.5);*/
    /* box-shadow: 0px 0px 20px 1px rgb(0 0 0 / 50%); */
}

.win-Notify-info {
    font-family: 'GothamBook';
    height: auto;
    width: auto;
    /*background-color: white;*/
    font-size: 9pt;
    color: var(--labes-color-Soltum);
}

collapse1{

}

.alert-container {
    bottom: 20px;
    position: fixed;
    width: 30%;
    right: 15px;
    margin-left: 10px;
    float: right;
    border-radius: 4px;
    border: 0px solid transparent;
    background: transparent;
    z-index: 1100;
}

.alert-remove-margin {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
}

#botonNotificacion {
    display: relative;
}

.notificaciones-indicador {
    position: absolute;
    top: 0;
    left: 52px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
}


.white-text {
    color: white;
}

    .white-text .dx-treeview-node span {
        color: white;
    }

.treeview-text-none {
    display: none;
}

/*********************************************Estilos de botones del toolbar***************************************************/

/* Estilos para los botones del toolbar */

#Botonera {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px; /* Agrega un margen inferior para separar los botones del DataGrid */
}

.BotonColor {
    margin-right: 10px; /* Espacio entre los botones */
    border: none; /* Quitar bordes */
    cursor: pointer;
    font-weight: bold;
    background-color: #052f45;
    color: white;
    border-radius: 5px; /* Bordes redondeados */
    padding: 8px 16px;
    margin-right: 15px;
}

.BotonBordes {
    margin-right: 10px; /* Espacio entre los botones */
    border: 2px solid #052f45;
    background-color: white;
    color: #052f45;
    border-radius: 5px; /* Bordes redondeados */
    cursor: pointer;
    font-weight: bold;
    padding: 8px 16px;
    margin-right: 15px;
}


/*********************************************Estilos del modulo de empresas***************************************************/
/*.dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button) {
    width: auto;
}

.dx-button {
    margin-right: 10px;*/ /* Espacio entre los botones */
    /*border: none;*/ /* Quitar bordes */
    /*cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;*/ /* Bordes redondeados */
    /*font-weight: bold;
}*/

/* Estilo para el botón de guardar */
#btnGuardar {
    background-color: #052f45;
    color: white;
    border-radius: 5px; /* Bordes redondeados */
}

    #btnGuardar.hidden {
        opacity: 0;
        transform: translateY(20px);
    }

/* Estilo para el botón de cancelar */
#btnCancelar {
    border: 2px solid #052f45;
    background-color: white;
    color: #052f45;
    border-radius: 5px; /* Bordes redondeados */
}

#lbValidaEmail {
    color: red;
}

    #lbValidaEmail.hidden {
        opacity: 0;
        transform: translateY(20px);
    }

#lbValidaDominio {
    color: red;
}

.dx-field {
    position: inherit;
}

#form-container {
    width: 300px; /* Ancho del contenedor del formulario */
    max-height: 600px; /* Altura máxima del contenedor del formulario */
    overflow-y: hidden;
    float: left; /* Coloca el contenedor a la izquierda */
    margin-right: 20px; /* Margen a la derecha para separar del resto de la página */
    position: relative;
    background-color: white;
}

.contenedor-form {
    width: 300px; /* Ancho de tu contenedor */
    height: 600px; /* Alto de tu contenedor */
    overflow: hidden;
    position: relative;
    float: left;
}

.contenido-form {
    width: 100%;
    height: 100%;
}


#form-footer {
    position: sticky;
    bottom: 0;
    background-color: white; /* Puedes ajustar el color de fondo si es necesario */
    box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1); /* Agregar sombra al footer si lo deseas */
    padding: 10px; /* Añadir espacio alrededor de los botones */
    opacity: 1;
    transition-property: none;
    transition-duration: 300ms;
    transform: translateY(0%);
}

    #form-footer.hidden {
        opacity: 0;
        transform: translateY(20px);
    }

/* Estilos para el contenedor del ScrollView */
#scrollview-container {
    width: 300px; /* Ancho deseado */
    height: 400px; /* Alto deseado */
    overflow: hidden;
    border: 1px solid #ccc;
}

/* Estilos para el contenido del ScrollView */
#scrollview-content {
    width: 100%; /* Ancho del contenido */
    white-space: nowrap;
}

#form-container .dx-field-item {
    margin-right: 10px; /* Agrega un margen a los elementos del formulario */
}

#dropzone-external {
    position: relative;
    width: 150px;
    height: 150px;
    background-color: rgba(183, 183, 183, 0.1);
    border-width: 2px;
    border-style: dashed;
    padding: 10px;
}

    #dropzone-external > * {
        pointer-events: none;
    }

    #dropzone-external.dropzone-active {
        border-style: solid;
    }

#dropzone-image {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    max-height: 100%;
    z-index: 1;
}

#dropzone-text > span {
    font-weight: 100;
    opacity: 0.5;
    z-index: 0;
}

.widget-container > span {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 16px;
}

#upload-progress {
    display: flex;
    margin-top: 10px;
}

.flex-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/**************************************************Scroll personalizado************************************************/



/**************************************************+Estilos del tap Panel y accordeon************************************************/
.tab-panel {
    border: 1px solid #ccc;
    margin: 20px auto;
    margin-right: 0;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}

.tab-buttons {
    display: flex;
    overflow-x: auto;
    background-color: #f2f2f2;
    width: 100%;
}

.tab-button-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
}

.tab-button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s ease;
    white-space: nowrap;
    flex-grow: 1;
    margin: 0;
}

    .tab-button.active {
        background-color: #ddd;
    }

.tab-button-container.active {
    background-color: #ddd;
}

.tab-content {
    display: none;
    padding: 20px;
    height: 430px;
}

    .tab-content.active {
        display: block;
    }

/* Estilos para el contenedor del Accordion */
.accordion-container {
    border: 1px solid #ccc;
    margin: 10px;
    padding: 10px;
}

/* Estilos para el encabezado del Accordion */
.accordion-header {
    background-color: #f0f0f0;
    padding: 5px;
    font-weight: bold;
    position: relative;
}

/* Estilos para el contenido del Accordion */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    padding: 10px;
}
/*Estilos para el p del encabezado del accordeon */
.FormatP {
    text-wrap: wrap;
    font-weight: initial;
    margin: 0 109px 0 39px;
}

.FormatP2 {
    text-wrap: wrap;
    font-weight: initial;
}

/*.dx-datagrid-content .dx-datagrid-table {
    width: -webkit-fill-available;
}*/
/*Estilos para los span del encabezado del accordeon */
.spanBold {
    font-weight: bold;
}
.spanBoldRojo {
    font-weight: bold;
    color:red;
}
.spanBoldRojoNone {
    font-weight: bold;
    color: red;
    display:none;
}
/*Estilos para el boton de mostrar contenido del accordeon */
.btnRetraer {
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
    position: absolute;
    left: 12px;
}


.acciones-link {
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
    position: absolute;
    right: 12px;
}


.actions-menu {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #f1f1f1;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

    .actions-menu.active {
        display: block;
    }

    .actions-menu button {
        display: block;
        width: 100%;
        padding: 10px 20px;
        border: none;
        background: none;
        text-align: left;
        cursor: pointer;
    }

        .actions-menu button:hover {
            background-color: #ddd;
        }



/******************************************************Mostrar barra lateral****************************************************/

.separador {
    border-width: 2px; /* Ajusta el grosor de la línea según tus preferencias */
    border-color: #ccc; /* Puedes personalizar el color del separador */
    margin: 10px 0; /* Ajusta el margen según tus preferencias */
}
.UltimoSeparador {
    border-width: 2px; /* Ajusta el grosor de la línea según tus preferencias */
    border-color: white; /* Puedes personalizar el color del separador */
    margin: 50px 0; /* Ajusta el margen según tus preferencias */
}

.btnRetraer-MenusLaterales {
    border: none;
    cursor: pointer;
    color: black;
    background-color: white;
    padding: 2px;
}

.seccion-MenusLaterales {
    max-height: 30px;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.acciones-link-MenusLaterales {
    border: none;
    cursor: pointer;
    position: absolute;
    right: 12px;
    color: black;
}

.BotonAsociados {
    margin-right: 10px; /* Espacio entre los botones */
    border: none; /* Quitar bordes */
    cursor: pointer;
    font-weight: bold;
    background-color: #052f45;
    color: white;
    border-radius: 5px; /* Bordes redondeados */
    padding: 5px 9px;
    margin-left: auto;
    display: inline-block;
    position: absolute;
    left: 85%;
    margin-top: 3%;
}

#openButton {
    position: absolute;
    right: 3px;
    top: 20%;
    transform: translateY(-50%);
    z-index: 1;
    width: 40px; /* Agregado para hacerlo circular */
    height: 40px; /* Agregado para hacerlo circular */
    background-color: #052f45;
    border: none;
    border-radius: 50%; /* Hacerlo circular */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}


#contenedor-asociados {
    position: fixed;
    right: -255px;
    width: 255px;
    height: 100vh;
    background-color: #ffffff;
    transition: right 0.2s ease-in-out;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #1baaca;
}

    #contenedor-asociados::-webkit-scrollbar-thumb {
        background-color: rgba(27, 170, 202, 0.7);
    }

    #contenedor-asociados::-webkit-scrollbar {
        width: 5px; /* Aumentamos el ancho al pasar el mouse */

    }
    
    /*#contenedor-asociados:not(:hover)::-webkit-scrollbar {
        width: 0;*/ /*Desaparece cuando no esta el mouse*/
    /*}*/



#tareas-container {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #1baaca;
}

    #tareas-container::-webkit-scrollbar-thumb {
        background-color: rgba(27, 170, 202, 0.7);
    }

    #tareas-container::-webkit-scrollbar {
        width: 5px; /* Aumentamos el ancho al pasar el mouse */
    }

/*Cards para los datos de contacto, negocios y tickets*/
.cardMenu {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 95%;
    margin: 5px auto;
    position: relative;
}

    .cardMenu p {
        margin: 5px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.hidden {
    display: none;
}

#EliminarAsociacionPrincipal,
#EliminarAsociacionSecundaria {
    position: absolute;
    right: 3%;
    transform: translateY(-50%);
    width: 20px; /* Agregado para hacerlo circular */
    height: 20px; /* Agregado para hacerlo circular */
    background-color: #052f45;
    border: none;
    border-radius: 50%; /* Hacerlo circular */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Estilo para el checkbox personalizado */
.checkbox-tarea {
    appearance: none; /* Oculta el estilo predeterminado del sistema */
    -webkit-appearance: none; /* Para navegadores basados en WebKit */
    -moz-appearance: none; /* Para navegadores basados en Mozilla */
    width: 20px; /* Ancho del checkbox personalizado */
    height: 20px; /* Altura del checkbox personalizado */
    border-radius: 50%; /* Hace que el checkbox sea redondo */
    border: 1px solid #000; /* Borde del checkbox */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    position: relative; /* Posición relativa para el icono de palomita */
    background-color: green; /* Color de fondo cuando está marcado */
}

    /* Estilo para el checkbox personalizado cuando está marcado */
    .checkbox-tarea:checked {
        filter: grayscale(0);
    }
    .checkbox-tarea:not(:checked) {
        filter: grayscale(100%); /* Aplica filtro de desaturación */
    }

    /* Estilo para el icono de palomita */
    .checkbox-tarea::before {
        content: "\2713"; /* Código de la palomita ✔ */
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white; /* Color del icono de palomita cuando está marcado */
    }


/* Estilo para el checkbox personalizado */
.checkbox-tarea-atrasada {
    appearance: none; /* Oculta el estilo predeterminado del sistema */
    -webkit-appearance: none; /* Para navegadores basados en WebKit */
    -moz-appearance: none; /* Para navegadores basados en Mozilla */
    width: 20px; /* Ancho del checkbox personalizado */
    height: 20px; /* Altura del checkbox personalizado */
    border-radius: 50%; /* Hace que el checkbox sea redondo */
    border: 1px solid #FF0000; /* Borde del checkbox */
    cursor: pointer; /* Cambia el cursor al pasar por encima */
    position: relative; /* Posición relativa para el icono de palomita */
    background-color: orange; /* Color de fondo cuando está marcado */
}

    /* Estilo para el checkbox personalizado cuando está marcado */
    .checkbox-tarea-atrasada:checked {
        filter: grayscale(0);
    }

    .checkbox-tarea-atrasada:not(:checked) {
        filter: grayscale(100%); /* Aplica filtro de desaturación */
    }

    /* Estilo para el icono de palomita */
    .checkbox-tarea-atrasada::before {
        content: "\2713"; /* Código de la palomita ✔ */
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white; /* Color del icono de palomita cuando está marcado */
    }

.inputUUID input{
    text-transform: uppercase;

}