.a_notifications.notification_link {
    color: initial !important;
}
#notifications_preferences .desc{
    display: block;
    font-weight: 300;
}
#notifications_preferences li .desc{
    margin-left: 72px;
}
.preferences_list .switch {
    margin-right: 20px;
}
.preferences_list {
    list-style: none;
    margin: 0px;
    padding: 0px;
    margin-top: 30px;
}
.counter_tasks {
    font-size: 10px;
}
.card_task_list ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.card_task_list ul li {
    /*
    height: 21px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    */
    margin-bottom: 5px;
}
.card_task_list ul li label {
    vertical-align: middle;
    display: inline-block;
}
.card_task_list ul li span.deleteTask {
    display: none;
}
.card_task_list ul li span{
    font-weight: 300;
    color: grey;
}
.user-tag {
    background: #8ab3f0;
    padding: 3px;
    border-radius: 5px;
    color: white;
    display: inline-block;
    margin-right: 10px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
    transition: .3s ease-out;
}
.user-tag:hover {
    background: #f09da1;
}
.user-tag:hover > i {
    color: #d65c5c;
}
.user-tag span, .user-tag i {
    display: inline-block;
    vertical-align: middle;
}
.cursor-not-allowed {
    cursor: not-allowed;
}
.members-content {
    display: none;
    margin-bottom: 20px;
    position: relative;
}
.user_list_seleted_channel {
    background: #faf9f9;
    margin: 0px;
    padding: 10px;
    display: none;
}
.user_list_seleted_channel ul li span{
    display: inline-block;
    padding-top: 5px;
}
.user_list_seleted_channel ul li {
    margin: 10px;
    margin-bottom: 15px;
}
.user_list_seleted_channel ul li select{
    max-width: fit-content !important;
    float: right;
    margin: 0px;
    background: white;
}
body.no-scroll {
  overflow: hidden; /* Desactiva el scroll global */
}
.user_seleted_channel {
    width: 100%;
    min-height: 30px;
    background: #faf9f9;
    border-radius: 3px;
    padding: 5px;
    width: 100%;
    border-bottom: solid 1px #ccc;
    margin-bottom: 15px;
}
.user_seleted_channel:focus-visible {
    border: none;
    outline: none;
    border-bottom: solid 1px #46bec2;
}
.user_seleted_channel .user-tag .content_profile_list {
    display: inline-block;
    vertical-align: middle;
}
.usersListChannel {
    position: absolute;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1;
    display: none;
}
.usersListChannel ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.usersListChannel ul li .content_profile_list {
    display: inline-block;
    vertical-align: middle;
}
.usersListChannel ul li{
    padding: 10px;
    cursor: pointer;
    opacity: .8;
}
.usersListChannel ul li:hover{
    opacity: 1;
    background-color: #3ddd7e36;
} 
.usersListChannel #userSearch {
    background-color: white ;
    border-bottom: none !important;
}
.button-cancel {
    background: none;
    color: black;
    border: none;
}
#drop_menu_channel {
    margin: 0px;
    padding: 0px;
    background: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    visibility: hidden;
    position: fixed;
    z-index: 1;
    list-style: none;
    user-select: none;
}
.channel_list li.show {
    display: block;
} 
#drop_menu_channel li {
    padding: 10px;
    cursor: pointer;
}
#drop_menu_channel li i, #drop_menu_channel li span{
    display: inline-block;
    vertical-align: middle;
}
.divider-top {
    border-top: solid 1px #cccc ;
}
.desc {
    font-size: 13px;
    color: #979393;
    font-style: italic;
}
.mention-dropdown {
    display: none;
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #ddd;
    width: 200px;
    z-index: 1000;
    max-height: 150px;
    overflow-y: auto;
}
.mention-dropdown li {
    padding: 8px;
    cursor: pointer;
}
.mention-dropdown li:hover {
    background-color: #f0f0f0;
}

