:root {
    --color-principal: #ffff;
    --color-secundario: #f5f5f5;
    --color-fondo: #f5f5f5;
    --color-texto: #535353;
    --color-bordes: #d7d7d7;
    --color-hover: #e6e6e6;
    --custom-accordion-btn-icon-side: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%23d7d7d7' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    --custom-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%23535353' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

body.dark-mode.pallette-strong {
    --color-principal: #1a1a1a;
    --color-secundario: #313131;
    --color-fondo: #232323;
    --color-texto: #d7d7d7;
    --color-bordes: rgba(83, 83, 83, 0.3);
    --color-hover: #8080801c;
    --custom-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%23d7d7d7' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}

body.dark-mode.pallette-folder {
    --color-principal: #03131a;
    --color-secundario: #112731;
    --color-fondo: #0d1f26;
    --color-texto: #d7d7d7;
    --color-bordes: rgba(83, 83, 83, 0.3);
    --color-hover: rgba(17, 39, 49, 0.4);
    --custom-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='%23d7d7d7' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
}


@font-face {
    font-family: 'Roboto Regular';
    src: url('/Font/Roboto-Regular.ttf') format('woff2'), url('/Font/Roboto-Regular.woff') format('woff'), url('/Font/Roboto-Regular.ttf') format('truetype');
    font-style: normal;
}

* {
    font-family: 'Roboto Regular', sans-serif;
    list-style: none;
    text-decoration: none;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
}

    .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
        box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
    }

    .qr-botonera {
        top: -61px;
        display: none;
    }

    .container-profile-qr:hover .qr-botonera {
        display: block !important;
    }

    .qr-botonera .qr-botonera-internal {
        display: flex;
        align-items: center;
        height: 85px;
    }

    .container-profile-qr {
        width: 170px;
        height: 170px;
        top: -90px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

    .profile-qr {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    .qr-botonera .qr-btn {
        background-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        font-size: 25px;
        cursor: pointer;
        color: black;
    }
        .qr-botonera .qr-btn:first-child {
            margin-right: auto;
            border-radius: 0px;
            border-bottom-left-radius: 10px;
            border-top-right-radius: 10px;
            width: 40px;
            text-align: center;
        }

        .qr-botonera .qr-btn:last-child {
            margin-left: auto;
            border-radius: 0px;
            border-bottom-right-radius: 10px;
            border-top-left-radius: 10px;
            width: 40px;
            text-align: center;
        }

/* Contenedor principal de las tarjetas */
.systems-container {
    justify-content: center;
}

/* Enlace de la tarjeta */
.system-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .system-card-link:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

/* Estilo de la tarjeta en sí */
.system-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    position: relative;
    height: 100%; /* Asegura que todas las tarjetas tengan la misma altura */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.icon-list-group-custom {
    background: var(--color-fondo);
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

/* Contenedor del ícono */
.card-icon-container {
    width: 60px;
    height: 60px;
    background-color: #f0f2f5;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;
}

.system-icon {
    font-size: 2.2rem;
    color: #535353; /* Color primario, puedes cambiarlo */
}

/* Contenido del texto */
.card-content {
    flex-grow: 1; /* Hace que el contenido crezca para ocupar el espacio */
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.card-text {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 15px;
}

/* Imagen del logo */
.card-img {
    width: 100%;
    max-width: 150px;
    height: auto;
    margin: 0 auto;
    padding: 10px; /* Separación del texto */
}

/* Ajustes para dispositivos móviles */
@media (max-width: 768px) {
    .system-card {
        padding: 20px;
    }

    .card-title {
        font-size: 1.15rem;
    }

    .card-text {
        font-size: 0.85rem;
    }
}

input[type=checkbox] {
    width: 20px;
}

.card-text {
    text-align: justify;
}

.b-0{
    border: 0px !important;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 13px;
}

body {
    margin-bottom: 60px;
    background-color: #f5f5f5;
}

/*table tr:nth-child(odd) td {
    background-color: #f2f2f2;*/ /* Color de fondo para celdas en filas impares */
/*}

table tr:nth-child(even) td {
    background-color: #ffffff;*/ /* Color de fondo para celdas en filas pares */
/*}*/

table tr:nth-child(odd) td input {
    background-color: transparent !important; /* Color de fondo para celdas en filas impares */
}

table tr:nth-child(even) td input {
    background-color: transparent !important; /* Color de fondo para celdas en filas pares */
}

table.table tr td,
table.dataTable tr td {
    background-color: transparent !important; /* Color de fondo para celdas en filas pares */
}

table.editable-table tbody tr,
table.table tbody tr,
table.dataTable tbody tr {
    border-bottom: 1px solid var(--color-bordes) !important;
}

    table.table tbody tr:hover,
    table.dataTable tbody tr:hover {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
        background-color: #8080801c !important;
    }

table tbody.table-group-divider {
    border-top: 1px solid var(--color-bordes) !important;
}

#view-sprint tr td {
    background-color: transparent !important; /* Color de fondo para celdas en filas pares */
}

#view-sprint tbody tr {
    border-bottom: 1px solid var(--color-bordes) !important;
}

    #view-sprint tbody tr:hover {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
        background-color: #8080801c !important;
    }

#calendar tbody tr:hover {
    box-shadow: none !important;
    background-color: transparent !important;
}

.note-editor.note-airframe .note-editing-area .note-editable[contenteditable="false"], .note-editor.note-frame .note-editing-area .note-editable[contenteditable="false"] {
    background-color: transparent !important;
}


/* Estilos generales para #emailList y .emailList */
#emailList td,
.emailList td {
    background-color: transparent !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

#emailList tr td.date,
.emailList tr td.date {
    padding-right: 15px;
}

#emailList tr td.action-buttons,
.emailList tr td.action-buttons {
    padding-right: 15px;
    background-color: transparent;
}

    #emailList tr td.action-buttons div,
    .emailList tr td.action-buttons div {
        background-color: transparent;
    }

#emailList tr td:first-child,
.emailList tr td:first-child {
    padding-left: 15px;
    padding-right: 15px;
}

#emailList tr,
.emailList tr {
    border-bottom: 1px solid var(--color-texto) !important;
}

#emailList .email-item:hover,
.emailList .email-item:hover {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
    background-color: #8080801c;
}

#emailList .email-item,
.emailList .email-item {
    cursor: pointer;
    vertical-align: top;
}

    #emailList .email-item.email-read,
    .emailList .email-item.email-read {
        background-color: #8080801c;
    }

    #emailList .email-item .attach-tr,
    .emailList .email-item .attach-tr {
        background-color: #f9f9f9;
        width: 0px !important;
        flex-grow: 1;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-radius: 20px;
        margin-right: 5px;
        padding-left: 10px;
        color: #535353;
    }

    #emailList .email-item .action-buttons,
    .emailList .email-item .action-buttons {
        display: flex !important;
        display: none !important;
    }

    #emailList .email-item .subject,
    .emailList .email-item .subject {
        flex-grow: 1;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #emailList .email-item .sender,
    .emailList .email-item .sender {
        flex-grow: 1;
        margin-right: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #emailList .email-item:hover .date:not(.date.in-modal),
    .emailList .email-item:hover .date:not(.date.in-modal) {
        display: none;
    }

    #emailList .email-item:hover .action-buttons,
    .emailList .email-item:hover .action-buttons {
        display: flex !important;
        display: block;
        justify-content: right;
        font-size: 15px;
    }

.email-label {
    background-color: #b7b7b721;
    padding: 10px;
    border-radius: 30px;
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0px;
}

.signature-item-template{
    cursor: pointer;
}

.table-hover > tbody > tr:hover {
    background-color: #8080801c !important;
}

table thead tr th {
    background: transparent !important;
}

tfoot td {
    padding: 4px;
    background: transparent !important;
}

table {
    width: 100%;
}

.space-between {
    justify-content: space-between;
    display: flex;
}

.center-element {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

.hide {
    display: none !important;
    transform: translateX(-0%);
}

.wdt-100 {
    width: 100% !important;
}

a {
    text-decoration: none;
    color: black
}

    a:hover {
        color: #36aeff;
        transition: all 0.4s ease;
    }

p {
    margin-bottom: 5px;
}

.transform-none {
    transform: none !important
}

.scroll {
    overflow-y: scroll;
    overflow-x: hidden;
}


.folder-color-hover {
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

    .folder-color-hover:hover {
        color: #009eff !important;
        transition: all 0.4s ease;
    }

.line-table-modal {
    cursor: pointer;
}

/* Global positions css*/
.align-center-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.align-text-right {
    text-align: right;
}

.align-text-center {
    text-align: center;
}
/* Estilos Breadcrum */
.breadcrum-item {
    text-align: center;
    font: medium;
    display: flex;
    justify-items: center;
    align-items: center;
    padding-left: 5px;
    margin-left: 5px;
    color: #535353;
    font-size: 15px !important;
}

/* Modificaciones Jquery UI*/

.tabs {
    margin-top: 10px;
    padding: 0 !important
}

    .tabs.ui-tabs {
        border: none !important;
        background: transparent;
    }

    .tabs ul.ui-tabs-nav {
        border: none !important;
        margin-bottom: 10px;
        background: #fff;
        box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
        padding: 5px !important;
    }

.ui-state-hover {
    border-radius: 5px !important;
}

.tabs li.ui-tabs-tab {
    border: none !important;
    background: white;
    background-color: white;
    border: none !important;
    border-radius: 4px !important;
        margin-right: 3px;
}

    .tabs li.ui-tabs-tab a {
        color: #535353 !important;
        font-weight: normal;
    }

.tabs li.ui-state-hover {
    transition: all 0.4s ease;
    background-color: #e6e6e6;
}

.tabs li.ui-tabs-active.ui-state-hover {
    background-color: white;
}

.tabs li.ui-tabs-active a.ui-tabs-anchor {
    color: #535353 !important;
    /*border-bottom: 1px solid #009eff;*/
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0px;
    padding-bottom: 0px;
    background-color: #f5f5f5;
    font-weight: bold;
    color: #535353 !important;
}

.tabs div.ui-tabs-panel {
    background: white;
    padding: 10px !important;
    border-radius: 5px;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
    border: 0px !important;
}

.custom-tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: transparent;
}

.custom-tabs {
    padding-bottom: 10px;
}

.nav-widget .btn {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.custom-tabs.nav-tabs .nav-link.active {
    /*border-bottom: 2px solid #009eff !important;*/ /* Simula la línea azul inferior */
}

.custom-tabs.nav-tabs .nav-link {
    border: none !important;
    color: #535353;
}

.custom-tabs .nav-link:hover {
    border: none !important;
    background: var(--color-texto)cc;
    border-radius: 5px;
}

.dropdown-menu {
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
    background: #fff;
    border: 0px;
    border-radius: 5px;
}

.ui-datepicker-header select {
    border: 1px solid var(--color-texto);
}

.ui-widget.ui-widget-content {
    border: 1px solid var(--color-texto);
}

button {
    border: 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    border: 1px solid var(--color-texto) !important;
}

/*Modificaciones a libreria datetimerpicker-master*/

.xdsoft_datetimepicker {
    border: 0 !important;
    border-radius: 5px !important;
}

    .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_date:hover {
        background: #33aaff !important;
    }

    .xdsoft_datetimepicker .xdsoft_label i, .xdsoft_datetimepicker .xdsoft_prev, .xdsoft_datetimepicker .xdsoft_next, .xdsoft_datetimepicker .xdsoft_today_button {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0NBRjI1NjM0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0NBRjI1NjQ0M0UwMTFFNDk4NkFGMzJFQkQzQjEwRUIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQ0FGMjU2MTQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQ0FGMjU2MjQzRTAxMUU0OTg2QUYzMkVCRDNCMTBFQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoNEP54AAAIOSURBVHja7Jq9TsMwEMcxrZD4WpBYeKUCe+kTMCACHZh4BFfHO/AAIHZGFhYkBBsSEqxsLCAgXKhbXYOTxh9pfJVP+qutnZ5s/5Lz2Y5I03QhWji2GIcgAokWgfCxNvcOCCGKqiSqhUp0laHOne05vdEyGMfkdxJDVjgwDlEQgYQBgx+ULJaWSXXS6r/ER5FBVR8VfGftTKcITNs+a1XpcFoExREIDF14AVIFxgQUS+h520cdud6wNkC0UBw6BCO/HoCYwBhD8QCkQ/x1mwDyD4plh4D6DDV0TAGyo4HcawLIBBSLDkHeH0Mg2yVP3l4TQMZQDDsEOl/MgHQqhMNuE0D+oBh0CIr8MAKyazBH9WyBuKxDWgbXfjNf32TZ1KWm/Ap1oSk/R53UtQ5xTh3LUlMmT8gt6g51Q9p+SobxgJQ/qmsfZhWywGFSl0yBjCLJCMgXail3b7+rumdVJ2YRss4cN+r6qAHDkPWjPjdJCF4n9RmAD/V9A/Wp4NQassDjwlB6XBiCxcJQWmZZb8THFilfy/lfrTvLghq2TqTHrRMTKNJ0sIhdo15RT+RpyWwFdY96UZ/LdQKBGjcXpcc1AlSFEfLmouD+1knuxBDUVrvOBmoOC/rEcN7OQxKVeJTCiAdUzUJhA2Oez9QTkp72OTVcxDcXY8iKNkxGAJXmJCOQwOa6dhyXsOa6XwEGAKdeb5ET3rQdAAAAAElFTkSuQmCC);
    }

.form-control::placeholder {
    color: currentColor;
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: none;
    border-color: #258cfb; /* Puedes cambiar el color del borde si lo deseas */
}

.form-control, .form-select {
    border: 0;
    outline: none !important;
    box-shadow: none;
    padding: 5px;
    padding-left: 8px;
}

    .form-control:disabled, .form-control[readonly] {
        background-color: #fbfbfb;
        opacity: 1;
    }

/*.form-select {
    padding: 5px;
    padding-left: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16"> <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/> </svg>');
}
*/
.form-select {
    cursor: pointer;
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden; /* Oculta cualquier texto que desborde */
    text-overflow: ellipsis; /* Agrega puntos suspensivos (...) si el texto es demasiado largo */
    border: 0;
    padding-right: 30px;
}

    .form-select select option {
        white-space: nowrap; /* Asegura que las opciones dentro del select no se dividan en varias líneas */
    }

    .form-select:disabled, .form-select[readonly] {
        background-color: #fbfbfb;
        opacity: 1;
    }

.form-label {
    font-weight: bold;
    font-size: 13px;
    color: #535353;
    margin-top: 6px;
}

.form textarea {
    resize: vertical !important;
    outline: none !important;
}

/*input, select, textarea {
    border: 1px solid rgb(204, 203, 203) !important;
}

.btn {
    border: 1px solid rgb(204, 203, 203) !important;
}*/

input, select:focus {
    outline: none !important; /* Elimina el borde predeterminado */
}

.form-check-input:checked {
    background-color: #009eff;
    border-color: none !important;
}

.form-check-input {
    cursor: pointer;
}

.white {
    background: white;
}

    .white:hover {
        background: rgba(215, 215, 215, 0.5);
    }

.border {
    border: 2px solid whitesmoke !important;
}

.bg-gray {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
}

.color-black {
    color: black;
}

.btn.bg-gray:hover {
    background-color: #e6e6e6 !important;
    transition: all 0.4s ease;
}

#widget-modals div.show-modal {
    padding-left: 36%;
    padding-right: 33%;
    padding-top: 15%;
    padding-bottom: 15%;
    transform: none !important;
}

#widget-modals table.dataTable tbody tr {
    cursor: pointer;
}

table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
    border-bottom: 1px solid rgba(174, 174, 174, 0.3) !important;
}

table.dataTable > tfoot > tr > th, table.dataTable > tfoot > tr > td {
    border-top: 1px solid rgba(174, 174, 174, 0.3) !important;
}

/*table.dataTable tbody tr td:has(a.action) {
    position: absolute;
    right: 10px;
}

table.dataTable thead th:last-child span {
    display: none !important;
}

table.dataTable thead th:last-child {
    display: none !important;
    border: 0px;
    padding: 0px;
    width: 0px;
}
*/

div.dt-container.dt-empty-footer .dt-scroll-body {
    border-bottom: 1px solid rgba(174, 174, 174, 0.3) !important;
}

table.table tbody td {
    border-bottom: 1px solid rgba(174, 174, 174, 0.3) !important;
}

div.dt-container.dt-empty-footer tbody > tr:last-child > * {
    border-bottom: 1px solid rgba(174, 174, 174, 0.3) !important;
}


/* PopOver */
.popup {
    position: relative;
    cursor: pointer;
}

.popup-text {
    z-index: 10000;
    position: absolute;
    top: -50px; /* Posición por defecto arriba */
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal inicial */
    background-color: #000;
    color: #fff;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 7px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, top 0.3s ease;
    font-size: 13px;
    max-width: 90vw; /* Ancho máximo relativo al viewport */
    box-sizing: border-box; /* Incluir padding y border en el ancho */
}

    .popup-text::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        transform: translateX(-50%);
        border: 7px solid;
        border-color: #000 transparent transparent transparent;
    }

    .popup-text.bottom {
        top: 30px; /* Posición para el tooltip inferior */
    }

        .popup-text.bottom::before {
            top: -14px; /* Ajuste para la flecha inferior */
            border-color: transparent transparent #000 transparent;
        }

.popup:hover .popup-text {
    visibility: visible;
    opacity: 1;
    /* La posición top se define en la clase base o en .bottom */
}

/* Mejora para evitar que se salga horizontalmente */
.popup:hover .popup-text {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    /* Ajuste para evitar que se salga por la derecha */
    margin-left: auto;
    margin-right: auto;
    max-width: calc(100vw - 20px); /* Considerar márgenes de la ventana */
}

    /* Ajuste adicional para alinear a la izquierda si se sale por la derecha */
    .popup:hover .popup-text.right-aligned {
        left: auto;
        right: 10px; /* Margen derecho */
        transform: translateX(0);
    }

    /* Ajuste adicional para alinear a la izquierda si se sale por la izquierda */
    .popup:hover .popup-text.left-aligned {
        left: 10px; /* Margen izquierdo */
        right: auto;
        transform: translateX(0);
    }


/* Estilos para el estado de Éxito (Verde) */
.bg-success-light {
    background-color: #d1e7dd; /* Un verde muy pálido */
}

.text-success {
    color: #0f5132; /* Un verde oscuro para legibilidad */
}

/* Estilos para el estado de Peligro/Error (Rojo) */
.bg-danger-light {
    background-color: #f8d7da; /* Un rojo/rosa muy pálido */
}

.text-danger {
    color: #842029; /* Un rojo oscuro/vinotinto */
}

/* Para pantallas de 575.97px o menos */
@media (max-width: 575.97px) {
    #nav-bar,
    #nav-bar.close {
        padding-left: 0px !important;
    }

    #side-menu.close {
        width: 0px !important;
    }

    .container-content,
    .container-content.close {
        padding-left: 15px !important;
    }

    #lblCompania{
        display: none !important;
    }
    #lblRut {
        display: none !important;
    }
    #CambiarEmpresa{
        margin: 0px !important;
    }
    .master-company{
        margin: 0px !important;
    }
    #btnMyNorifications{
        margin-left: auto !important;
    }
    #btnSideMenuResponsive{
        display: block !important;
    }
    #side-menu{
        width: 300px !important;
    }
}

