:root {
    --font-family: lato;
    --main: #ebeef4;
    --main-rgb: 235, 238, 244;
    --back-main: #f6f7fa;
    --back-color: #a8b6d1;
    --back-color-rgb: 168, 182, 209;
    --back-color-2: #f1f1f1;
    --table-header-color: #c9d2e3;
    --table-header-color-rgb: 201, 210, 227;
    --back-color-secondary: #aed15c;
    --back-color-secondary-rgb: 174, 209, 92;
    --disabled-color: #dae0ec;
    --border-color: #d8d8d8;
    --border-color-rgb: 216, 216, 216;
    --filter-backdrop: 6px;
    --overlay-opacity: 0.8;
    --overlay-backdrop: 6px;
    --back-color-save: #028824;
    --border-color-2: #ccc;
    --back-color-card-header: #f2f2f2;
    --hover: #ddd;
    --gray: #808080;
    --white: #ffffff;
    --error: #ff4500;
    --bg-error: #bc4143;
    --dark: #212837;
    --success: #028824;
    --back-color-disabled: #dae0ec;
}

* {
    box-sizing: border-box;
}


@font-face {
    font-family: lato;
    src: url(/webfonts/Lato/Lato-Regular.ttf) format('truetype');
    font-display: swap;
}

*, html, body {
    font-family: var(--font-family);
}

html, body,
.app-content {   
    height: 100vh !important;
    overflow: hidden;
}

.app-content {
    overflow-y: auto;
    padding-bottom: 7rem;
}

.help-block {
    font-size: 0.8rem;
    font-weight: 900;
    color: orangered;
    font-style: italic; 
}

* {
    pointer-events: all;
    cursor: default;
    color: black;
    font-size: 0.95rem;
}

input, textarea, select {
    color: black !important;
}

    *::placeholder {
        color: gray !important;
        padding: 0.2rem 0 0 0.5rem;
    }

.toast-error > .toast-message {
    color: white !important;
    font-weight: 600;
}

a, a * {
    cursor: pointer;
}

embed img {
   display: flex;
   place-content: center;
   place-items: center;
}

.readonly
*:read-only {
    background-color: white !important;
    color: black !important;
    pointer-events: none;
    cursor: default;
}

*:disabled,
*:disabled > *,
.disabled,
.disabled > * {
    background-color: var(--disabled-color) !important;
    cursor: default !important;
    color: black !important;
}

input[type="checkbox"]:hover {
    cursor: pointer !important;
}

button, button > * {
    cursor: pointer;
}

    button:hover {
       opacity: 0.7;
    }

.card-header {
    font-size: 1.2rem;
    font-weight: 900 !important;
    padding: 0.7rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

    .card-header.subtitle {
        border: 2px solid var(--border-color);
        text-align: left;
        font-size: 1rem;
        padding: 0.5rem;
    }

.menu-header {
    font-size: 1.2rem !important;
    font-weight: 900 !important;
    color: black !important;
}

.dropdown-menu {
    border: 1px solid black;
    box-shadow: 3px 3px 3px 3px rgba(0,0,0, 0.3);
}

.list-item-title {
    font-size: 1.2rem;
    font-weight: 900;
    padding: 0.5rem 1rem 0.5rem 1rem;
    text-shadow: 0.5px 0.5px 1px black;
}
/*==================================================================================*/
/* SCROLLBARS */
.slimScrollDiv {
    display: block;
    border: 0 none !important;
    background: none !important;
}

.slimScrollBar {
    display: block !important;
    position: absolute !important;
    opacity: 1 !important;
}

.slimScrollBar::after,
.slimScrollBar::before {
    cursor: pointer;
}

/* Custom Fonts
-------------------------------------------------- */

@font-face {
    font-family: logoFont;
    src: url('/webfonts/Uni Sans Bold Italic.ttf');
    font-display: swap;
}

.logo-font {
    font-family: logoFont;
}

/* Genesys code
-------------------------------------------------- */

.genesys-code {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #ffffff;
}

/* Bootstrap table: active highlight
-------------------------------------------------- */

.table-active {
    --bs-table-accent-bg: #98c3ff;
}

/* Header
-------------------------------------------------- */

.brand-logo {
    height: auto !important;
}

/* Page Header
-------------------------------------------------- */

.page-header {
    font-family: logoFont;
    font-size: 40px;
    font-weight: 300;
}


/*****************************************************************/
/* LOGIN */

.login-content {
    padding: 7rem 1rem 6rem 1rem;
}

/*****************************************************************/
/* MENUS */

.menu-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    border: 1px solid rgba(101,126,174,.25);
    border-radius: 6px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    font-size: 28px;
    font-family: logoFont;
    transition: 0.3s;
}

    .menu-btn:hover {
        background-color: #ffd633;
        color: #000;
    }