.new_comment {
    position: relative;
}
#mention_list {
    position: absolute;
}
/** Mentions systems */
.mention-container {
    position: relative;
    width: 100%;
    height: auto;
}
#mention-highlighter {
    font-family: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent; /* Hace el texto invisible */
    white-space: pre-wrap; /* Mantiene los saltos de línea */
    word-wrap: break-word; /* Ajusta el texto dentro del contenedor */
    overflow: hidden; /* Evita el desbordamiento */
    z-index: 1;
    background-color: #faf9f9;
    padding: 5px;
    border: solid 1px #faf9f9;
    margin-bottom:15px;
    overflow-wrap: break-word; /* Asegura que las palabras largas se ajusten */
}
#new_comment {
    font-family: inherit;
    position: relative;
    z-index: 2;
    background: transparent; /* Permite ver el fondo estilizado */
    width: 100%;
    height: auto;
    resize: none;
    font: inherit; /* Coincide con el highlighter */

    color: rgba(0, 0, 0, 0.7); /* Texto semi-transparente */
    caret-color: black; /* Asegura que el cursor sea visible */
}
.mention {
    background-color: #f0f8ff; /* Fondo azul claro */
    color: #007bff; /* Azul para el texto */
    border-radius: 2px;
    margin-left: .5px;
}


.comment_card {
    padding: 16px; /* Espaciado interno */
    margin-bottom: 12px; /* Separación entre tarjetas */
    font-family: Arial, sans-serif; /* Fuente */
    color: #333; /* Texto oscuro */
}

.comment_card .header {
    display: flex; /* Alineación horizontal */
    align-items: center; /* Centrado vertical */
    margin-bottom: 12px; /* Separación de la sección de cuerpo */
}

.comment_card .header div:first-child {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px; /* Texto placeholder más pequeño */
    color: #888; /* Texto placeholder tenue */
    margin-right: 12px; /* Espaciado respecto al texto */
}

.comment_card .header div:nth-child(2) {
    flex: 1; /* Ocupa el resto del espacio */
}

.comment_card .header span:first-child {
    font-weight: bold; /* Nombre destacado */
    display: block; /* Nueva línea */
    color: #007bff; /* Azul para resaltar */
    margin-bottom: 4px; /* Separación con la fecha */
}

.comment_card .header span:last-child {
    font-size: 12px; /* Texto más pequeño */
    color: #999; /* Color gris claro */
}

.body_comment_card {
    font-size: 14px; /* Tamaño de texto */
    line-height: 1.5; /* Altura de línea para legibilidad */
}

.body_comment_card .comment_text {
    color: #555; /* Texto ligeramente gris */
    margin-left: 63px;
}