/* From Uiverse.io by Fernando-sv */

#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.19);
    z-index: 9999;
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

    #global-loader .loader {
        border: 4px solid #009eff;
        border-left-color: transparent;
        border-radius: 50%;
    }

    #global-loader .loader {
        border: 4px solid #009eff;
        border-left-color: transparent;
        width: 36px;
        height: 36px;
    }

    #global-loader .loader {
        border: 4px solid #009eff;
        border-left-color: transparent;
        width: 36px;
        height: 36px;
        animation: spin89345 1s linear infinite;
    }

    #global-loader .container-loader {
        display: flex;
        justify-content: center;
        align-content: center;
        position: absolute;
        z-index: 9999999;
        align-items: center;
    }

#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.19);
    z-index: 9999;
    display: flex;
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

.simple-loader {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .simple-loader .loader {
        border: 4px solid #009eff;
        border-left-color: transparent;
        border-radius: 50%;
    }

    .simple-loader .loader {
        border: 4px solid #009eff;
        border-left-color: transparent;
        width: 36px;
        height: 36px;
    }

    .simple-loader .loader {
        border: 4px solid #009eff;
        border-left-color: transparent;
        width: 36px;
        height: 36px;
        animation: spin89345 1s linear infinite;
    }

    .simple-loader .container-loader {
        display: flex;
        justify-content: center;
        align-content: center;
        position: absolute;
        z-index: 9999999;
        align-items: center;
    }

#Login-body {
    position: relative; /* Necesario para posicionar el ::before */
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center bottom !important;
    overflow: hidden;
    /* Otros estilos que ya tengas */
    /* background-attachment: fixed; */
    /* background-color: rgb(190, 190, 190); */
}

    #Login-body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../Images/backgroun-user.jpg'); /* Reutiliza tu imagen de fondo */
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        opacity: 0.2; /* Ajusta el valor de opacidad (0 a 1) */
        z-index: -1; /* Coloca el pseudo-elemento detrás del contenido */
    }

    /* Si tienes otros elementos dentro de #Login-body, asegúrate de que tengan un z-index mayor
   que -1 si necesitas que estén por encima del fondo con opacidad. Por ejemplo: */
    #Login-body > * {
        position: relative; /* Crea un contexto de apilamiento para el z-index */
        z-index: 1;
    }

/* Login user */
.container-login {
    display: flex;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    align-content: center;
    justify-content: center;
}

.container-login .loader {
    border: 4px solid #009eff;
    border-left-color: transparent;
    border-radius: 50%;
}

.container-login .loader {
    border: 4px solid #009eff;
    border-left-color: transparent;
    width: 36px;
    height: 36px;
}

.container-login .loader {
    border: 4px solid #009eff;
    border-left-color: transparent;
    width: 36px;
    height: 36px;
    animation: spin89345 1s linear infinite;
}

.container-login .container-loader {
    display: flex;
    justify-content: center;
    align-content: center;
    height: 360px;
    position: absolute;
    z-index: 9999999;
    width: 246px;
    align-items: center;
}

@keyframes spin89345 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.login {
    width: 340px;
    color: #fff;
    font-size: 1.3em;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.1) !important;
    color: black;
    border-radius: 10px;
}

    .login h6 {
        margin: 0;
    }

    .login .login-head {
        background: #fff;
        padding: 50px;
        padding-bottom: 50px;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        padding-bottom: 0;
    }

    .login .login-body {
        background: white;
        padding: 40px;
        padding-top: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        height: 100%;
    }


    .login input[type="text"],
    .login input[type="password"] {
        opacity: 1;
        display: block;
        border: none;
        outline: none;
        width: 100%;
        padding: 13px 18px;
        margin-top: 20px;
        font-size: 0.8em;
        border-radius: 100px;
        background: #f5f5f5;
        color: black;
    }

    .login input:focus {
        /*animation: bounce 0.5s;*/
        -webkit-appearance: none;
    }

    .login input[type=submit],
    .login input[type=button] {
        border: 0;
        outline: 0;
        width: 100%;
        padding: 13px;
        margin-top: 40px;
        border-radius: 500px;
        font-weight: 600;
        /*animation: bounce 0.5s;*/
    }

.login-select {
    opacity: 1;
    display: block;
    border: none;
    outline: none;
    width: 100%;
    padding: 13px 18px;
    margin-top: 20px;
    font-size: 0.8em;
    border-radius: 100px;
    background: #f5f5f5;
    color: black;
    /*animation: bounce 0.5s;*/
}

/*.login-select option {
    background-color: white;
    color: #333;
    font-size: 14px;
    border: none;
    -webkit-appearance: none;
}

.login-select option:checked {
    background-color: #ddd;
    color: #000;
}*/

#form-mantener-sesion {
    text-align: center
}

.login.wrap {
    animation: bounce 0.5s;
}

.img-logo-login {
    border: 0;
    outline: 0;
    width: 100%;
    border-radius: 500px;
    font-weight: 600;
}

.info-user-login {
    /*animation: bounce 0.5s;*/
}

.login h5 {
    /*animation: bounce 0.5s;*/
}

.h1 {
    padding: 0;
    position: relative;
    top: -35px;
    display: block;
    margin-bottom: -0px;
    font-size: 1.3em;
}

.btn-login {
    background: rgba(0,0,0,.125);
    color: black;
    padding: 5px !important;
    font-size: 15px;
}

    .btn-login:hover {
        background: #454545;
        color: rgb(255, 255, 255);
        padding: 5px !important;
        cursor: pointer;
        transition: all 0.4s ease;
    }

.container-recover-pass {
    /*animation: bounce 0.5s;*/
}

.login input[type=text] {
    /*animation: bounce 0.5s;*/
    -webkit-appearance: none;
}

.login input[type=password] {
    /*animation: bounce 0.5s;*/
    -webkit-appearance: none;
}

.ui {
    font-weight: bolder;
    background: -webkit-linear-gradient(#B563FF, #535EFC, #0EC8EE);
    -webkit-text-fill-color: transparent;
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(0.25turn, #535EFC, #0EC8EE, #0EC8EE);
    border-image-slice: 1;
    display: inline;
}

@keyframes bounce {
    0% {
        transform: translateX(-250px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

#recuperar-pass {
    font-weight: 600;
    cursor: pointer;
    color: #3498db;
}

    #recuperar-pass:hover {
        color: #2c69b0;
        transition: all 0.4s ease;
    }

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

.lblLogin {
    color: #6c6d70;
}

.container-recover-pass {
    font-size: 15px;
    text-align: center;
    margin-top: 20px;
}

.code-input {
    width: 50px !important;
    margin-right: 8px;
    border-radius: 5px !important;
}

.number-code {
    display: flex;
}

#form-enter-code {
    text-align: center;
}

#form-recover-pass {
    text-align: center;
}

.back-login {
    float: left;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#form-select-company {
    text-align: center;
}

#cboCompaniesUser {
    margin-top: 10px;
}

/* Contenedor de la imagen */
.image-container-user {
    overflow: hidden; /* Oculta cualquier parte de la imagen que sobresalga */
    border-radius: 50%; /* Hace que el contenedor sea redondo */
}

    /* Imagen dentro del contenedor */
    .image-container-user img {
        object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsionarse */
    }

/* Estilos Ventanas Maestros */

.titulo-maestro {
    /*    border-left: 3px solid #36aeff;
    padding-left: 15px;*/
    margin-bottom: 15px;
    color: #535353;
    font-size: 22px;
    overflow: hidden;
    width: max-content;
    margin-left: 2px;
}

.title-cbo {
    width: 0px;
    float: right;
    margin-top: 0px;
    border: 0 !important;
    border-radius: 50%;
    background-color: transparent !important;
    margin-left: 10px;
    height: 35px;
    padding-right: 30px;
    background-size: 20px 20px;
}

.botonera {
    background-color: transparent;
    border-radius: 5px;
    /*box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);*/
    color: #535353 !important;
}

    /*.botonera span{
    color: #535353 !important;
}*/

    .botonera .nav-item {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row; /* Apila los elementos verticalmente */
        align-items: center; /* Centra los elementos horizontalmente */
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        margin-right: 10px;
    }

        .botonera .nav-item:last-child {
            margin-right: 0px;
        }

        .botonera .nav-item .nav-link {
            color: #535353;
            text-align: center;
            position: relative; /* Agregamos posición relativa para el pseudo elemento (before de .disabled) */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            cursor: pointer;
            height: 100%;
            padding-top: 3px;
            padding-bottom: 3px;
            border-radius: 5px;
            background-color: white;
            color: #535353;
            box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
        }

.nav-link.tab {
    margin-left: 5px;
    padding-left: 10px;
    padding-right: 10px;
    box-shadow: none !important;
    font-weight: normal;
}

.botonera .nav-item-group {
    display: flex;
}

    .botonera .nav-item-group select:not(input[type="color"]) {
        background-color: #ffff !important;
        border-radius: 0;
        border-left: 1px solid rgba(215, 215, 215, 0.5) !important;
    }

    .botonera .nav-item-group input:not(input[type="color"]) {
        background-color: #ffff !important;
        border-radius: 0;
    }

.botonera .nav-item a {
    height: 100%;
}

.botonera .filter-button:last-child {
    border-left: 0px;
    border-right: 0px;
    border-radius: 5px;
    border-radius: 5px !important;
    border-right: 0;
}

.botonera .nav-item-group:last-child {
    border-left: 0px;
    border-right: 0px;
    border-radius: 5px;
    border-radius: 5px !important;
}

.botonera .nav-item .nav-link:hover {
    background-color: rgba(215, 215, 215, 0.5);
    transition: all 0.4s ease;
}

.botonera .nav-item .nav-link.disabled {
    color: rgb(190, 190, 190);
    border-left-color: rgb(190, 190, 190);
}

    .botonera .nav-item .nav-link.disabled .icon {
        fill: rgb(190, 190, 190) !important;
    }

.botonera .filters-options {
    border: 0 !important;
    border-radius: 5px !important;
}


.container-table .botonera {
    background: #fff;
    color: gray !important;
    box-shadow: none;
    margin-bottom: 10px;
}

    .container-table .botonera .nav-item .nav-link {
        color: #454545;
    }

    .container-table .botonera .nav-item .nav-link {
        border-radius: 5px;
    }

    .container-table .botonera .nav-item {
        border: 0px;
    }

.botonera-inferior-modal {
    margin-top: 10px;
    justify-content: right;
    display: flex;
}

#modal-user-info .botonera-inferior-modal {
    display: none;
}


.filter-button {
    margin-left: auto;
}

    .filter-button .nav-item {
        height: 100%;
    }

.filter-radio {
}

    .filter-radio .nav-item {
        height: 100%;
    }

.container-radio {
    display: inline-flex; /* Para alinear los elementos en línea */
    align-items: center; /* Para alinear verticalmente los elementos */
    border-radius: 0.25rem; /* Radio de borde */
    overflow: hidden; /* Para que el borde redondeado funcione correctamente */
    padding: 5px;
    width: 100%;
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
}

    .container-radio .form-check {
        margin: 0 !important; /* Elimina el margen derecho predeterminado */
        padding-left: 5px;
        border: 0px;
        width: 100%;
    }

        .container-radio .form-check:first-child {
            padding-left: 0px;
        }

    .container-radio .form-check-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        display: none;
    }

    .container-radio .form-check-label {
        display: inline-block;
        font-size: 1rem;
        line-height: 1.5;
        background-color: transparent;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
        margin-bottom: 0 !important;
        width: 100% !important;
        border-radius: 5px;
    }

    .container-radio .form-check-inline .form-check-label {
        margin-left: 0;
    }

    .container-radio .form-check:last-child .form-check-label {
        border-right: none;
    }

    .container-radio .form-check-input:focus + .form-check-label {
        border-color: #80bdff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .container-radio .form-check-input:checked + .form-check-label {
        background-color: #009eff;
        color: #fff;
        border-color: #009eff;
    }

    .container-radio .form-check-input:disabled + .form-check-label {
        cursor: not-allowed;
    }

.aditional-options {
    z-index: 9997 !important;
    position: absolute !important;
    margin-top: 5px !important;
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.1) !important;
    background-color: #454545 !important;
    color: white !important;
    border-color: #454545 !important;
    border: 0 !important;
    border-radius: 5px !important;
}

    .aditional-options .btn {
        margin-top: 5px;
        margin-bottom: 5px;
    }

.filters-options {
    z-index: 9997 !important;
    position: absolute !important;
    right: 0px !important;
    margin-right: 15px;
    margin-top: 5px !important;
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.1) !important;
    color: #535353 !important;
    border-radius: 5px !important;
}



/*.filters-options input.bg-gray {
    background-color: white !important;
}*/

/*.filters-options select.bg-gray {
    background-color: white !important;
}*/

#btnFind {
    margin-top: 20px;
}

    #btnFind span {
        margin-left: auto;
        margin-right: auto;
    }

.form {
    margin-top: 15px;
    padding: 10px;
    position: relative;
    height: min-content;
    border-radius: 5px;
    /*border: 2px solid #e6e6e6;*/
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
}

    .form.white {
        background-color: white;
    }

.form-title {
    left: 10px; /* Alineamos horizontalmente a la izquierda */
    width: fit-content; /* Ancho igual al 100% del elemento padre */
    padding-left: 8px;
    padding-right: 8px;
    font-weight: 650; /* Peso de la fuente */
    height: fit-content; /* Grosor de la línea */
    font-size: 14px; /* Tamaño de la fuente */
    border-bottom: 2px solid #36aeff;
}

    .form-title.white {
        background-color: transparent;
        margin-bottom: 10px;
    }

.form {
    /* Ajusta el tamaño máximo del textarea al tamaño del form */
    max-width: 100%;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
}

    .form textarea {
        /* Elimina el borde predeterminado y agrega un borde ligero */
        border: 1px solid #ced4da;
        border-radius: .25rem;
        /* Ajusta el tamaño del textarea al contenido */
        width: 100%;
        resize: none; /* Evita que el usuario pueda redimensionar manualmente */
        /* Agrega un pequeño espacio debajo del textarea */
        margin-bottom: .5rem;
        padding: 5px;
    }

    .form select {
        border: 0;
        width: 100%
    }

table.dataTable {
    width: 100% !important;
}

table {
    font-size: 13px;
}

    table th {
        color: #535353
    }

    table tbody tr:last-child {
        border-bottom: 0;
    }

.form-label-title {
    font-weight: 700;
}

.bold {
    font-weight: bold;
}