/*****************************************************************/
/* VERSION */

.bar-bottom-fixed {
    width: 100%;
    height: 30px;
    position: fixed;
    padding: 0px;
    margin: 0px;
    padding-right: 15px;
    background-color: transparent;
    z-index: 10000000;
    bottom: 0px;
}

.version {
    font-size: 1rem;
    font-weight: bold;
    text-shadow: 0.5px 0.5px 1px black;
    color: gray;
}

/*****************************************************************/
/* BOTONES */

.btn-modal {
    width: 15rem !important;
    min-width: 15rem !important;
    margin-left: 1rem;
}

.btn-medium {
    width: 15rem !important;
    min-width: 15rem !important;
    margin: 0.5rem;
}

.btn-small {
    width: auto !important;
    min-width: 10rem !important;
    margin: 0.5rem;
}

.btn-medium {
    width: 15rem !important;
    min-width: 15rem !important;
    margin: 0.5rem;
}

/*****************************************************************/
/* GENERAL */

.highlight-min {
    font-weight: 900;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.highlight {
    font-weight: 900;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.w-100 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
}

.ml {
    margin-left: 1rem !important;
}

.mr {
    margin-right: 1rem !important;
}

.mt {
    margin-top: 1rem !important;
}

.mb {
    margin-bottom: 1rem !important;
}

.hide {
    display: none !important;
}

.app-content {
    overflow-x: hidden !important;
}

.text-left {
    text-align: left !important;
}

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

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

.strong {
    font-weight: 900;
}

.upper {
    text-transform: uppercase;
}

.all-borders-black {
    border-bottom: 3px solid black !important;
}

.link,
.link > * {
    cursor: pointer !important;
}

.file {
    font-size: 20px !important;
}

    .file:hover {
        opacity: 0.6;
    }

.file-show,
.file-upload {
    color: black;
}

.file-remove {
    color: red;
}

.viewer-pdf {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.block-error {
    color: var(--error);
    font-weight: 900;
    font-style: italic;
    font-size: 0.8rem;
    padding: 0.5rem;
}

.cut-text-400 {
    max-width: 600px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

textarea {
    resize: none;
}

.btn-rounded {
    display: flex;
    place-items: center;
    place-content: center;
    border-radius: 50% !important;
    width: 30px;
    height: 30px;
    margin: 0.3rem;
    padding: 0.1rem;
}

    .btn-rounded:hover {
        filter: opacity(0.8);
    }

    .btn-rounded.small {
        height: 20px;
        width: 20px;
        border: 1px solid black;
        font-weight: 300;
        padding: 0 0.2rem 0.1rem 0.2rem;
    }


/*==================================================================================*/
/* ESTILOS PARA CONTROL DATEPIKER, TIMEPICKER, DATETIMEPICKER */

.datepickers-container {
    z-index: 1000000000 !important;
}

.datepicker--content,
.datepicker--months datepicker--body active,
.datepicker--cell datepicker--cell-month,
.datepicker--day-name {
    color: black !important;
    font-size: 1.1em !important;
    font-weight: 900 !important;
}

.datepicker--cell.-current- {
    background-color: var(--back-color-disabled) !important;
    color: black !important;
    font-weight: 900 !important;
    font-size: 1.3rem !important;
}

.datepicker--cell.-disabled- {
    cursor: default;
    color: #aeaeae;
    background-color: var(--back-color-disabled) !important;
    border-radius: 0px !important;
}

.datepicker--cell.-selected-, .datepicker--cell.-selected-.-current- {
    background-color: var(--back-color) !important;
    color: black !important;
    font-size: 1.3rem !important;
}

.datepicker--nav-title i {
    font-size: 1.1em !important;
    font-weight: 900 !important;
}

.datepicker--nav-title:hover,
.datepicker--nav-action:hover {
    color: black !important;
    background-color: var(--back-color-disabled) !important;
}

.datepicker--button {
    background-color: var(--table-header-color) !important;
    color: white !important;
    border: 1px solid black !important;
    color: black !important;
    font-weight: 900 !important;
}

    .datepicker--button:hover {
        background-color: rgba(62, 62, 62, 0.6) !important;
    }

div.datepicker table {
    height: auto !important;
    border: 1px solid var(--border-color);
    color: black;
    overflow-y: hidden;
}

    div.datepicker table th {
        background: var(--back-color);
        color: white !important;
        font-size: 1em;
        font-weight: 600;
        text-transform: capitalize;
        border: 1px solid var(--border-color);
        padding: 5px;
    }

        div.datepicker table th span {
            color: white;
            font-weight: 600;
        }

    div.datepicker table tr td {
        border: 1px solid var(--border-color);
        color: black;
    }

div.datepicker--time-sliders > div.datepicker--time-row > input {
    background-color: white !important;
    height: auto !important;
}

.datepicker--time-current-hours,
.datepicker--time-current-minutes {
    font-weight: 900;
    font-size: 24px;
    color: black;
}

.datepicker--cell.datepicker--cell-day.-in-range- {
    background-color: var(--back-color-disabled) !important;
}


/*****************************************************************/
/* MODALES */

.modal-dialog {
    overflow: hidden;
}

.modal-content {
    margin-bottom: 5rem;
}

.modal-title {
    font-weight: 900 !important;
    text-transform: uppercase;
    color: black !important;
    text-shadow: 2px 2px 2px white;
}

.modal-close {
    position: absolute;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    right: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0 1rem 0 0;
    font-weight: 600 !important;
}

    .modal-close::after {
        content: 'X';
    }

    .modal-close:hover {
        filter: opacity(80%);
        font-weight: 900 !important;
    }

p.modal-message {
    word-wrap: break-word;
}

div.modal {
    background-color: rgba(var(--border-color-rgb), 0.3);
    -webkit-backdrop-filter: blur(var(--overlay-backdrop)) !important;
    backdrop-filter: blur(var(--overlay-backdrop)) !important;   
}

/*==================================================================================*/
/* SELECT-2 LISTAS DESPLEGABLES  (SELECT-2) */

select {
    height: 35px;
    overflow: hidden;
}

.select2, li.select2-results__option {
    background-color: white;
    color: black;
}

.select2-selection__choice__display {
    padding: 0.5rem !important;
    border: 1px solid var(--border-color);
}

li.select2-results__option:hover,
li.select2-results__option[aria-selected="true"] {
    background-color: var(--main) !important;
    color: black !important;
    font-weight: 600;
}

.form-group > .select2-container--bootstrap,
.form-group > .select2-container {
    width: 100% !important;
    flex: 1 1 auto !important;
    overflow: hidden;
}

    .form-group > .select2-container--bootstrap .select2-selection--single {
        display: flex;
        background-color: white;
        border: 1px solid var(--border-color) !important;
        border-radius: 8px !important;
        min-height: 35px !important;
        align-items: center;
        align-content: center;
        color: black;
        z-index: 100;
        cursor: pointer;
    }

    .form-group > .select2-container .select2-selection--multiple {
        background-color: white;
        border: 1px solid var(--border-color) !important;
        border-radius: 8px !important;
        height: auto !important;
        min-height: 35px !important;
        max-height: 400px !important;
        overflow: hidden !important;
        color: black;
        z-index: 100;
    }

.form-group.max-height > .select2-container .select2-selection--multiple {
    max-height: 100% !important;
}

    .select2-selection__clear span {
        position: absolute !important;
        font-size: 1.8rem !important;
        cursor: pointer !important;
        top: -8px;
        right: -8px;
    }

.form-group > .select2-container .select2-selection--multiple .select2-search--inline {
    display: flex;
    margin: 0;
    padding: 0;
    place-content: center;
    place-items: center;
}

span.select2-selection__arrow {
    display: inline-flex !important;
    color: black;
}

.select2-selection__choice__remove {
    display: inline-flex !important;
    width: 25px;
    min-width: 25px;
    background-color: var(--table-header-color) !important;
    place-content: center !important;
    place-items: center !important;
    border-radius: 0;
    cursor: pointer;
}

    .select2-selection__choice__remove span {
        margin: 0 0 0.5rem 0;
        padding: 0;
        color: black !important;
        cursor: pointer;
        font-weight: 900 !important;
        font-size: 1rem !important;
        border-radius: 0;
    }

span.select2-selection__arrow:before {
    position: absolute;
    content: "⏷";
    margin: auto;
    left: calc(100% - 22px);
    top: 2px !important;
    cursor: pointer;
    font-size: 1.3rem;
}

span.select2-container--disabled,
span.select2-container--disabled .select2-selection--clearable,
span.select2-container--disabled .select2-selection--multiple,
span.select2-container--disabled .select2-selection__choice__display,
span.select2-selection.select2-selection--single[aria-disabled="true"],
span.select2-selection.select2-selection--single[aria-disabled="true"] span.select2-selection__rendered[aria-readonly="true"]
span.select2-selection.select2-selection--multiple[aria-disabled="true"],
span.select2-selection .select2-selection--multiple[aria-disabled="true"] span.select2-selection__rendered[aria-readonly="true"]{
    border-radius: 8px;
    background-color: var(--disabled-color) !important;
    color: black;
    cursor: not-allowed !important;
    pointer-events: none;
}

span.select2-selection__rendered {
    display: block !important;
    padding-left: 8px !important;
    margin: auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    word-break: break-word !important;
    width: auto !important;
    flex: 1 1 auto !important;
    color: black;
}

ul.select2-selection__rendered li.select2-selection__choice {
    background-color: white !important;
    border: 0 none !important;
    border-right: 1px solid gray !important;
    border-radius: 0 !important;
    text-transform: capitalize;
}

.select2-results__options {
    max-height: 300px !important;
    height: auto !important;
    overflow-y: auto;
    color: black;
}

.select2-dropdown--below,
.select2-dropdown--above {
    z-index: 10000000;
    background-color: white;
    border-radius: 6px !important;
    border: 1px solid var( --border-color) !important;
    overflow-y: auto;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2);
}

.form-group > .low ~ .select2-container--bootstrap .select2-selection--single {
    background-color: green !important;
    color: white !important;
    font-weight: 900;
}

    .form-group > .low ~ .select2-container--bootstrap .select2-selection--single > * {
        color: white !important;
    }

    .form-group > .medium ~ .select2-container--bootstrap .select2-selection--single {
        background-color: yellow !important;
        font-weight: 900;
    }

    .form-group > .high ~ .select2-container--bootstrap .select2-selection--single {
        background-color: orange !important;
        font-weight: 900;
    }

    .form-group > .significant ~ .select2-container--bootstrap .select2-selection--single {
        background-color: red !important;   
        font-weight: 900;
    }

    .form-group > .significant ~ .select2-container--bootstrap .select2-selection--single > * {
        color: white !important;
    }

/*==================================================================================*/
/* SELECTOR DE ARCHIVOS */
.display-1-modal, .display-1-form {
    padding: 0 !important;
    margin: 1rem 0 0 0 !important;
    border: 0 none;
    overflow: hidden;
}

    .display-1-modal .image,
    .display-1-form .image {
        width: auto;
        height: auto;
        max-width: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% 100%;
        border: 2px solid black;
    }

    .display-1-modal .image {
        border: 2px solid var(--border-color);
    }

.btn-controles {
    display: inline-flex !important;
}
/*==================================================================================*/
/* TABLES (TABLAS) */

table > thead > tr > th,
table > tfoot > tr > th {
    background-color: var(--table-header-color) !important;
    color: black;
    vertical-align: middle;
    align-items: center;
    border: 0 none;
    border-bottom: 1px solid black;
    border-right: 1px solid slategray;
}

    table > thead > tr > th.sorting {
        cursor: pointer;
    }


table > tbody > tr > td {
    background-color: white;
    color: black;
    border-bottom: 1px solid var(--border-color);
    vertical-align: middle;
    align-items: center;
    margin: 0 !important;
    padding: 0.3rem !important;
}

    table > tbody > tr > td div.control-tabla {
        display: flex;
        margin: 0 !important;
        padding: 0 !important;
        place-content: center;
        place-items: center;
    }

        table > tbody > tr.selected,
        table > tbody > tr.selected > th {
            background-color: var(--disabled-color) !important;
        }


table.table-biglist > tbody > tr:hover,
table.table-biglist > tbody > tr:hover td {
    cursor: pointer;
    border-bottom: 2px dashed black !important;
    background-color: rgba(var(--table-header-color-rgb), 0.5);
}

    table.table-biglist > tbody > tr:hover td:first-child:before {
        content: '🞇 ';
    }

.dataTables_filter,
.dataTables_length {
    margin: 0 0 0.5rem 0 !important;
}

.dataTables_info,
.dataTables_length {
    color: black !important;
}

input.input-search {
    height: 38px;
    width: 35rem !important;
    padding: 0 0 0 2.5rem !important;
    border: 2px solid var(--border-color) !important;
    border-radius: 28px !important;
    font-size: 1.2rem;
    margin-top: 0.5rem;
}

.dataTables_filter .input-group img.search-icon {
    position: absolute;
    top: 0.3rem;
    left: 0.5rem;
    z-index: 1000;
    width: 28px;
    height: 28px;
    margin-top: 0.5rem;
}

.dataTables_filter label.input-group {
    display: flex;
    place-content: end;
    place-items: center;
}

.dataTables_info {
    display: inline-block;
}

.dataTables_wrapper .dataTables_processing {
    display: none;
    background: none transparent !important;
    font-weight: 900;
    font-size: 2rem !important;
}

table.dataTable tbody th,
table.dataTable tbody td,
table.dataTable tfoot th {
    white-space: nowrap !important;
}

.dataTables_wrapper {
    overflow: hidden !important;
}

.dataTable_bodyScroller {
    overflow: auto;
    width: 100%;
}

/*****************************************************************/
/* PAGINACION DE TABLAS */

.dataTables_wrapper .dataTables_paginate {
    display: inline-block;
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
}

.dataTables_paginate {
    font-size: 1rem;
    color: black !important;
    border: 0 none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    font-weight: 900;
    border-radius: 50% !important;
    background: none var(--table-header-color) !important;
    border: 0 none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    outline: none;
    text-decoration: none !important;
    cursor: pointer;
    font-size: 1.4rem;
    background: none transparent !important;
    color: black !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button:active,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: none rgba(var(--table-header-color-rgb), 0.4) !important;
        color: black !important;
        border: 0 none !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        font-size: 1.2rem;
        background: none transparent !important;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
        .dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
            background: none rgba(var(--table-header-color-rgb), 0.4) !important;
            color: black !important;
            border: 0 none !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled {
            display: none;
            color: black !important;
        }

button.buttons-html5,
button.buttons-print {
    font-weight: 700;
   /* background-color: #212837;
    color: white;*/
}

.dataTables_wrapper .dt-buttons {
    margin-bottom: 1rem;
}

table > tbody > tr > td {
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}

    table > tbody > tr > td.nocut {
        max-width: auto !important;
        overflow: unset !important;
        text-overflow: unset !important;
    }

/*****************************************************************/
/* COLOR PRINCIPAL DE FONDO/LETRA */
.bg-main {
    background-color: var(--back-color);
}

    .bg-main.hover:hover {
        background-color: rgba(var(--back-color-rgb), 0.7);
    }

.color-main {
    color: var(--back-color);
}

    .color-main.hover:hover {
        color: rgba(var(--back-color-rgb), 0.7);
    }


/*==================================================================================*/
/* SWITCHES */

[type="checkbox"] {
    position: absolute;
    visibility: hidden;
}

.switches {
    width: auto;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    background: transparent;
}

    .switches li {
        position: relative;
        counter-increment: switchCounter;
    }

        .switches li:not(:last-child) {
            border-bottom: 1px solid var(--back-color);
        }

        .switches li::before {
            content: counter(switchCounter);
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 2rem;
            font-weight: 900;
            color: var(--white);
        }

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

    .switches span:last-child {
        position: relative;
        width: 60px;
        height: 32px;
        border-radius: 15px;
        border: 1px solid darkgray;
        box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.4);
        background: var(--white);
        transition: all 0.3s;
        cursor: pointer !important;
    }

    .switches.small span:last-child {     
        width: 35px;
        height: 16px;    
    }

        .switches span:last-child:disabled {
            cursor: default !important;
        }

        .switches span:last-child::before,
        .switches span:last-child::after {
            content: "";
            position: absolute;
        }

        .switches span:last-child::before {
            left: 0px;
            top: 1px;
            width: 28px;
            height: 28px;
            background: var(--white);
            border: 2px solid var(--border-color);
            border-radius: 50%;
            z-index: 1;
            transition: transform 0.3s;
        }

    .switches.small span:last-child::before {
        left: 0px;
        top: 0px;
        width: 14px;
        height: 14px;
    }

        .switches span:last-child::after {
            top: 50%;
            right: 8px;
            width: 12px;
            height: 12px;
            transform: translateY(-50%);
            background: url(../../img/uncheck-switcher.svg);
            background-size: 12px 12px;
        }

    .switches.small span:last-child::after {
        background: none;
    }

            .switches [type="checkbox"]:checked + label span:last-child {
                background: var(--back-color-save);
                cursor: pointer !important;
            }

            .switches [type="checkbox"]:disabled + label span:last-child {
                background: var(--disabled-color);
                cursor: default !important;
            }

        .switches [type="checkbox"]:checked + label span:last-child::before {
            transform: translateX(28px);
        }

        .switches.small [type="checkbox"]:checked + label span:last-child::before {
            transform: translateX(18px);
        }

        .switches [type="checkbox"]:checked + label span:last-child::after {
            width: 14px;
            height: 14px;
            left: 6px;
            background-image: url(../../img/checkmark-switcher.svg);
            background-size: 14px 14px;
            cursor: pointer !important;
        }

    .switches.small [type="checkbox"]:checked + label span:last-child::after {
        background: none;
    }

    .switches [type="checkbox"]:disabled + label span:last-child::after {
        cursor: default !important;
    }


.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer !important;
}

    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/*****************************************************************/
/* PANTALLA DE CARGA CON LOGO (LOADER) */

.modal_loader {
    display: flex;
    place-items: center;
    place-content: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(var(--border-color-rgb), 0.3);
    -webkit-backdrop-filter: blur(var(--overlay-backdrop)) !important;
    backdrop-filter: blur(var(--overlay-backdrop)) !important;
    z-index: 10000000000;
    border: 3px solid var(--border-color);
}

    .modal_loader .middle > img {
        background-position: center center;
    }

.loader-bar {
    display: table-cell;
    background: var(--back-color) !important;
    animation: loader 0.8s both infinite;
    color: white;
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    place-content: center;
    place-items: center;
    border: 0 none;
    padding: 0;
    margin: 0;
    height: 80px;
}

.loader-image {
    margin-left: 1rem;
}

.line1 {
    animation-delay: 0.1s;
}

.line2 {
    animation-delay: 0.2s;
}

.line3 {
    animation-delay: 0.3s;
}

.line4 {
    animation-delay: 0.4s;
}

.line5 {
    animation-delay: 0.5s;
}

.line6 {
    animation-delay: 0.6s;
}

.line7 {
    animation-delay: 0.7s;
}

.line8 {
    animation-delay: 0.8s;
}

.line9 {
    animation-delay: 0.9s;
}

.line10 {
    animation-delay: 1s;
}

.line11 {
    animation-delay: 1.1s;
}

.line12 {
    animation-delay: 1.2s;
}

.line13 {
    animation-delay: 1.3s;
}

.line14 {
    animation-delay: 1.4s;
}

.line15 {
    animation-delay: 1.5s;
}


@keyframes loader {
    0% {
        transform: scaleY(0.1);
        filter: opacity(0.1);
    }

    25% {
        transform: scaleY(0.5);
        filter: opacity(0.3);
    }

    50% {
        transform: scaleY(1);
        filter: opacity(0.5);
    }

    75% {
        transform: scaleY(0.5);
        filter: opacity(0.7);
    }

    100% {
        transform: scaleY(0.1);
        filter: opacity(1);
    }
}

/*==================================================================================*/
/* DROPZONE (CARGA DE ARCHIVOS) */
.dz-progress {
    display: none;
}

.dz-message {
    color: black !important;
}

.dropzone-file {
    border: 4px var(--border-color) !important;
    border-style: dashed solid !important;
}

    .dropzone-file label {
        color: var(--border-color) !important;
        font-weight: 900;
    }

a.dz-remove {
    color: blue !important;
    font-weight: 900;
    font-size: 1.2rem;
}

.dropzone-file .dz-preview.dz-file-preview .dz-image.pdf {
    background-color: transparent;
    background-image: url(../../img/pdf.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

.dropzone-file .dz-preview.dz-file-preview .dz-image.excel {
    background-color: transparent;
    background-image: url(../../img/excel.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
}

    .dz-details,
    .dz-details *,
    .dz-progress,
    .dz-progress *,
    .dz-message,
    .dropzone-file,
    .dropzone-file *,
    .dropzone-file label,
    .dropzone-file .dz-preview.dz-file-preview.dz-success,
    .dropzone-file .dz-preview.dz-file-preview.dz-success *,
    .dropzone-file .dz-preview.dz-file-preview .dz-image,
    .dropzone-file .dz-preview.dz-file-preview .dz-image *,
    .dropzone-file .dz-preview.dz-file-preview *,
    .dropzone-file .dz-preview.dz-file-preview .dz-error-mark *,
    .dropzone-file svg,
    .dropzone-file svg *,
    .dropzone-file svg g {
        cursor: pointer !important;
    }


    .dropzone-file span {
        background-color: white !important;
        color: black !important;
    }

.dropzone-file.disabled .dz-message,
.dropzone-file.disabled label {
    color: var(--border-color) !important;
}

        .dropzone-file.disabled span,
        .dropzone-file.disabled {
            border: 4px var(--border-color) !important;
            border-style: dashed solid !important;
            pointer-events: none !important;
        }

        .dropzone-file.disabled .dz-remove {
              display: none;
        }

        .label-upload {
            font-size: 1.4rem;
            font-weight: 900;
        }

[data-dz-thumbnail] {
    width: 120px !important;
    height: 120px !important;
    object-fit: cover;
}

.dz-max-files-reached {
    pointer-events: none;
    cursor: default;
}

.dz-size {
    display: none;
}

/*==================================================================================*/
/* SECCIONES ACORDEON */
.accordion-header {
    background-color: var(--back-main) !important;
    height: auto;
    border: 1px solid var(--border-color);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;   
}

    .accordion-header > * {
        background-color: var(--back-main) !important;
        font-size: 1.2rem;
        font-weight: 900;
        text-decoration: none !important;
    }

.accordion-button::after {
    background-image: url(../../img/arrow.png) !important;
}

.x-header {
    background-color: var(--back-main) !important;
    color: black !important;
    font-size: 1.2rem;
    font-weight: 900;
    padding: 0.6rem;       
}
    .x-header.subtitle {
        color: black !important;
        font-size: 1rem;
    }

.fa-dot-circle {
    padding: 0.5rem;
}

.accordion-body {
    background-color: white;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.accordion {
    margin: 0;
    padding: 0;
}

.accordion-footer > * {
    display: flex;
    place-content: end;
    place-items: center;
    padding-right: 0.5rem;
}

/*****************************************************************/
/* MAPAS DEL CUERPO */
map > area {
    cursor: pointer !important;
}

div.body-parts {
    overflow-y: hidden;
    overflow-x: auto;
    width: 100%;
    height: auto;
}

    div.body-parts > img {
        display: block !important;
        border: 0 none;
        width: 950px;
        height: 589px;
        margin: auto !important;
    }

div.extra-body-parts {
    font-size: 12px;
    top: 500px;
    left: 200px;
}

.body-parts-modal {
    pointer-events: none;
    cursor: default;
    filter: grayscale(1) !important;
}


img {
    filter: unset !important;
}

    img.grayscale {
        filter: grayscale(1) !important;
    }



/*****************************************************************/
/* GRID O TABLA DE CAUSAS RAICES */

table.grid-table {
    display: table;
    border-collapse: separate;
    border-spacing: 0.3rem;
    border: 2px solid var(--border-color-2);
    width: 100%;
}

    table.grid-table > thead > tr > th {
        text-align: center;
        border-bottom: 3px solid black;
        padding: 0.5rem;
        width: 20%;
    }

    table.grid-table td {
        border: 2px solid var(--border-color);
    }

    table.grid-table > .tbody {
        max-height: 400px !important;
        overflow: auto;
    }

    .grid-table-button {
        margin-top: 0.5rem;
    }

.grid-table-buttons {
    display: flex;
    place-items: center;
    place-content: center;
}

.grid-col {
    background-color: var(--back-main);
}

.grid-col-item > .actions {
    position: relative;
    display: flex;
    place-items: end;
    place-content: end;
    height: 100%;
    width: 100%;
}

    .grid-col-item > .actions > a {
        padding: 0.2rem;
        z-index: 10000;
    }

.grid-col-item > textarea {
    resize: none;   
    width: 100%;
    height: 100%;
    min-height: 100%;  
}

    .grid-col-item > .actions > div.switches {
        position: absolute;
        top: 5px;
        left: 0;
    }

    .item-level {
        position: absolute;
        left: 42%;
        padding: 0.3rem;
        font-weight: 900;
    }

.has-error .item-level,
.has-error i {
    color: white !important;
}

table.grid-table.disabled,
table.grid-table:disabled,
table.grid-table.disabled > thead > tr > th,
table.grid-table:disabled > thead > tr > th,
table.grid-table *:disabled,
table.grid-table *:disabled > *,
table.grid-table *.disabled,
table.grid-table *.disabled > * {
    background-color: var(--back-main) !important;
    pointer-events: none !important;
    cursor: default !important;
    color: var(--border-color) !important;
    border-color: var(--border-color);
}

    table.grid-table.disabled,
    table.grid-table:disabled,
    table.grid-table.disabled > thead > tr > th,
    table.grid-table:disabled > thead > tr > th {
        background-color: var(--disabled-color) !important;
        color: gray !important;
    }

        table.grid-table.disabled .item-level,
        table.grid-table:disabled .item-level {
            color: lightgray !important;
        }


/*****************************************************************/
/* INVESTIGACION INCIDENTES MEDIDAS DE CONTROL - CAUSAS RAICES */

.tabs-container {
    border: 2px solid var(--border-color-2);
    height: 100%;
    max-height: 700px;
    overflow: hidden;
}

.tabs {
    float: left;
    background-color: var(--main);  
    border: 0 none;
    width: 30%;
    max-width: 30%;
    height: 100%;
    overflow: hidden;
}

.tabs-horizontal .tab-links {
    min-height: 40px;
    background-color: var(--dark);
    color: white;
    font-size: 1rem;
    font-weight: 900;
    border-radius: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 3px solid black;
    border-right: 3px solid black;
    border-left: 3px solid black;
}

.tabs-horizontal .tab-links.active {
    background-color: var(--success);
}

.tabs-contents {
    float: right;
    background-color: white;
    border: 0 none;
    width: 70%;
    max-width: 70%;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

.tabs-contents-horizontal {
    background-color: transparent;
    border: 0 none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.tabs-horizontal > .d-grid {
    margin-top: 0.5rem;
    border-bottom: 3px solid black;
}

.tabs-contents .tab-content {
    background-color: white;
    width: 100%;
    max-width: 100%;
    border: 0 none;
    overflow: hidden;
    padding-left: 2rem;
    display: none;
}

.tabs-contents-horizontal .tab-content {
    background-color: transparent;
    width: 100%;
    max-width: 100%;
    border: 0 none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: none;
}

.cause-title,
.mc-title {
    padding: 1rem;
    border-bottom: 2px solid black;
    font-weight: 900;
    box-shadow: 2px 2px 2px 2px rgba(0,0,0, 0.3);
}

.mc-title {
    padding-left: 2rem;
}

.list-mc,
.list-tabs {
    width: 100%;   
    overflow-y: auto !important;
    margin: 0;
    padding: 0;
    padding-bottom: 5rem;
}

.list-tabs {
    max-height: calc(100% - 65px);
    overflow-x: hidden;
}

.tabs button {
    display: block;
    background-color: transparent;
    color: black;
    padding: 1rem 1rem;
    width: 100%;
    border: none;
    outline: none;
    text-align: left;
    cursor: pointer;
    transition: 0.3s;
    border-bottom: 2px solid var(--border-color-2);
}

    .tabs button:hover {
        background-color: var(--hover);
        box-shadow: 2px 2px 2px 2px rgba(0,0,0, 0.3);
    }

    .tabs button.active {
        background-color: white;
        border-bottom: 2px solid black;
        box-shadow: 2px 2px 2px 2px rgba(0,0,0, 0.3);
    }

    .btn-EoC,
    .btn-AddMC,
    .btn-ClearMC {
        margin: 0.5rem 1rem 0.5rem 0.5rem;
    }

.list-mc {
    max-height: 580px;
    padding: 1rem 3rem 1rem 0.5rem;
    overflow-x: auto;
}

.list-mc ul {
    list-style: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

    .list-mc ul li {
        margin-bottom: 2rem;
    }

.badge {
    display: flex !important;
    border-radius: 25px;
    font-weight: 900;
    padding: 0.3rem;
    font-size: 0.9rem;
}

    .badge.badge-alert {
        background-color: red !important;
        color: white !important;
        float: right;
        margin: 0 0 0.3rem 1.5rem;
    }

    .badge.badge-warning {
        background-color: orange !important;
        color: white !important;
        float: right;
        margin: 0 0 0.3rem 1.5rem;
    }

    .badge.badge-publish {
        background-color: darkblue !important;
        color: white !important;
        float: right;
        margin: 0 0 0.3rem 1.5rem;
    }

    .badge.badge-eraser {
        background-color: yellowgreen !important;
        color: white !important;
        float: right;
        margin: 0 0 0.3rem 1.5rem;
    }

    .badge.badge-status {
        float: right;
        background-color: forestgreen !important;
        color: white !important;
        margin-left: 1.5rem;
    }

.form-title {
    display: flex;
    place-content: center;
    place-items: center;
}

    .form-title .badge-alert-type,
    .form-title .badge-status-investigation {
        background-color: green !important;
        color: white !important;
        margin: 0 0 0.3rem 1.5rem;
    }

.no-apply {
    color: red;
    font-weight: 900;
    font-style: italic;
    text-decoration: underline;
}

.description-cr,
.description-cr > * {
    color: black;
    font-style: italic;
    font-size: 1rem;
}

.mc-error {
    background-color: var(--bg-error) !important;
    color: white !important;
}

table.grid-table td.grid-col.disabled .grid-col-item .item-level,
textarea[name="CausaRaiz"].disabled {
    color: darkslategray !important;
}

table.grid-table td.grid-col .grid-col-item a.action-CR {
    margin-left: 0.4rem;
}

table.grid-table td.grid-col.disabled.active,
table.grid-table td.grid-col.disabled.active .grid-col-item,
table.grid-table td.grid-col.disabled.active .grid-col-item a.action-CR,
table.grid-table td.grid-col.disabled.active .grid-col-item a.action-CR > * {
    background-color: #A9F873 !important;
}

table.follow-up > tbody > tr > td {
    height: auto !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: pre-wrap !important;
}

.aio > * {
    font-size: 1.5rem;
    color: red;
    font-weight: 900;
    font-style: italic;
}

.aio > ol > li {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    color: red;
    font-weight: 600;
    font-style: italic;
}

.accordion.child {
    margin-top: 0.5rem;
}

.th-simple {
    font-size: 1rem;
    color: var(--dark) !important;
    background-color: white !important;
    border: 0 none;
}