.type_view_select {
    padding-left: 20px;
}
.type_view_select ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    padding-bottom: 3px;
    background-color: white;
    padding-left: 5px;
}
.type_view_select ul li:not(:last-child){
    margin-right: 15px;
}
.type_view_select ul li span:hover {
    opacity: 1;
}
.type_view_select ul li span{
    cursor: pointer;
}
.type_view_select ul li span.title{
    font-weight: bold;
    opacity: 1;
}
.type_view_select ul li{
    display: inline-block;
    font-weight: 300;
    font-size: 11px;
    background: white;
    opacity: .7;
    text-align: center;
}
.type_view_select ul li span, .type_view_select ul li i {
    vertical-align: middle;
    display: inline;
    color: grey;
    opacity: .8;
}
.type_view_select ul li a{
    text-decoration: none;
}
.current_type_view  {
    border-bottom: solid 2px #1111;
}
.subBavBar {
    width: 250px;
    background: white;
    position: fixed;
    top: 0px;
    left: 80px;
    height: 100%;
}
.subBavBar ul {
    list-style: none;
}
.subItem h3{
    margin: 0px;
    padding: 8px;
}
.subItem h3 span, .subItem h3 i{
    vertical-align: middle;
    display: inline-block;
}
.subItem h3 i {
    float: right;
    cursor: pointer;
}
.card_mini_details {
    border-top: solid 1px #1111;
    padding-top: 10px;
    color: grey;
    font-weight: 500;
}
.card_mini_details .assigned_list {
    list-style: none;
    padding: 0px;
    margin: 0px;
    padding-top: 10px;
}
.card_mini_details .assigned_list li{
    display: inline-block;
    padding-right: 5px;
}
#selected_users .title {
    display: none;
}
#card_view .dinamic_profiles li {
    display: block;
}
.selected-user-item {
    cursor: pointer;
    margin-bottom: 5px;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
.selected-user-item:hover {
    background: rgb(219 15 15 / 21%);
}
.selected-user-item:hover i, .profile-content-list:hover i{
    visibility: visible;
}
.remove-user-btn i{
    font-size: 24px !important;
}
.selected-user-item span,  {
    display: inline-block;
    vertical-align: middle;
}
.selected-user-item i, .profile-content-list i{
    color: black !important;
    visibility: hidden;
    vertical-align: middle;
    display: inline-block;
}
.profile-content-list {
    margin-bottom: 5px;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
.profile-content-list:hover {
    background: #3ddd7e36;
}
#assigned_content {
    display: inline-block;
    width: calc(100% - 40px);
    vertical-align: top;
}
#card_view .assigned_content {
    background: #faf9f9;
    min-height: 30px;
    border-radius: 3px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.profile-img-user-no-config {
    background: #111111;
    padding: 7px;
    color: white;
}
.profile-img-user, .profile-img-user-no-config {
    border-radius: 50px;
    width: 35px;
    height: 35px;
    display: inline-block;
    vertical-align: middle;
}
.profile-content-list .name_user {
    padding-left: 10px;
}

/* Contenedor para formulario de tarjeta */
.card_form_basic {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.input-content button {
    float: right;
    margin: 0px;
}
.input-content h4 {
    margin: 0px;
    padding: 0px;
}
#assigned_id_user_view {
    cursor: pointer;
    display: block;
}
.assing_content {
    display: none;
    position: absolute;
    width: 100%;
    max-width: 246px;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: solid 1px #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 9;
}
.input-content ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.input-content {
    display: inline-block;
    margin-bottom: 20px;
    position: relative;
}
.card_form_inline_three:not(:last-child)  {
    margin-right: 40px;
}
.card_form_inline_one {
    width: 100%;
}
.input-group {
    display: flex;
}
.card_form_inline_one textarea, .card_form_inline_one input:not(.task_to_do_name_new_val),
.card_form_inline_one select{
    max-width: 100% !important;
}
.input input, .input select, .input textarea{
    background-color: #faf9f9;
    border-radius: 3px;
}
.input-content label {
    display: block;
}
#cardFormBasic .inputs-content{
    padding: 15px;
}
.card_form_basic i {
    padding-right: 10px;
    font-size: 12px;
}
.card_form_basic label i, .card_form_basic label span{
    display: inline-block;
    vertical-align: middle;
}
.card_form_basic .assing {
    cursor: pointer;
    display: inline-block;
}
.card_form_basic button{
    width: 100%;
    text-align: center;
    background-color: #47bfc3;
    color: white;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.card_form_basic .input-content{
    display: block;
    position: relative;
}
/* Contenedor principal */
#breadcrumbs {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 10px 20px;
    margin: 0;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    border-bottom: solid 1px #1111;
    margin-bottom: 25px;
}

/* Estilo para cada ítem */
#breadcrumbs li {
    margin: 0;
    padding: 0;
}

/* Links dentro de los breadcrumbs */
#breadcrumbs li a {
    text-decoration: none; /* Sin subrayado */
    color: #007bff; /* Azul profesional */
    font-weight: 500; /* Peso de texto */
    transition: color 0.2s ease;
}

#breadcrumbs li a:hover {
    color: #0056b3; /* Azul más oscuro al pasar el mouse */
}