.container-table {
    background-color: white !important;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
}

/* Modales */
.show-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.19);
    z-index: 99999999;
    /*    padding-left: 20%;
    padding-right: 20%;
    padding-top: 15%;
    padding-bottom: 15%;*/
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.19);
    z-index: 9999999999;
}

.off {
    display: none !important;
    transform: scale(1);
}

.header-modal {
    height: 50px;
}

    .header-modal h5 {
        float: left;
        padding-top: 10px;
        padding-left: 10px;
        font-size: 20px;
    }

.body-modal {
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    padding: 6px;
}

    .body-modal .form {
        box-shadow: none !important;
    }

.cerrar-modal {
    color: #5f5f5f;
    float: right;
    font-size: 28px;
    margin-bottom: 8px;
    margin-right: 5px;
    font-weight: bold;
}

    .cerrar-modal .close-icon {
        margin-left: 15px;
        margin-right: 15px;
        margin-top: 15px;
    }


    .cerrar-modal:hover,
    .cerrar-modal:focus {
        color: rgb(200, 200, 200);
        text-decoration: none;
        cursor: pointer;
        transition: all 0.4s ease;
    }

.cerrar-div {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    margin-right: 1px;
}

    .cerrar-div:hover,
    .cerrar-div:focus {
        color: rgb(245, 245, 245);
        text-decoration: none;
        cursor: pointer;
        transition: all 0.4s ease;
    }

.modal-content {
    background-color: #fefefe;
    padding: 10px;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    height: 100vh;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    border: 0px !important;
}

    .modal-content .ui-tabs-nav {
        background: transparent !important;
    }

    .modal-content .ui-tabs-panel {
        border: 0px;
    }

    .modal-content .form-select {
        background-color: #fff !important;
        border: 1px solid #ced4da !important;
    }

    .modal-content .form-control {
        background-color: #fff !important;
        border: 1px solid #ced4da !important;
    }

    .modal-content .tabs ul.ui-tabs-nav {
        box-shadow: none;
        border: 1px solid #ced4da !important;
    }

    .modal-content .tabs div.ui-tabs-panel {
        box-shadow: none;
    }

    .modal-content.center-modal {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        height: auto;
        border-radius: 10px;
    }
/*nuevo editor*/
.modal-dialog {
    margin-top: 200px;
}

.note-group-select-from-files {
    display: none;
}

.modal-content select {
    border: 0;
    width: 100%
}

.note-popover {
    border: 0px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    position: absolute;
}

.popover-body .note-btn-group {
    margin-right: 10px;
}

    .popover-body .note-btn-group .note-btn {
        border: 0px !important;
        border-radius: 5px !important;
    }

.popover-arrow {
    display: none !important;
}

.modal-dialog .modal-content {
    height: auto !important;
    border-radius: 5px !important;
}

.note-editable {
    color: black;
}

    .note-editable tr td {
        background-color: transparent !important;
    }

    .note-editable table thead tr th {
        background: transparent !important;
    }

    .note-editable tfoot td {
        padding: 4px;
        background: transparent !important;
    }

    .note-editable table {
        width: auto;
    }

        .note-editable table tr td {
            min-width: auto;
            border: 0px !important;
        }

        .note-editable table tr {
            min-width: auto;
            border: 0px !important;
        }

            .note-editable table tr:hover {
                box-shadow: none !important;
                background-color: transparent !important;
                border: 0px !important;
            }

.note-toolbar {
    background: #fff !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    .note-toolbar .note-btn {
        border: 0px;
        border-radius: 5px !important;
    }

        .note-toolbar .note-btn:hover {
            background-color: #e6e6e6 !important;
            transition: all 0.4s ease;
            color: #535353;
        }

.note-editor {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
    border: 0px !important;
    border-radius: 5px !important;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
}

    .note-editor.fullscreen {
        z-index: 99999999999999 !important;
    }

.note-resizebar {
    background: #fff;
}
/*--------------------*/
.separator-modal {
    width: 100%;
    padding: 5px;
}

.btn-m-footer {
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #ced4da !important;
    padding: 5px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    margin-left: 3px;
    margin-right: 3px;
    padding-left: 10px;
    padding-right: 10px;
    width: max-content;
}

    .btn-m-footer:hover {
        background: rgb(223, 220, 220);
        transition: all 0.4s ease;
    }

.btn-m-body {
    border-radius: 5px;
    background-color: white;
    padding: 5px;
    cursor: pointer;
    display: inline-block;
    text-align: center;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 29px;
    padding-left: 10px;
    padding-right: 10px;
    width: max-content;
}

    .btn-m-body:hover {
        background: rgb(223, 220, 220);
        transition: all 0.4s ease;
    }

/*Personalizacion modales*/

#modal-send-emails.container-loader-mail {
    max-width: 100px;
    background: transparent !important;
    padding: 0;
    border: 0;
}

#modal-init-project.modal-content {
    max-width: 300px;
}

#modal-dash-tasks.modal-content {
    max-width: 600px;
}

#modal-dash-activity-tasks.modal-content {
    max-width: 600px;
}

#modal-edit-card-task.modal-content {
    max-width: 750px;
}

#modal-edit-card-lead.modal-content {
    max-width: 750px;
}

#modal-edit-card-opportunity.modal-content {
    max-width: 750px;
}

#modal-edit-card-activity.modal-content {
    max-width: 650px;
}

#modal-change-password.modal-content {
    max-width: 350px;
}

#modal-edit-profile.modal-content {
    max-width: 600px;
}

#modal-config-email.modal-content {
    max-width: 400px;
}

#modal-dash-notifications.modal-content {
    max-width: 600px;
}

#modal-send-notifications.modal-content {
    max-width: 450px;
}

#modal-dash-events.modal-content {
    max-width: 600px;
}

#modal-end-project.modal-content {
    max-width: 300px;
}

#modal-test-promotion.modal-content {
    max-width: 1000px;
}

#modal-config-CustomerPoint.modal-content {
    max-width: 850px;
}

[id*="modal-delete"].modal-content {
    max-width: 380px;
}

#modal-update-client.modal-content {
    max-width: 600px;
}

#modal-masive-upload-baseEmail.modal-content {
    max-width: 450px;
}

#modal-add-activity.modal-content {
    max-width: 750px;
}

#modal-template-mail.modal-content {
    max-width: 750px;
}

#modal-add-template-mail.modal-content {
    max-width: 750px;
}

#modal-add-activity .open-widget-modal {
    /*width: 12% !important;*/
    float: right;
}

.open-widget-modal {
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
}

#modal-contact.modal-content {
    max-width: 900px;
}

#modal-contact div.body-modal {
    padding: 0;
}

#modal-contact div.container-table {
    margin: 0;
}

#modal-contact div.form {
    border-radius: 0;
    box-shadow: none;
}

#addContact {
    margin: 6px;
}


#modal-add-customer-email.modal-content {
    max-width: 500px;
}

#modal-add-contact.modal-content {
    max-width: 450px;
}

#modal-add-adress.modal-content {
    max-width: 800px;
}

#modal-close-task.modal-content {
    max-width: 600px;
}

#crm-email-viewer-modal.modal-content {
    max-width: 750px;
}

#modal-attach.modal-content {
    max-width: 750px;
}

#modal-attach div.body-modal {
    padding: 0;
}

#modal-attach div.container-table {
    margin: 0;
    box-shadow: none;
}

#modal-add-attach i.bi-upload {
    margin-right: 10px;
}

#modal-find-product.modal-content {
    max-width: 650px;
}

#modal-find-product div.body-modal {
    padding: 0;
}

#modal-find-product div.container-input {
    padding: 6px !important;
}

#modal-find-product div.container-table {
    margin: 0;
}

#modal-find-product div.form {
    border-radius: 0;
}

#modal-find-product div.dt-scroll-body {
    height: auto !important
}

#tblBodyFindProducts tr {
    cursor: pointer;
}

#modal-price-list.modal-content {
    max-width: 650px;
}

#modal-price-list div.body-modal {
    padding: 0;
}

#modal-price-list div.container-input {
    padding: 6px !important;
}

#modal-price-list div.container-table {
    margin: 0;
}

#modal-price-list div.form {
    border-radius: 0;
}

#modal-price-list tr {
    cursor: pointer;
}

#modal-add-task.modal-content {
    max-width: 1000px;
}

#modal-add-lead.modal-content {
    max-width: 1000px;
}

#modal-add-opportunity.modal-content {
    max-width: 1000px;
}

#modal-view-attach.modal-content {
    max-width: 1000px;
}

    #modal-view-attach.modal-content .form {
        margin-top: 5px;
    }

#addAttach {
    margin: 6px;
    padding-top: 5px;
}

#modal-add-attach.modal-content {
    max-width: 1000px;
}

    #modal-add-attach.modal-content .form {
        margin-top: 5px;
    }

#modal-change-stage-comment.modal-content {
    max-width: 600px;
}

#modal-total-oportunities.modal-content {
    max-width: 400px;
}

#modal-user-info.modal-content {
    max-width: 300px;
}

#modal-user-info div.body-modal {
    padding: 10px;
}

#modal-salesPerson-info.modal-content {
    max-width: 350px;
}

#modal-product-description.modal-content {
    max-width: 500px;
}

#modal-product-discount.modal-content {
    max-width: 300px;
}

#modal-buscar-cliente .container-table {
    box-shadow: none;
}

.item-totals {
    padding: 10px;
}

    .item-totals:not(:last-child) {
        border-bottom: 1px solid rgba(215, 215, 215, 0.5);
    }

.circle-icon-currency {
    height: 60px;
    width: 60px;
    display: table-cell;
    text-align: center;
    font-size: 25px;
    vertical-align: middle;
    border-radius: 50%;
    background: #808080;
    color: white;
}


/*===========================================*/

.item-user-action {
    background-color: white;
    border-radius: 5px;
    margin: 5px;
    padding: 10px;
}

/* Maestro Equipo */
.image-user-item {
    width: 80px;
    height: 80px;
}

.item-user {
    padding: 20px;
}

    .item-user .btn {
        background-color: white !important;
    }

.form .item-user {
    background-color: #f2f2f2;
    border-color: #f2f2f2;
    box-shadow: none !important;
}

.item-user-divisor:not(:last-child) {
    border-bottom: 1px solid rgba(215, 215, 215, 0.5); /* Línea debajo del div */
}

.empty-user {
    padding: 35px;
    box-shadow: none !important;
}

#tblUsersTeam div.form {
    box-shadow: none;
}

#tblUsers div.form {
    box-shadow: none;
}

/* Maestro Syupervisor */
#addSupervisor div.btn {
    margin-top: 5px;
}

/*Maestro oportunidades*/

.buttonRadiPorcentage {
    border: 1px solid transparent;
    background: #f2f2f2;
    color: #535353;
    padding: 3px 5px;
    float: left;
    margin: 0px;
    border-right: none;
    text-align: center;
}

    .buttonRadiPorcentage:first-child {
        border-radius: 7px 0 0px 7px;
    }

    .buttonRadiPorcentage:last-child {
        border-radius: 0px 7px 7px 0px;
        border-right: 1px solid transparent;
    }

    .buttonRadiPorcentage .activ {
        background: #21aae1;
        color: #FFF;
    }

.ContainerRadiPorcentage div.activ {
    background: #21aae1 !important;
    color: white;
}

.buttonRadiPorcentage input {
    display: none;
}


/* HTML: <div class="loader"></div> */
#LoaderPage {
    height: 100vh;
    overflow-y: hidden;
    overflow-x: hidden;
    padding-bottom: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    gap: 5px;
}

    .loader div {
        width: 7px;
        height: 40px;
        background-color: #009eff;
        border-radius: 10px;
        animation: wave 1s infinite ease-in-out;
    }

        .loader div:nth-child(1) {
            animation: l5 1s infinite linear;
            animation-delay: 0s;
        }

        .loader div:nth-child(2) {
            animation: l5 1s infinite linear;
            animation-delay: 0.2s;
        }

        .loader div:nth-child(3) {
            animation: l5 1s infinite linear;
            animation-delay: 0.4s;
        }

@keyframes wave {
    0%, 100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.5);
    }
}

@keyframes l5 {
    0% {
        background: #009eff;
        height: 40px;
    }

    33% {
        background: #009eff6f;
        height: 10px;
    }

    66% {
        background: #009eff6f;
        height: 10px;
    }

    100% {
        background: #009eff;
        height: 40px;
    }
}

/*Loader mail marketing*/

/* From Uiverse.io by Shoh2008 */
.loader-mail {
    position: relative;
    border-style: solid;
    box-sizing: border-box;
    border-width: 40px 60px 30px 60px;
    border-color: #3760C9 #96DDFC #96DDFC #36BBF7;
    animation: envFloating 1s ease-in infinite alternate;
}

    .loader-mail:after {
        content: "";
        position: absolute;
        right: 62px;
        top: -40px;
        height: 70px;
        width: 50px;
        background-image: linear-gradient(#fff 45px, transparent 0), linear-gradient(#fff 45px, transparent 0), linear-gradient(#fff 45px, transparent 0);
        background-repeat: no-repeat;
        background-size: 30px 4px;
        background-position: 0px 11px, 8px 35px, 0px 60px;
        animation: envDropping 0.75s linear infinite;
    }

@keyframes envFloating {
    0% {
        transform: translate(-2px, -5px)
    }

    100% {
        transform: translate(0, 5px)
    }
}

@keyframes envDropping {
    0% {
        background-position: 100px 11px, 115px 35px, 105px 60px;
        opacity: 1;
    }

    50% {
        background-position: 0px 11px, 20px 35px, 5px 60px;
    }

    60% {
        background-position: -30px 11px, 0px 35px, -10px 60px;
    }

    75%, 100% {
        background-position: -30px 11px, -30px 35px, -30px 60px;
        opacity: 0;
    }
}


/*tareas*/

.circle-low {
    height: 30px;
    width: 30px;
    display: table-cell;
    text-align: center;
    font-size: 20px;
    border-radius: 50%;
    background: #129939b2;
    color: white;
}

.circle-high {
    height: 30px;
    width: 30px;
    display: table-cell;
    text-align: center;
    font-size: 20px;
    border-radius: 50%;
    background: #c6ad00bd;
    color: white;
}

.circle-urgent {
    height: 30px;
    width: 30px;
    display: table-cell;
    text-align: center;
    font-size: 20px;
    border-radius: 50%;
    background: #E03838;
    color: white;
}

.circle-default {
    height: 30px;
    width: 30px;
    display: table-cell;
    text-align: center;
    font-size: 20px;
    vertical-align: middle;
    border-radius: 50%;
    background: #808080;
    color: white;
}

.dt-scroll-footInner {
    width: 100% !important;
}

.dt-scroll-headInner {
    width: 100% !important;
}

/*.dt-scroll-body{
    height: auto !important;
}*/

div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
    background: #f2f2f2 !important;
    border-color: #d9d9d9 !important;
    border-radius: 5px;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    background: #d9d9d9 !important;
    border-color: #d9d9d9 !important;
    border-radius: 5px;
    box-shadow: none;
    color: #535353;
    transition: all 0.4s ease;
}

#btnContacts {
    width: 40px;
    font-size: 18px;
    padding-bottom: 0;
    margin-left: 10px;
    background: white;
    background-color: white;
    height: 25px;
    padding-top: 0;
}

.cards-kanban {
    display: flex;
    overflow-x: hidden;
    overflow-x: scroll;
}

.kanban-board.card-kanban {
    border-radius: 5px !important;
}

.list-group-item .badge {
    color: gray !important;
}

.list-group-item .action {
    background: none !important;
}

.list-group-item {
    border: 0px;
    border-bottom: 1px solid var(--color-bordes) !important;
    border-radius: 0px !important;
    background: transparent;
}

.list-group-item .li-btn {
    min-width: 25px;
    min-height: 25px;
    text-align: center;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.list-group-item .li-btn:hover {
    background: #8080801c;
    cursor: pointer;
}

.list-group .list-group-item:last-child {
    border: 0px !important;
}

.card-kanban a {
    color: #535353;
}

    .card-kanban a:hover {
        color: #36aeff;
        transition: all 0.4s ease;
    }

.card-kanban {
    max-width: 200px !important;
    height: 170px;
    margin-right: 10px;
    border-radius: 5px !important;
}

    .card-kanban .kanban-board {
        width: 200px !important;
    }

    .card-kanban .kanban-drag {
        min-height: 100px !important;
        display: flex;
        align-content: center;
        justify-content: center !important;
        align-content: center;
        align-items: center;
    }

        .card-kanban .kanban-drag .circle-count-activity {
            height: 40px;
            width: 40px;
            background: transparent !important;
            font-size: 30px !important;
            color: #535353;
        }

/*Board*/
#kanbanPlaceholder {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: 22px;
    height: 80vh;
    margin-top: 0;
}

#myKanban {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding-bottom: 10px;
}

.kanban-board header {
    background: transparent !important
}

.kanban-container .kanban-board:first-child {
    margin-left: 0px !important;
}

.board-item-info {
    background-color: rgba(215, 215, 215, 0.1);
    padding: 5px;
    border-radius: 5px;
}

.board-item-subject {
    color: #17394d;
    font-size: 14px;
}

.board-item-description {
    color: #adadad;
    font-size: 12px;
}

.board-item-end-activity {
    color: var(--color-secundario);
    font-size: 12px;
}

.board-item-end-activity {
    color: var(--color-secundario);
    font-size: 12px;
}

.board-item-total {
    color: var(--color-secundario);
    font-size: 12px;
}

.header-card {
    padding-bottom: 5px;
    margin-bottom: 5px;
    display: flex
}

.task-number {
    float: left;
    font-size: 15px;
    border-left: 3px solid #17394d;
    padding-left: 15px;
    color: #535353;
    font: 800;
    overflow: hidden;
    width: max-content;
}

.task-number-line a {
    text-decoration: none;
}

.task-number-activity {
    float: left;
    font-size: 15px;
    border-left: 3px solid #17394d;
    padding-left: 15px;
    color: #535353;
    font: 800;
    overflow: hidden;
    width: max-content;
}

.oportunity-number {
    float: left;
    font-size: 15px;
    border-left: 3px solid #3498db;
    padding-left: 15px;
    color: #535353;
    font: 800;
    overflow: hidden;
    width: max-content;
}

.oportunity-number-activity {
    float: left;
    font-size: 15px;
    border-left: 3px solid #3498db;
    padding-left: 15px;
    color: #535353;
    font: 800;
    overflow: hidden;
    width: max-content;
}

.container-lead-aditional-info {
    margin-right: 10px;
    font-size: 15px;
    display: flex;
    align-items: center;
}

    .container-lead-aditional-info i {
        margin-right: 5px;
        font-size: 17px;
    }

.lead-number {
    float: left;
    font-size: 15px;
    border-left: 3px solid rgb(47, 127, 181);
    padding-left: 15px;
    color: #535353;
    font: 800;
    overflow: hidden;
    width: max-content;
}

.lead-number-activity {
    float: left;
    font-size: 15px;
    border-left: 3px solid rgb(47, 127, 181);
    padding-left: 15px;
    color: #535353;
    font: 800;
    overflow: hidden;
    width: max-content;
}

.board-user-info {
    margin-left: auto;
}

.user-name {
    font-size: 12px;
}


.task-user-image-container {
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    overflow: hidden;
    border-radius: 50%;
}

.task-user-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 30px;
}

.board-user-image-container {
    width: 30px;
    height: 30px;
    overflow: hidden;
    border-radius: 50%;
}

.board-user-image {
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}

.board-image-user-info-container {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
    /*margin-top: 10px;*/
}

.board-image-user-info {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-user-info-container {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
    margin-top: 10px;
}

.image-user-info {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-user-action-container {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 50%;
    margin-left: 15px;
}

.image-user-action {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.taskOptions {
    position: absolute;
    top: 5px;
    right: 0px;
    width: 4px;
    height: 10px;
    cursor: pointer;
    display: block;
    padding-left: 15px;
    padding-right: 8px;
}

.board-stage {
    display: flex;
    flex-direction: row;
}

.board-stage-name {
    margin-right: 10px;
}

.board-stage-options {
    margin-left: auto;
}

.circle-back-btn {
    height: 30px;
    width: 30px;
    text-align: center;
    font-size: 20px !important;
    background: white;
    color: #535353;
    margin-top: 3px;
    cursor: pointer;
    background: white;
    margin: 0;
    border-radius: 5px;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
}

.circle-count-activity {
    height: 22px;
    width: 22px;
    display: table-cell;
    text-align: center;
    font-size: 15px;
    vertical-align: middle;
    border-radius: 50%;
    background: #535353;
    color: white;
    float: left !important;
    margin-top: 3px;
}

.circle-count-total-oportunities {
    height: 22px;
    width: 22px;
    display: table-cell;
    text-align: center;
    font-size: 15px;
    vertical-align: middle;
    border-radius: 50%;
    background: #535353;
    color: white;
    float: left !important;
    margin-top: 3px;
    margin-right: 5px;
    cursor: pointer;
}

.viewSubStageActions {
    margin: 1px;
    margin-left: 5px;
    font-size: 18px;
    cursor: pointer;
}

.board-oportunity-aditional-info {
    background-color: rgba(215, 215, 215, 0.1);
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    justify-content: center;
    display: flex;
}

.board-lead-aditional-info {
    background-color: rgba(215, 215, 215, 0.1);
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.board-task-aditional-info {
    background-color: rgba(215, 215, 215, 0.1);
    padding: 1px;
    border-radius: 5px;
    margin-top: 10px;
}


.task-priority-container {
    justify-content: center;
    display: flex;
    padding: 5px;
    align-items: center;
}

    .task-priority-container [class*="circle"] {
        width: 20px;
        height: 20px;
        font-size: 14px;
        padding-top: 0;
    }

.percentage {
    position: relative;
    display: block;
    width: 55%;
    height: 9px;
    margin: 10px 0;
    margin-right: 15px;
    margin-left: 10px;
    background: #ff3232;
    background: linear-gradient(to right, #d5d5d5 0%,#a9fbff 50%,#41caff 100%);
    border-radius: 5px;
}

    .percentage .probability-box {
        position: absolute;
        width: 30px;
        margin-left: -15px;
        height: 15px;
        top: -4px;
        left: 2%;
        transition: left linear .3s;
        font-size: 11px;
        text-align: center;
        color: white;
        border-radius: 5px;
        background: #544b5c;
        display: flex;
        justify-content: center;
        align-content: center;
    }

.p0 {
    left: 0% !important;
}

.p1 {
    left: 1% !important;
}

.p2 {
    left: 2% !important;
}

.p3 {
    left: 3% !important;
}

.p4 {
    left: 4% !important;
}

.p5 {
    left: 5% !important;
}

.p6 {
    left: 6% !important;
}

.p7 {
    left: 7% !important;
}

.p8 {
    left: 8% !important;
}

.p9 {
    left: 9% !important;
}

.p10 {
    left: 10% !important;
}

.p11 {
    left: 11% !important;
}

.p12 {
    left: 12% !important;
}

.p13 {
    left: 13% !important;
}

.p14 {
    left: 14% !important;
}

.p15 {
    left: 15% !important;
}

.p16 {
    left: 16% !important;
}

.p17 {
    left: 17% !important;
}

.p18 {
    left: 18% !important;
}

.p19 {
    left: 19% !important;
}

.p20 {
    left: 20% !important;
}

.p21 {
    left: 21% !important;
}

.p22 {
    left: 22% !important;
}

.p23 {
    left: 23% !important;
}

.p24 {
    left: 24% !important;
}

.p25 {
    left: 25% !important;
}

.p26 {
    left: 26% !important;
}

.p27 {
    left: 27% !important;
}

.p28 {
    left: 28% !important;
}

.p29 {
    left: 29% !important;
}

.p30 {
    left: 30% !important;
}

.p31 {
    left: 31% !important;
}

.p32 {
    left: 32% !important;
}

.p33 {
    left: 33% !important;
}

.p34 {
    left: 34% !important;
}

.p35 {
    left: 35% !important;
}

.p36 {
    left: 36% !important;
}

.p37 {
    left: 37% !important;
}

.p38 {
    left: 38% !important;
}

.p39 {
    left: 39% !important;
}

.p40 {
    left: 40% !important;
}

.p41 {
    left: 41% !important;
}

.p42 {
    left: 42% !important;
}

.p43 {
    left: 43% !important;
}

.p44 {
    left: 44% !important;
}

.p45 {
    left: 45% !important;
}

.p46 {
    left: 46% !important;
}

.p47 {
    left: 47% !important;
}

.p48 {
    left: 48% !important;
}

.p49 {
    left: 49% !important;
}

.p50 {
    left: 50% !important;
}

.p51 {
    left: 51% !important;
}

.p52 {
    left: 52% !important;
}

.p53 {
    left: 53% !important;
}

.p54 {
    left: 54% !important;
}

.p55 {
    left: 55% !important;
}

.p56 {
    left: 56% !important;
}

.p57 {
    left: 57% !important;
}

.p58 {
    left: 58% !important;
}

.p59 {
    left: 59% !important;
}

.p60 {
    left: 60% !important;
}

.p61 {
    left: 61% !important;
}

.p62 {
    left: 62% !important;
}

.p63 {
    left: 63% !important;
}

.p64 {
    left: 64% !important;
}

.p65 {
    left: 65% !important;
}

.p66 {
    left: 66% !important;
}

.p67 {
    left: 67% !important;
}

.p68 {
    left: 68% !important;
}

.p69 {
    left: 69% !important;
}

.p70 {
    left: 70% !important;
}

.p71 {
    left: 71% !important;
}

.p72 {
    left: 72% !important;
}

.p73 {
    left: 73% !important;
}

.p74 {
    left: 74% !important;
}

.p75 {
    left: 75% !important;
}

.p76 {
    left: 76% !important;
}

.p77 {
    left: 77% !important;
}

.p78 {
    left: 78% !important;
}

.p79 {
    left: 79% !important;
}

.p80 {
    left: 80% !important;
}

.p81 {
    left: 81% !important;
}

.p82 {
    left: 82% !important;
}

.p83 {
    left: 83% !important;
}

.p84 {
    left: 84% !important;
}

.p85 {
    left: 85% !important;
}

.p86 {
    left: 86% !important;
}

.p87 {
    left: 87% !important;
}

.p88 {
    left: 88% !important;
}

.p89 {
    left: 89% !important;
}

.p90 {
    left: 90% !important;
}

.p91 {
    left: 91% !important;
}

.p92 {
    left: 92% !important;
}

.p93 {
    left: 93% !important;
}

.p94 {
    left: 94% !important;
}

.p95 {
    left: 95% !important;
}

.p96 {
    left: 96% !important;
}

.p97 {
    left: 97% !important;
}

.p98 {
    left: 98% !important;
}

.p99 {
    left: 99% !important;
}

.p100 {
    left: 100% !important;
}

.drop-container {
    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    padding: 20px;
    border-radius: 10px;
    border: 2px dashed #555;
    color: #444;
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
}

    .drop-container:hover,
    .drop-container.drag-active {
        background: #eee;
        border-color: #111;
        transition: all 0.4s ease;
    }

        .drop-container:hover .drop-title,
        .drop-container.drag-active .drop-title {
            color: #222;
            transition: all 0.4s ease;
        }

.drop-title {
    color: #444;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: color .2s ease-in-out;
}

input[type=file] {
    width: 100%;
    color: #444;
    padding: 5px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #f2f2f2;
}

    input[type=file]::file-selector-button {
        margin-right: 20px;
        border: none;
        background: #36aeff;
        padding: 10px 20px;
        border-radius: 10px;
        color: #fff;
        cursor: pointer;
        transition: background .2s ease-in-out;
    }

        input[type=file]::file-selector-button:hover {
            background: #0d45a5;
        }

/*Scroll*/
/* Estilos para WebKit (Chrome, Safari, Edge y Opera) */
::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de desplazamiento vertical */
    height: 8px; /* Altura de la barra de desplazamiento horizontal */
}

::-webkit-scrollbar-track {
    background: #f4f4f4; /* Color de fondo de la pista */
}

::-webkit-scrollbar-thumb {
    background-color: #888; /* Color de la barra de desplazamiento */
    border-radius: 10px; /* Redondeo de las esquinas */
    border: 2px solid #f4f4f4; /* Espacio alrededor de la barra de desplazamiento */
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Color de la barra de desplazamiento al pasar el ratón */
        transition: all 0.4s ease;
    }

/* Estilos para Firefox */
html {
    scrollbar-width: thin; /* Ancho de la barra de desplazamiento */
    scrollbar-color: #888 #f4f4f4; /* Color de la barra de desplazamiento y de la pista */
}

/* Aplicando los estilos de barra de desplazamiento a elementos específicos */
.scroll-custom {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f4f4f4;
}

    /* Aplicar los mismos estilos para WebKit en los contenedores específicos */
    .scroll-custom::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .scroll-custom::-webkit-scrollbar-track {
        background: #f4f4f4;
    }

    .scroll-custom::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
        border: 2px solid #f4f4f4;
    }

        .scroll-custom::-webkit-scrollbar-thumb:hover {
            background-color: #555;
            transition: all 0.4s ease;
        }

/* Aplicando los estilos de barra de desplazamiento a elementos específicos */
.scroll-custom {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #888 #f4f4f4;
}

    /* Aplicar los mismos estilos para WebKit en los contenedores específicos */
    .scroll-custom::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .scroll-custom::-webkit-scrollbar-track {
        background: #f4f4f4;
    }

    .scroll-custom::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 10px;
        border: 2px solid #f4f4f4;
    }

        .scroll-custom::-webkit-scrollbar-thumb:hover {
            background-color: #555;
            transition: all 0.4s ease;
        }

/*Calendar*/

.btn-filter-events {
    float: right;
    margin-right: 2px;
}

    .btn-filter-events i {
        font-size: 20px;
    }

.filters-events {
    z-index: 9997 !important;
    position: absolute !important;
    right: 0px !important;
    margin-right: 10px;
    margin-top: -10px !important;
    width: 200px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.1) !important;
    background-color: #ffffff !important;
    color: #535353 !important;
    border-color: #454545 !important;
    border: 0 !important;
    border-radius: 5px !important;
    padding: 10px;
}

#listTeamEvents {
    margin-top: 0;
}

    #listTeamEvents .list-items-event {
        overflow-x: hidden;
        overflow-y: auto;
        height: calc(100vh - 200px);
    }

    #listTeamEvents input {
        height: 31px !important;
    }

    #listTeamEvents .input-group {
        margin-bottom: 15px;
    }

    #listTeamEvents .input-group-text {
        height: 31px !important;
        border: 0 !important;
        background-color: #f2f2f2 !important;
    }

.list-items-event {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    border-radius: 5px;
}

.item-list-event {
    /*background-color: #f4f4f4;*/
    border-radius: 5px;
    margin-top: 5px;
    padding: 5px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    /*background: #f2f2f2;*/
}

.info-event {
    width: 88%;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    min-height: 38px;
}
/*
.item-list-event .info-event:hover {
    background: var(--color-texto)91;
}*/

.item-list-event .info-event {
    margin-left: 10px;
}

    .item-list-event .info-event .date-event {
        font-size: 12px;
    }

.info-event .task-number-activity {
    padding: 0 !important;
    border: 0 !important;
    width: 100% !important
}

.info-event .oportunity-number-activity {
    padding: 0 !important;
    border: 0 !important;
    width: 100% !important
}

.info-event .lead-number-activity {
    padding: 0 !important;
    border: 0 !important;
    width: 100% !important
}

.calendar-event-user-image-container {
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 50%;
    min-width: 35px;
    min-height: 25px;
}

.calendar-event-user-image-container-minus {
    width: 25px;
    height: 25px;
    overflow: hidden;
    border-radius: 50%;
    min-width: 22px;
    min-height: 22px;
    margin-right: 5px;
    margin-left: 2px;
}

.calendar-event-title {
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
    overflow: hidden; /* Oculta el desbordamiento de texto si es necesario */
    text-overflow: ellipsis; /* Agrega "..." si el texto es demasiado largo */
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
}

.calendar-event-content {
    display: flex;
    align-items: center; /* Alinea verticalmente la imagen y el texto */
    justify-content: flex-start; /* Asegura que el contenido esté alineado a la izquierda */
}

.item-list-event .event-type {
    font-weight: bold;
}

.item-list-event .event-date-type {
    font-weight: bold;
}

.placeholder {
    display: inline-block;
    min-height: 1em;
    cursor: wait;
    background-color: currentColor;
    opacity: inherit;
    color: white;
}

.placeholder-items-event {
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    border-radius: 5px;
    height: 100%;
    height: calc(100vh - 135px);
}

.calendar-event-user-image {
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}