/* Separadores entre los elementos */
#breadcrumbs li + li::before {
    content: '>';
    margin: 0 10px;
    color: #6c757d; /* Gris suave */
    font-weight: normal;
}

/* Último elemento sin enlace (activo) */
#breadcrumbs li:last-child a {
    color: #6c757d; /* Gris suave */
    pointer-events: none; /* Desactiva el clic */
    cursor: default;
    font-weight: bold; /* Resalta el ítem activo */
}
.channel_list {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.channel_list li {
	padding: 0px;
}
.channel_list li:not(:last-child) {
	border-bottom: solid 1px #1111;
}
.current_channel {
}
.current_channel a {
    opacity: 1;
    font-weight: bold;
}
.channel_list a {
    padding: 10px;
    display: block;
    vertical-align: middle;
    color: #222;
    text-decoration: none;
    opacity: .8;
}
.channel_list li i:not(.type){
    vertical-align: middle;
    float: right;
    display: none;
}
.channel_list li i.type{
    float: left;
    color: #ccc;
    font-size: 13px;
    margin-right: 10px;
    padding-top: 3px;
}
.channel_list a:hover {
    opacity: 1;
    background-color: #f9f9f9;
}
.channel_list a:hover > i:not(.type){
    display: block;
    color: #6f6e6e;
}
.content_chanel {
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
}
.comment:not(.children) {
	position: relative;
	margin: 15px 0;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: white;
}
.comment .profile {
	border-radius: 50px;
	background: grey;
	width: 35px;
	height: 35px;
}
.children-content {
	border-top: solid 1px #1111;
}
.children {
	padding-top: 15px;
	padding-bottom: 15px;
}
.comment:not(.children) .profile,
.comment:not(.children) .comment,
.comment:not(.children) .full_name
.comment:not(.children) .timeago{
	display: inline-block;
	vertical-align: middle;
}
.comment .footer {
	border-top: solid 1px #1111;
	padding-top: 10px;
}

/* Comentarios hijos */
.children {
    margin-left: 20px;
    padding: 10px;
    position: relative;
    border-top: 1px solid #ccc; /* Borde entre los comentarios hijos */
}

/* Opcional: Si deseas eliminar el borde en el primer hijo para que no aparezca en la parte superior del contenedor */
.children:first-child {
    border-top: none;
}
/* Estilos para el encabezado del comentario */
.comment .header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #444; /* Color gris oscuro para el texto general */
}

/* Estilo para el nombre completo del usuario */
.comment .header .full_name {
    font-weight: bold;
    color: #2c3e50; /* Color oscuro para resaltar el nombre */
}

/* Estilo para el tiempo (fecha) */
.comment .header .timeago {
    color: #7f8c8d; /* Gris claro para el tiempo */
    font-style: italic; /* Para darle un estilo distinto */
}

/* Estilos para el cuerpo del comentario */
.comment .body h3 {
    font-size: 18px;
    color: #34495e; /* Un color más oscuro para el título del comentario */
    margin: 0;
    font-weight: 600; /* Resaltar el título */
}

/* Estilo para el contenido del comentario */
.comment .body p {
    font-size: 16px;
    color: #555; /* Color gris medio para el texto del comentario */
    line-height: 1.6; /* Aumentar el espacio entre líneas para facilitar la lectura */
}

/* Agregar un poco de margen al cuerpo del comentario */
.comment .body {
    margin-top: 10px;
}

/* Estilos para los comentarios hijos */
.comment .children .header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #444; /* Color gris oscuro para el texto general */
}

/* Estilo para el nombre completo del usuario en los comentarios hijos */
.comment .children .header .full_name {
    font-weight: bold;
    color: #2c3e50; /* Color oscuro para resaltar el nombre */
}

/* Estilo para el tiempo (fecha) en los comentarios hijos */
.comment .children .header .timeago {
    color: #7f8c8d; /* Gris claro para el tiempo */
    font-style: italic; /* Para darle un estilo distinto */
}