#calendar {
    height: calc(100vh - 110px);
    padding: 0;
}

    #calendar .fc-daygrid-day.fc-day-today {
        background-color: #009eff24 !important;
    }

    #calendar .fc-list-empty {
        background: transparent;
    }

    #calendar a {
        color: #535353
    }

    #calendar .fc-h-event {
        background-color: #009eff;
        border: #009eff;
        padding: 2px 0px;
    }

    #calendar .fc-v-event {
        background-color: #009eff;
        border: #009eff;
        min-height: 23px;
        padding: 2px 0px;
    }

    #calendar .fc-event {
        cursor: pointer !important;
        white-space: nowrap; /* Evita que el texto se divida en varias líneas */
        overflow: hidden; /* Oculta el contenido que se desborda */
        text-overflow: ellipsis;
        font-size: 14px;
    }

        #calendar .fc-event.fc-daygrid-dot-event {
            background-color: #009eff;
            border: #009eff;
            color: white
        }

    #calendar .fc-view-harness .fc-view-harness-active {
        height: calc(100vh - 70px);
    }

    #calendar .fc .fc-multimonth {
        border: 0 !important
    }

    #calendar .fc-button {
        background: #ffffff;
        color: #454545;
        border: 0 !important
    }

        #calendar .fc-button:hover {
            transition: background-color 0.3s, color 0.3s;
            background: #d9d9d9;
        }

    #calendar .fc-view-harness {
        background: #fff;
        border-radius: 5px;
        box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15) !important;
    }

    #calendar .fc-scrollgrid {
        border: 0px !important;
    }

    #calendar td[role="presentation"] {
        border: 0px !important;
    }

    #calendar th[role="presentation"] {
        border: 0px !important;
    }

    #calendar .fc-multimonth {
        border: 0px !important;
    }

    #calendar .fc-listMonth-view {
        border: 0px !important;
        padding-top: 24px;
    }


    #calendar .fc-event-title-container {
        border: 0;
    }

.event-title {
    font-size: 1.50em;
    text-align: center;
    margin-bottom: 14px;
}

#calendar button.fc-button:focus {
    outline: none !important;
    box-shadow: none;
}

#calendar .fc-toolbar.fc-header-toolbar {
    margin-bottom: 10px;
}

#calendar table.fc-list-table tr:nth-child(2n) td {
    background: transparent;
}

#calendar table.fc-list-table tr:nth-child(2n+1) td {
    background: transparent;
}

#calendar .fc-button {
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15) !important;
}

.calendar-container {
    padding: 0;
    margin: 0;
    margin-top: 15px;
    margin-bottom: 15px;
}

    .calendar-container .xdsoft_datetimepicker {
        box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15) !important;
    }

.no-data-found {
    position: relative;
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: transparent;
}

    .no-data-found::before {
        content: "No hay datos";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 15px;
        color: gray;
        pointer-events: none;
    }

.radio-inputs {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    border-radius: 0;
    background-color: transparent;
    box-sizing: border-box;
    width: auto;
    font-size: 14px;
    color: #535353
}

.dash.radio-inputs .radio .name {
    color: #535353 !important;
}

.dash.radio-inputs .radio input:checked + .name {
    color: #535353 !important;
}

.dash.radio-inputs .radio input:hover + .name {
    background-color: #9797974a;
    color: #535353 !important;
}

.radio-inputs .name {
    font-weight: normal !important;
}

.doble-radio {
    background: white;
    margin-right: 10px;
    padding: 2px;
    border-radius: 5px;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
}

    .doble-radio span.radio-divisor {
        padding: 0.3px;
        background: #a7a7a733;
        margin-right: 4px;
    }

.dash.radio-inputs {
    padding-left: 0;
    padding-bottom: 10px;
    padding-top: 10px;
    box-shadow: none;
}

    .dash.radio-inputs .doble-radio {
        box-shadow: none;
    }

.radio-inputs .single-radio {
    background-color: #6c6c6c;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 5px;
}

.radio-inputs .radio {
    flex: 1 1 auto;
    text-align: center;
}

    .radio-inputs .radio input {
        display: none;
    }

    .radio-inputs .radio .name {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        border: none;
        margin: 3px;
        color: #535353;
        transition: all .15s ease-in-out;
        padding-left: 5px;
        padding-right: 5px;
        font-weight: 600;
    }

    .radio-inputs .radio input:checked + .name {
        background-color: #9797974a;
        color: #535353 !important;
    }

.radio-inputs .doble-radio-1 .name {
    margin-right: 0;
}

.radio-inputs .doble-radio-2 .name {
    margin-left: 0;
}

/* Dashboard */
.graficoParentContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; /* Puedes ajustar según sea necesario */
}

.card-cut-description {
    flex-grow: 1;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*.chart {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}*/

.titulo-dashboard {
    display: flex;
    overflow: hidden;
    flex-direction: row;
    width: 100%;
}

    .titulo-dashboard .contenedor-titulo {
        overflow: hidden;
        width: max-content;
    }

        .titulo-dashboard .contenedor-titulo.in-titulo {
            animation-iteration-count: infinite;
            animation-name: in-titulo-animation;
            animation-duration: 2s;
            animation-play-state: running;
            animation-timing-function: ease-out;
        }

#tblBodyVentasPorMes td {
    border-bottom: 0;
}

#tblBodyVentasDiarias td {
    border-bottom: 0;
}

#totalProductosMasVendidos {
    text-align: right;
}

@keyframes in-titulo-animation {
    0% {
        width: 1%;
    }

    50% {
        width: 1%;
    }

    100% {
        width: 40%;
    }
}

/*.dashboard-card-container {
    background: #ffffff;
    border-radius: 16px;
}*/


.opportunity-icon {
    display: inline-block;
    background-image: url('/Icons/opportunity-icon.svg');
    background-size: cover;
    width: 44px;
    height: 50px;
}

.lead-icon {
    display: inline-block;
    background-image: url('/Icons/lead-icon.svg');
    background-size: cover;
    width: 48px;
    height: 50px;
}

.sale-icon {
    display: inline-block;
    background-image: url('/Icons/sale-icon.svg');
    background-size: cover;
    width: 50px;
    height: 50px;
}

.money-bag-icon {
    display: inline-block;
    background-image: url('/Icons/money-bag-icon.svg');
    background-size: cover;
    width: 40px;
    height: 40px;
}

.hand-shake-icon {
    display: inline-block;
    background-image: url('/Icons/hand-shake-icon.svg');
    background-size: cover;
    width: 43px;
    height: 35px;
}

.box-items {
    margin-top: 5px;
}

.box-items-head {
    background-color: white;
    padding: 5px;
    padding-right: 7px;
    padding-left: 7px;
    margin-bottom: 5px;
    border-radius: 5px;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
    border-bottom: 3px solid #36aeff;
    font-weight: bold;
    display: flex;
    color: #535353;
}

.close-box-items {
    margin-left: auto;
    cursor: pointer;
}

.box-items-display {
    background-color: white;
    padding: 8px;
    border-radius: 5px;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
}

    .box-items-display div.box-item {
        background-color: #f5f5f5;
        padding: 5px;
        margin-top: 5px;
        border-radius: 5px;
        cursor: pointer;
        color: #535353;
    }

    .box-items-display .no-items-found {
        background-color: white;
        border-radius: 5px;
        color: #535353;
    }

    .box-items-display div.box-item:hover {
        transition: background-color 0.3s, color 0.3s;
        background-color: #e3e3e3;
        color: #535353;
    }

.dash-card {
    width: 100%;
    border-radius: 5px;
    display: flex;
    background: white;
    align-items: center;
    padding: 10px;
    padding-left: 25px;
    padding-right: 25px;
    border-left: 3px solid #3498db;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
}

.dash-card-icon-container {
    overflow: hidden;
    border-radius: 50%;
    background: #3498db;
    min-width: 70px;
    min-height: 70px;
    max-width: 70px;
    max-height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}

.dash-card-icon {
    filter: invert();
}

.dash-card-content {
    display: flex;
    justify-content: center;
}

.dash-card-content-description {
    margin-left: 15px;
}

.dash-card-title {
    font-size: 15px;
}

.dash-card-subtitle {
    font-size: 18px;
    font-weight: bold;
}

.dashboard-card {
    background: #ffffff40;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
    position: relative;
    width: 100%;
    height: 100px;
    border-radius: 5px;
    overflow: hidden;
}

    .dashboard-card .wave {
        background: var(--color-principal);
        z-index: -1;
        position: absolute;
        width: 540px;
        height: 700px;
        opacity: 0.2;
        left: 0;
        top: 0;
        margin-left: -70%;
        margin-top: -80%;
        background: #009eff;
    }

        .dashboard-card .wave:nth-child(2),
        .dashboard-card .wave:nth-child(3) {
            top: 210px;
        }

    .dashboard-card.playing .wave {
        border-radius: 40%;
        animation: wave 3000ms infinite linear;
    }

    .dashboard-card .wave {
        border-radius: 40%;
        animation: wave 55s infinite linear;
    }

    .dashboard-card.playing .wave:nth-child(2) {
        animation-duration: 4000ms;
    }

    .dashboard-card .wave:nth-child(2) {
        animation-duration: 50s;
    }

    .dashboard-card.playing .wave:nth-child(3) {
        animation-duration: 5000ms;
    }

    .dashboard-card.wave:nth-child(3) {
        animation-duration: 45s;
    }

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

#btnLogOut {
    cursor: pointer;
}

/*External Forms*/
/* Estilo para el checkbox base */
input[type="checkbox"] {
    appearance: none; /* Elimina el estilo predeterminado del checkbox */
    width: 22px;
    height: 20px;
    border: 1px solid #808080;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    background-color: #fff;
}

    /* Estilo para el checkbox cuando está marcado */
    input[type="checkbox"]:checked {
        background-color: #36aeff; /* Color azul */
        border-color: #36aeff;
    }

        /* Marca de verificación dentro del checkbox */
        input[type="checkbox"]:checked::after {
            content: '';
            position: absolute;
            top: 4px;
            left: 7px;
            width: 5px;
            height: 10px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

.external-form-container {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: hidden;
}

.external-form .form-title {
    width: 100%;
}

.external-form-container .external-form {
    max-width: 700px;
    padding: 20px;
}

.external-form-container .head {
    text-align: center;
    padding: 30px;
    padding-bottom: 0;
    padding-top: 0;
}

.btn-send-form {
    margin-top: 20px;
    margin-bottom: 10px;
    width: 100%;
    height: 35px;
}

#FormsViewer {
    margin-top: 0;
    height: calc(100vh - 142px);
}

#buttonPanelActions select {
    border: 0;
}

#ListForms {
    margin-top: 0;
    height: calc(100vh - 250px);
    margin-top: 15px;
    overflow: scroll;
    overflow-x: hidden;
}

.form-item-list {
    border-bottom: 1px solid var(--color-texto) !important;
    padding: 5px;
    display: flex;
}

    .form-item-list:hover {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1);
        background-color: #8080801c !important;
    }

    .form-item-list .form-item-list-actions {
        margin-left: auto;
        padding-left: 5px;
        padding-right: 5px;
        display: flex;
        align-items: center;
        height: 20px;
    }

.form-item-list-name {
    flex-grow: 1;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-range::-webkit-slider-thumb {
    background: #36aeff; /* Color para navegadores basados en Webkit (Chrome, Safari) */
}

.form-range::-moz-range-thumb {
    background: #36aeff; /* Color para Firefox */
}

.form-range::-ms-thumb {
    background: #36aeff; /* Color para Internet Explorer */
}

#btmCloseFormViewer {
    text-align: right;
    font-size: 20px;
    cursor: pointer;
}

#btmCloseMailViewer {
    text-align: right;
    font-size: 20px;
    cursor: pointer;
    position: absolute;
    right: 7px;
    background: white;
    border-bottom-left-radius: 5px;
}

    #btmCloseMailViewer i {
        padding: 7px;
    }


#formViewer {
    height: 100%;
    margin-top: 0;
}

    #formViewer .external-form-container {
        height: 100%;
        padding-bottom: 30px;
    }

#emptyForm {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: 90px;
    height: 100%;
    margin-top: 0;
}

#contentFormMakerItems {
    height: calc(100vh - 180px);
}

#contentFormMaker {
    height: calc(100vh - 180px);
}

    #contentFormMaker .external-form-container {
        height: 100%;
        padding-bottom: 20px;
        padding-top: 20px;
    }

#contentFormMaker {
}

.external-form {
    margin-top: 0;
}

    .external-form .btn {
        text-align: center !important;
        display: flex;
        justify-content: center;
    }

    .external-form .form-control {
        min-height: 33px;
    }

    .external-form textarea {
        margin-bottom: 0;
    }

    .external-form .title {
        padding: 5px;
        margin: 5px;
    }

    .external-form .description {
        padding: 5px;
        margin: 5px;
    }

    .external-form .edit-form-title, .edit-form-description {
        text-align: right;
        cursor: pointer;
        font-size: 15px
    }

    .external-form .confirm-edit-form-description, .confirm-edit-form-title {
        text-align: right;
        cursor: pointer;
        font-size: 15px
    }

.edit-form-title i {
    background: #8a8a8a30;
    padding: 3px;
    border-radius: 5px;
    margin: -18px;
}

.confirm-edit-form-title i {
    background: #8a8a8a30;
    padding: 3px;
    border-radius: 5px;
    margin: -18px;
}

.edit-form-description i {
    background: #8a8a8a30;
    padding: 3px;
    border-radius: 5px;
    margin: -18px;
}

.confirm-edit-form-description i {
    background: #8a8a8a30;
    padding: 3px;
    border-radius: 5px;
    margin: -18px;
}

#txtFormDescription {
    height: auto !important;
    min-height: 70px;
    background-color: transparent !important;
}

#txtFormTitle {
    height: auto !important;
    background-color: transparent !important;
}

/*.external-form .title.editable:hover {
    background: #f2f2f263;
    border-radius: 5px;
}*/
/*.external-form .description.editable:hover {
    background: #f2f2f263;
    border-radius: 5px;
}*/
#contentFormMaker ul {
    background-color: white !important;
}

    #contentFormMaker ul li {
        background-color: #454545 !important;
    }

.external-form .btn-visible {
    background-color: #f2f2f2;
    height: 100%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 1px;
    font-size: 20px;
    padding-right: 5px;
    edit-description cursor: pointer;
    cursor: pointer;
}

#contentFormMaker .external-form {
    max-width: 600px;
}

.display-flex {
    display: flex;
}

#colorInput {
    background: #fff;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    margin-top: 5px;
    background-color: #f2f2f2;
    border-radius: 5px;
}


    #colorInput span {
        width: 80px;
        margin-left: 5px
    }

#colorForm {
    background: #fff;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    margin-top: 5px;
    background-color: #f2f2f2;
    border-radius: 5px;
}

    #colorForm span {
        width: 100px;
        margin-left: 5px
    }

#colorFormBackground {
    background: #fff;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    background-color: #f2f2f2;
    border-radius: 5px;
    align-items: center;
}

    #colorFormBackground span {
        width: 110px;
        margin-left: 5px
    }

#colorFormButton {
    background: #fff;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    background-color: #f2f2f2;
    border-radius: 5px;
}

    #colorFormButton span {
        width: 110px;
        margin-left: 5px
    }

#formWidth {
    background: #fff;
    display: flex;
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    background-color: #f2f2f2;
    border-radius: 5px;
    align-items: center;
}

    #formWidth input {
        margin-left: auto;
        border: 0;
        border-radius: 5px;
        padding: 4px;
        width: 70px;
    }

#inputHeight {
    background: #fff;
    display: flex;
    padding: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    background-color: #f2f2f2;
    border-radius: 5px;
    align-items: center;
}

    #inputHeight input {
        margin-left: auto;
        border: 0;
        border-radius: 5px;
        padding: 4px;
        width: 70px;
    }

#FormFont {
    background: #fff;
    display: flex;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    background-color: #f2f2f2;
    border-radius: 5px;
    align-items: center;
}

    #FormFont select {
        margin-left: auto;
        border: 0;
        border-radius: 5px;
        padding-left: 5px;
        padding-right: 5px;
        width: 100%;
        margin-left: 10px;
    }

#checkIcon {
    background: #fff;
    display: flex;
    padding: 7px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    background-color: #f2f2f2;
    border-radius: 5px;
}

    #checkIcon input {
        margin-left: auto;
    }

    #checkIcon span {
        width: 40px;
        margin-left: 5px
    }

#boxShadow {
    background: #fff;
    display: flex;
    padding: 7px;
    padding-left: 10px;
    padding-right: 10px;
    margin-top: 5px;
    background-color: #f2f2f2;
    border-radius: 5px;
}

    #boxShadow span {
        margin-left: 5px
    }

    #boxShadow input {
        margin-left: auto;
    }

.color-selector-container {
    margin-left: auto;
    display: flex;
}

.color-selector {
    border: 1px solid gray !important;
    padding: 0 !important;
    height: 20px;
    width: 20px;
    margin: 1px;
    cursor: pointer;
    border-radius: 2px;
}

#contentFormMaker .form-check {
    background: #fff;
}

#publish-system {
    display: flex;
    justify-content: center;
    font-size: 17px;
    margin-top: 5px;
}

.dash-box {
    max-height: 350px;
}

.placeholder-dash-box {
    background-color: transparent;
    justify-content: center;
    display: flex;
    align-content: center;
    align-items: center;
    max-height: 340px !important;
    padding: 15%;
}

.btn-filter-dash-box {
    float: right;
    margin-right: 10px;
}

    .btn-filter-dash-box i {
        font-size: 20px;
    }

.filters-dash-box {
    z-index: 9997 !important;
    position: absolute !important;
    right: 0px !important;
    margin-right: 15px;
    margin-top: 5px !important;
    width: 200px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,.1) !important;
    background-color: #ffffff !important;
    color: #535353 !important;
    border-color: #454545 !important;
    border: 0 !important;
    border-radius: 5px !important;
    padding: 10px;
}