/* Estilos para el cuerpo de los comentarios hijos */
.comment .children .body h3 {
    font-size: 18px;
    color: #34495e; /* Un color más oscuro para el título del comentario */
    margin: 0;
    font-weight: 600; /* Resaltar el título */
}

/* Estilo para el contenido de los comentarios hijos */
.comment .children .body p {
    font-size: 16px;
    color: #555; /* Color gris medio para el texto del comentario */
    line-height: 1.6; /* Aumentar el espacio entre líneas para facilitar la lectura */
}

/* Agregar un poco de margen al cuerpo de los comentarios hijos */
.comment .children .body {
    margin-top: 10px;
}

/* Reacciones ocultas por defecto */
.comment .reactions_content,
.children .reactions_content {
    position: relative;
}

.comment .comment-reactions,
.children .comment-reactions {
    display: none;
    position: absolute;
    top: -40px;
    left: 10px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 5px 10px;
    z-index: 1000;
    align-items: center;
    gap: 10px;
}

/* Mostrar reacciones solo cuando el mouse está sobre el comentario padre, no sobre los hijos */
.comment-parent:hover > .reactions_content > .comment-reactions {
    display: flex;
}

/* Mostrar reacciones cuando se hace hover sobre un comentario hijo (solo el hijo) */
.children:hover > .reactions_content > .comment-reactions {
    display: flex;
}

/* Reactivar los eventos de hover solo en el contenedor de reacciones del hijo */
.children:hover > .reactions_content {
    pointer-events: auto; /* Reactivar los eventos solo en el hover del hijo */
}

/* Evitar que el hover sobre los hijos afecte las reacciones del padre */
.children .reactions_content {
    pointer-events: none;
}
/* Reacciones individuales */
.comment .reaction,
.children .reaction {
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    transition: transform 0.2s;
}

.comment .reaction:hover,
.children .reaction:hover {
    transform: scale(1.3);
}

/* Botón de opciones */
.comment .reaction-options,
.children .reaction-options {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 5px;
    margin-left: 5px;
}
.action-column-options {
    background: none; /* Elimina fondo predeterminado */
    border: none; /* Sin borde */
    cursor: pointer; /* Cursor de clic */
    padding: 0; /* Opcional: ajusta el espaciado interno */
    margin: 0; /* Elimina márgenes */
    display: flex; /* Centra el icono dentro del botón */
    align-items: center;
    justify-content: center;
    opacity: 0; /* El botón es invisible */
    visibility: hidden; /* No interactuable */
}
.action-card-options {
    background: none; 
    border: none; 
    cursor: pointer; /* Cursor de clic */
    padding: 0; /* Opcional: ajusta el espaciado interno */
    margin: 0; /* Elimina márgenes */
    display: flex; /* Centra el icono dentro del botón */
    align-items: center;
    justify-content: center;
    opacity: 0; /* El botón es invisible */
    visibility: visible; /* No interactuable */
    float: right;
}
/* Menú de opciones */
.comment .options-menu,
.children .options-menu {
    display: none;
    position: absolute;
    top: 30px;
    right: 0;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 5px 0;
}

.comment .options-menu ul,
.children .options-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.comment .options-menu li,
.children .options-menu li {
    padding: 5px 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.comment .options-menu li:hover,
.children .options-menu li:hover {
    background: #f0f0f0;
}

/* Mostrar menú al hacer clic */
.comment .reaction-options.active + .options-menu,
.children .reaction-options.active + .options-menu{
    display: block;
}

/* Estilo general para el tablero Kanban */
.kanban-board {
    display: flex;
    gap: 20px;
    justify-content: flex-start; /* Alineación a la izquierda */
    flex-wrap: nowrap; /* Evita que las columnas se envuelvan */
    overflow-x: auto; /* Habilita el desplazamiento horizontal */
    /*height: calc(100vh - 210px);*/
}
body[page=kanban-board] .main_container {
    /*background: beige; debug*/
    height: calc(100vh - 0px);
}
/* Estilos para las columnas del tablero */
.kanban-column, .kanban-column-fake  {
    width: 320px; /* Ancho fijo para las columnas */
    min-width: 250px; /* Ancho mínimo si hay espacio limitado */
    padding: 10px;
    flex-shrink: 0; /* Evita que las columnas se encojan */
    height: calc(100vh - 150px);
    /*background: blue; debug*/
}
.kanban-header .name_column {
    cursor: pointer;
}
.kanban-header {
    display: flex; /* Activamos flexbox */
    align-items: center; /* Alinea verticalmente el contenido */
    justify-content: space-between; /* Separa el texto y el botón */
    margin: 0; /* Opcional: elimina márgenes predeterminados */
}
.kanban-header:hover .action-column-options {
    opacity: 1; /* El botón se vuelve visible */
    visibility: visible; /* Permite interacción */
}
.kanban-column:not(.no-sortable) h4{
    color: #333;
    margin-bottom: 10px;
    cursor: move;
}
.kanban-column-fake h4 { 
	cursor: pointer;
    margin: 0px;
    color: blue;
}
.kanban-column-fake h4 i {
    display: inline-block;
    vertical-align: middle;
}

/* Estilos para las tarjetas dentro de las columnas */
.kanban-cards {
    /*background: red;*/
    height: calc(100% - 30px);
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 15px;
    padding-left: 7px;
}
.sortable-ghost {
    background: #e0e0e0;
    opacity: 0.8;
    transform: scale(1.05); /* Hace que se vea ligeramente más grande */
    border: 1px dashed #007bff; /* Agrega un borde */
}
.kanban-card, .show-card-form-basic{
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.kanban-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    position: relative;
}
.kanban-card:hover .action-card-options {
    opacity: 1;
    visibility: visible;
}

.kanban-card button:not(.action-card-options) {
	background-color: transparent;
    border: solid 1px #1111;
    display: block;
    width: 100%;
    border-radius: 5px;
    height: 50px;
    cursor: pointer;
}
.kanban-card.no-sortable {
	cursor: initial !important;
	background: transparent;
	box-shadow: none;
	border: none;
}
.kanban-card h5 {
    cursor: pointer;
    margin: 0px;
    padding: 0px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 0px;
    padding-top: 10px;
    font-size: 16px;
    font-weight: 300;
}
.kanban-card h4 {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.kanban-card p {
    font-size: 14px;
    color: #555;
}

/* Estilo para hacer que las tarjetas se vean más atractivas */
.kanban-card:hover {
	cursor: move;
}
#new_column_name {
	display: none;
	margin-bottom: initial;
	margin-top: 0px;
}

.disabled_input {
	cursor: not-allowed;
	background-color: #0000001a;
}
#tag_input, #user_input {
    margin-bottom: 0px;
    min-height: 30px;
    border-radius: 3px;
}
#tag_dropdown {
    position: absolute;
    height: 200px;
    background: white;
    overflow-y: auto;
    width: 230px;
    padding: 10px;
    border: solid 1px #ccc;
    display: none;
    z-index: 1;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#tag_dropdown ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    width: 100%;
}
#tag_dropdown ul li {
    display: block;
    position: relative;
    opacity: .8;
}
#tag_dropdown ul li:hover {
    opacity: 1;
}
#tag_dropdown .tag-name {
    padding: 3px;
    margin-top: 2px;
    display: block;
    border-radius: 0px;
}
.tag-name, .tag-name_ {
    border-radius: 5px;
    cursor: pointer;
}
.tag-name_ {
    padding-right: 3px;
}
.edi-btn-tag, .remove-btn-tag {
    background: transparent;
    border: solid 1px #0000001a;
}
#tag_dropdown .edit-btn-tag, #tag_dropdown .remove-btn-tag  {
    cursor: pointer;
    padding: 5px;
    position: absolute;
    right: 0px;
    top: 0px;
    background: transparent;
    border: none;
    outline: none;
}
#tag_dropdown .edit-btn-tag i, #tag_dropdown .remove-btn-tag i{
    font-size: initial;
}
#edit_tag_input {
    left: 235px;
    width: 100%;
    max-width: fit-content;
    z-index: 1;
    background: #faf9f9;
    border-radius: 3px;
    border: solid 1px #1111;
    border-bottom: solid 1px #46bec2;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#edit_floating_tag {
    display: none;
    position: absolute;
}
.tag_input_container {
    margin-bottom: 25px;
}
.tag_selected {
    background-color: #faf9f9;
    position: relative;
}
.tag_selected i.icon-input {
    background: white;
    display: inline-block;
    height: 35px;
    width: 35px;
    vertical-align: middle;
    padding-top: 5px;
}
.tag_selected ul:focus-visible {
    border: none;
    outline: none;
    border-bottom: solid 1px #46bec2;
}
.tag_selected ul, .assigned_list_seleted ul, .tags_selected{
    padding: 0px;
    margin: 0px;
    list-style: none;
    vertical-align: middle;
    width: 100%;
}
.tag_selected  ul li, .assigned_list_seleted ul li, .tags_selected li{
    display: inline-block;
    margin-bottom: 5px;
}
#tag_input li {
    margin: 5px;
}
.tag_selected ul .tag-name, 
.tags_selected .tag-name, 
.tags_selected .tag-name_{
    padding-left: 3px;
}
.tag_selected .remove-btn-tag {
    padding: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: none;
    cursor: pointer;
}