.placeholder-dash-card .dash-card {
    border-left: 0px solid #f5f5f5;
}

.placeholder-dash-box svg {
    width: 100%;
    height: auto;
}

.placeholder-dash-card-icon-container {
    overflow: hidden;
    border-radius: 50%;
    background: #f4f4f4;
    min-width: 70px;
    min-height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
}

.placeholder-dash-card-title {
    width: 150px;
    background: #f4f4f4;
    height: 15px;
    display: inline-block;
}

.placeholder-dash-card-subtitle {
    margin-top: 5px;
    width: 70px;
    background: #f4f4f4;
    height: 15px;
    display: inline-block;
}

/* Contenedor del iframe dentro de la tarjeta */
.card-iframe-container {
    width: 100%;
    height: 180px; /* Ajusta esta altura fija según tus necesidades para las tarjetas */
    overflow: hidden; /* Muy importante para ocultar el scroll y los bordes del contenido escalado */
    position: relative; /* Necesario para el posicionamiento absoluto del iframe si se usa, o para transform-origin */
    border-bottom: 1px solid #eee; /* Un borde sutil para separar la previsualización del cuerpo de la tarjeta */
    display: flex; /* Ayuda a centrar el iframe */
    justify-content: center; /* Centra horizontalmente el iframe */
    align-items: center; /* Centra verticalmente el iframe */
    background-color: #f8f8f8; /* Un fondo claro si el iframe no carga bien al principio */
}

/* Estilos para el iframe en la tarjeta */
.card-iframe {
    width: 800px; /* Ancho de un correo electrónico estándar (ej. 600px a 800px) */
    height: 1200px; /* Una altura suficientemente grande para la mayoría de los correos */
    border: none; /* Elimina el borde predeterminado del iframe */
    transform-origin: 0 0; /* Punto de origen para la escala (superior izquierda) */
    transform: scale(0.25); /* ESCALA CLAVE: Ajusta este valor (ej. 0.25 = 25% del tamaño original) */
    pointer-events: none; /* Deshabilita los clics dentro del iframe para que no interfieran con la UX de la tarjeta */
    position: absolute; /* Permite posicionar el iframe dentro del contenedor con overflow: hidden */
    top: 50%; /* Intenta centrarlo verticalmente */
    left: 50%; /* Intenta centrarlo horizontalmente */
    margin-left: -400px; /* (Ancho del iframe / 2) para centrar horizontalmente */
    margin-top: -600px; /* (Altura del iframe / 2) para centrar verticalmente */
}

/* Opcional: Estilo para las cards si h-140 no es una clase de Bootstrap que de la altura que quieres */
.card.h-140 {
    min-height: 350px; /* Una altura mínima para la tarjeta, ajusta según el tamaño de tu iframe-container + body + footer */
    display: flex;
    flex-direction: column;
}

    .card.h-140 .card-body {
        flex-grow: 1; /* Para que el cuerpo ocupe el espacio restante */
    }

.modal-content .card-header {
    background: #f5f5f5
}

.card-title {
    font-size: 1rem; /* Ajusta el tamaño del título */
    white-space: nowrap; /* Evita que el título se rompa en varias líneas */
    overflow: hidden; /* Oculta el texto que excede el espacio */
    text-overflow: ellipsis; /* Añade puntos suspensivos (...) si el texto es muy largo */
}

.card-footer {
    padding: .75rem 1.25rem;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0,0,0,.125);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.no-has-permissions-placeholder i {
    font-size: 35px;
    color: #c8c7c7;
}

.breathing-effect {
    animation: breathing 3s ease-in-out infinite;
}

@keyframes breathing {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/*Mail mannager*/
#email-compose {
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    width: 600px;
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: white;
    z-index: 9999999;
    position: fixed;
    /* Asegura que esté por encima de otros elementos */
    transition: all 0.3s ease;
}

    #email-compose .email-header {
        color: #535353 !important;
    }

    #email-compose .btn:not(.btn-primary) {
        color: #535353 !important;
        background-color: transparent !important;
    }

    #email-compose.minimized {
        height: auto;
        /* Adjust as needed for your minimized state */
        height: 40px !important; /* Example minimized width */
        width: 300px;
    }

    #email-compose.maximized {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }

        #email-compose.maximized .note-editable {
            height: 70vh !important;
        }

    #email-compose .choices {
        width: 100%;
        float: left;
        border: 0 !important;
    }

    #email-compose .choices__inner {
        border: 0px;
        box-shadow: none;
        padding: 0px;
    }

.search-contacts:hover {
    text-decoration: underline;
    cursor: pointer;
}

#cc-cco-fields-btns {
    z-index: 999999;
}

.choices-container {
    display: flex; /* Para alinear el label y el input en la misma línea */
    align-items: center; /* Para centrar verticalmente el label y el input */
    margin-bottom: 0.5rem; /* Espacio entre los contenedores */
}

.choices-label {
    margin-right: 0.5rem; /* Espacio entre el label y el input */
    font-weight: normal; /* Opcional: para resaltar el label */
}

.choices {
    flex-grow: 1; /* Para que el input de Choices ocupe el espacio restante */
}

/* Opcional: ajustar el estilo del input original si es necesario */
.choices-input {
    display: none !important; /* Ocultar el input original ya que Choices lo reemplaza */
}

.toolbar-dv {
    background-image: url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/format_color_text_baseline_nv700_20dp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
}

.email-header {
    border-bottom: 1px solid #eee;
}

.control-buttons button {
    padding: 0.25rem 0.5rem;
}

.cc-cco-fields input {
    font-size: 0.8rem;
}

.toolbar {
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 5px;
}

    .toolbar button,
    .toolbar label {
        margin-right: 0.5rem;
    }

#attachments-preview {
    margin-top: 0.5rem;
}

#email-compose .note-editor {
    box-shadow: none;
}

#email-compose .note-statusbar {
    display: none;
}

#email-compose .note-btn-group .note-dropdown-menu {
    transform: translateY(-100%);
}

#email-compose .note-toolbar {
    border: 0;
    background: white !important;
    box-shadow: 0px 8px 28px -9px rgba(0, 0, 0, 0.15) !important;
}

#email-compose .email-compose-footer .btn:not(.btn-primary) {
    font-size: 20px;
    padding: 0;
    border: 0px;
    margin-left: 10px;
    color: #515151;
}

#email-compose input {
    background-color: transparent !important;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 0;
    color: #545454 !important;
}

body.dark-mode #email-compose input {
    background-color: transparent !important;
    padding-top: 5px;
    padding-bottom: 5px;
}

#email-compose .choices__list {
    color: #545454 !important;
    background-color: white !important;
}

#email-compose .choices-label {
    color: #545454 !important;
}

#email-compose .choices-container {
    margin-left: 7px;
}

.input-border-bottom {
    border-bottom: 1px solid var(--color-texto) !important;
}


.note-modal .modal-footer P {
    display: none;
}

.folder-item.selected {
    background-color: #8080801f;
    border-radius: 5px;
}

.xdsoft_datetimepicker {
    z-index: 99999999999999999 !important;
}
/*Mail Marketing*/
#ListMails {
    margin-top: 0;
    height: calc(100vh - 250px);
    margin-top: 15px;
    overflow: scroll;
    overflow-x: hidden;
}

#contentMailViewer {
    margin-top: 0;
    height: calc(100vh - 142px);
    overflow: scroll;
    overflow-x: hidden;
}

#emptyMail {
    margin-top: 0;
    height: calc(100vh - 142px);
}


#emptyMail {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: 90px;
    height: 100%;
    margin-top: 0;
}

.cke_maximized {
    z-index: 9999999 !important;
    position: fixed;
}

.cke_top {
    background: #ffff !important;
}

.cke_bottom {
    background: #ffff !important;
    border: 0px;
}

.cke_chrome {
    border: 0px !important;
}

.container-form {
    height: calc(100vh - 180px);
}

#contentMailMaker {
    height: calc(100vh - 180px);
    overflow-y: scroll;
    overflow-x: hidden;
}

.toolbar button {
    margin-right: 5px;
}

.btn-primary {
    background-color: #1a73e8;
    border-color: #1a73e8;
}

.btn-light {
    color: #5f6368;
    border-color: #e0e0e0;
}

.email-header {
    background-color: #f8f9fa;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    margin-bottom: 10px;
    font-size: 15px;
}

.control-buttons .btn {
    padding: 0;
    width: 24px;
    height: 24px;
}

.control-buttons {
    display: flex;
}

    .control-buttons button {
        display: flex;
        justify-content: center;
        border: 0;
    }

.input-group-text {
    border: 0;
    background-color: white;
    height: 40px;
}

#email-list {
    color: #535353
}

    #email-list input {
        height: 20px !important;
        width: 20px !important;
    }

    #email-list i {
        font-size: 16px;
    }

.adjunto-container {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    background-color: #f9f9f9;
}

.adjunto-icono {
    background-color: #ddd;
    color: #333;
    font-weight: bold;
    padding: 8px;
    border-radius: 4px;
    margin-right: 10px;
    min-width: 30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em; /* Ajusta el tamaño del texto de la extensión */
}

    .adjunto-icono svg {
        width: 24px;
        height: 24px;
    }

.adjunto-container span {
    flex-grow: 1;
    margin-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adjunto-botones a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    border-radius: 50%;
    background-color: #eee;
    color: #555;
    text-decoration: none;
}

    .adjunto-botones a:hover {
        background-color: #ddd;
    }

.adjunto-botones svg {
    width: 16px;
    height: 16px;
}

.categories span {
    color: #b3b3b3;
    font-weight: bold;
    cursor: pointer;
}

    .categories span:hover {
        color: #fff;
    }

.table-dark .email-item {
    transition: background-color 0.2s ease;
}

    .table-dark .email-item:hover {
        background-color: #333;
    }

#emailConect {
    font-size: 30px;
    color: forestgreen;
}

#emailDisconect {
    font-size: 30px;
    color: #e14242;
}

.sender {
    width: 20%;
    color: #535353;
}

.subject {
    width: 60%;
    color: #555;
}

.date {
    width: 15%;
    text-align: right;
}

button:focus {
    box-shadow: none;
    outline: none !important;
    box-shadow: none;
}

#btnNewMessage {
    border-radius: 5px;
    width: 100%;
    padding: 5px;
    padding-left: 15px;
    height: 40px;
    font-size: 16px;
    margin-bottom: 15px;
    text-align: left;
    background: #ffffff;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
    border: 0px;
    color: #535353;
}

.list-unstyled li {
    font-size: 15px;
}

#btnRefreshMail {
    font-size: 25px;
    margin-left: 5px;
    margin-right: 15px;
    cursor: pointer;
}

#updatePhoto {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 30px;
}

#profilePicture {
    margin: auto;
    max-width: 400px;
    margin-top: 20px;
    margin-bottom: 30px;
    border-radius: 50%;
}

.border-none-left-right {
    border-left: 0 !important;
    border-right: 0 !important;
}

.gantt-container {
    font-family: Arial, sans-serif;
    margin: 20px;
}

.header {
    margin-bottom: 20px;
}

.project-info input {
    margin-left: 10px;
}

.gantt-table {
    display: flex;
}

.tasks table {
    width: 100%;
    border-collapse: collapse;
}

.tasks th,
.tasks td {
    /*border: 1px solid #f2f2f2;*/
    padding: 4px;
    text-align: left;
}

.tasks thead {
    border-bottom: 1px solid rgba(174, 174, 174, 0.3) !important;
}

.chart-tasks thead {
    border-bottom: 1px solid rgba(174, 174, 174, 0.3) !important;
}

.tasks tfoot {
    border-top: 1px solid rgba(174, 174, 174, 0.3) !important;
}

.chart-tasks tfoot {
    border-top: 1px solid rgba(174, 174, 174, 0.3) !important;
}

.chart-tasks table {
    width: 100%;
    border-collapse: collapse;
}

.chart-tasks th,
.chart-tasks td {
    /*border: 1px solid #f2f2f2;*/
    padding: 4px;
    text-align: left;
}

.gantt-chart {
    width: 70%;
    overflow-x: auto;
}

    .gantt-chart table {
        width: 100%;
        border-collapse: collapse;
    }

    .gantt-chart th,
    .gantt-chart td {
        border: 1px solid #f2f2f2;
        text-align: center;
        padding: 8px;
    }

#placeholder-sprint {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: 20px;
    height: 55vh;
    flex-direction: column;
}

    #placeholder-sprint .btn.bg-gray {
        background: var(--color-principal)db !important;
        color: var(--color-texto) !important;
    }

    #placeholder-sprint i {
        font-size: 30px
    }

.project-user-image-container {
    min-width: 25px;
    min-height: 25px;
    max-width: 25px;
    max-height: 25px;
    overflow: hidden;
    border-radius: 50%;
}

.gantt-chart .bar {
    background-color: #dc3545;
    height: 19.5px;
    border-radius: 5px;
}

.gantt-chart .high-risk {
    background-color: #dc3545;
}

.gantt-chart .low-risk {
    background-color: #28a745;
}

.tasks .description {
    max-width: 300px;
    min-width: 300px;
}

.tasks .user {
    max-width: 150px;
    min-width: 150px;
}

.tasks .team {
    max-width: 150px;
    min-width: 150px;
}

.sprint-table {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

#view-sprint, #view-gantt {
    margin-bottom: 15px;
}

.custom-cbo {
    border-radius: 5px;
    font-size: 13px;
    appearance: none;
    cursor: pointer;
    text-align: center;
    padding: 2px;
}

    /* Colores dinámicos al seleccionar */
    .custom-cbo.selected-en-curso {
        background-color: #0078a8 !important;
        color: white !important;
    }

    .custom-cbo.selected-bajo {
        background-color: #fbbd05 !important;
        color: black !important;
    }

    .custom-cbo.selected-medio {
        background-color: #94558d !important;
        color: white !important;
    }

    .custom-cbo.selected-alto {
        background-color: #c0392b !important;
        color: white !important;
    }

    .custom-cbo.selected-sin-asignar {
        background-color: #e8e8e8 !important;
        color: black !important;
    }

    .custom-cbo.selected-terminado {
        background-color: #28a745 !important;
        color: white !important;
    }

    .custom-cbo.selected-rechazado {
        background-color: #f87171 !important;
        color: white !important;
    }

.drop-container {
    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: max-content;
    padding: 20px;
    border-radius: 10px;
    border: 2px dashed #555;
    color: #444;
    cursor: pointer;
    transition: background .2s ease-in-out, border .2s ease-in-out;
}

    .drop-container:hover,
    .drop-container.drag-active {
        background: #eee;
        border-color: #111;
    }

        .drop-container:hover .drop-title,
        .drop-container.drag-active .drop-title {
            color: #222;
        }

.drop-title {
    color: #444;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: color .2s ease-in-out;
}

.dt-layout-row.dt-layout-table {
    overflow: hidden;
    overflow-x: scroll;
}

#TWGanttArea table tr:nth-child(odd) td {
    background-color: transparent; /* Color de fondo para celdas en filas impares */
}

#TWGanttArea table tr:nth-child(even) td {
    background-color: transparent; /* Color de fondo para celdas en filas pares */
}

#TWGanttArea table tr:nth-child(odd) td input {
    background-color: transparent !important; /* Color de fondo para celdas en filas impares */
}

#TWGanttArea table tr:nth-child(even) td input {
    background-color: transparent !important; /* Color de fondo para celdas en filas pares */
}

#table1 input {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

#table2 input {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

/*table tbody tr:hover {
    background-color: rgba(173, 216, 230, 0.5) !important;*/ /* Color celeste con opacidad */
/*transition: background-color 0.3s ease !important;*/ /* Transición suave */
/*}*/

/*Siempre poner darkmode al final para que su csss predomine*/
/* General transition for theme changes */

body {
    transition: background-color 0.3s, color 0.3s;
}

.promo-section {
    display: flex;
    border: 1px solid #d2d6da;
    border-radius: .5rem;
    overflow: hidden;
    padding: 10px;
    padding-right: 0;
}

/*mail managger*/

#mail-view {
    max-width: 100%;
    box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.15);
    background-color: white;
    height: calc(100vh - 210px);
    overflow: hidden;
    padding: 10px;
    border-radius: 5px;
}

#init-loader-mail .container {
    width: 100%;
    height: 100vh;
    background-image: radial-gradient(circle, white, lightgray);
}

#init-loader-mail svg {
    display: block;
    width: 400px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

#init-loader-mail svg {
    animation: 2s envelope-enter, 2s envelope-pulse 2.75s infinite;
}

#init-loader-mail #letter-top {
    animation: 1.75s letter-top ease-out;
    animation-fill-mode: both;
    transform-origin: 50% 32%;
}

#init-loader-mail #letter-top-2 {
    animation: 1.75s letter-top-2 ease-out;
    animation-fill-mode: both;
    transform-origin: 50% 32%;
}