#channelViewForm, #card_view {
    padding: 20px;
    overflow-y: auto;
    width: 70% !important;
    max-width: 750px !important;
}
#card_view {
    min-height: 450px;
    height: 100%;
}
#channelViewForm h3, #card_view h3 {
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    padding: 5px;
    padding-left: 0px;
    margin-bottom: 25px;
}
#channelViewForm h3 {
    padding: 0 !important;
    margin-bottom: 20px;
}
#card_view h3:hover {
    background-color: #f2f1f0;
}
.modal label {
    color: rgb(92 93 96);
    font-weight: 600;
}
#card_view #assigned_id_user_view i, 
#card_view #assigned_id_user_view span {
    display: inline-block;
    vertical-align: middle;
}
.show_task {
    position: absolute;
    right: 5px;
    top: 0px;
    cursor: pointer;
    user-select: none;
}
.show_task input, .show_task span {
    display: inline-block;
    vertical-align: middle;
}
.show_task span {
    font-weight: 300;
}
.task_to_do {
    margin-top: 20px !important;
}
.task_to_do input[type="text"] {
    max-width:  initial !important;
}
.task_to_do li{
    padding: 5px;
}
.task_to_do li:not(.fake_check){
    cursor: move;
}
.task_to_do li:not(:last-child) {
    margin-bottom: 10px;
}
.task_to_do li:hover {
    background-color: #f2f1f0;
}
.task_to_do li:hover .action {
    display: initial;
}
.task_to_do li span, .task_to_do li input[type="checked"], .task_to_do li label {
    vertical-align: middle;
    display: inline-block;
}
.column_name_new_val {
    display: none;
}
.task_to_do_name_original {
    cursor: pointer;
}
input[type="checkbox"] {
    cursor: pointer;
}
.through {
    text-decoration: line-through;
    color: gray;
}
.task_to_do .action {
    cursor: pointer;
}
.task_to_do_name_new_val {
    width: calc( 100% - 60px ) !important;
    margin-bottom: initial !important;
    height: initial !important;
}
/* Estilo base para el li */
.task_to_do li.deleting {
    position: relative;
    background-color: #ff00001f; /* Fondo rojo */
}

/* La barra animada */
.task_to_do li.deleting::before, .kanban-card.deleting::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Comienza fuera del elemento */
    width: 100%;
    height: 100%;
    background: rgb(139 0 0 / 5%); /* Tono más oscuro de rojo */
    animation: loadingBar .5s linear infinite; /* Animación continua */
}

/* Animación de la barra */
@keyframes loadingBar {
    0% {
        left: -100%; /* Inicia fuera del lado izquierdo */
    }
    100% {
        left: 100%; /* Termina fuera del lado derecho */
    }
}

.hide_by_event {
    display: none !important;
}
.task_to_do .action, .task_to_do_name_new_val {
    display: none;
}
.fake_check {
    margin-left: 4px;
}
.fake_check .label, .fake_check .input-check {
    display: inline-grid;
}
.fake_check .input-check {
    border: solid 1px;
    border-radius: 3px;
    width: 15px;
    height: 15px;
}
#new_task_do_name {
    display: none;
}
/* Contenedor principal */
.notification_header_content {
    position: absolute;
    color: #54656f;
    right: 65px;
    top: 2px;
    background: white;
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
}
.notification_header_content:hover {
    transform: scale(1.1);
}
.profile_content {
    position: absolute;
    top: 2px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Imagen de perfil */
.profile_image img {
    border-radius: 50%; /* Hace la imagen circular */
    width: 35px;
    height: 35px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Efecto al pasar el cursor */
.profile_image img:hover {
    transform: scale(1.1);
}

/* Menú oculto */
.profile_menu {
    position: absolute;
    top: 50px; /* Distancia desde la imagen */
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 10px;
    display: none; /* Oculto por defecto */
    z-index: 10;
}

/* Lista dentro del menú */
.profile_menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.profile_menu li {
    margin-bottom: 10px;
}

.profile_menu li a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.profile_menu li a:hover {
    color: #007BFF; /* Cambia a azul al pasar el cursor */
}
.modal {
    border-radius: 3px;
    position: static;
    overflow-y: auto; /* Permite scroll dentro del modal */
    max-height: 80vh; /
}
#profile_view {
    padding: 0px;
}
#profile_view {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

/* Encabezado */
#profile_view .profile_header {
    text-align: center;
    margin-bottom: 20px;
}

#profile_view .profile_picture {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

#profile_view .profile_picture img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ddd;
}
#cropButton {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
#profile_view .profile_picture .edit_picture_btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
}

#profile_view .profile_picture .edit_picture_btn:hover {
    background-color: #0056b3;
}

#profile_view .profile_name {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin: 0px;
}
#profile_view .profile_name span{
    display: block;
    font-size: 12px;
    color: #ccc;
    font-weight: 400;
}
#profile_view .profile_email {
    font-size: 14px;
    color: #777;
}
#profile_view input {
    max-width: 100% ;
}

/* Cuerpo */
#profile_view .profile_body {
    margin-top: 20px;
}

#profile_view .form_group {
    margin-bottom: 0px;
}

#profile_view .form_group label {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #555;
    margin-bottom: 5px;
}

#profile_view .form_group input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

#profile_view .form_group input:focus {
    border-color: #007BFF;
}

#profile_view .save_changes_btn {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

#crop_content {
    display: none;
}
/* Ocultar campos de edición por defecto */
.edit_field {
    display: none;
}

/* Botón de guardar oculto por defecto */
.save_changes_btn {
    display: none;
}

/* Ajustar el botón de edición */
#edit_profile_btn, #reset_profile_btn {
    background-color: #007BFF;
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-top: 10px;
}
#reset_profile_btn {
    display: none;
}

#edit_profile_btn:hover {
    background-color: #0056b3;
}

#imgProfile {

}
.cropper-view-box,
.cropper-face {
    border-radius: 50%; /* Hacer la máscara circular */
}
#cropButton {
    display: none;
}
.content_profile_list img, .content_profile_list span {
    display: inline-block;
    vertical-align: middle;
}
.content_profile_list img {
    border-radius: 35px;
    max-width: 35px;
    cursor: initial;
    width: 100%;
}
.card_title_input {
    max-width: 100% !important;
    display: none;
}