#init-loader-mail #letter-bottom {
    animation: 2s letter-bottom;
    animation-delay: 1s;
    animation-fill-mode: both;
}

#init-loader-mail #envelope-back {
    animation: 1s envelope-back;
    animation-delay: 1.5s;
    animation-fill-mode: both;
}

#init-loader-mail #envelope-top {
    animation: 1.25s envelope-top ease-in-out;
    animation-delay: 2s;
    animation-fill-mode: both;
    transform-origin: 50% 30%;
    fill: #009eff;
}

#init-loader-mail #envelope-top-shadow {
    animation: 1.25s envelope-top-shadow;
    animation-delay: 2s;
    animation-fill-mode: both;
    transform-origin: 50% 30%;
}

#init-loader-mail #envelope-right {
    animation: 1.25s envelope-right ease-in-out;
    animation-delay: 2s;
    animation-fill-mode: both;
    transform-origin: 69.5% 50%;
}

#init-loader-mail #envelope-left {
    animation: 1.25s envelope-left ease-in-out;
    animation-delay: 1.6s;
    animation-fill-mode: both;
    transform-origin: 30.5% 50%;
}

#init-loader-mail #envelope-bottom {
    animation: 1.25s envelope-bottom ease-in-out;
    animation-delay: 2s;
    animation-fill-mode: both;
    transform-origin: 50% 70%;
}

@keyframes letter-top {
    0% {
        transform: scaleY(-1) skewX(0deg);
        fill: #e6e6e6;
    }

    50% {
        transform: scaleY(0) skewX(-10deg);
        fill: darken(#e6e6e6, 20%);
    }

    60% {
        fill: lighten(#e6e6e6, 5%);
    }

    100% {
        transform: scaleY(1) skewX(0deg);
        fill: #e6e6e6;
    }
}

@keyframes letter-top-2 {
    0% {
        transform: scaleY(-1) skewX(0deg);
        fill: #e6e6e6;
    }

    50% {
        transform: scaleY(0) skewX(10deg);
        fill: darken(#e6e6e6, 20%);
    }

    60% {
        fill: lighten(#e6e6e6, 5%);
    }

    100% {
        transform: scaleY(1) skewX(0deg);
        fill: #e6e6e6;
    }
}

@keyframes letter-bottom {
    from {
        fill: #e6e6e6;
    }

    to {
        fill: darken(#e6e6e6, 10%);
    }
}

@keyframes envelope-back {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes envelope-enter {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    75% {
        // transform: scale(.95);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes envelope-pulse {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1);
    }

    50% {
        transform: scale(.95);
    }

    100% {
        transform: scale(1);
    }
}



@keyframes envelope-top {
    0% {
        transform: scaleY(0);
        fill: lighten($envelope-color, 20%);
    }

    50% {
        transform: scaleY(-1);
        fill: lighten($envelope-color, 10%);
    }

    60% {
        fill: darken($envelope-color, 20%);
    }

    100% {
        transform: scaleY(1);
        fill: lighten($envelope-color, 10%);
    }
}

@keyframes envelope-top-shadow {
    0% {
        opacity: 0;
    }

    65% {
        opacity: 0;
        transform: scaleY(1.5);
    }

    100% {
        opacity: .25;
        transform: scaleY(1);
    }
}

@keyframes envelope-right {
    0% {
        transform: scaleX(0);
        fill: lighten(#ccc, 20%);
    }

    50% {
        transform: scaleX(-1);
        fill: #ccc;
    }

    60% {
        fill: darken(#ccc, 20%);
    }

    100% {
        transform: scaleX(1);
        fill: #ccc;
    }
}

@keyframes envelope-left {
    0% {
        transform: scaleX(0);
        fill: lighten(#ccc, 20%);
    }

    50% {
        transform: scaleX(-1);
        fill: #ccc;
    }

    60% {
        fill: darken(#ccc, 20%);
    }

    100% {
        transform: scaleX(1);
        fill: #ccc;
    }
}

@keyframes envelope-bottom {
    0% {
        transform: scaleY(0);
        fill: darken(#b3b3b3, 20%);
    }

    50% {
        transform: scaleY(-1);
        fill: #b3b3b3;
    }

    60% {
        fill: lighten(#b3b3b3, 20%);
    }

    100% {
        transform: scaleY(1);
        fill: #b3b3b3;
    }
}

#init-loader-mail .st0 {
    fill: #b3b3b3
}

#init-loader-mail .st1 {
    fill: #e6e6e6
}

#init-loader-mail .st2 {
    fill: #ccc
}

.toggle-folder {
    cursor: pointer;
}

.dropdown-toggle {
    color: #535353;
}

.static-dropdown {
    position: relative;
    display: inline-block;
}

.static-dropdown-toggle {
    cursor: pointer;
    width: 100%;
}

.static-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none !important;
    width: 100%;
}

    .static-dropdown-menu.show {
        display: block !important;
    }

.static-dropdown-item { /* Añadimos el prefijo 'static-' */
    display: block;
    width: 100%;
    padding: .5rem;
    clear: both;
    font-weight: 400;
    color: #535353;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    padding-left: 55px;
}

#dynamicFolders div.edit {
    position: absolute;
    right: 0px;
    padding-right: 12px;
    padding-left: 12px;
    cursor: pointer;
    z-index: 99999;
    display: none;
}

#dynamicFolders div.edit {
    position: absolute;
    right: 0px;
    padding-right: 12px;
    padding-left: 12px;
    cursor: pointer;
    z-index: 99999;
    display: none;
}

#dynamicFolders a.static-dropdown-item:hover div.edit {
    display: block;
}

#folder-list .folder-item {
    cursor: pointer;
    margin-bottom: 5px;
}

#folder-list .category-email {
    margin-bottom: 5px;
}

.folder-item:hover,
.static-dropdown-item:hover,
.static-dropdown-item:focus {
    color: #1e2125;
    background-color: #8080801f;
    border-radius: 5px;
}

.static-dropdown-divider { /* Añadimos el prefijo 'static-' */
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

/* Estilo para que el input parezca parte del texto */
.inline-input {
    display: inline-block;
    width: 100px; /* Ajusta el ancho según tu necesidad */
    padding: .2rem .5rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #f8f9fa; /* Color de fondo gris claro */
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

    /* Opcional: Un poco de estilo para que se destaque al hacer foco */
    .inline-input:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    }

/* Para que el texto sea verticalmente centrado con el input */
.align-items-center .text-part {
    white-space: nowrap; /* Evita que el texto se rompa */
    margin-right: 5px;
}

/* Estilo para el contenedor de la etiqueta e ícono */
.label-with-tooltip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.tooltip {
    z-index: 99999999999999999 !important;
}

/* Opcional: estilo del ícono de información si lo necesitas */
.label-with-tooltip i {
    cursor: help;
    color: #6c757d; /* Color gris de Bootstrap */
}

.editable-table tr th {
    padding: 15px;
    padding-bottom: 10px;
}

.editable-table tbody td {
    padding: 5px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.editable-table tfoot .total-foot {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 0 !important;
}

.edt-td .action {
    float: right;
    margin: 0px !important;
}

.editable-table tfoot .total-foot input {
    border-right: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    padding-top: 7px;
    padding-bottom: 7px;
}

.editable-table tbody td .form-control,
.editable-table tbody td input {
    background: transparent !important;
    border: 0px !important;
}

.editable-table tbody td:first-child {
    border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.editable-table tbody td:last-child {
    border-right: 0px solid rgba(0, 0, 0, 0.2);
}

.editable-table thead {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.editable-table tfoot {
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}

#profile-image-view {
    border: 5px solid white;
}

/* D
    ark theme */
/* Light Theme */

    body.light-mode input[type="checkbox"]:checked {
        background-color: #36aeff !important;
        border-color: #36aeff !important;
    }

    /* Dark Theme */
    body.dark-mode {
        background-color: var(--color-fondo);
        color: white;
    }

    body.dark-mode .content-item-side {
        transition: color 0.3s;
        color: var(--color-texto);
    }
        body.dark-mode .content-item-side.activ {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-secundario) !important;
        }

        body.dark-mode .content-item-side:hover {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-secundario) !important;
        }

        body.dark-mode p,
        body.dark-mode h1,
        body.dark-mode h2,
        body.dark-mode h3,
        body.dark-mode h4,
        body.dark-mode h5,
        body.dark-mode h6 {
            transition: color 0.3s;
            color: var(--color-texto) !important;
        }

        body.dark-mode .modal-content .card{
            background: transparent !important;
            border: 0px;
        }

        body.dark-mode .modal-content .card-header {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-secundario) !important;
            color: var(--color-texto) !important;
        }
        body.dark-mode .modal-content .card-body {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-principal) !important;
            color: var(--color-texto) !important;
        }


        body.dark-mode .system-card {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-principal) !important;
            color: var(--color-texto) !important;
        }

        body.dark-mode .card-icon-container {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-secundario) !important;
            color: var(--color-texto) !important;
        }

        body.dark-mode .card-icon-container .system-icon {
            transition: color 0.3s;
            color: var(--color-texto) !important;
        }

    body.dark-mode #btmCloseMailViewer {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode #side-menu {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode input {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-fondo) !important;
        color: var(--color-texto) !important;
    }

        body.dark-mode input.choices__input {
            transition: background-color 0.3s, color 0.3s;
            background-color: transparent !important;
            color: var(--color-texto) !important;
        }

    body.dark-mode #nav-bar {
        background-color: var(--color-fondo) !important;
        color: var(--color-texto) !important;
    }

        body.dark-mode #nav-bar .container-fluid {
            background-color: var(--color-principal) !important;
            color: var(--color-texto) !important;
        }


    body.dark-mode #listTeamEvents .input-group-text {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-fondo) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode select {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-fondo) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode div.titulo-maestro select {
        background-color: var(--color-fondo) !important;
        transition: background-color 0s, color 0s;
        color: var(--color-texto) !important;
        border: 0px !important;
    }

    body.dark-mode .dash.radio-inputs .radio input:checked + .name {
        color: var(--color-texto) !important;
    }

    body.dark-mode .dash.radio-inputs .radio input:hover + .name {
        background-color: #9797974a;
        color: var(--color-texto) !important;
    }

    body.dark-mode .tabs ul.ui-tabs-nav {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode table.dataTable > thead > tr > th, body.dark-mode table.dataTable > thead > tr > td {
        border-bottom: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode div.dt-container.dt-empty-footer tbody > tr:last-child > * {
        border-bottom: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    /*body.dark-mode table.dataTable > tfoot > tr > th,
body.dark-mode table.dataTable > tfoot > tr > td {
    border-bottom: 1px solid rgba(83, 83, 83, 0.3) !important;
}
*/
    body.dark-mode #calendar {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }


    body.dark-mode .choices__list--dropdown {
        transition: background-color 0.3s, color 0.3s;
        background-color: #212529 !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .is-highlighted {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode #calendar a {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }

    body.dark-mode #calendar table tr:nth-child(2n) td {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }

    body.dark-mode #calendar div.fc-non-business {
        transition: background-color 0.3s, color 0.3s;
        background: rgba(106, 106, 106, 0.3) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode #calendar .fc-button {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode #calendar .fc-view-harness {
        background: var(--color-principal) !important;
        border-radius: 5px;
    }

    body.dark-mode .placeholder {
        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        color: var(--color-texto) !important;
        background-color: var(--color-principal) !important;
    }

    body.dark-mode #listTeamEvents div.item-list-event {
        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        color: var(--color-texto) !important;
        background-color: var(--color-fondo) !important;
    }

        body.dark-mode #listTeamEvents div.item-list-event a {
            transition: color 0.3s, border-color 0.3s;
            color: var(--color-texto) !important;
        }

            body.dark-mode #listTeamEvents div.item-list-event a:hover {
                transition: color 0.3s, border-color 0.3s;
                color: #009eff !important;
            }

    body.dark-mode #calendar .fc-button {
        transition: background-color 0.3s;
        background-color: var(--color-principal) !important;
    }

    body.dark-mode #calendar table {
        transition: border-color 0.3s;
        border-color: var(--color-fondo) !important;
    }

    body.dark-mode #calendar .fc-multiMonthYear-view {
        transition: border-color 0.3s;
        border-color: var(--color-fondo) !important;
    }

    body.dark-mode #calendar td {
        transition: border-color 0.3s;
        border-color: var(--color-fondo) !important;
        background: var(--color-principal);
    }

    body.dark-mode #calendar .fc-day-disabled {
        transition: background-color 0.3s, color 0.3s;
        background: rgba(13, 13, 13, 0.84) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode #calendar th {
        transition: border-color 0.3s;
        border-color: var(--color-fondo) !important;
    }

    body.dark-mode #calendar tr.fc-list-day > * {
        transition: background-color 0.3s, color 0.3s;
        background-color: #000 !important;
    }

    body.dark-mode #calendar div.fc-listMonth-view {
        transition: border-color 0.3s;
        border-color: var(--color-fondo) !important;
    }

    body.dark-mode #calendar .fc-daygrid-day.fc-day-today {
        background-color: #0c496f9c !important;
    }

    body.dark-mode #calendar button:hover {
        transition: background-color 0.3s, color 0.3s;
        background-color: #333333 !important;
        color: var(--color-texto) !important;
        border: 0 !important;
    }

    body.dark-mode #calendar .fc-button:hover {
        transition: background-color 0.3s, color 0.3s;
        border-color: #464646 !important;
    }

    body.dark-mode #change-company .btn-change-company-modal {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-fondo) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode #modal-more-options-user {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }

    body.dark-mode a {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }

        body.dark-mode a:hover {
            transition: background-color 0.3s, color 0.3s;
            color: #009eff !important;
        }

    body.dark-mode #modal-more-options-user {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
    }

        body.dark-mode #modal-more-options-user .label-more-options-user {
            transition: color 0.3s;
            color: var(--color-texto) !important;
        }

    body.dark-mode #modal-user-menu {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

        body.dark-mode #modal-user-menu .btn-modal-user {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-fondo) !important;
            color: var(--color-texto) !important;
        }

    body.dark-mode #modal-user-menu {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

        body.dark-mode #modal-user-menu .btn-modal-user {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-fondo) !important;
            color: var(--color-texto) !important;
        }

            body.dark-mode #modal-user-menu .btn-modal-user:hover {
                transition: background-color 0.3s, color 0.3s;
                background-color: #333333 !important;
                color: var(--color-texto) !important;
            }

        body.dark-mode #modal-user-menu #name-user {
            transition: background-color 0.3s, color 0.3s;
            color: var(--color-texto) !important;
        }

        body.dark-mode #modal-user-menu #profile-user {
            transition: background-color 0.3s, color 0.3s;
            color: var(--color-texto) !important;
        }

        body.dark-mode #modal-user-menu #email-user {
            transition: background-color 0.3s, color 0.3s;
            color: var(--color-texto) !important;
        }

        body.dark-mode #modal-user-menu a:hover {
            transition: background-color 0.3s, color 0.3s;
            color: #009eff !important;
        }

    body.dark-mode .note-toolbar {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

        body.dark-mode .note-toolbar .note-btn {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-principal) !important;
            color: var(--color-texto) !important;
        }

    body.dark-mode .popover-body .note-btn-group .note-btn:hover {
        transition: background-color 0.3s, color 0.3s;
        background-color: #333333 !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .popover-body .note-btn-group .note-btn {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .popover-body {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .note-frame {
        transition: background-color 0.3s, color 0.3s;
        border-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
        border-radius: 0px;
    }


    body.dark-mode .btn:not(.btn-primary) {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }

    body.dark-mode .kanban-board {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-secundario) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .kanban-board-button {
        transition: color 0.3s;
        color: var(--color-texto) !important;
    }

    body.dark-mode .nav-link {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }

    body.dark-mode .form-label {
        transition: color 0.3s;
        color: var(--color-texto) !important;
    }

    body.dark-mode .circle-count-total-oportunities {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-secundario) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .circle-count-activity {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .kanban-item {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

        body.dark-mode .kanban-item a {
            transition: background-color 0.3s, color 0.3s;
            color: var(--color-texto) !important;
        }

            body.dark-mode .kanban-item a:hover {
                transition: background-color 0.3s, color 0.3s;
                color: #64afe2 !important;
            }

        body.dark-mode .kanban-item span {
            transition: background-color 0.3s, color 0.3s;
            color: var(--color-texto) !important;
        }

        body.dark-mode .kanban-item .probability-box {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-principal) !important;
            color: var(--color-texto) !important;
        }


        body.dark-mode .kanban-item .board-item-subject {
            transition: background-color 0.3s, color 0.3s;
            color: #2c7aa8 !important;
        }

        body.dark-mode .kanban-item .board-item-end-activity {
            transition: background-color 0.3s, color 0.3s;
            color: #fff !important;
        }

        body.dark-mode .kanban-item .percentage {
            background: linear-gradient(to right, #353535 0%,#d9e5e6 50%,#41caff 100%);
        }

    body.dark-mode .kanban-drag {
        scrollbar-color: #888 var(--color-principal);
    }

    body.dark-mode .btn:hover {
        transition: background-color 0.3s, color 0.3s;
        background-color: #333333 !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode div.container-radio {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }

    body.dark-mode nav {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode ul.botonera .nav-link {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .doble-radio {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .radio-inputs .radio input:checked + .name {
        transition: color 0.3s;
        color: var(--color-texto) !important;
    }


    body.dark-mode ul.botonera .nav-link:hover {
        transition: background-color 0.3s, color 0.3s;
        background-color: #5150505c !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .list-group-item {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto);
        border-bottom: 1px solid #5150505c !important;
    }

    body.dark-mode .tasks thead {
        border-bottom: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode .chart-tasks thead {
        border-bottom: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode .tasks tfoot {
        border-top: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode .chart-tasks tfoot {
        border-top: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode table thead th {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
        /*box-shadow: 0px 0px 0px 0px;*/
    }

    body.dark-mode table tfoot td {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
        /*box-shadow: 0px 0px 0px 0px;*/
    }

    body.dark-mode table td a {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
        /*box-shadow: 0px 0px 0px 0px;*/
    }

        body.dark-mode table td a:hover {
            transition: background-color 0.3s, color 0.3s;
            color: #64afe2 !important;
        }

    body.dark-mode div.container-table {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
        /*box-shadow: 0px 0px 0px 0px;*/
    }

    body.dark-mode div.form {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
        /*box-shadow: 0px 0px 0px 0px;*/
    }

    body.dark-mode div.form {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
        /*box-shadow: 0px 0px 0px 0px;*/
    }

    body.dark-mode div.item-user-action {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode div.item-user {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-fondo) !important;
        color: var(--color-texto) !important;
    }

        body.dark-mode div.item-user .btn {
            transition: background-color 0.3s, color 0.3s;
            background-color: var(--color-principal) !important;
            color: var(--color-texto) !important;
        }

    body.dark-mode div.empty-user {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-fondo) !important;
        color: var(--color-texto) !important;
    }


    body.dark-mode div.titulo-maestro {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }


    body.dark-mode div.form-title {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode table td textarea {
        color: var(--color-texto) !important;
    }

    body.dark-mode #view-sprint table tbody tr,
    body.dark-mode table tbody tr,
    body.dark-mode table.editable-table tbody tr {
        border-color: rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode table.editable-table thead tr {
        border-bottom: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode table.editable-table tbody tr input {
        border: 0px !important;
    }

    body.dark-mode table.editable-table tfoot .total-foot input {
        border-color: rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode .editable-table tbody td .form-control,
    body.dark-mode .editable-table tbody td input {
        background: transparent !important;
        border: 0px !important;
    }

    body.dark-mode div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
        border: 0;
        background: #222222 !important;
    }

    body.dark-mode div.dt-container .dt-paging .dt-paging-button:hover {
        background: #333333 !important;
        border-color: #333333 !important;
        border-radius: 5px;
        box-shadow: none;
    }

    body.dark-mode li.breadcrum-item {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }

        body.dark-mode li.breadcrum-item a {
            transition: background-color 0.3s, color 0.3s;
            color: var(--color-texto) !important;
        }

    body.dark-mode img.icon-user {
        background-image: url(../Images/user-icon.png) !important;
        color: white;
    }

.tr-icon {
    background-color: transparent !important
}

body.dark-mode .tr-icon {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
}

    body.dark-mode .tr-icon:hover {
        color: #009eff !important;
    }

body.dark-mode .modal-content {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

    body.dark-mode .modal-content .form-select {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
        background-color: var(--color-principal) !important;
        border: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode .modal-content .form-control {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
        background-color: var(--color-principal) !important;
        border: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

body.dark-mode .open-widget-modal {
    background-color: var(--color-principal) !important;
    border: 1px solid rgba( 83, 83, 83, 0.3) !important;
}

body.dark-mode .modal-content .container-radio {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

body.dark-mode .modal-content thead {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
}

body.dark-mode .body-modal select {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

body.dark-mode .body-modal textarea {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

body.dark-mode .body-modal input {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

body.dark-mode .body-modal .dt-empty {
    color: var(--color-texto) !important;
}

body.dark-mode td {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
}

body.dark-mode .btn-m-footer {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
    background-color: var(--color-principal) !important;
    border: 1px solid rgba(83, 83, 83, 0.3) !important;
}

    body.dark-mode .btn-m-footer:hover {
        transition: background-color 0.3s, color 0.3s;
        background-color: #333333 !important;
        color: var(--color-texto) !important;
    }

body.dark-mode .ui-state-default {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

    body.dark-mode .ui-state-default a {
        transition: background-color 0.3s, color 0.3s;
        border-color: var(--color-principal);
        color: var(--color-texto) !important;
    }

        body.dark-mode .ui-state-default a:hover {
            transition: background-color 0.3s, color 0.3s, border 0.3s;
            background-color: #2d2d2d !important;
        }

body.dark-mode .ui-state-active a {
    transition: background-color 0.3s, color 0.3s;
    border-color: #009dfe
}

    body.dark-mode .ui-state-active a:hover {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
    }

body.dark-mode .ui-tabs-panel {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

body.dark-mode .login {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

    body.dark-mode .login .title {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
    }

/*body.dark-mode .radio-inputs {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-secundario) !important;
    color: var(--color-texto) !important;
}*/

body.dark-mode #modal-view-attach input {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
}

body.dark-mode #modal-add-attach input {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
}

body.dark-mode .xdsoft_datetimepicker {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

body.dark-mode .xdsoft_datetimepicker {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

    body.dark-mode .xdsoft_datetimepicker .xdsoft_label i,
    body.dark-mode .xdsoft_datetimepicker .xdsoft_prev,
    body.dark-mode .xdsoft_datetimepicker .xdsoft_next,
    body.dark-mode .xdsoft_datetimepicker .xdsoft_today_button {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==) !important;
    }

    body.dark-mode .xdsoft_datetimepicker .xdsoft_label {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .xdsoft_datetimepicker tbody,
    body.dark-mode .xdsoft_datetimepicker td,
    body.dark-mode .xdsoft_datetimepicker tfoot,
    body.dark-mode .xdsoft_datetimepicker th,
    body.dark-mode .xdsoft_datetimepicker thead,
    body.dark-mode .xdsoft_datetimepicker tr {
        transition: border-color 0.3s, color 0.3s;
        border-color: #535353 !important;
    }

        body.dark-mode .xdsoft_datetimepicker tbody td {
            background: var(--color-fondo)
        }

    body.dark-mode .xdsoft_datetimepicker .xdsoft_time_box {
        transition: border-color 0.3s, color 0.3s;
        border-color: var(--color-fondo) !important;
    }

    body.dark-mode .xdsoft_datetimepicker .xdsoft_calendar th {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-fondo) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .xdsoft_datetimepicker .xdsoft_time_variant .xdsoft_time {
        transition: background-color 0.3s, color 0.3s;
        background-color: transparent;
    }

body.dark-mode .CodeMirror {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    caret-color: var(--color-texto);
}

body.dark-mode .editor-toolbar {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    caret-color: var(--color-texto);
}

    body.dark-mode .editor-toolbar a {
        transition: color 0.3s;
        color: var(--color-texto);
    }

    body.dark-mode .editor-toolbar i.separator {
        transition: border-color 0.3s;
        border-color: #202020 !important;
    }

    body.dark-mode .editor-toolbar.fullscreen {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal);
        color: var(--color-texto);
        caret-color: var(--color-texto);
    }

body.dark-mode .editor-preview-side {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    caret-color: var(--color-texto);
    border-color: var(--color-principal);
}

body.dark-mode .ui-datepicker {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
}

body.dark-mode .ui-datepicker-header {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    border: 1px solid var(--color-fondo)
}

    body.dark-mode .ui-datepicker-header select {
        transition: border 0.3s, color 0.3s;
        border: 1px solid var(--color-fondo)
    }

body.dark-mode .ui-widget {
    transition: border 0.3s, color 0.3s;
    border: 1px solid var(--color-fondo)
}

body.dark-mode .ui-widget-content {
    transition: border 0.3s, color 0.3s;
    border: 1px solid var(--color-fondo)
}

body.dark-mode .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
    transition: border 0.3s, color 0.3s;
    border: 1px solid var(--color-fondo)
}

body.dark-mode .buttonRadiPorcentage {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo);
    color: var(--color-texto) !important;
}

body.dark-mode #btn-more-options-user {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
}

body.dark-mode #toggle-theme {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
}

body.dark-mode #btnMyNorifications {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
}


body.dark-mode .dashboard-card {
    transition: background-color 0.3s, color 0.3s;
    background: #00000047;
    color: var(--color-texto) !important;
}

body.dark-mode .dash-card {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

body.dark-mode .placeholder-dash-card .dash-card .placeholder-dash-card-title, placeholder-dash-card-subtitle, placeholder-dash-card-icon-container {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
}

body.dark-mode .placeholder-dash-card .dash-card .placeholder-dash-card-subtitle {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
}

body.dark-mode .placeholder-dash-card .dash-card .placeholder-dash-card-icon-container {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
}

body.dark-mode .no-has-permissions-placeholder i {
    transition: background-color 0.3s, color 0.3s;
    color: #373737 !important;
}

body.dark-mode .box-items-head {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

body.dark-mode .box-items-display {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-principal) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

body.dark-mode .box-item {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo);
    color: var(--color-texto) !important;
}

    body.dark-mode .box-item:hover {
        transition: background-color 0.3s, color 0.3s;
        background-color: rgba(215, 215, 215, 0.2);
        color: var(--color-texto) !important;
    }

body.dark-mode .no-items-found {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo);
    color: var(--color-texto) !important;
}

body.dark-mode .dt-column-title {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
}

body.dark-mode .form-select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23d7d7d7" class="bi bi-chevron-down" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
}

body.dark-mode .card-dash-icon {
    transition: background-color 0.3s, color 0.3s;
    color: #f0f0f0 !important;
}

body.dark-mode .currentCompania {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
}

body.dark-mode .currentCompania {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
}

body.dark-mode .compania i {
    transition: background-color 0.3s, color 0.3s;
    color: var(--color-texto) !important;
}


body.dark-mode .customBreadcrub ul li a:hover:not(a.active) {
    color: #3498db !important
}

body.dark-mode .customBreadcrub ul li a {
    transition: background-color 0.3s, color 0.3s;
    color: #959595 !important
}

body.dark-mode input[type="checkbox"]:checked {
    background-color: #36aeff !important;
    border-color: #36aeff !important;
}

body.dark-mode .customBreadcrub a.active {
    transition: background-color 0.3s, color 0.3s;
    color: #535353 !important
}

body.dark-mode #colorInput {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

body.dark-mode #colorForm {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

body.dark-mode #colorFormBackground {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

body.dark-mode #formWidth {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

    body.dark-mode #formWidth input {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
        /*box-shadow: 0px 0px 0px 0px;*/
    }

body.dark-mode #inputHeight {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

    body.dark-mode #inputHeight input {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
        /*box-shadow: 0px 0px 0px 0px;*/
    }

body.dark-mode #checkIcon {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

body.dark-mode #colorFormButton {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

body.dark-mode #FormFont {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

body.dark-mode #boxShadow {
    transition: background-color 0.3s, color 0.3s;
    background-color: var(--color-fondo) !important;
    color: var(--color-texto) !important;
    /*box-shadow: 0px 0px 0px 0px;*/
}

body.dark-mode .form-item-list {
    border-color: rgba(83, 83, 83, 0.3) !important;
}

body.dark-mode .form-error:not(.form-control) {
    border-left: 10px solid #E03838 !important;
    border-color: #E03838 !important;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23e03838" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
}

body.dark-mode .placeholder-dash-box svg path {
    transition: fill 0.3s;
    fill: var(--color-fondo);
}

/*Scroll*/
/* Estilos para WebKit (Chrome, Safari, Edge y Opera) */
body.dark-mode::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de desplazamiento vertical */
    height: 8px; /* Altura de la barra de desplazamiento horizontal */
}

body.dark-mode::-webkit-scrollbar-track {
    background: var(--color-principal); /* Color de fondo de la pista */
}

body.dark-mode::-webkit-scrollbar-thumb {
    background-color: #888; /* Color de la barra de desplazamiento */
    border-radius: 10px; /* Redondeo de las esquinas */
    border: 2px solid var(--color-principal); /* Espacio alrededor de la barra de desplazamiento */
}

    body.dark-mode::-webkit-scrollbar-thumb:hover {
        background-color: #f4f4f4; /* Color de la barra de desplazamiento al pasar el ratón */
    }

/* Estilos para Firefox */
body.dark-mode {
    scrollbar-width: thin; /* Ancho de la barra de desplazamiento */
    scrollbar-color: #888 var(--color-principal); /* Color de la barra de desplazamiento y de la pista */
}

    /* Aplicando los estilos de barra de desplazamiento a elementos específicos */
    body.dark-mode .scroll-custom {
        overflow: auto;
        scrollbar-width: thin;
        scrollbar-color: #888 var(--color-principal);
    }

        /* Aplicar los mismos estilos para WebKit en los contenedores específicos */
        body.dark-mode .scroll-custom::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        body.dark-mode .scroll-custom::-webkit-scrollbar-track {
            background: #f4f4f4;
        }

        body.dark-mode .scroll-custom::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 10px;
            border: 2px solid var(--color-fondo);
        }

            body.dark-mode .scroll-custom::-webkit-scrollbar-thumb:hover {
                background-color: #555;
            }

    body.dark-mode .choices__inner {
        border-radius: 10px;
        border: 1px solid var(--color-fondo);
    }

    body.dark-mode .promo-section {
        border-radius: 10px;
        border: 1px solid var(--color-fondo);
    }

    body.dark-mode .custom-tabs {
        border-color: #535353 !important;
    }

        body.dark-mode .custom-tabs .nav-link:hover {
            color: var(--color-texto) !important;
            background-color: #f8f9fa1e !important;
        }

    body.dark-mode .nav-tabs .dropdown-menu {
        transition: background-color 0.3s, color 0.3s;
        background-color: var(--color-principal) !important;
        color: var(--color-texto) !important;
    }

    body.dark-mode .dropdown-item:hover {
        color: var(--color-texto) !important;
        background-color: var(--color-fondo);
    }

    body.dark-mode .bg-gray {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
        background-color: var(--color-principal) !important;
        border: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode .dt-input {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
        background-color: var(--color-principal) !important;
        border: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode .form-control {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
        background-color: var(--color-principal) !important;
        border: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

    body.dark-mode .form-select {
        transition: background-color 0.3s, color 0.3s;
        color: var(--color-texto) !important;
        background-color: var(--color-principal) !important;
        border: 1px solid rgba(83, 83, 83, 0.3) !important;
    }

/*
    .form-control:focus,
    .form-select:focus {
        background: var(--color-texto) !important;
    }*/

.form-error {
    background: none no-repeat scroll 0 0 #FFF2F2;
    border-color: #E03838 !important;
    border-left: 10px solid #E03838 !important;
}


.form-select.form-error {
    padding: 5px;
    padding-left: 8px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23e03838" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none; /* Modern browsers */
}

button {
    outline: none !important; /* Elimina el borde azul */
    box-shadow: none !important; /* También elimina el efecto de sombra en algunos navegadores */
}

.error {
    color: red;
}

.valid {
    color: green;
}

table.table tbody tr td {
    border: 0 !important
}

table.table > thead > tr > th, table.table > thead > tr > td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}


table.table > tbody > tr > th, table.table > tbody > tr > td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}


.table a {
    background: none !important;
}

.tbl-head-1 {
    padding-left: 0 !important;
    border-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.tbl-head-2 {
    padding-left: 0 !important;
    border-bottom: 1px solid rgba(174, 174, 174, 0.3) !important;
}

a.action {
    margin-right: 10px;
}

    a.action .tr-icon:hover {
        color: gray !important;
    }


    a.action .tr-icon {
        color: gray !important;
    }

table tbody tr td div.col {
    display: flex;
    /*justify-content: right;*/
    height: 28px;
}

    table tbody tr td div.col a.action:last-child {
        margin: 0;
    }

/*asñd.asdas000*/
a.action,
span.action {
    padding: 5px;
    padding-top: 5px;
    border-radius: 5px;
    margin-right: 5px;
    padding-top: 3px;
}

    span.action .tr-icon {
        color: gray !important;
    }

table tbody tr td div.col {
    display: flex;
    /*justify-content: right;*/
    height: 28px;
}

    table tbody tr td div.col a.action:last-child {
        margin: 0;
    }


.user-image-container {
    min-width: 45px;
    min-height: 45px;
    max-width: 45px;
    max-height: 45px;
    overflow: hidden;
    border-radius: 50%;
}

.user-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 45px;
}