:root {
    --pi-primary-color: #1f5f8b;
    /* theme var */
    --kt-primary: #1f5f8b !important;
    --kt-text-primary: #1f5f8b !important;
    --kt-primary-active: #1891ac !important;
    --kt-menu-link-color-hover: #1891ac !important;
    --kt-primary-inverse: var(--pi-first-white-color) !important;
    --kt-input-solid-bg: var(--pi-first-gradient-color) !important;
    /* theme var */
    --pi-esproyecta-main-color: #8ebe21;
    --pi-secondary-color: #1891ac;
    --pi-third-color: #1891ac;
    --pi-fourth-color: #d2ecf9;
    --pi-fifth-color: #d2ecf9;
    --pi-sixth-color: #d2ecf9;
    --pi-first-white-color: #eff2f5;
    --pi-second-white-color: #e4e6ef;
    --pi-third-white-color: #f5f8fa;
    --pi-fourth-white-color: #f8f9fe;
    --pi-first-gray-color: #dfe6f1;
    --pi-second-gray-color: #7e8299;
    --pi-third-gray-color: #ddd;
    --pi-fourth-gray-color: #f6f6f8;
    --pi-fifth-gray-color: #eee;
    --pi-danger-color: #f1416c;
    --pi-warning-color: #ed8448;
    --pi-success-color: #4caf50;
    --pi-first-gradient-color: rgb(229 235 242 / 88%);
    --pi-second-gradient-color: rgb(170 192 208 / 70%);
    --pi-third-gradient-color: rgb(0 0 0 / 18%);
    --pi-third-gradient-color: rgb(0 0 0 / 10%);
    --pi-fifth-gradient-color: rgb(0 0 0 / 6%);
    --pi-sixth-gradient-color: rgb(31 95 139 / 80%);
    --pi-seventh-gradient-color: rgb(54 83 118 / 70%);
    --pi-eighth-gradient-color: rgb(24 145 172 / 85%);
    --pi-primary-dark-color: #5e6278;
    --pi-white-text: #fff;
    --disabled-gray: #b5b5c3;
}

.primary-color-bg {
    background-color: var(--pi-primary-color) !important;
}

.secondary-color-bg {
    background-color: var(--pi-secondary-color) !important;
}

.third-color-bg {
    background-color: var(--pi-third-color) !important;
}

.fourth-color-bg {
    background-color: var(--pi-fourth-color) !important;
}

.fifth-color-bg {
    background-color: var(--pi-fifth-color) !important;
}

.primary-color-text {
    color: var(--pi-primary-color) !important;
}

.secondary-color-text {
    color: var(--pi-secondary-color) !important;
}

.third-color-text {
    color: var(--pi-third-color) !important;
}

.fourth-color-text {
    color: var(--pi-fourth-color) !important;
}

.white-text {
    color: var(--pi-white-text) !important;
}

.primary-white-text {
    color: var(--pi-second-white-color) !important;
}

.first-gray-color-bg {
    background-color: var(--pi-first-gray-color) !important;
}

.second-gray-color-bg {
    background-color: var(--pi-second-gray-color) !important;
}

.danger-color-bg {
    background-color: var(--pi-danger-color) !important;
}

.success-color-bg {
    background-color: var(--pi-success-color) !important;
}

.primary-dark-color-bg {
    background-color: var(--pi-primary-dark-color) !important;
}

.primary-item-color {
    color: var(--pi-second-gray-color) !important;
}

.success-color,
.btn-icon-box i.success-color {
    color: #4caf50 !important;
}

.error-color,
.btn-icon-box i.error-color {
    color: #ff5252 !important;
}

.warning-color {
    color: #ffa500 !important;
}

.border-top {
    border-top: 1px solid var(--pi-fourth-color) !important;
}

.cool-hr {
    margin: 1rem 0 !important;
    color: inherit !important;
    border: 0 !important;
    border-top: 1px solid var(--pi-second-gradient-color) !important;
    opacity: 0.25 !important;
}

.cool-hr-special {
    margin: 5px 40px !important;
    border-top: 2px solid var(--pi-eighth-gradient-color) !important;
    opacity: 0.5 !important;
}

.cool-hr-primary {
    margin: 1rem 0 !important;
    color: inherit !important;
    border: 0 !important;
    opacity: 0.25 !important;
    border-top: 2px solid var(--pi-eighth-gradient-color) !important;
}

.custom-hr {
    color: var(--pi-eighth-gradient-color) !important;
}

body {
    overflow-x: hidden !important;
    /* background:
        linear-gradient(rgba(0, 0, 0, 0.05), rgb(228 230 239 / 80%)),
        url(../img/bg.jpg) no-repeat !important;
    background-attachment: fixed !important;
    background-size: cover !important; */
    background-color: var(--pi-input-bg) !important;
}

/* .btn-with-icon:hover .btn-icon-box {
    background-color: var(--pi-secondary-color) !important;
} */

/* .btn-with-icon:hover .btn-icon-box i {
    color: var(--pi-white-text) !important;
} */

/* animacion de carga */

.btn-icon-box i {
    display: inline-flex !important;
    font-size: 1rem !important;
    padding-right: 0.45rem !important;
    vertical-align: middle !important;
    margin-top: 2px !important;
    color: var(--pi-white-text) !important;
}

.btn-icon.btn-custom:hover {
    background-color: var(--pi-btn-icon-box-bg) !important;
}

a {
    color: var(--pi-secondary-color) !important;
}

thead tr {
    /* background-color: var(--pi-primary-dark-color) !important; */
    background-color: var(--pi-sixth-gradient-color) !important;
}

.page-heading {
    background-color: rgb(24 145 172 / 75%);
    color: var(--pi-fourth-white-color);
    font-weight: 400 !important;
    margin-right: 20px;
    padding: 15px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    font-size: 14px;
    /* width: 20em; */
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px;
}

.page-heading .breadCrumb {
    padding-top: 1px !important;
}

.card-title .card-label {
    color: var(--pi-white-text) !important;
    font-weight: 500 !important;
}

.card-title .card-label i {
    color: var(--pi-white-text);
    margin-right: 2px;
}

/* MODALS */

.modal-header {
    padding-bottom: 15px !important;
    border-bottom: none !important;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
    background-color: var(--pi-eighth-gradient-color);
}

/* .modal label {
    color: var(--pi-primary-color) !important;
    font-weight: 500 !important;
} */

.modal-scrollable-content {
    max-height: 50em;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-scrollable-content-log {
    max-height: 30em;
    overflow-y: auto;
    overflow-x: hidden;
}

.modal-title {
    font-size: 14px !important;
    color: var(--pi-white-text) !important;
    font-weight: 500 !important;
    width: 100% !important;
}

.modal-subtitle {
    display: block !important;
    width: 100% !important;
    font-weight: 500 !important;
    color: var(--pi-fifth-color);
    font-size: 12px !important;
}

.modal-buttons {
    z-index: 10;
}

.generic-text-content {
    text-align: justify;
}

.modal-buttons .btn.menu-link.close-modal-btn {
    padding: 6px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 2px !important;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px !important;
    background-color: var(--pi-primary-color);
}

.modal-buttons .btn.menu-link.save-modal-btn {
    padding: 6px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 2px !important;
    text-align: center;
    margin-right: 10px;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px !important;
    background-color: var(--pi-secondary-color);
}

.close-modal-btn i,
.save-modal-btn i {
    color: var(--pi-first-white-color) !important;
    position: relative;
    top: -1px;
    left: 50%;
    transform: translate(-7px, -1px);
    font-size: 14px !important;
}

.close-modal-link {
    margin: 10px;
    border: none;
    background-color: var(--pi-primary-color);
    border-radius: 2px;
    text-align: center;
    width: 26px;
    height: 26px;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px;
}

.save-modal-link {
    margin: 10px;
    border: none;
    background-color: var(--pi-second-gray-color);
    border-radius: 2px;
    text-align: center;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px;
    font-size: 12px;
    vertical-align: bottom;
    padding: 4px;
    color: var(--pi-fourth-white-color);
    min-width: 6em;
    font-weight: 300;
}

.back-modal-btn {
    margin: 10px;
    border: none;
    background-color: var(--pi-seventh-gradient-color);
    border-radius: 2px;
    text-align: center;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px;
    font-size: 12px;
    vertical-align: bottom;
    padding: 4px;
    color: var(--pi-select-item-bg);
    min-width: 6em;
    font-weight: 200;
}

.close-modal-link:hover,
.save-modal-link:hover,
.back-modal-btn:hover {
    background-color: var(--pi-secondary-color) !important;
}

.close-modal-link i {
    color: var(--pi-fifth-color);
    vertical-align: middle;
    position: absolute;
    transform: translate(-42%, -50%);
}

.img-input-container-modal {
    position: relative;
    width: 70px;
    height: 70px;
    box-shadow:
        rgb(0 0 0 / 40%) 0px 2px 4px,
        rgb(0 0 0 / 30%) 0px 7px 13px -3px,
        rgb(0 0 0 / 20%) 0px -3px 0px inset;
    padding: 5px;
    background-color: #fff;
    border-radius: 2px;
}

.input-remove-img {
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    padding: 1px;
    width: 18px;
    height: 20px;
    background-color: transparent;
}

.input-remove-img i {
    color: var(--pi-danger-color);
}

.input-remove-img:hover i {
    color: var(--pi-secondary-color);
}

.input-form-box {
    /* background-color: var(--pi-fourth-white-color); */
    padding: 25px 0 0;
    border-radius: 2px;
    margin-bottom: 10px;
    /* box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px; */
    position: relative;
}

.modal-label {
    position: absolute;
    top: -4px;
    left: 0;
    display: block !important;
    padding: 5px;
    font-size: 11px;
    font-weight: 600;
    width: 100%;
    background-color: var(--pi-third-white-color);
    color: var(--pi-secondary-color);
    overflow-y: auto;
    height: 29px;
    border-top-left-radius: 2px !important;
    border-top-right-radius: 2px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    /* border-bottom: 1px solid var(--pi-fifth-color); */
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px !important;
}

span.file-input {
    line-height: 20px !important;
}

/* modal audis multiples */
.modal-body .card.resume-percentage-card .ai-card-custom-body {
    max-height: inherit;
    background-color: var(--pi-fifth-gray-color);
    border-radius: 3px;
    margin-top: 5px;
    padding: 20px;
    overflow-y: inherit;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px !important;
}

.static-custom-alert {
    padding: 10px;
    background-color: var(--pi-third-white-color);
    border-radius: 3px;
    border: 1px solid var(--pi-btn-icon-box-bg);
}

.static-label {
    background-color: var(--pi-white-text);
    padding: 5px 8px;
    font-size: 12px;
    font-weight: 600;
    width: 11em;
    border-radius: 3px;
    color: var(--pi-secondary-color);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    margin-bottom: 5px;
}
.static-description {
    font-size: 12px;
    font-weight: 500;
    color: var(--pi-primary-dark-color);
}

.short-label {
    font-size: 12px;
    color: var(--pi-white-text);
    background: var(--pi-eighth-gradient-color);
    padding: 5px;
    border-radius: 3px;
    margin-bottom: 10px;
    border: 1px solid var(--pi-eighth-gradient-color);
}

.static-p-label,
.static-c-label {
    font-size: 11px;
    font-weight: 400;
    color: var(--pi-secondary-color);
}

.static-p-icon,
.static-c-icon {
    padding: 1px 2px;
    /* background-color: var(--pi-fifth-color); */
    border-radius: 3px;
    margin-left: 3px;
    margin-right: 3px;
}

.static-p-icon i,
.static-c-icon i {
    font-size: 12px;
    color: var(--pi-eighth-gradient-color);
}

.static-p-value,
.static-c-value {
    font-weight: 500 !important;
    font-size: 12px !important;
    color: var(--pi-primary-dark-color) !important;
}

.static-card {
    padding: 10px;
    border-radius: 3px;
    background-color: var(--pi-white-text);
}

.static-card-label {
    padding: 10px;
    border-radius: 3px;
    background-color: var(--pi-white-text);
}

.static-c-label-xl {
    font-size: 13px;
    font-weight: 600;
    color: var(--pi-secondary-color);
}

/* FIN MODALS */

/* TABLAS */

.td-actions-table {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-buttons {
    background-color: var(--pi-second-white-color) !important;
}

.btn-assignment {
    background-color: var(--pi-primary-color) !important;
}

.btn-assignment:hover {
    background-color: var(--pi-third-color) !important;
}

.btn-assignment i {
    color: var(--pi-first-white-color) !important;
}

.btn-action {
    background-color: var(--pi-secondary-color);
    box-shadow: none !important;
}

.btn-action:hover,
.btn-action:focus {
    background-color: var(--pi-second-gray-color) !important;
}

.btn-action i {
    color: var(--pi-first-white-color) !important;
}

/* .default-cb {
    background-color: var(--pi-eighth-gradient-color);
} */

.default-cb:checked {
    background-color: var(--pi-eighth-gradient-color) !important;
}

/* .table-striped>tbody>tr:nth-of-type(odd)>* {
    color: var(--pi-secondary-color) !important;
} */

.record-info-div {
    overflow: auto;
    background-color: var(--pi-sixth-gradient-color);
    /* padding: 10px; */
    font-size: 11px;
    max-height: 15em;
    color: var(--pi-first-white-color);
    border-radius: 2px;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.record-info-div i {
    padding: 5px;
    background-color: var(--bs-card-bg);
    border-radius: 2px;
    color: var(--pi-primary-color);
    font-size: 14px;
    width: 25px;
    height: 25px;
    text-align: center;
    margin-right: 4px;
    box-shadow:
        rgb(0 0 0 / 40%) 0px 2px 4px,
        rgb(0 0 0 / 30%) 0px 7px 13px -3px,
        rgb(0 0 0 / 20%) 0px -3px 0px inset;
}

.record-info-heading {
    padding: 10px;
    background-color: var(--pi-eighth-gradient-color);
}

.record-info-item {
    display: block;
    margin-bottom: 8px;
    padding: 0 10px;
}

.selected-items-div {
    /* border-radius: 2px; */
    /* padding: 10px; */
    /* background-color: var(--pi-fourth-white-color); */
    /* box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px; */
    margin-top: 5px;
    max-height: 27em;
    overflow: auto;
    position: relative;
}

.selected-item-row {
    font-size: 12px;
    vertical-align: initial;
    position: relative;
    padding: 12px 25px 12px 10px;
    background-color: var(--pi-secondary-color);
    margin-bottom: 5px;
    border-radius: 3px;
}

.entity-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 6px;
    background-color: var(--pi-secondary-color);
    border-radius: 3px;
    box-shadow:
        rgb(60 64 67 / 30%) 0px 1px 2px 0px,
        rgb(60 64 67 / 15%) 0px 2px 6px 2px;
}

.entity-icon i {
    font-size: 21px;
    color: var(--pi-first-white-color);
    vertical-align: bottom;
}

.log-card-create {
    border-left: 3px solid #50cd89;
    border-bottom: 1px solid var(--pi-fifth-gray-color);
    font-size: 11px;
}

.log-card-create .log-icon {
    padding: 10px;
    margin-left: 0;
    margin-right: 10px;
    background-color: var(--pi-third-white-color);
    border-radius: 2px;
    box-shadow:
        rgb(50 50 105 / 15%) 0px 2px 5px 0px,
        rgb(0 0 0 / 5%) 0px 1px 1px 0px;
    width: 40px;
    text-align: center;
}

.log-card-create .log-icon i {
    color: #50cd89;
    font-size: 17px;
    vertical-align: middle;
}

.log-card-update {
    border-left: 3px solid #ffc700;
    border-bottom: 1px solid var(--pi-fifth-gray-color);
    font-size: 11px;
}

.log-card-update .log-icon {
    padding: 10px;
    margin-left: 0;
    margin-right: 10px;
    background-color: var(--pi-third-white-color);
    border-radius: 2px;
    box-shadow:
        rgb(50 50 105 / 15%) 0px 2px 5px 0px,
        rgb(0 0 0 / 5%) 0px 1px 1px 0px;
    width: 40px;
    text-align: center;
}

.log-card-update .log-icon i {
    color: #ffc700;
    font-size: 17px;
    vertical-align: middle;
}

.log-card-delete {
    border-left: 3px solid #f1416c;
    border-bottom: 1px solid var(--pi-fifth-gray-color);
    font-size: 11px;
}

.log-card-delete .log-icon {
    padding: 10px;
    margin-left: 0;
    margin-right: 10px;
    background-color: var(--pi-third-white-color);
    border-radius: 3px;
    box-shadow:
        rgb(50 50 105 / 15%) 0px 2px 5px 0px,
        rgb(0 0 0 / 5%) 0px 1px 1px 0px;
    width: 40px;
    text-align: center;
}

.log-card-delete .log-icon i {
    color: #f1416c;
    font-size: 17px;
    vertical-align: middle;
}

.new-log-card {
    padding: 10px;
    background-color: var(--pi-fourth-white-color);
    border-radius: 2px;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px;
    max-height: 110px;
    overflow: auto;
}

.old-log-card {
    padding: 10px;
    background-color: var(--pi-first-gradient-color);
    border-radius: 2px;
    /* color: var(--pi-menu-link-i-color); */
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px;
    max-height: 110px;
    overflow: auto;
}

/* .table th {
    font-weight: bold !important;
} */

.th-sm {
    font-size: 10px !important;
    padding: 8px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.app-sidebar-menu {
    max-height: calc(100vh - 120px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.boolean-close,
.boolean-check,
.boolean-null {
    /* width: 40%; */
    height: 20px;
    padding: 0 5px;
    /* margin: 0 auto; */
    /* text-align: center; */
    /* border-radius: 4px; */
    /* box-shadow: rgb(0 0 0 / 10%) 0px 0px 5px 0px, rgb(0 0 0 / 10%) 0px 0px 1px 0px; */
}

.boolean-close i {
    color: var(--pi-danger-color);
}

.boolean-check i {
    color: var(--pi-success-color);
}

.boolean-null i {
    color: var(--pi-primary-dark-color);
}

.boolean-close i,
.boolean-check i,
.boolean-null i {
    font-size: 16px;
    vertical-align: super;
}

.card-body .table-responsive:not(.table-not-data) {
    min-height: 20em;
}

/* FIN TABLAS */

/* SIDEBAR PRINCIPAL */

#appSidebar.app-sidebar {
    background-color: #2b2b40 !important;
    /* box-shadow: rgb(0 0 0 / 30%) 0px 19px 38px, rgb(0 0 0 / 22%) 0px 15px 12px; */
}

#appSidebar.app-sidebar .menu .menu-item .menu-link .menu-title {
    color: var(--pi-second-white-color);
    /* font-weight: 100; */
}

#appSidebar.app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: var(--pi-btn-icon-box-bg);
}

.app-sidebar-logo .app-sidebar-toggle,
.app-header-menu .app-sidebar-toggle {
    background-color: transparent !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    left: 93%;
    border: 1px solid var(--pi-fourth-gray-color);
    padding: 8px !important;
    width: 26px !important;
    height: 26px !important;
    cursor: pointer;
}

.app-sidebar-logo .app-sidebar-toggle i,
.app-header-menu .app-sidebar-toggle i {
    font-size: 10px;
    display: block;
    margin: 0 auto;
}

.app-sidebar-logo .app-sidebar-toggle:hover,
.app-header-menu .app-sidebar-toggle .app-sidebar,
.app-wrapper,
#kt_app_header,
.app-sidebar-toggle {
    transition: all 0.8s !important;
}

.app-sidebar-toggle.collapsed {
    position: absolute !important;
    top: 35px !important;
    left: 20px !important;
    z-index: 9999;
}

.app-sidebar.collapsed {
    display: none !important;
}

.app-wrapper.collapsed {
    margin-left: 0 !important;
}

#kt_app_header.collapsed {
    left: 0 !important;
}

#appSidebar.app-sidebar .menu .menu-link:hover .menu-title {
    color: var(--pi-third-white-color) !important;
}

#appSidebar.app-sidebar .menu .menu-item:not(.menu-accordion) .menu-link:not(.active):hover,
#appSidebar.app-sidebar .menu .menu-item .menu-link.active,
#appSidebar.app-sidebar .menu .menu-item.menu-accordion .menu-link:hover {
    background-color: var(--pi-third-color) !important;
    border-radius: 2px !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

#appSidebar.app-sidebar .app-sidebar-logo {
    background-color: var(--pi-white-text);
    padding: 10px 0;
    margin: 8px 8px 0;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom: none !important;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}

.menu-accordion .menu-link i {
    margin-right: 9px;
    color: var(--pi-btn-icon-box-bg);
    font-size: 14px;
}

.menu-sub-accordion .menu-link i {
    margin-left: 10px;
    color: var(--pi-third-gray-color);
    font-size: 11px !important;
}

.menu-item .menu-link .menu-icon {
    margin-right: 0 !important;
}

.menu-link .menu-icon i {
    font-size: 14px;
    margin-right: 9px;
}

.menu-sub-accordion .menu-item {
    font-size: 11px !important;
}

.menu-column .menu-item {
    padding: 0 !important;
    margin: 1px 3px 1px 3px !important;
}

.menu-level-2 {
    padding-left: 20px !important;
}

.menu-level-3 {
    padding-left: 26px !important;
}

.menu-level-4 {
    padding-left: 34px !important;
}

.selected-module-box {
    background-color: var(--pi-third-white-color);
    padding: 5px;
    margin: 0px 8px 8px;
    position: relative;
    margin-bottom: 10px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}

.selected-module-title {
    display: block;
    color: var(--pi-secondary-color);
    font-size: 11px;
    font-weight: 600;
}

.selected-module-title i {
    color: var(--pi-secondary-color);
    font-size: 10px;
}

.selected-module-subtitle {
    display: block;
    font-size: 11px;
    color: var(--pi-primary-dark-color);
    font-weight: 400;
    margin-left: 12px;
}

.select-module-btn {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    border-bottom-left-radius: 1px;
    /* border-bottom-right-radius: 2px; */
    border-top-right-radius: 2px;
    background-color: var(--pi-third-gradient-color);
    text-align: center;
    height: 100%;
    border-bottom: 3px solid var(--pi-sixth-gradient-color);
}

.select-module-btn i {
    color: var(--pi-fifth-color);
    font-size: 10px;
}

.select-module-btn:hover {
    background-color: var(--pi-eighth-gradient-color) !important;
}

.menu-selector-module {
    background-color: var(--pi-select-finder-bg);
    margin: 0 3px;
    border-radius: 2px;
    position: absolute;
    width: 97.777%;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px;
}

.menu-selector-module .module-item-link {
    display: block;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    border-bottom: 1px solid var(--pi-select-item-bg);
}

.menu-selector-module .module-item-icon {
    text-align: center;
    width: 24px;
    margin-right: 0px;
    display: inline-block;
}

.menu-selector-module .module-item-link i {
    font-size: 12px;
    color: var(--pi-eighth-gradient-color);
}

.menu-selector-module .module-item-link:hover {
    background-color: var(--pi-eighth-gradient-color) !important;
    color: var(--pi-select-finder-bg) !important;
    border-bottom: 1px solid transparent;
}

.menu-selector-module .module-item-link:hover i {
    color: var(--pi-select-finder-bg) !important;
}

.menu-selector-module .module-item-link:last-child {
    border-bottom: none !important;
}

/* FIN SIDEBAR PRINCIPAL */

/* BOTONES GENERICOS */

.btn.btn-primary:not(.btn-primary-trans) {
    background-color: var(--pi-eighth-gradient-color) !important;
    color: var(--pi-white-text) !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
}

.btn.btn-primary.btn-primary-trans {
    background-color: var(--pi-third-gradient-color) !important;
    color: var(--pi-white-text) !important;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
}

.btn.bg-danger {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:hover:not(.btn-active),
.btn:not(.btn-primary):not(.btn-action):not(.btn-custom):not(.btn-assistant):hover,
.btn:not(.btn-primary):not(.btn-action):not(.btn-custom):not(.btn-assistant):focus {
    background-color: var(--pi-secondary-color) !important;
    color: var(--pi-first-white-color) !important;
}

.cue-assistant-ckeck:checked {
    background-color: var(--pi-primary-color) !important;
}

/* FIN BOTONES GENERICOS */

/* FOOTER */

.app-footer {
    background-color: transparent;
    padding: 5px 5px 0 !important;
}

.app-footer .menu-link {
    color: var(--pi-esproyecta-main-color);
    font-size: 12px !important;
}

.version-text {
    font-weight: 600;
    color: var(--pi-seventh-gradient-color);
}

/* FIN FOOTER */

/* TOP MENU */

#kt_app_header {
    box-shadow:
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px !important;
    background-color: var(--pi-third-white-color) !important;
}

.symbol > img {
    background-color: var(--pi-eighth-gradient-color);
    padding: 3px !important;
    border-radius: 4px !important;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.quick-icon {
    background-color: var(--pi-third-color);
    padding: 10px;
    width: 47px;
    margin-bottom: 8px;
    border-radius: 2px;
    text-align: center;
    box-shadow:
        rgb(50 50 93 / 25%) 0px 6px 12px -2px,
        rgb(0 0 0 / 30%) 0px 3px 7px -3px;
}

.quick-icon i {
    font-size: 16px;
    color: var(--pi-first-white-color);
}

/* .back-btn {
    position: absolute !important;
    left: 30px;
    top: 20px;
} */

.quick-action-item {
    display: block;
    width: 100%;
    border-radius: 2px;
    position: relative;
    margin-bottom: 6px;
    background-color: var(--pi-primary-color);
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px;
}

.quick-action-item:hover .qa-text {
    color: var(--pi-primary-color) !important;
}

.quick-action-item .qa-icon {
    display: block;
    background-color: var(--pi-secondary-color);
    width: 32px;
    height: 32px;
    text-align: center;
    padding: 5px;
    border-radius: 3px;
    position: absolute;
    left: -5px;
    top: -5px;
    box-shadow:
        rgb(0 0 0 / 40%) 0px 2px 4px,
        rgb(0 0 0 / 30%) 0px 7px 13px -3px,
        rgb(0 0 0 / 20%) 0px -3px 0px inset;
}

.quick-action-item .qa-icon i {
    vertical-align: middle;
    font-size: 15px;
    color: var(--pi-third-white-color);
}

.quick-action-item .qa-text {
    display: inline-block;
    color: var(--pi-fifth-color);
    padding: 10px;
    margin-left: 30px;
    font-size: 12px;
}

/* FIN TOP MENU */

/* CARDS */

.card .card-header {
    /* border-top-right-radius: 3px !important;
    border-top-left-radius: 3px !important; */
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px !important;
    z-index: 1;
    min-height: 40px !important;
    background-color: var(--pi-third-color) !important;
    border-bottom: none !important;
    padding: 0 1.25rem !important;
    border-top-left-radius: 3px !important;
    border-top-right-radius: 3px !important;
}

.card.filter {
    background-color: var(--pi-btn-icon-box-bg);
    box-shadow: none !important;
}

.stats-title-icon {
    color: var(--pi-first-gradient-color);
    font-size: 18px;
    vertical-align: revert;
    margin-right: 8px;
}

.stat-card {
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px !important;
    border-radius: 2px !important;
}

.db-icon {
    color: var(--pi-fifth-color);
    vertical-align: text-bottom;
    font-size: 15px;
    margin-right: 5px;
}

.export-menu-btn {
    width: 25px;
    height: 35px;
    position: absolute;
    top: 2px;
    right: 5px;
    border: none;
    background-color: transparent;
    border-radius: 0;
    /* box-shadow: rgb(9 30 66 / 25%) 0px 1px 1px, rgb(9 30 66 / 13%) 0px 0px 1px 1px;*/
}

.export-menu-btn i {
    color: var(--pi-btn-icon-box-bg);
    font-size: 14px;
    vertical-align: text-bottom;
}

/* FIN CARDS */

/* PAGINACION */

.generic-paginate {
    padding: 6px;
    /* box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; */
    background-color: var(--pi-third-white-color);
}

.page-link:hover {
    background-color: var(--pi-first-white-color) !important;
}

.generic-paginate .page-item .page-link:not(.active) {
    color: var(--pi-menu-link-i-color) !important;
}

.generic-paginate .active > .page-link,
.page-link.active {
    background-color: var(--pi-eighth-gradient-color) !important;
    border-radius: 3px !important;
    font-weight: 600 !important;
    color: var(--pi-third-white-color) !important;
}

.generic-paginate .form-select.rows-select {
    color: var(--pi-eighth-gradient-color) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231891AC' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

.page-item .page-link {
    border-radius: 0 !important;
    font-weight: lighter !important;
    font-size: 12px !important;
    color: var(--pi-btn-icon-box-bg) !important;
    margin-right: 3px !important;
    border-radius: 3px !important;
}

.active > .page-link,
.page-link.active {
    background-color: var(--pi-primary-color) !important;
}

.pagination .page-item {
    margin: 0 !important;
}

/* FIN PAGINACION */

/* CONFIRMATION MODAL */

.swal2-styled,
.swal2-close {
    outline: none !important;
    /* border: none !important; */
    box-shadow: none !important;
}

#swal2-title {
    display: block !important;
    font-size: 16px !important;
    text-align: inherit !important;
    font-weight: 200 !important;
}

#swal2-html-container {
    display: block !important;
    text-align: initial !important;
    color: var(--pi-danger-color) !important;
    font-size: 13px !important;
    margin: 15px 18px 5px !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--pi-danger-color) !important;
}

/* FIN CONFIRMATION MODAL */

/* BREADCRUMS */

body:not([data-kt-app-toolbar-fixed="true"]) .app-toolbar,
body:not([data-kt-app-toolbar-fixed-mobile="true"]) .app-toolbar {
    background-color: var(--pi-white-text) !important;
    margin-bottom: 30px !important;
    margin-top: 10px !important;
    border-radius: 3px !important;
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px !important;
}

.breadCrumb .breadCrumb-item {
    margin: 0 !important;
    padding: 0 !important;
}

.breadCrumb .fa-angle-right {
    vertical-align: text-bottom !important;
}

.pg-icon {
    position: absolute;
    height: 100%;
    background-color: var(--pi-third-gradient-color);
    width: 26px;
    left: 0;
    top: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 12px 9px;
}

.pg-icon i {
    vertical-align: bottom;
    font-size: 14px;
    color: var(--pi-fourth-white-color);
}

.pg-text {
    display: inline-block;
    margin-left: 20px;
}

/* FIN BREADCRUMS */

/* NOTIFICATIONS */

#toast-content-object {
    background-color: var(--pi-first-white-color);
    color: var(--pi-second-gray-color);
    padding: 16px;
    font-size: 12px;
    margin-top: 12px;
    border-radius: 2px;
    border: 1px solid #e4e6ef;
    max-height: 100px;
    overflow: auto;
}

.Vue-Toastification__container.toast-custom-container .Vue-Toastification__toast {
    display: inline-flex;
    position: relative;
    max-height: 800px;
    min-height: 64px;
    box-sizing: border-box;
    margin-bottom: 1rem;
    /* padding: 22px 24px; */
    padding: 12px;
    border-radius: 3px;
    box-shadow:
        0 1px 10px 0 rgb(0 0 0 / 10%),
        0 2px 15px 0 rgb(0 0 0 / 5%);
    justify-content: space-between;
    font-family: "Rubik", sans-serif;
    max-width: 600px;
    min-width: 326px;
    pointer-events: auto;
    overflow: hidden;
    transform: translateZ(0);
    direction: ltr;
}

.Vue-Toastification__container.toast-custom-container .Vue-Toastification__progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 10000;
    background-color: #dfe6f1;
    transform-origin: left;
    animation: scale-x-frames linear 1 forwards;
}

.Vue-Toastification__container.toast-custom-container .Vue-Toastification__close-button {
    font-size: 21px;
    line-height: 24px;
    outline: none;
    width: 30px;
    height: 28px;
    padding: 2px;
    cursor: pointer;
    align-items: center;
    opacity: 1;
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: transparent;
    color: var(--pi-second-gray-color);
    border-bottom-left-radius: 3px;
    border-top-right-radius: 0 !important;
    font-weight: 100;
}

.Vue-Toastification__container.toast-custom-container .Vue-Toastification__close-button:hover {
    opacity: 0.8 !important;
}

.Vue-Toastification__container.toast-custom-container .Vue-Toastification__toast-body {
    flex: 1;
    line-height: 20px;
    font-size: 12px;
    word-break: break-word;
    white-space: pre-wrap;
    margin: auto 18px auto 0px;
}

.Vue-Toastification__container.toast-custom-container .Vue-Toastification__toast--success {
    background-color: #f8f9fe;
    color: #4caf50;
    border-left: 3px solid #4caf50;
}

.Vue-Toastification__container.toast-custom-container .Vue-Toastification__toast--error {
    background-color: #f8f9fe;
    color: #ff5252;
    border-left: 3px solid #ff5252;
}

.Vue-Toastification__container.toast-custom-container .Vue-Toastification__toast--warning {
    background-color: #f8f9fe;
    color: #ffa500;
    border-left: 3px solid #ffa500;
}

/* FIN NOTIFICATIONS */

/* FILTROS */

.btn-filters-div {
    position: absolute !important;
    right: 10px;
    top: -20px;
}

.filter-btn-filter,
.filter-btn-advanced,
.filter-btn-remove {
    background-color: transparent;
    padding: 0 !important;
    border: none !important;
    margin: 3px;
    height: 36px;
}

.filter-icon {
    padding: 5px 6px;
    background-color: var(--pi-third-color);
    border-radius: 3px;
    width: 29px;
    height: 28px;
    text-align: center;
    box-shadow: rgb(0 0 0 / 18%) 0px 2px 4px;
}

.filter-icon i {
    color: var(--pi-fourth-color);
    font-size: 16px !important;
    vertical-align: text-top;
}

.form-control.filter-content {
    min-height: auto;
    height: 24px;
    padding: 4px;
    font-size: 10px !important;
    border-bottom-left-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
    border: 1px solid var(--pi-seventh-gradient-color);
    box-shadow: rgb(0 0 0 / 10%) 0px 1px 2px 0px !important;
    background-color: var(--pi-third-white-color);
}

.filter-select.filter-content {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23333333' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    color: var(--pi-primary-color);
    background-color: var(--pi-fifth-color);
    font-weight: 700;
    font-size: 11px !important;
    padding-right: 28px !important;
}

.filter-select.filter-content:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231891ac' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

.filter-select.filter-content option {
    background-color: var(--pi-third-white-color);
    color: var(--pi-primary-dark-color);
    font-size: 11px !important;
    font-weight: 500;
}

.filter.card input.form-control.filter-content::placeholder,
.filter.card select.form-select.filter-content::placeholder {
    color: var(--pi-second-gray-color) !important;
}

.form-select option {
    background-color: var(--pi-secondary-color) !important;
    color: var(--pi-third-white-color) !important;
}

.form-control.disabled,
.form-select.disabled {
    cursor: default !important;
    opacity: 0.6 !important;
    background-color: var(--pi-select-finder-bg) !important;
    color: var(--pi-primary-dark-color) !important;
}

.card.filter .card {
    background-color: var(--pi-third-gradient-color) !important;
    /* box-shadow: none !important; */
}

.filter-label {
    color: var(--pi-white-text);
    background-color: var(--pi-seventh-gradient-color);
    font-size: 10px;
    padding: 2px 5px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    width: 100% !important;
    display: block;
}

.filter-label i {
    font-size: 10px;
    color: var(--pi-fourth-color) !important;
}

.secondary-filters {
    padding: 15px 30px;
    background-color: var(--pi-sixth-gradient-color);
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px !important;
    position: absolute;
    top: 88%;
    z-index: 9;
    width: 100% !important;
    border-radius: 3px;
}

.form-select.rows-select {
    border: none !important;
    /* margin: 2px !important; */
    background-color: transparent;
    color: var(--pi-btn-icon-box-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dfe6f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* FIN FILTROS */

/* TABLA PERMISOS */

.tooltip .tooltip-inner {
    background: #5484b1;
    color: #f8f9fe;
    border-radius: 3px;
    padding: 5px 10px 4px;
    max-width: 490px;
    font-size: 11px;
    word-break: break-word;
    box-shadow:
        rgb(50 50 93 / 25%) 0px 6px 12px -2px,
        rgb(0 0 0 / 30%) 0px 3px 7px -3px;
}

/* TABLA PERMISOS */

/* DIV GENERICO */

*::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
    display: block !important;
    background-color: var(--pi-fourth-gray-color) !important;
}

*::-webkit-scrollbar-track {
    background-color: var(--pi-fourth-gray-color) !important;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--pi-fourth-gray-color) !important;
    /* border-radius: 4px; */
    -webkit-transition: background-color 0.8s !important;
    transition: background-color 0.8s !important;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--pi-third-color) !important;
    -webkit-transition: background-color 0.2s !important;
    transition: background-color 0.2s !important;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--pi-secondary-color) !important;
}

*::-webkit-scrollbar-corner {
    background-color: var(--pi-fourth-gray-color) !important;
}

#scrolltop_per {
    background: var(--pi-primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 10px;
    right: 10px;
    transition: ease-in-out 200ms;
    opacity: 1 !important;
}

.scrolltop {
    border-radius: 2px !important;
}

.responsive-logo {
    padding: 5px;
    background-color: var(--pi-fourth-gray-color);
    border-radius: 3px;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px;
}

#kt_app_sidebar_mobile_toggle i {
    font-size: 14px;
    color: var(--pi-secondary-color) !important;
}

.assoc-menu {
    background-color: var(--pi-primary-dark-color);
    text-align: left;
    min-width: 9em;
    color: var(--pi-third-gray-color) !important;
    border-radius: 2px;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.assoc-menu .menu-item {
    font-size: 11px !important;
    /* font-weight: 600 !important; */
    color: var(--pi-white-text) !important;
}

.assoc-menu .menu-item:hover {
    background-color: var(--pi-secondary-color) !important;
    box-shadow:
        rgb(50 50 105 / 15%) 0px 2px 5px 0px,
        rgb(0 0 0 / 5%) 0px 1px 1px 0px;
}

.assoc-menu.table-assoc-menu .menu-item .menu-link i {
    color: var(--pi-white-text);
}

.truncate-text {
    font-weight: 600 !important;
}

/* FIN DIV */

/* INPUTS */

input[type="date"].filter-content {
    position: relative;
}

input[type="date"].filter-content::-webkit-calendar-picker-indicator {
    color: transparent;
    background: none;
    z-index: 1;
}

input[type="date"].filter-content:before {
    color: var(--pi-seventh-gradient-color);
    display: block;
    font-family: "FontAwesome";
    content: "\f073";
    width: 17px;
    height: 25px;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 3px;
    font-size: 12px;
}

/* .tox-notifications-container { NO ELIMINAR (POR SI TINYMCE INCLUYE LIMITACION DE DOMINIOS, FUNCIONA OK)
    display: none !important;
} */

.tox-tinymce {
    border: none !important;
    border-radius: 3px !important;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px !important;
}

.tox .tox-mbtn__select-label {
    cursor: pointer !important;
}

.tox-statusbar__branding {
    display: none !important;
}

/* FIN INPUTS */

/* LOGIN */

.input-icon {
    position: absolute;
    left: 8px;
    top: calc(50% - 0.5em);
    color: var(--pi-second-gray-color);
    font-size: 13px;
}

.input-wrapper {
    position: relative;
}

.login-input {
    border-bottom: 1px solid var(--pi-fifth-gray-color) !important;
    padding-left: 0px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    color: #fff !important;
    font-weight: 100 !important;
}

.login-input:focus {
    border-bottom: 1px solid var(--pi-second-gradient-color) !important;
}

.login-card {
    background-color: var(--pi-first-gradient-color) !important;
    border-radius: 4px !important;
    width: 100% !important;
    box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px;
}

.view-pass {
    /* padding: 4px 6px 2px; */
    position: absolute;
    right: 6px;
    top: 7px;
    /* background-color: var(--pi-fifth-gray-color); */
    /* border-radius: 2px; */
    /* box-shadow: rgb(17 17 26 / 5%) 0px 1px 0px, rgb(17 17 26 / 10%) 0px 0px 8px; */
    cursor: pointer;
}

.view-pass i {
    color: var(--pi-primary-color);
}

.admin-view-pass {
    position: absolute;
    right: 16px;
    bottom: 0px;
    cursor: pointer;
}

.view-pass:hover,
.admin-view-pass:hover {
    opacity: 0.8 !important;
}

/* FIN LOGIN */

/* USER PROFILE ZONE */

.account .card-header,
.setting .card-header,
.security .card-header,
.logs .card-header {
    padding: 10px 20px !important;
    background-color: var(--pi-fourth-gray-color) !important;
    border: none !important;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
}

.account .card-title .custom-title,
.setting .card-title .custom-title,
.security .card-title .custom-title,
.logs .card-title .custom-title {
    font-weight: 500 !important;
    color: var(--pi-primary-color) !important;
    font-size: 14px !important;
}

.tab-icon {
    padding: 5px;
    background-color: var(--pi-input-bg);
    border-radius: 2px;
    width: 29px;
    text-align: center;
    margin: 2px auto;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

.tab-icon i {
    vertical-align: text-bottom;
    color: var(--pi-sixth-gradient-color);
    font-size: 15px;
}

.access-icon,
.access-icon-danger,
.access-icon-success {
    padding: 6px 8px;
    border-radius: 2px;
    margin-left: 20px;
    margin-right: 5px;
    display: inline-block;
    width: 65px;
    text-align: center;
    background-color: var(--pi-white-text);
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.access-icon {
    padding: 6px 8px;
    border-radius: 2px;
    margin-left: 20px;
    margin-right: 5px;
    display: inline-block;
    width: 65px;
    text-align: center;
}

.access-icon-danger i {
    color: var(--pi-danger-color);
}

.access-icon-success i {
    color: var(--pi-success-color);
}

.access-icon i {
    color: var(--pi-secondary-color);
    font-size: 15px;
}

.statistics-card {
    border-radius: 3px !important;
    background-color: var(--pi-eighth-gradient-color);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.nav-line-tabs .nav-item .nav-link {
    border: 0 !important;
    padding: 4px 10px !important;
    height: 48px !important;
}

.settings-tab {
    position: relative;
    background-color: var(--pi-input-bg);
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.settings-tab .nav-item .nav-link {
    color: var(--pi-seventh-gradient-color) !important;
    font-size: 13px !important;
    display: block;
    text-align: center;
    height: 65px !important;
    width: 15em;
    position: relative;
    margin-right: 0 !important;
    font-weight: 400 !important;
}

.settings-tab .nav-item .nav-link:hover,
.settings-tab .nav-item .nav-link.active {
    background-color: var(--pi-third-gradient-color) !important;
}

.nav-line-tabs .nav-item .nav-link {
    border: none !important;
    /* transition: none !important; */
}

#deleteAvatarBtn {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background-color: var(--pi-danger-color) !important;
}

#deleteAvatarBtn i {
    color: var(--pi-btn-icon-box-bg) !important;
}

#deleteAvatarBtn:hover {
    opacity: 0.8 !important;
}

.user-panel {
    background-color: var(--pi-third-white-color) !important;
}

/* FIN USER PROFILE ZONE */

/* ESTADISTICAS ADMIN */

.stats-access-icon,
.danger-stats-access-icon {
    padding: 6px;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 3px;
    box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px;
}

.stats-access-icon {
    background-color: var(--pi-secondary-color);
}

.danger-stats-access-icon {
    background-color: #c95672;
}

.stats-access-icon i,
.danger-stats-access-icon i {
    color: var(--pi-btn-icon-box-bg);
    font-size: 14px;
}

/* FIN ESTADISTICAS ADMIN */

/* REGISTRO */

.profile-image-div {
    padding: 5px !important;
    border-radius: 3px !important;
    background-color: #fff !important;
    border: none !important;
    cursor: pointer;
    box-shadow:
        rgb(0 0 0 / 40%) 0px 2px 4px,
        rgb(0 0 0 / 30%) 0px 7px 13px -3px,
        rgb(0 0 0 / 20%) 0px -3px 0px inset !important;
}

.profileImage {
    padding: 5px !important;
    border-radius: 3px !important;
    background-color: #fff !important;
    border: none !important;
    cursor: pointer;
    /* box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset !important; */
}

.avatar-modal-img {
    width: 150px !important;
    height: 135px !important;
    margin-bottom: 20px !important;
    cursor: pointer;
}

.avatar-modal-img:hover {
    opacity: 0.6 !important;
}

/*
* color del menu activo, no confundir con el show , ya que se activan los submenus y parace un error.
*/

.menu-link.active {
    background-color: var(--pi-third-gradient-color) !important;
}

.menu-item .menu-sub > .menu-item a {
    margin-left: 30px;
    padding: 6px !important;
    font-size: 10px !important;
}

/* FIN REGISTRO */

/* SIDEBAR */

.menu-sub-indention .menu-sub:not([data-popper-placement]) {
    margin-left: 0 !important;
}

.menu-sub-indention .menu-item .menu-item .menu-link.active {
    margin-right: 0 !important;
}

/* FIN SIDEBAR */

/* FORM */

.form-switch.form-check-solid .form-check-input.check-switch {
    border-radius: 20px !important;
    min-width: 35px !important;
    height: 16px !important;
}

/* FIN FORM */

/* TOP MENU */

.menu-sub-dropdown {
    border-radius: 0 !important;
}

#upper-logo-div img {
    width: 100px;
}

.upper-menu-btn {
    height: 28px;
    width: 28px;
    text-align: center;
    background-color: var(--pi-first-white-color);
    border-radius: 3px;
    /* box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px; */
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    margin-left: 10px;
    cursor: pointer;
}

.upper-menu-btn:hover,
.upper-menu-btn:focus {
    background-color: var(--pi-eighth-gradient-color) !important;
}

.upper-menu-btn:hover i,
.upper-menu-btn:focus i {
    color: var(--pi-white-text) !important;
}

.upper-menu-btn i {
    vertical-align: bottom;
    font-size: 14px;
    color: var(--pi-secondary-color);
    transform: translate(0px, 2px);
}

.upper-menu-card {
    background-color: transparent !important;
    padding: 20px 15px 10px;
    box-shadow: none !important;
}

/* FIN TOP MENU */

/* INDEX 1 (MODULOS) */

.index-main-wrapper {
    min-height: calc(100vh - 60px);
    overflow: hidden;
    position: relative;
    /* background: var(--pi-sixth-gradient-color); */
}

.index-main-wrapper .home-title {
    padding-bottom: 125px;
}

.index-home-title {
    position: relative;
    /* text-align: center; */
}

.index-home-title img {
    width: 135px;
}

.index-home-title:after,
.index-home-title:before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    margin-left: -100%;
    top: 0;
    right: 0;
    z-index: -1;
}

.index-home-title .index-title {
    color: var(--pi-primary-dark-color);
    max-width: 1100px;
    font-size: 40px;
    font-weight: 400;
    margin-top: 8px;
}

.index-home-title .index-subtitle {
    color: var(--pi-secondary-color);
    margin: auto auto 28px;
    font-size: 14px;
    font-weight: 400;
}

.index-main-wrapper .modules {
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0px 50px 42px;
    /* min-height: 55vh; */
}

.index-main-wrapper .modules-container {
    margin-top: -60px;
    text-align: center;
    gap: 5px;
}

.modules-container {
    display: flex;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
}

.module-item {
    /* color: #383e45; */
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease-out;
    z-index: 1;
    height: 100%;
    background-color: var(--pi-eighth-gradient-color);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.module-item:hover {
    z-index: 999;
    background: var(--pi-secondary-color);
}

.module-item a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 20px 0px;
    position: relative;
    z-index: 2;
}

.module-item.disabled a,
.tools-item.disabled a {
    cursor: default;
}

.module-item.disabled,
.tools-item.disabled {
    background-color: var(--pi-select-item-bg) !important;
}

.modules-item-icon,
.module-item h3 {
    margin-bottom: 15px;
    display: inline-block;
}

.modules-item-icon img {
    width: 60px;
    height: 60px;
}

.module-item h3 {
    font-size: 13px;
    color: var(--pi-white-text);
    vertical-align: sub;
    margin-left: 10px;
    font-weight: 600 !important;
}

.module-item .module-sub {
    display: block;
    font-size: 10px;
    color: var(--pi-fifth-color);
}

.module-item.disabled .module-sub {
    color: var(--pi-second-gray-color) !important;
}

.modules-item-content {
    font-size: 12px;
    line-height: 16px;
    color: var(--pi-white-text);
    max-height: 80px;
    overflow: auto;
    margin-bottom: 35px !important;
}

.module-item.disabled .modules-item-content,
.module-item.disabled h3 {
    color: var(--pi-primary-dark-color) !important;
}

.modules-item-content p {
    font-size: 12px;
    margin-bottom: 0 !important;
}

.index-main-wrapper.admin-main-wrapper {
    margin-top: 70px !important;
    text-align: center;
    gap: 12px !important;
    min-height: 0 !important;
    background: none !important;
}

.index-main-wrapper.admin-main-wrapper .modules {
    padding: 30px !important;
    min-height: 0 !important;
}

.index-main-wrapper.admin-main-wrapper .modules-container {
    margin-top: -10px;
    text-align: center;
    gap: 12px;
}

/* FIN INDEX 1 */

/* INDEX 2 (SELECCION CC GLOBAL) */

.input-xxl {
    border-radius: 2px !important;
    box-shadow: rgb(0 0 0 / 15%) 0px 2px 8px !important;
    background-color: var(--pi-menu-link-i-bg) !important;
    border: none !important;
}

.input-xxl:focus {
    background-color: var(--pi-fourth-gray-color) !important;
}

.farmer-main-wrapper {
    min-height: calc(125vh - 100px);
    padding-bottom: 20em;
    /* background: var(--pi-second-gradient-color); */
}

.farmer-main-wrapper .home-title {
    padding-bottom: 125px;
}

.farmer-home-title {
    position: relative;
    text-align: center;
}

.farmer-home-title img {
    width: 135px;
}

.farmer-home-title .farmer-title {
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    max-width: 1100px;
    font-size: 30px;
    letter-spacing: 0;
    margin-bottom: 8px;
    margin-top: 8px;
    /* line-height: 48px; */
    font-weight: 100;
}

.farmer-main-wrapper .farmers {
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0px 50px 42px;
}

.farmer-container {
    width: 70%;
    position: relative;
    box-shadow: none;
}

.farmer-container .left-column {
    border-radius: 3px;
    display: flex;
}

.farmer-info-container {
    padding: 25px 15px 5px;
    color: var(--pi-white-text);
    border-radius: 3px;
    margin-bottom: 25px;
    position: relative;
    background-color: var(--pi-third-gradient-color);
}

.f-info-item {
    display: block;
    margin-top: 10px;
}

.card-education .f-info-item {
    color: var(--pi-primary-dark-color) !important;
    font-size: 12px !important;
}

.search-company-div,
.search-office-div,
.search-farmer-div,
.search-notebook-div {
    padding: 10px;
    position: relative;
}

.results-action-buttons {
    position: absolute;
    bottom: 0;
    right: 0px;
    z-index: 1;
    text-align: end;
}

.results-action-buttons button {
    border-radius: 2px !important;
}

#company-finder,
#office-finder,
#farmer-office,
#notebook-finder,
#farmer-finder {
    border-radius: 2px !important;
    /* box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 8%) 0px 0px 0px 1px !important; */
    background-color: var(--pi-select-item-bg);
    border: none !important;
    color: var(--pi-primary-dark-color);
}

#company-finder.finder-focus,
#office-finder.finder-focus,
#farmer-office.finder-focus,
#notebook-finder.finder-focus,
#farmer-finder.finder-focus {
    background-color: var(--pi-white-text) !important;
    color: var(--pi-primary-dark-color) !important;
}

#company-finder.finder-focus::placeholder,
#office-finder.finder-focus::placeholder,
#farmer-office:not(.disabled).finder-focus::placeholder,
#notebook-finder.finder-focus::placeholder,
#farmer-finder.finder-focus::placeholder {
    color: var(--pi-primary-dark-color) !important;
}

#company-finder::placeholder,
#office-finder::placeholder,
#farmer-office:not(.disabled)::placeholder,
#notebook-finder::placeholder,
#farmer-finder::placeholder {
    color: var(--pi-primary-dark-color) !important;
}

.special-label {
    z-index: 1;
    position: absolute;
    left: -2px;
    top: -10px;
    background-color: var(--pi-third-color);
    color: var(--pi-white-text);
    display: block;
    border-radius: 3px;
    font-size: 12px;
    width: 19em;
    height: 2.7em;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.special-label-secondary {
    left: auto !important;
    right: -2px !important;
}

.special-label-xl {
    font-size: 12px !important;
    min-height: 2.888em !important;
    overflow: auto;
    padding: 3px 9px 0px !important;
    position: sticky;
    top: 2px;
    width: 98%;
    margin: 6px;
    border-radius: 4px;
}

.special-label-icon {
    font-size: 14px;
    margin-right: 4px;
    background-color: var(--pi-white-text);
    width: 30px;
    height: inherit;
    padding: 1px;
    text-align: center;
    display: inline-block;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

.special-label-xl-icon {
    background-color: transparent !important;
    /* width: inherit !important; */
}

.special-label-icon:not(.special-label-xl-icon) i {
    vertical-align: sub;
    font-size: 15px;
    color: var(--pi-secondary-color);
}

.special-label-icon.special-label-xl-icon i {
    color: var(--pi-white-text);
    vertical-align: sub;
    font-size: 16px;
    position: relative;
    top: 1px;
}

.special-label-text {
    vertical-align: sub;
}

.farmer-result-div,
.company-result-div,
.office-result-div,
.notebook-result-div {
    position: absolute;
    max-height: 27em;
    overflow: auto;
    z-index: 1;
    width: 100%;
    top: 55px;
}

.notebook-result-div {
    background-color: var(--pi-white-text) !important;
}

.farmer-card,
.company-card,
.office-card,
.notebook-card {
    padding: 20px;
    width: 100%;
    background-color: var(--pi-fourth-white-color);
    display: block;
    position: relative;
    border-bottom: 1px solid var(--pi-btn-icon-box-bg);
}

.farmer-card .content,
.company-card .content,
.office-card .content {
    display: flex;
}

.farmer-card:hover,
.company-card:hover,
.office-card:hover,
.notebook-card:hover {
    background-color: var(--pi-first-white-color);
}

.farmer-card .farmer-icon,
.company-card .company-icon,
.office-card .office-icon {
    padding: 10px;
    margin-right: 10px;
    width: 80px;
    height: 75px;
    text-align: center;
    border-radius: 4px;
    box-shadow: rgb(0 0 0 / 10%) -4px 9px 25px -6px;
    border: 1px solid var(--pi-select-item-bg);
}

.farmer-card .farmer-icon i,
.company-card .company-icon i,
.office-card .office-icon i {
    font-size: 38px;
    transform: translate(0px, 8px);
    color: var(--pi-sixth-gradient-color);
}

.farmer-card .farmer-icon img,
.company-card .company-icon img,
.office-card .office-icon img {
    position: relative;
    transform: translate(0%, 10%);
}

.farmer-card .farmer-info .farmer-name,
.company-card .company-info .company-name,
.office-card .office-info .office-name {
    color: var(--pi-primary-dark-color);
    font-size: 16px;
}

.farmer-card .farmer-info .farmer-additional-info,
.company-card .company-info .company-additional-info,
.office-card .office-info .office-additional-info {
    margin-top: 5px;
    width: 100%;
    display: inline-block;
}

.farmer-card .farmer-info .farmer-additional-info .addi-label,
.company-card .company-info .company-additional-info .addi-label,
.office-card .office-info .office-additional-info .addi-label {
    color: var(--pi-white-text);
    font-weight: 100;
    font-size: 11px;
}

.farmer-card .farmer-info .farmer-additional-info .addi-label,
.company-card .company-info .company-additional-info .addi-label,
.office-card .office-info .office-additional-info .addi-label {
    display: block;
    background-color: var(--pi-secondary-color);
    padding: 4px;
    border-top-left-radius: 1px;
    border-top-right-radius: 1px;
}

.farmer-card .farmer-info .farmer-additional-info .addi-value,
.company-card .company-info .company-additional-info .addi-value,
.office-card .office-info .office-additional-info .addi-value {
    font-weight: 600;
    font-size: 10px;
    display: block;
    padding: 4px 5px;
}

.addi-label i {
    color: var(--pi-white-text);
    font-size: 12px;
    margin-right: 2px;
    vertical-align: middle;
}

.sf-title-label {
    display: block;
}

.company-info {
    width: 100%;
}

.company-label,
.office-label,
.farmer-label {
    background-color: var(--pi-fourth-gray-color);
    border-radius: 3px;
    margin-right: 6px;
    min-width: 8em;
    display: inline-block;
    margin-bottom: 5px;
    box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px;
}

.selected-farmer-card {
    padding: 25px;
    background-color: var(--pi-white-text);
    box-shadow:
        rgb(50 50 93 / 25%) 0px 6px 12px -2px,
        rgb(0 0 0 / 30%) 0px 3px 7px -3px;
    border-radius: 4px;
    position: relative;
    width: 100%;
}

.selected-farmer-icon {
    padding: 10px;
    background-color: var(--pi-seventh-gradient-color);
    border-radius: 2px;
    box-shadow:
        rgb(50 50 93 / 25%) 0px 2px 5px -1px,
        rgb(0 0 0 / 30%) 0px 1px 3px -1px;
    width: 88px;
    height: 88px;
    display: block;
    margin: 0 auto;
}

.selected-farmer-icon img {
    transform: translate(3%, 3%);
}

.selected-farmer-name {
    font-size: 16px;
    color: var(--pi-primary-color);
    display: block;
}

.selected-farmer-name i {
    font-size: 23px;
    padding: 4px;
    width: 24px;
    height: 24px;
    color: var(--pi-sixth-gradient-color);
    margin-right: 10px;
    position: relative;
    top: -7px;
    display: inline-block;
}

.sf-label {
    display: inline-block;
    background-color: var(--pi-sixth-gradient-color);
    padding: 12px;
    border-radius: 3px;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-right: 10px;
    min-width: 10em;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.farmer-label-subtitle {
    display: block;
    color: var(--pi-seventh-gradient-color);
    font-size: 11px;
}

.farmer-label {
    display: inline-block;
    min-width: 7em;
    margin-right: 15px;
}

.selected-farmer-additional-info .addi-label {
    color: var(--pi-btn-icon-box-bg);
    display: block;
    font-size: 12px;
}

.selected-farmer-additional-info .addi-value {
    color: var(--pi-white-text);
}

.fn-content-info-label {
    color: var(--pi-menu-link-i-color);
}

.selected-farmer-additional-info .addi-label,
.fn-content-info-label {
    font-weight: 500;
}

.fn-content-info-value {
    display: block;
    color: var(--pi-primary-dark-color);
}

.delete-selected-farmer-btn {
    position: absolute !important;
    right: 10px;
    top: 10px;
    border: none;
    width: 34px;
    height: 33px;
    background-color: var(--pi-danger-color);
    border-radius: 3px;
    z-index: 1;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.delete-selected-farmer-btn i {
    color: var(--pi-third-white-color);
}

.delete-selected-farmer-btn:hover {
    opacity: 0.8;
}

.btn-primary.hide-results-btn {
    background-color: var(--pi-danger-color) !important;
}

.notebooks-container {
    width: 100%;
    position: relative;
    /* overflow: auto; */
    border-radius: 3px;
}

.notebook-result-div .globalgap-notebook-card {
    margin-top: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--pi-btn-icon-box-bg);
}

.globalgap-notebook-card {
    position: relative;
    overflow: hidden;
    background-color: var(--pi-select-finder-bg);
    display: block;
    min-height: 10em;
    box-shadow:
        rgb(50 50 93 / 25%) 0px 6px 12px -2px,
        rgb(0 0 0 / 30%) 0px 3px 7px -3px;
    margin-top: 8px;
    border-radius: 4px;
}

.globalgap-notebook-card .globalgap-notebook-icon {
    padding: 10px 25px;
    width: 100%;
    display: flex;
    gap: 5px;
}

.globalgap-notebook-card .globalgap-notebook-icon .globalgap-notebook-text {
    font-size: 14px;
    color: var(--pi-primary-dark-color);
    font-weight: 500;
    margin-top: 3px;
}

.globalgap-notebook-text .fn-code {
    background-color: var(--pi-third-color);
    color: var(--pi-white-text);
    padding: 3px 5px;
    border-radius: 3px;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    font-weight: 300;
    box-shadow:
        rgb(60 64 67 / 30%) 0px 1px 2px 0px,
        rgb(60 64 67 / 15%) 0px 1px 3px 1px;
}

.globalgap-notebook-card .globalgap-notebook-icon i {
    font-size: 20px;
    color: var(--pi-eighth-gradient-color);
    padding: 3px;
    vertical-align: baseline;
    border-radius: 3px;
}

.globalgap-notebook-card .globalgap-notebook-right {
    overflow: auto;
    cursor: pointer;
}

.globalgap-notebook-card .globalgap-notebook-right .content-info {
    padding: 0px 25px 25px;
    max-height: 18em;
    min-height: 15em;
}

.farmer-filters-div {
    margin-top: 15px;
    margin-bottom: 8px;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    padding: 70px 40px 15px;
    position: relative;
    box-shadow:
        rgb(50 50 93 / 25%) 0px 6px 12px -2px,
        rgb(0 0 0 / 30%) 0px 3px 7px -3px;
}

.f-filters-heading {
    position: absolute;
    top: 0;
    left: 0;
    padding: 14px;
    color: var(--pi-sixth-color);
    font-size: 13px;
    font-weight: 600;
    background-color: var(--pi-seventh-gradient-color);
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    width: 100%;
    z-index: 0;
}

.farmer-filters-div .action-fbuttons {
    text-align: end;
    position: absolute;
    bottom: -5px;
    right: 0px;
}

.new-notebook-card {
    background-color: var(--pi-secondary-color);
}

.new-notebook-card:hover {
    opacity: 0.8;
}

.new-notebook-card .nn-title {
    font-size: 14px;
    color: var(--pi-third-white-color);
    transform: translateY(10px);
    padding: 10px;
    display: block;
}

.new-notebook-card img {
    width: 45px;
    height: 45px;
    padding: 5px;
    position: relative;
    transform: translate(0px, 5px);
}

.fn-pagination-div .pagination {
    background-color: transparent !important;
    border-radius: 2px !important;
    margin-top: 10px;
}

.fn-pagination-div .pagination .page-link {
    background-color: var(--pi-eighth-gradient-color);
    border-radius: 3px !important;
    margin: 5px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    font-weight: 600 !important;
}

.fn-pagination-div .pagination .page-link:not(.active):focus,
.fn-pagination-div .pagination .page-link:not(.active):hover {
    background-color: var(--pi-primary-color) !important;
    color: var(--pi-white-text) !important;
}

.add-fn-btn {
    width: 55px;
    height: 65px;
    padding: 5px;
    background-color: var(--pi-third-gradient-color);
    box-shadow: rgb(0 0 0 / 9%) 0px 3px 12px;
}

.globalgap-notebook-card .content-info .btn-with-icon {
    position: absolute !important;
    right: 10px;
    top: 10px;
}

.fn-info-item {
    padding: 5px;
    border-radius: 3px;
    color: var(--pi-primary-color);
    font-size: 10px !important;
    display: flex;
}

.fn-content-info-label {
    padding: 0 6px;
    display: inline-block;
}

.fn-content-info-title {
    display: inline-block;
    color: var(--pi-secondary-color);
    font-size: 11px;
}

.fn-content-info-icon {
    padding: 5px;
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    background: var(--pi-secondary-color);
    border-radius: 4px;
    box-shadow:
        rgb(0 0 0 / 25%) 0px 0.0625em 0.0625em,
        rgb(0 0 0 / 25%) 0px 0.125em 0.5em,
        rgb(255 255 255 / 10%) 0px 0px 0px 1px inset;
}

.fn-content-info-icon i {
    color: var(--pi-third-white-color);
    vertical-align: sub;
    font-size: 12px;
    margin-top: 4px;
}

.form-select.company-filter-content {
    border-radius: 0 !important;
    border: none !important;
    font-size: 14px !important;
    background-color: var(--pi-third-gradient-color) !important;
    color: var(--pi-white-text) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

.f-info-box {
    padding: 15px 15px 10px;
    background-color: var(--pi-seventh-gradient-color);
    border-radius: 3px;
    margin-bottom: 10px;
    margin-top: 10px;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 4px 6px -1px,
        rgb(0 0 0 / 6%) 0px 2px 4px -1px;
}

.card-education .f-info-box {
    padding: 0 0 0 !important;
    background-color: var(--pi-third-white-color) !important;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 4px 6px -1px,
        rgb(0 0 0 / 6%) 0px 2px 4px -1px;
    /* height: 100%; */
}

.card-education .f-info-box .additional-buttons {
    background-color: var(--pi-select-finder-bg);
    padding: 10px 20px;
    margin-top: 12px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: 1px solid var(--pi-btn-icon-box-bg);
}

.f-info-title {
    color: var(--pi-input-bg);
    font-weight: 900;
}

.f-info-subtitle {
    display: block;
    background-color: var(--pi-btn-icon-box-bg);
    width: fit-content;
    border-radius: 2px;
    padding: 2px 10px;
    margin-left: 10px;
    margin-top: 10px;
    color: var(--pi-secondary-color);
    font-weight: 700;
}

.special-tabs-menu {
    padding: 0;
    border-radius: 3px;
    background-color: var(--pi-eighth-gradient-color);
    box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px;
    text-align: center;
}

.special-tabs-menu .special-tab-btn {
    padding: 25px;
    border: none;
    background-color: transparent;
    transition: all 2ms;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: relative;
}

.special-tabs-menu .special-tab-btn:hover,
.special-tabs-menu .special-tab-btn.stab-active {
    background-color: var(--pi-third-gradient-color) !important;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}

.special-tabs-menu .special-tab-btn .stab-icon {
    background-color: var(--pi-input-bg);
    padding: 8px;
    width: 32px;
    height: 32px;
    border-radius: 2px;
    margin: 4px auto;
    margin-top: 0 !important;
    box-shadow:
        rgb(0 0 0 / 40%) 0px 2px 4px,
        rgb(0 0 0 / 30%) 0px 7px 13px -3px,
        rgb(0 0 0 / 20%) 0px -3px 0px inset;
}

.special-tabs-menu .special-tab-btn .stab-icon i {
    color: var(--pi-secondary-color);
    font-size: 15px;
}

.special-tabs-menu .special-tab-btn .stab-text {
    color: var(--pi-fifth-color);
    font-weight: 600;
    display: block;
}

.special-tabs-menu .special-tab-btn .stab-subtext {
    color: var(--pi-white-text);
    font-size: 10px;
}

/* FIN INDEX 2 */

/* INDEX 3 (SELECCION APP DE MOD.) */

.fn-additional-info-box {
    padding: 8.888px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    background-color: var(--pi-input-bg);
}

.cdc-type-selector {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 15% !important;
}

/* .main-wrapper {
    overflow: hidden;
} */

/* .main-wrapper .home-title-globalgap {
    margin: 5px;
    overflow-x: hidden;
} */

.main-wrapper .short-title {
    margin-bottom: 80px !important;
    padding-bottom: 100px !important;
}

.home-title {
    /* background: var(--pi-third-gradient-color); */
    background: var(--pi-white-text);
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.cc-action-buttons {
    padding: 0;
    border-radius: 3px;
    background-color: var(--pi-seventh-gradient-color);
    box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px;
    text-align: center;
    margin: 20px;
}

.special-quick-btn {
    display: block !important;
    padding: 20px;
    background-color: var(--pi-third-gradient-color);
    border: none;
    position: relative;
    transition: all 1s !important;
    cursor: pointer !important;
    width: 100% !important;
    height: 100% !important;
}

.sp-btn-icon-box {
    width: 28px;
    height: 27px;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-49%);
    background-color: var(--pi-third-white-color);
    border: none;
    border-radius: 3px;
    box-shadow:
        rgba(0, 0, 0, 0.4) 0px 2px 4px,
        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.sp-btn-icon-box i {
    vertical-align: bottom;
    color: var(--pi-secondary-color);
    font-size: 14px;
}

.sp-quick-text {
    color: var(--pi-white-text);
    font-size: 12px;
    margin-top: 6px;
    font-weight: 500;
}

.sp-quick-subtext {
    color: var(--pi-sixth-color);
    font-size: 11px;
    font-weight: 300;
}

.special-quick-btn:hover .sp-btn-icon-box,
.special-quick-btn:focus .sp-btn-icon-box {
    background-color: var(--pi-secondary-color);
}

.special-quick-btn:hover .sp-btn-icon-box i,
.special-quick-btn:focus .sp-btn-icon-box i {
    color: var(--pi-third-white-color);
}

.home-title:after {
    z-index: -1;
    -webkit-transform: translateX(-50%) skew(-75deg);
    transform: translateX(-50%) skew(-75deg);
    background-image: -webkit-linear-gradient(94deg, #383e45, #626870);
    background-image: -o-linear-gradient(94deg, #383e45 0, #626870 100%);
    background-image: linear-gradient(-4deg, #383e45, #626870);
}

.home-title .title {
    text-align: left;
    color: var(--pi-seventh-gradient-color);
    max-width: 1100px;
    font-size: 18px;
    display: block;
}

.home-title .subtitle {
    color: var(--pi-second-gray-color);
    max-width: 980px;
    font-size: 13px;
    font-weight: 400;
}

.main-wrapper .tools {
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0px 50px 42px;
    min-height: 55vh;
}

.tools-item {
    position: relative;
    border-radius: 3px;
    background-color: var(--pi-input-bg);
    height: 100%;
}

/* CUE */

.tools-item.tools-item-cue .tools-item-icon {
    display: inline-block;
    margin-right: 10px;
}

.tools-item.tools-item-cue h3 {
    display: inline-block;
    font-size: 12px;
    font-weight: 800 !important;
}

.tools-item.tools-item-cue .tools-item-content {
    margin-bottom: 50px !important;
}

.tools-item.tools-item-cue {
    border-radius: 3px;
    background-color: var(--pi-white-text);
    box-shadow:
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    height: 100%;
}

.tools-item.tools-item.tools-item-cue .progress-bar-div {
    min-height: 61px !important;
}

.cue-notebook-card {
    background-color: var(--pi-white-text);
    padding: 20px 20px 85px 82px;
    border-radius: 3px;
    position: relative;
    min-height: 26em;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
    border-bottom: 3px solid var(--pi-eighth-gradient-color);
}

.fn-info-item.cue-item {
    margin-bottom: 12px !important;
}

.cue-notebook-icon {
    background-color: var(--pi-white-text);
    position: absolute;
    left: -5px;
    top: -10px;
    width: 80px;
    height: 80px;
    border-radius: 3px;
    padding-top: 8px;
    z-index: 2;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.cue-notebook-icon .cue-icon {
    text-align: center;
}

.cue-icon i {
    font-size: 26px;
    color: var(--pi-success-color);
}

.cue-notebook-icon .cue-notebook-text {
    font-size: 10px;
    background-color: var(--pi-eighth-gradient-color);
    color: var(--pi-white-text);
    position: absolute;
    bottom: 0;
    text-align: center;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    padding: 3px;
}

.cue-notebook .rea-code-label {
    background-color: var(--pi-secondary-color);
    width: max-content;
    padding: 4px 10px;
    position: absolute;
    right: 5px;
    top: -12px;
    border-radius: 2px;
    font-size: 12px;
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}

.cue-notebook .rea-code {
    margin-left: 5px;
    background-color: var(--pi-third-gradient-color);
    border-radius: 2px;
    padding: 2px 5px;
    color: var(--pi-fifth-color);
    font-weight: 400;
}

.cue-progress-bar {
    position: absolute !important;
    left: 82px !important;
    top: -10px !important;
    padding: 12px !important;
    margin-bottom: 0 !important;
    background-color: var(--pi-select-finder-bg);
    border-radius: 3px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    max-width: 84% !important;
}

.cue-notebook-card .content-info {
    margin-bottom: 65px;
    margin-top: 45px;
}

.exploitation-box {
    position: absolute;
    bottom: 0px;
    left: 0;
    padding: 10px 15px 10px 80px;
    background-color: var(--pi-eighth-gradient-color);
    min-height: 6em;
    border-radius: 3px;
    margin: 25px 15px;
}

.cue-exploitation-icon {
    background-color: var(--pi-first-gray-color);
    position: absolute;
    left: -5px;
    top: -25px;
    width: 75px;
    height: 65px;
    border-radius: 3px;
    padding-top: 13px;
    z-index: 2;
    box-shadow:
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.cue-exploitation-icon .exploitation-icon {
    text-align: center;
}

.exploitation-icon i {
    font-size: 20px;
    color: var(--pi-seventh-gradient-color);
}

.cue-exploitation-icon .exploitation-text {
    font-size: 9px;
    background-color: var(--pi-seventh-gradient-color);
    color: var(--pi-white-text);
    position: absolute;
    bottom: 0;
    text-align: center;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    padding: 3px;
    display: block;
    width: 100%;
}

.cue-content-info-icon {
    padding: 5px;
}

.cue-content-info-icon i {
    font-size: 15px;
    margin-right: 5px;
    color: var(--pi-fifth-color);
    vertical-align: text-bottom;
}

.exploitation-label {
    font-size: 12px;
    color: var(--pi-white-text);
    font-weight: 500;
}

.cue-content-info-value {
    font-size: 11px;
    color: var(--pi-btn-icon-box-bg);
    padding: 5px;
}

.property-code-label {
    background-color: var(--pi-sixth-color);
    width: max-content;
    padding: 4px 10px;
    margin-bottom: 20px;
    border-radius: 2px;
    font-size: 12px;
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
    position: absolute;
    top: -15px;
    right: -3px;
}

.property-code {
    margin-left: 5px;
    background-color: var(--pi-third-gradient-color);
    border-radius: 2px;
    padding: 2px 5px;
    color: var(--pi-secondary-color);
    font-weight: 400;
}

.cue-btn-box {
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 100%;
    height: 3em;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.assistant-sidebar-item {
    background-color: var(--pi-eighth-gradient-color);
    display: block;
    margin-bottom: auto;
    padding: 10px;
    width: 100%;
    border-radius: 4px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.category-label {
    color: var(--pi-fifth-color);
    font-size: 12px;
    font-weight: 500;
}

.category-name {
    font-size: 17px;
    color: var(--pi-white-text);
    font-weight: 100;
}

/* FIN CUE */

.tools-item a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 15px;
    position: relative;
}

.tools-item-icon,
.tools-item h3 {
    margin-bottom: 12px;
}

.tools-item-icon img {
    width: 50px;
    height: 50px;
    background-color: var(--pi-white-text);
    padding: 10px;
    border-radius: 2px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.tools-item h3 {
    font-size: 13px;
    color: var(--pi-primary-color);
    font-weight: 500 !important;
}

.tools-item-content {
    font-size: 12px;
    line-height: 16px;
    max-height: 80px;
    overflow: auto;
    margin-bottom: 50px !important;
}

.tools-item-content p {
    font-size: 11px;
    color: var(--pi-primary-dark-color);
    font-weight: 500;
}

.progress-bar-div {
    position: absolute;
    left: 0;
    bottom: 0px;
    padding: 10px 20px;
    background-color: var(--pi-white-text);
    min-height: 62.5px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.progress-bar-div.disabled {
    background-color: var(--pi-select-item-bg) !important;
}

.progress-bar-div-cc {
    padding: 15px 0;
    position: relative;
    margin-bottom: 10px;
}

.cc-btn-complete {
    border: none;
    background-color: var(--pi-secondary-color);
    border-radius: 2px;
    padding: 2px 7px;
    font-size: 13px;
    color: var(--pi-white-text);
    position: absolute;
    top: 10px;
    right: 10px;
    width: 7em;
    font-weight: 600;
    z-index: 9;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
        rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

.cc-btn-complete:hover {
    background-color: #50cd89;
}

.cc-btn-complete i {
    color: var(--pi-select-finder-bg);
    font-size: 14px;
    vertical-align: text-bottom;
    margin-right: 3px;
}

.cc-btn-blocked {
    border: none;
    background-color: var(--pi-first-gray-color);
    border-radius: 3px;
    padding: 5px;
    width: 32px;
    height: 32px;
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.cc-btn-blocked:hover {
    background-color: red;
}

.cc-btn-blocked:hover i {
    color: var(--pi-first-gray-color);
}

.cc-btn-blocked i {
    color: red;
    font-size: 16px;
    display: block;
}

.info-cc-div {
    /* padding: 0 0 20px; */
    color: var(--pi-third-white-color);
    text-align: left;
}

.cc-title-box {
    display: block;
    width: 100%;
}

.cc-title {
    font-weight: 600;
    display: block;
    background-color: rgb(0 0 0 / 20%);
    color: var(--pi-btn-icon-box-bg);
    font-size: 13px;
    padding: 12px;
}

.cc-resume-item-special .cc-item-label {
    font-size: 11px;
    margin-right: 4px;
    display: block;
    white-space: nowrap;
    color: var(--pi-primary-color);
}

.cc-resume-item-special .cc-item-label i {
    color: var(--pi-secondary-color);
    margin-right: 3px;
}

.cc-item-value {
    font-size: 10px;
    margin-top: 10px;
}

.big-number {
    padding: 2px;
    font-size: 14px;
    position: relative;
    vertical-align: middle;
    bottom: 1px;
    background-color: var(--pi-fourth-white-color);
    width: 26px;
    height: 26px;
    border-radius: 2px;
    margin-right: 4px;
    text-align: center;
    display: inline-block;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.cc-resume-item {
    padding: 15px;
    background-color: var(--pi-secondary-color);
    border-radius: 3px;
    margin-right: 20px;
    width: 100%;
    height: 100%;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px;
}

.cc-resume-item .cc-item-label i {
    color: var(--pi-third-white-color) !important;
}

.cc-resume-item-special {
    border-radius: 3px;
    margin-bottom: 15px;
}

.cc-resume-item-special .cc-item-label,
.cc-resume-item-special .cc-item-value {
    font-size: 11px !important;
}

.cc-resume-item-special .cc-item-value {
    color: var(--pi-secondary-color);
}

.resume-header-title {
    position: absolute;
    top: -20px;
    background-color: var(--pi-primary-color);
    padding: 10px 15px;
    border-radius: 2px;
    color: var(--pi-white-text);
    font-size: 14px;
    font-weight: 400;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}

.modal-resume-card {
    background-color: var(--pi-third-white-color);
    height: 100%;
    border-radius: 3px;
    position: relative;
}

.modal-resume-label {
    padding: 5px 20px;
    position: absolute;
    width: 100%;
    font-size: 12px;
    color: var(--pi-secondary-color);
    font-weight: 600;
}

.modal-resume-value {
    padding: 25px 20px 5px;
    max-height: 65px;
    overflow: auto;
    font-size: 11px;
    color: var(--pi-primary-dark-color);
}

.info-cc-progress {
    padding: 12px;
    border-radius: 2px;
    /* margin-bottom: 20px; */
}

.special-tools-item {
    background-color: var(--pi-eighth-gradient-color);
    border-right: none !important;
    border-bottom: none !important;
}

.special-tools-item h3 {
    color: var(--pi-white-text) !important;
}

.special-tools-item .tools-item-content p {
    color: var(--pi-fifth-color) !important;
}

.special-tools-item .progress-bar-div {
    border-top: none !important;
    background-color: var(--pi-secondary-color) !important;
}

.fn-resume-div-graph {
    background-color: var(--pi-third-white-color);
    border-radius: 4px;
    padding: 20px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}

.fn-update-box {
    color: var(--pi-sixth-gradient-color);
}

.fn-update-card {
    padding: 20px;
    background: var(--pi-select-finder-bg);
    border-radius: 4px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    margin-bottom: 20px;
}

.fn-update-card:last-child {
    margin-bottom: 0 !important;
}

.fn-update-log-date {
    color: var(--pi-sixth-gradient-color);
    font-weight: 500;
}

.fn-log-date {
    display: block;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pi-eighth-gradient-color);
}

.fn-log-date-icon i {
    color: var(--pi-sixth-gradient-color);
}

.notebook-code-label {
    font-size: 14px;
    color: var(--pi-third-color);
    font-weight: 500;
}

/* log new */

.fn-update-item-new-box {
    background-color: var(--pi-white-text);
    padding: 25px 10px 10px;
    position: relative;
    border-radius: 4px;
    margin-bottom: 30px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.fn-item-new-title {
    position: absolute;
    top: -12px;
    padding: 5px;
    background-color: var(--pi-secondary-color);
    border-radius: 3px;
    width: 10em;
    font-size: 11px;
    color: var(--pi-fifth-color);
    font-weight: 500;
}

.fn-update-item-new {
    background-color: var(--pi-first-gray-color);
    padding: 5px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    height: 50px;
    overflow-y: auto;
}

.fn-update-item-new .fn-update-item-title {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    color: var(--pi-secondary-color);
    font-weight: 400;
}

.fn-update-item-new .fn-update-item-value {
    display: block;
    font-size: 11px;
    color: var(--pi-menu-link-i-color);
    font-weight: 600;
}

/* log old */

.fn-update-item-old-box {
    background-color: var(--pi-white-text);
    padding: 25px 10px 10px;
    position: relative;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.fn-item-old-title {
    position: absolute;
    top: -12px;
    padding: 5px;
    background-color: var(--pi-danger-color);
    border-radius: 3px;
    width: 10em;
    font-size: 11px;
    color: var(--pi-white-text);
    font-weight: 500;
}

.fn-update-item-old {
    background-color: rgb(241 65 108 / 69%);
    padding: 5px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
    height: 50px;
    overflow-y: auto;
}

.fn-update-item-old .fn-update-item-title {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    color: var(--pi-white-text);
    font-weight: 400;
}

.fn-update-item-old .fn-update-item-value {
    display: block;
    font-size: 11px;
    color: var(--pi-white-text);
    font-weight: 600;
}

.special-quick-btn.disabled {
    background-color: var(--pi-second-gradient-color) !important;
    cursor: default !important;
}

.special-quick-btn.disabled .sp-btn-icon-box {
    background-color: var(--pi-second-gray-color) !important;
}

.special-quick-btn.disabled .sp-btn-icon-box i {
    color: var(--pi-btn-icon-box-bg) !important;
}

.global-container {
    margin: 20px;
}

.field-notebook-main-box {
    padding: 15px;
    background-color: var(--pi-third-white-color);
    border-radius: 3px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    height: 111px;
}

.field-notebook-main-box .fn-main-title {
    display: block;
    font-size: 14px;
    color: var(--pi-secondary-color);
    margin-bottom: 10px;
}

.field-notebook-main-box .fn-main-title .fn-main-title-icon {
    padding: 2px;
    background-color: var(--pi-secondary-color);
    border-radius: 3px;
    width: 25px;
    height: 25px;
    display: inline-block;
    text-align: center;
    box-shadow:
        rgba(0, 0, 0, 0.4) 0px 2px 4px,
        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.field-notebook-main-box .fn-main-title .fn-main-title-icon i {
    color: var(--pi-white-text);
    vertical-align: unset;
    position: relative;
    bottom: 1px;
}

.field-notebook-main-box .fn-main-code {
    font-size: 12px;
    font-weight: 500;
    color: var(--pi-primary-dark-color);
}

.field-notebook-main-box .fn-main-state-complete-label {
    padding: 2px 6px;
    background-color: var(--pi-white-text);
    color: var(--pi-success-color);
    border-radius: 2px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.field-notebook-main-box .fn-main-state-incomplete-label {
    padding: 2px 6px;
    background-color: var(--pi-white-text);
    color: var(--pi-danger-color);
    border-radius: 2px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.field-notebook-main-box .fn-main-text {
    font-size: 10px;
    display: block;
    margin-top: 10px;
    font-weight: 700;
    color: var(--pi-primary-dark-color);
}

.temporal-div {
    background-color: var(--pi-third-white-color);
    border-radius: 3px;
    height: 100%;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

/* FIN INDEX 3 */

/* ADMIN INDEX */

.admin-tools-container {
    background: #fff;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    position: relative;
}

.admin-item {
    border-right: none !important;
    border-bottom: none !important;
}

.admin-home-title {
    padding: 25px;
    background-color: var(--pi-primary-color);
}

.admin-home-title .title {
    font-size: 24px;
    color: var(--pi-fourth-white-color);
}

.admin-home-title .subtitle {
    font-size: 14px;
    color: var(--pi-btn-icon-box-bg);
}

/* FIN ADMIN INDEX */

/* CONTACTOS */

.office-info-card {
    padding: 10px;
    height: 50px;
    border-radius: 1px;
    background-color: var(--pi-third-white-color);
    margin-bottom: 20px;
    border-bottom: 3px solid var(--pi-second-white-color);
    cursor: pointer;
    display: flex;
}

.office-info-card:hover,
.office-info-card.active {
    background-color: var(--pi-secondary-color) !important;
}

.office-info-card:hover .office-info-icon,
.office-info-card.active .office-info-icon {
    background-color: var(--pi-white-text) !important;
}

.office-info-card:hover .office-info-icon i,
.office-info-card.active .office-info-icon i {
    color: var(--pi-secondary-color) !important;
}

.office-info-card:hover .office-info-text,
.office-info-card.active .office-info-text {
    color: var(--pi-btn-icon-box-bg) !important;
}

.office-info-icon {
    padding: 10px;
    background-color: var(--pi-secondary-color);
    border-radius: 2px;
    width: 48px;
    height: 48px;
    text-align: center;
    box-shadow:
        rgb(0 0 0 / 40%) 0px 2px 4px,
        rgb(0 0 0 / 30%) 0px 7px 13px -3px,
        rgb(0 0 0 / 20%) 0px -3px 0px inset;
}

.office-info-icon i {
    font-size: 23px;
    color: var(--pi-select-item-bg);
    vertical-align: text-top;
}

.office-info-text {
    font-weight: 500;
    margin: 10px 10px 0px;
    font-size: 12px;
    color: var(--pi-secondary-color);
}

.offices-card-div {
    height: 10em;
    overflow: auto;
}

.contact-item {
    border-radius: 3px !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 10px !important;
    border-left: 3px solid transparent;
}

.contact-item .symbol .symbol-label {
    border-radius: 2px !important;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px !important;
}

.contact-item.active {
    background-color: var(--pi-fourth-white-color);
    /* border-left: 4px solid var(--pi-seventh-gradient-color); */
    box-shadow: rgb(0 0 0 / 5%) 0px 1px 2px 0px;
}

.offices-contacts-box {
    max-height: 30em;
    overflow: auto;
}

.details-contact-icon {
    font-size: 20px;
    padding: 4px;
    border-radius: 2px;
}

/* FIN CONTACTOS */

/* FILTROS RAPIDOS */

.quick-filters-div {
    padding: 5px 0 0;
    position: absolute;
    top: -15px;
    left: 0;
    z-index: 3;
}

.quick-filters-label {
    padding: 4px 8px;
    background-color: var(--pi-secondary-color);
    /* width: 89px; */
    border-radius: 2px;
    color: var(--pi-white-text);
    z-index: 1;
    font-size: 11px;
    margin-left: 15px;
    font-weight: 600;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.quick-filters-label i {
    font-size: 13px;
    margin-right: 5px;
    color: var(--pi-white-text);
}

.quick-filter-btn {
    min-width: 30px !important;
    padding: 3px 8px !important;
    vertical-align: baseline !important;
    font-size: 12px !important;
    color: var(--pi-white-text) !important;
    background-color: var(--pi-third-color) !important;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px !important;
    border-radius: 2px !important;
}

.btn.quick-filter-btn:hover,
.btn.quick-filter-btn:focus,
.filter-icon:hover {
    background-color: var(--pi-primary-color) !important;
}

/* FIN FILTROS RAPIDOS */

/* ASISTENTE */

.card.resume-card {
    background-color: transparent !important;
}

.resume-card-body {
    background-color: var(--pi-first-gradient-color);
}

.resume-card-item {
    background-color: var(--pi-fourth-white-color);
    border-radius: 3px;
    padding: 3px 7px;
    box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px;
    line-break: anywhere;
    height: 90%;
}

#assistant-wrapper {
    /* background-color: var(--pi-first-gradient-color); */
    /* height: 100vh; */
    overflow: hidden;
}

#ab-previous-btn {
    font-weight: 100;
    border: none !important;
    background-color: var(--pi-eighth-gradient-color) !important;
    color: var(--pi-white-text);
    font-size: 14px;
    padding: 20px;
    width: 80%;
    border-radius: 3px;
    cursor: pointer;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    transition: all 0.4s;
}

#ab-next-btn {
    font-weight: 100;
    border: none !important;
    background-color: var(--pi-eighth-gradient-color) !important;
    color: var(--pi-white-text);
    font-size: 14px;
    padding: 20px;
    width: 80%;
    border-radius: 3px;
    cursor: pointer;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    transition: all 0.4s;
}

#ab-finish-btn {
    font-weight: 100;
    border: none !important;
    background-color: var(--pi-eighth-gradient-color) !important;
    color: var(--pi-white-text);
    font-size: 14px;
    padding: 20px;
    width: 80%;
    border-radius: 3px;
    cursor: pointer;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    transition: all 0.4s;
}

#ab-pdf-btn {
    font-weight: 100;
    border: none !important;
    background-color: var(--pi-eighth-gradient-color) !important;
    color: var(--pi-white-text);
    font-size: 14px;
    padding: 20px;
    width: 80%;
    border-radius: 3px;
    cursor: pointer;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
        rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    transition: all 0.4s;
}

#ab-pdf-btn .abpdf-icon-box,
#ab-finish-btn .abf-icon-box,
#ab-next-btn .abn-icon-box,
#ab-previous-btn .abp-icon-box {
    margin: 0 auto;
    margin-bottom: 5px;
    width: 28px;
    height: 24px;
    border-radius: 2px;
    text-align: center;
}

.abp-icon-box i,
.abn-icon-box i,
.abf-icon-box i,
.abpdf-icon-box i {
    margin: 0 auto;
    position: relative;
    color: var(--pi-fourth-color);
    font-size: 20px !important;
}

#ab-previous-btn:not(:disabled):hover,
#ab-next-btn:not(:disabled):hover,
#ab-finish-btn:not(:disabled):hover,
#ab-pdf-btn:not(:disabled):hover {
    background-color: var(--pi-third-color) !important;
}

#ab-pdf-btn:disabled,
#ab-finish-btn:disabled,
#ab-next-btn:disabled,
#ab-previous-btn:disabled {
    cursor: default !important;
    opacity: 0.7 !important;
}

.select-finder-selected-value {
    padding: 2px 5px;
    background-color: var(--pi-seventh-gradient-color);
    border-radius: 2px;
    margin-top: 2px;
    color: var(--pi-btn-icon-box-bg);
    position: absolute;
    bottom: -24px;
    left: 0;
    width: 100%;
    max-height: 23px;
    overflow: auto;
}

.sv-finder {
    font-size: 9px;
    margin-right: 5px;
}

.sv-value {
    font-size: 10px;
    font-weight: 700;
}

.assistant-resume-title {
    padding: 3px 10px;
    background-color: var(--pi-white-text);
    color: var(--pi-primary-dark-color);
    font-size: 12px;
    font-weight: 600;
    width: 17em;
    border-radius: 2px;
    position: absolute;
    top: -25px;
    left: -10px;
    box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px;
}

.assistant-label {
    padding: 5px;
    background-color: var(--pi-eighth-gradient-color);
    font-size: 12px;
    color: var(--pi-white-text);
    border-radius: 2px;
    display: block;
    margin-bottom: 4px;
    box-shadow:
        rgb(60 64 67 / 30%) 0px 1px 2px 0px,
        rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    border-bottom: 1px solid var(--pi-third-gradient-color);
}

.assistant-label-c {
    padding: 8px;
    background-color: var(--pi-eighth-gradient-color);
    font-size: 13px;
    color: var(--pi-white-text);
    border-radius: 4px;
    display: block;
    margin-bottom: 20px;
    box-shadow:
        rgb(60 64 67 / 30%) 0px 1px 2px 0px,
        rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    border-bottom: 1px solid var(--pi-third-gradient-color);
}

.assistant-resume-value {
    max-height: 17px;
    overflow: auto;
}

.form-control.form-select-sm.assistant-field,
.form-control.form-control-sm.assistant-field {
    /* background-color: var(--pi-fourth-white-color) !important; */
    border: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 12px !important;
}

.form-control.form-select-sm.assistant-field {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231891ac' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding: 9px !important;
}

.form-control.form-select-sm.assistant-field:focus,
.form-control.form-control-sm.assistant-field:focus {
    background-color: var(--pi-white-text) !important;
}

/* CARD INPUT ASISTENTE */

.assistant-label-card {
    padding: 10px;
    background-color: var(--pi-eighth-gradient-color);
    font-size: 12px;
    color: var(--pi-white-text);
    display: block;
    border-radius: 3px;
    margin-bottom: 10px;
    box-shadow:
        rgb(60 64 67 / 30%) 0px 1px 2px 0px,
        rgb(60 64 67 / 15%) 0px 1px 3px 1px;
    border: 1px solid var(--pi-third-gradient-color);
}

.assistant-label-card-subtitle {
    font-size: 11px;
    display: block;
    color: var(--pi-fifth-color);
}

.form-control.form-select-sm.assistant-field-card,
.form-control.form-control-sm.assistant-field-card {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding: 10px;
    height: 70px;
    font-size: 12px !important;
}

.form-control.form-select-sm.assistant-field-card {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231891ac' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding: 9px !important;
}

.form-control.form-select-sm.assistant-field-card:focus,
.form-control.form-control-sm.assistant-field-card:focus {
    background-color: var(--pi-white-text) !important;
}

/* FIN CARD INPUT ASISTENTE */

.assistant-label-subtitle {
    font-size: 11px;
    color: var(--pi-fifth-color);
}

.assistant-delete-btn {
    position: absolute !important;
    right: -5px;
    top: -6px;
}

.assistants-card {
    position: relative;
    padding: 30px 10px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: var(--pi-sixth-gradient-color);
    box-shadow: rgb(0 0 0 / 5%) 0px 0px 0px 1px;
}

.assistant-card-icon {
    position: absolute;
    left: -5px;
    top: -6px;
    padding: 7px 10px;
    color: var(--pi-white-text);
    height: 32px;
    font-size: 12px;
    background-color: var(--pi-secondary-color);
    text-align: center;
    border-radius: 3px;
    box-shadow:
        rgba(0, 0, 0, 0.4) 0px 2px 4px,
        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.assistant-card-icon i {
    font-size: 15px;
    vertical-align: middle;
    color: var(--pi-btn-icon-box-bg);
}

#assistant-sidebar {
    min-height: 95vh;
    padding-bottom: 20px;
    border-radius: 8px;
    position: relative;
}

.assistant-steps-div {
    padding: 15px 15px 30px;
    margin-top: 20px;
    background-color: var(--pi-eighth-gradient-color);
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
    min-height: 50vh;
}

.assistant-sidebar-div {
    margin-top: 95px;
    margin-bottom: 20px;
    margin-left: 20px;
}

.sidebar-info-cards-div {
    padding: 15px;
    background-color: var(--pi-eighth-gradient-color);
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}

.sidebar-info-card {
    background-color: var(--pi-third-gradient-color);
    border-radius: 3px;
    height: 100%;
    box-shadow:
        rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
        rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.sidebar-info-card .item-top-title {
    padding: 3px 5px 0px;
    font-size: 12px;
    font-weight: 500;
    color: var(--pi-fifth-color);
}

.sidebar-info-card .item-top-text {
    padding: 5px;
    font-size: 11px;
    font-weight: 200;
    color: var(--pi-white-text);
}

#assistant-sidebar-aux {
    background-color: var(--pi-second-gradient-color);
    padding: 30px 12px;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}

.as-resume-div {
    overflow: auto;
    height: 73vh;
}

.as-resume-div::-webkit-scrollbar {
    display: none !important;
}

.assistant-sidebar-card-1 {
    padding: 15px;
    background-color: var(--pi-sixth-gradient-color);
    position: relative;
    margin-bottom: 10px;
    border-radius: 3px;
}

.assistant-sidebar-card-1 .assistant-sidebar-head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: var(--pi-third-gradient-color);
    color: var(--pi-white-text);
}

.assistant-sidebar-card-1 .assistant-sidebar-head .sidebar-head-text {
    font-weight: 500;
    font-size: 12px;
}

.assistant-sidebar-card-1 .assistant-sidebar-body {
    margin-top: 38px;
    font-size: 11px;
    color: var(--pi-btn-icon-box-bg);
}

.assistant-sidebar-card {
    padding: 15px;
    background-color: var(--pi-third-white-color);
    position: relative;
    height: 100px;
    margin-bottom: 10px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    border-radius: 3px;
}

.assistant-sidebar-card .assistant-sidebar-head {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 6px;
    background-color: var(--pi-first-gray-color);
    color: var(--pi-primary-color);
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
}

.assistant-sidebar-card .assistant-sidebar-head .sidebar-head-text {
    font-weight: 500;
    font-size: 12px;
}

.assistant-sidebar-card .assistant-sidebar-body {
    margin-top: 27px;
    font-weight: 500;
    font-size: 11px;
    color: var(--pi-primary-dark-color);
}

.assistant-fn-info {
    /* padding: 15px; */
    margin-top: 20px;
    background-color: var(--pi-white-text);
    display: block;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
}

.a-fn-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--pi-primary-color);
}

.assistant-content-item {
    display: inline-block;
    margin-bottom: 3px;
    margin-top: 10px;
    padding: 9px;
    background-color: var(--pi-sixth-gradient-color);
    border-radius: 3px;
    min-width: 90px;
    margin-right: 11px;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.assistant-content-item-title {
    width: 35em;
    position: absolute;
    top: -8px;
    padding: 9px;
    background-color: var(--pi-primary-color);
    border-radius: 3px;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.a-content-name {
    color: var(--pi-btn-icon-box-bg);
    font-size: 11px;
}

.a-content-description {
    font-size: 10px;
    color: var(--pi-white-text);
    font-weight: 600;
}

.fn-step-title {
    font-size: 13px;
    color: var(--pi-primary-color);
    margin-top: 10px;
}

.fn-step-subtitle {
    font-size: 11px;
    color: var(--pi-second-gray-color);
    margin-bottom: 11px;
}

.assistant-progress-bar {
    display: flex;
    justify-content: center !important;
    gap: 150px;
    width: 100%;
    position: absolute;
    left: 0;
    /* background-color: var(--pi-third-gradient-color); */
}

.stepper.stepper-pills .stepper-item .stepper-icon {
    box-shadow:
        rgba(17, 17, 26, 0.05) 0px 1px 0px,
        rgba(17, 17, 26, 0.1) 0px 0px 8px !important;
}

.stepper.stepper-pills .stepper-item .stepper-label .stepper-title {
    font-weight: 200 !important;
    font-size: 14px !important;
}

.progress-point {
    min-width: 135px;
    display: inline-block;
    padding: 8px;
    font-size: 11px;
    border-radius: 2px;
    background-color: var(--pi-sixth-gradient-color);
    color: var(--pi-btn-icon-box-bg);
    position: relative;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.point-name {
    font-weight: 600;
}

.point-text {
    font-size: 9px;
}

.point-icon {
    text-align: center;
    position: absolute;
    right: -5px;
    top: -3px;
    background-color: var(--pi-fourth-white-color);
    width: 25px;
    height: 25px;
    border-radius: 2px;
    box-shadow:
        rgb(0 0 0 / 40%) 0px 2px 4px,
        rgb(0 0 0 / 30%) 0px 7px 13px -3px,
        rgb(0 0 0 / 20%) 0px -3px 0px inset;
}

.point-icon i {
    font-size: 15px;
    color: var(--pi-primary-color);
    transform: translate(1px, 4px);
}

.point-icon.active-point {
    background-color: var(--pi-primary-dark-color) !important;
}

.point-icon.active-point i {
    color: var(--pi-btn-icon-box-bg) !important;
    animation: blinker3 1s ease-in-out infinite alternate;
}

.months-consumptions-box {
    max-height: 35em;
    overflow: auto;
    padding: 5px 20px;
    background-color: var(--pi-third-gradient-color);
    border-radius: 3px;
}

.months-consumptions-box-resume {
    padding: 0px 15px !important;
    background-color: transparent !important;
}

.months-data-buttons {
    padding: 15px;
    background-color: var(--pi-third-gradient-color);
    border-radius: 3px;
    margin-bottom: 10px;
    box-shadow:
        rgb(50 50 105 / 15%) 0px 2px 5px 0px,
        rgb(0 0 0 / 5%) 0px 1px 1px 0px;
}

.month-data-card {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 3px;
    margin-top: 25px;
}

.month-data-card-resume {
    background-color: var(--pi-white-text) !important;
}

.month-card {
    padding: 65px 0 0;
    position: relative;
}

.card-e label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 35px 10px 10px;
    width: 100%;
    background-color: rgb(0 158 247 / 50%);
    color: #fff;
    display: block;
    border-top-left-radius: 3px;
}

.card-e input,
.card-e input:focus {
    border: none;
    width: 100%;
    border-radius: 0;
    font-size: 12px;
    padding: 5px;
    border-bottom-left-radius: 3px;
    outline: 0;
}

.card-g label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 35px 10px 10px;
    width: 100%;
    background-color: rgb(255 177 0 / 50%);
    color: #fff;
    display: block;
}

.card-g input,
.card-g input:focus {
    border: none;
    width: 100%;
    border-radius: 0;
    font-size: 12px;
    padding: 5px;
    outline: 0;
}

.card-w label {
    position: absolute;
    top: 0;
    left: 0;
    padding: 35px 10px 10px;
    width: 100%;
    background-color: rgb(6 140 215 / 50%);
    color: #fff;
    display: block;
    border-top-right-radius: 3px;
}

.card-w input,
.card-w input:focus {
    border: none;
    width: 100%;
    border-radius: 0;
    font-size: 12px;
    padding: 5px;
    border-bottom-right-radius: 3px;
    outline: 0;
}

@keyframes blinker3 {
    to {
        opacity: 0;
    }
}

.file-time-label {
    position: absolute;
    font-size: 9px;
    right: 5px;
    top: 5px;
    font-weight: 500;
    background-color: var(--pi-third-color);
    color: var(--pi-white-text);
    padding: 0px 3px;
    border-radius: 2px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.file-icon-one {
    width: 2.5em;
    height: 2.5em;
    font-size: 10px;
    background-color: var(--pi-danger-color);
    color: var(--pi-white-text);
    text-align: center;
    padding-top: 7px;
}

.file-icon-two {
    width: 2.5em;
    height: 2.5em;
    font-size: 10px;
    background-color: var(--pi-sixth-gradient-color);
    color: var(--pi-white-text);
    text-align: center;
    padding-top: 7px;
}

.file-icon-one:hover,
.file-icon-two:hover {
    opacity: 0.8;
}

.card-info {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: 18vh;
    min-height: 14vh;
}

.card-education {
    height: 100%;
}

.upload-file-img {
    max-width: 100%;
    margin: 0 auto;
}

.upload-file-img .upload-icon {
    max-width: 40%;
}

.stepper.stepper-pills .stepper-item.completed .stepper-icon,
.stepper.stepper-pills .stepper-item.current.mark-completed:last-child .stepper-icon {
    transition: color 0.2s ease;
    background-color: var(--pi-third-gradient-color) !important;
    border: none !important;
}

/* FIN ASISTENTE */

/* ASOCIACION DE REGISTROS */

.asociation-heading {
    width: 100%;
    display: block;
    background-color: var(--pi-first-gradient-color);
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    padding: 10px;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 0px 5px 0px,
        rgb(0 0 0 / 10%) 0px 0px 1px 0px;
    position: relative;
}

/* ASOCIACION DE REGISTROS */

/* Botones de acciones animaciones */

.sliderbar-link-permission {
    animation: fadeSidebarLink 1s ease-in-out;
}

.sliderbar-link-permission-opacity {
    animation: linkPermissionOpacity 3s ease-in-out;
}

@keyframes fadeSidebarLink {
    from {
        transform: translateX(+200%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes linkPermissionOpacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* HELPERS */

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

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

/* FIN HELPERS */

/* PERSONALIZACION IMAGENES */

.image-container img {
    background-color: var(--pi-first-gray-color);
    padding: 10px !important;
    border-radius: 2px !important;
}

/* FIN PERSONALIZACION IMAGENES */

/* MODULO AUDITORIAS */

.notebook-finder-box {
    position: relative;
    padding: 5em 2em;
    background-color: var(--pi-select-finder-bg);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.company-letter-card {
    cursor: pointer;
    height: 100%;
    text-align: center;
    padding: 5px;
    background-color: var(--pi-eighth-gradient-color);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
    position: relative;
    flex: auto;
    min-width: 4em;
    max-width: 25% !important;
}

.letter-link-box {
    min-height: 5vh;
    padding: 3px;
    margin-bottom: 20px;
}

.letter-link {
    font-size: 20px;
    font-weight: 100;
    color: var(--pi-white-text);
    text-transform: uppercase !important;
}

.company-counter {
    padding: 1px 0px;
    background-color: var(--pi-secondary-color);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    color: var(--pi-white-text);
    font-size: 10px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.company-count-number {
    font-weight: 700;
    display: block;
    color: var(--pi-fifth-color);
}

.ai-company-card {
    padding: 15px;
    border-radius: 4px;
    background-color: var(--pi-third-white-color);
    position: relative;
    height: 100%;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.ai-company-logo {
    position: absolute;
    left: -10px;
    top: 23%;
    /* height: 70px; */
    /* width: 70px; */
    padding: 25px;
    text-align: center;
    background-color: var(--pi-third-color);
    border-radius: 3px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.ai-audits-farmers-counter {
    background-color: var(--pi-primary-dark-color) !important;
    color: var(--pi-white-text) !important;
    font-size: 12px !important;
    font-weight: 400;
    border-radius: 3px;
    min-width: 110px;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.ai-audits-farmers-counter i {
    color: var(--pi-white-text) !important;
}

.ai-audits-number {
    position: absolute;
    right: -9px;
    top: -10px;
    display: flex;
    gap: 5px;
}

.ai-audits-number-label-ok {
    background-color: var(--pi-white-text);
    color: var(--pi-success-color);
    padding: 4px;
    font-size: 11px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    margin-bottom: 5px;
    width: 15em;
    text-align: center;
}

.ai-audits-number-label-ok i {
    font-size: 14px;
    vertical-align: text-bottom;
    color: var(--pi-success-color);
    margin-right: 3px;
}

.ai-audits-number-label-ko {
    background-color: var(--pi-white-text);
    color: var(--pi-danger-color);
    padding: 4px;
    font-size: 11px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    margin-bottom: 5px;
    width: 15em;
    text-align: center;
}

.ai-audits-number-label-ko i {
    font-size: 14px;
    vertical-align: text-bottom;
    color: var(--pi-danger-color);
    margin-right: 3px;
}

.ai-audits-number-count {
    font-weight: 600;
}

.ai-company-logo img {
    width: 32px;
}

.ai-company-logo i {
    font-size: 24px;
    color: var(--pi-white-text);
}

.ai-company-details {
    padding-left: 65px;
}

.ai-company-details i {
    padding: 4px;
    width: 26px;
    height: 26px;
    text-align: center;
    border-radius: 5px;
    font-size: 16px;
    color: var(--pi-secondary-color);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    margin-right: 5px;
    background-color: var(--pi-white-text);
}

.ai-company-name {
    display: block;
    margin-bottom: 8px;
    color: var(--pi-secondary-color);
    font-size: 13px;
    font-weight: 500;
}

.ai-company-nif {
    display: block;
    margin-bottom: 8px;
    color: var(--pi-secondary-color);
    font-size: 13px;
}

.ai-company-web {
    display: block;
    margin-bottom: 8px;
    color: var(--pi-secondary-color);
    font-size: 13px;
}

.ai-company-address {
    display: block;
    color: var(--pi-secondary-color);
    font-size: 13px;
}

.results-box {
    padding: 20px;
    text-align: center;
    background-color: var(--pi-third-gradient-color);
    border-radius: 3px;
    color: var(--pi-white-text);
}

.audits-home-panel {
    margin-top: 10px;
}

#btn-button-panel-1,
#btn-button-panel-2,
#btn-button-panel-3 {
    background-color: var(--pi-white-text);
    padding: 30px;
    text-align: center;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    font-size: 15px;
    font-weight: 100;
    color: var(--pi-secondary-color);
    cursor: pointer;
    height: 100%;
}

.btn-button-panel-menu-ai {
    background-color: var(--pi-white-text);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    position: absolute;
    width: 100%;
    z-index: 15;
}

.btn-button-panel-menu-ai .btn-panel-submenu-link {
    display: block;
    padding: 10px;
    color: var(--pi-secondary-color) !important;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-button-panel-menu-ai .btn-panel-submenu-link:last-child {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}

.btn-button-panel-menu-ai .btn-panel-submenu-link:not(:last-child) {
    border-bottom: 1px solid var(--pi-fourth-gray-color);
}

.btn-button-panel-menu-ai .btn-panel-submenu-link:hover {
    background-color: var(--pi-select-item-bg);
}

.btn-panel-submenu-link .submenu-link {
    display: block;
}

.btn-panel-submenu-link .submenu-description {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--pi-primary-dark-color);
}

.notifications-panel,
.ai-graphic-panel {
    padding: 20px;
    background-color: var(--pi-white-text);
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    height: 18em;
    overflow-x: auto;
}

.notification-title {
    color: var(--pi-secondary-color);
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--pi-third-white-color);
    padding: 0px 0px 10px;
}

.notification-item {
    background-color: var(--pi-third-white-color);
    border-radius: 4px;
    /* max-height: 120px;
    overflow-x: scroll; */
    position: relative;
    margin-bottom: 5px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.notification-item-title {
    color: var(--pi-warning-color);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
    padding: 10px;
    background-color: var(--pi-first-gradient-color);
}

.notification-item-title i.title-icon {
    padding: 5px;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    color: var(--pi-warning-color);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    margin-right: 5px;
}

.notification-item-text {
    padding: 4px 10px 10px;
    font-size: 11px;
    color: var(--pi-primary-dark-color);
}

.notification-details-item {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 3px;
    background-color: var(--pi-eighth-gradient-color);
    font-size: 10px;
    font-weight: 600;
    margin-right: 5px;
    color: var(--pi-white-text);
    margin-bottom: 5px;
}

.notification-details-item.n-special-item {
    background-color: var(--pi-sixth-gradient-color) !important;
}

.notification-details-item.n-special-item i {
    color: var(--pi-fifth-color);
    font-size: 10px;
    margin-right: 3px;
}

.notification-details-title {
    margin-right: 5px;
    color: var(--pi-white-text);
    font-weight: 400;
}

.tiny-btn {
    border: none;
    padding: 2px 6px;
    font-size: 12px;
    background-color: var(--pi-white-text);
    color: var(--pi-secondary-color);
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    transition: all 0.3s;
    cursor: pointer;
}

.tiny-btn i {
    color: var(--pi-secondary-color);
    margin-right: 2px;
    font-size: 12px;
}

.tiny-btn:hover,
.tiny-btn:focus {
    background-color: var(--pi-third-color) !important;
    color: var(--pi-white-text) !important;
}

.tiny-btn:hover i,
.tiny-btn:focus i {
    color: var(--pi-white-text) !important;
}

.tiny-label {
    font-size: 11px;
    color: var(--pi-secondary-color);
    font-weight: 500;
    background-color: var(--pi-white-text);
    border-radius: 4px;
    padding: 2px 5px;
    text-align: center;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.tiny-label i {
    font-size: 12px !important;
    color: var(--pi-secondary-color);
    vertical-align: inherit;
    margin-right: 3px !important;
}

.icon-xs {
    font-size: 12px !important;
    color: var(--pi-white-text) !important;
    vertical-align: middle !important;
    margin-right: 3px;
}

.large-btn {
    border: none;
    padding: 10px;
    font-size: 12px;
    background-color: var(--pi-secondary-color) !important;
    color: var(--pi-white-text) !important;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    transition: all 0.3s;
    cursor: pointer;
    width: 15em;
    display: block;
}

.large-btn i {
    color: var(--pi-white-text);
    margin-right: 2px;
    font-size: 12px;
}

.large-btn:hover,
.large-btn:focus {
    background-color: var(--pi-white-text) !important;
    color: var(--pi-secondary-color) !important;
}

.large-btn:hover i,
.large-btn:focus i {
    color: var(--pi-secondary-color) !important;
}

.ai-farmer-box {
    margin-top: 20px;
}

.ai-farmer-card {
    padding: 64px 0 0;
    /* background-color: var(--pi-white-text); */
    border-radius: 4px;
    /* box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; */
    min-height: 170px;
    position: relative;
    border-radius: 3px;
}

.ai-farmer-data {
    display: inline-block;
    padding: 10px;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: var(--pi-second-gradient-color);
}

.ai-farmer-data-name {
    position: absolute;
    background-color: var(--pi-eighth-gradient-color);
    width: 100%;
    left: 0;
    padding: 10px 15px;
    top: 0;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.ai-farmer-data-name .ai-farmer-data-name-title {
    color: var(--pi-fifth-color);
    font-size: 12px;
}

.ai-farmer-data-name .ai-farmer-data-name-title i {
    font-size: 11px;
    color: var(--pi-fifth-color);
    margin-right: 3px;
}

.ai-farmer-data-name .ai-farmer-data-name-val {
    font-size: 15px;
    color: var(--pi-white-text);
    font-weight: 100;
    margin-bottom: 4px;
}

.ai-farmer-data .ai-farmer-data-title {
    color: var(--pi-secondary-color);
    font-size: 13px;
    font-weight: 500;
}

.ai-farmer-data .ai-farmer-data-val {
    font-size: 11px;
    color: var(--pi-white-text);
    font-weight: 600;
    height: 33px;
    overflow-y: auto;
}

.ai-farmer-btn-audits.tiny-btn {
    position: absolute;
    top: 40px;
    right: 5px;
    z-index: 1;
}

/* .audits-farmer-box {
    background-color: var(--pi-btn-icon-box-bg);
    width: 100% !important;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
} */

.ai-farmer-box .tiny-btn.tiny-btn-close {
    width: auto;
    position: absolute;
    top: -5px;
    right: 5px;
    z-index: 2;
}

.farmer-audit-card-box {
    /* margin-bottom: 50px; */
    padding: 5px;
    background-color: var(--pi-secondary-color);
    overflow-x: auto;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    display: inline-flex;
    position: relative;
    width: 100%;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
        rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.audit-state-label-box {
    position: relative;
}

.audit-state-label-box .ok-label,
.audit-state-label-box .ko-label {
    position: absolute;
    top: -3px;
    right: -2px;
}

.farmer-audit-card-box .farmer-audit-card-item:nth-last-child(6) {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.farmer-audit-card-box .farmer-audit-card-item:nth-last-child(2) {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.audits-farmer-box .farmer-audit-card-box:last-child {
    margin-bottom: 10px !important;
}

.farmer-audit-card-item {
    flex: auto;
    padding: 15px;
    background-color: var(--pi-select-finder-bg);
    white-space: nowrap;
    border-right: 1px solid var(--pi-eighth-gradient-color);
}

.farmer-audit-card-item-first {
    padding: 15px 10px 5px;
    background-color: var(--pi-eighth-gradient-color);
    white-space: nowrap;
    text-align: center;
    position: relative;
    min-width: 22em;
    width: 22em;
    overflow-x: auto;
}

@media (max-width: 1200px) {
    .farmer-audit-card-item-first {
        white-space: inherit !important;
        min-width: 17em !important;
        width: 17em !important;
    }
}

.icon-large-box {
    background-color: var(--pi-white-text);
    border-radius: 3px;
    margin-bottom: 5px;
}

.icon-large-box i {
    color: var(--pi-white-text);
    font-size: 24px;
    vertical-align: text-top;
}

.farmer-audit-card-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pi-primary-color);
    margin-bottom: 3px;
}

.farmer-audit-card-label i {
    color: var(--pi-sixth-gradient-color);
    margin-right: 3px;
    font-size: 11px;
}

.farmer-audit-card-val {
    font-size: 11px;
    color: var(--pi-secondary-color);
    font-weight: 500;
}

/* .farmer-audit-card-val i {
    font-size: 12px;
    color: var(--pi-menu-link-i-bg);
} */

.audit-state-label-box .ok-label input[type="checkbox"] {
    margin-right: 5px;
    border: 2px solid #50cd89;
    outline: none;
    position: absolute;
    left: -8px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    padding: 6px;
    background-color: var(--pi-second-white-color);
}

.audit-state-label-box .ok-label input[type="checkbox"]:checked {
    background-color: #50cd89 !important;
}

.audit-state-label-box .ko-label input[type="checkbox"] {
    margin-right: 5px;
    border: 2px solid var(--pi-danger-color);
    outline: none;
    position: absolute;
    left: -8px;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    padding: 6px;
    background-color: var(--pi-second-white-color);
}

.audit-state-label-box .ko-label input[type="checkbox"]:checked {
    background-color: var(--pi-danger-color) !important;
}

.audit-btn-actions {
    /* position: absolute;
    bottom: -28px; */
    margin-bottom: 20px;
    width: 100%;
    /* white-space: nowrap; */
    display: flex;
    flex: auto;
    text-align: center;
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

.audit-btn-actions .audit-btn-notes,
.audit-btn-actions .audit-btn-progress,
.audit-btn-actions .audit-btn-sign {
    border: none;
    padding: 5px 10px;
    font-size: 11px;
    background-color: var(--pi-white-text);
    color: var(--pi-secondary-color);
    font-weight: 600;
    transition: none !important;
    flex: auto;
}

.audit-btn-actions .audit-btn-send-auditdoc {
    border: none;
    padding: 5px 10px;
    font-size: 11px;
    background-color: var(--pi-third-white-color);
    color: var(--pi-secondary-color);
    font-weight: 600;
    transition: none !important;
    flex: auto;
}

.audit-btn-actions .audit-btn-notes i,
.audit-btn-actions .audit-btn-progress i,
.audit-btn-actions .audit-btn-sign i,
.audit-btn-actions .audit-btn-send-auditdoc i {
    font-size: 12px;
    color: var(--pi-secondary-color);
    vertical-align: middle;
    margin-right: 4px;
}

.audit-btn-actions .audit-btn-notes:hover i,
.audit-btn-actions .audit-btn-progress:hover i,
.audit-btn-actions .audit-btn-sign:hover i,
.audit-btn-actions .audit-btn-send-auditdoc:hover i {
    color: var(--pi-white-text) !important;
}

.audit-btn-actions .audit-btn-notes:hover,
.audit-btn-actions .audit-btn-progress:hover,
.audit-btn-actions .audit-btn-sign:hover,
.audit-btn-actions .audit-btn-send-auditdoc:hover {
    background-color: var(--pi-secondary-color) !important;
    color: var(--pi-btn-icon-box-bg) !important;
}

.audit-progress-label-btn-load {
    padding: 2px;
    background-color: var(--pi-second-gray-color);
    border-radius: 3px;
    margin-left: 6px;
    color: var(--pi-white-text);
    font-weight: 400;
    font-size: 11px !important;
    box-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    text-align: center;
    width: 40px;
    display: inline-block;
}

.audit-progress-label-btn-ok {
    padding: 2px;
    background-color: var(--pi-success-color);
    border-radius: 3px;
    margin-left: 6px;
    color: var(--pi-white-text);
    font-weight: 400;
    font-size: 11px !important;
    box-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    text-align: center;
    width: 40px;
    display: inline-block;
}

.audit-progress-label-btn-ko {
    padding: 2px;
    background-color: var(--pi-danger-color);
    border-radius: 3px;
    margin-left: 6px;
    color: var(--pi-white-text);
    font-weight: 400;
    font-size: 11px !important;
    box-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    text-align: center;
    width: 40px;
    display: inline-block;
}

.rotation-crop-icon{
    position: absolute;
    left: 50%;
    top: -3px;
}

.rotation-crop-icon i{
    color: var(--pi-fifth-color);
    font-size: 12px;
}

.company-audits-panel {
    background-color: var(--pi-eighth-gradient-color);
    padding: 15px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    font-size: 15px;
    font-weight: 100;
    height: 100%;
}

.company-audits-finder-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--pi-white-text);
    margin-bottom: 5px;
    display: block;
}

.company-audits-finder,
.company-audits-finder:focus {
    border: none !important;
    border-radius: 2px;
    width: 100%;
    padding: 5px;
    background-color: var(--pi-third-white-color);
    color: var(--pi-primary-dark-color);
    outline: none !important;
    font-size: 14px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.audits-company-results {
    background-color: var(--pi-input-bg);
    border-radius: 2px;
    padding: 5px;
    position: absolute;
    left: 0;
    width: 100%;
    top: 33px;
    box-shadow:
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    z-index: 1;
    max-height: 125px;
    overflow-y: auto;
}

.audits-company-results-item {
    background-color: var(--pi-select-finder-bg);
    padding: 8px 15px;
    margin-bottom: 5px;
    border-radius: 3px;
    font-size: 12px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    font-weight: 500;
    transition: all 0.4s;
    cursor: pointer;
}

.audits-company-results-item:hover {
    background-color: var(--pi-secondary-color) !important;
    color: var(--pi-select-finder-bg) !important;
}

.audits-company-results-item:hover i {
    color: var(--pi-select-finder-bg) !important;
}

.audits-company-results-item:hover .company-result-item-nif,
.audits-company-results-item:hover .company-result-item-name {
    color: var(--pi-select-finder-bg) !important;
}

.company-result-item-name {
    color: var(--pi-secondary-color);
}

.company-result-item-name i {
    color: var(--pi-secondary-color);
    font-size: 12px;
    margin-right: 2px;
}

.company-result-item-nif {
    color: var(--pi-primary-color);
    margin-top: 5px;
    font-size: 10px;
}

.company-result-item-nif i {
    font-size: 11px;
    color: var(--pi-primary-color);
    margin-right: 2px;
}

.upper-selected-company {
    margin: 16px 0;
    max-width: 25em;
    background-color: var(--pi-white-text);
    padding: 6px 10px;
    height: 28px;
    border-radius: 3px;
    font-size: 11px;
    color: var(--pi-secondary-color);
    font-weight: 500;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

@media (max-width: 768px) {
    .upper-selected-company {
        display: none !important;
    }
}

.submenu-audit {
    background-color: var(--pi-third-white-color);
}

.submenu-audit .submenu-link {
    color: var(--pi-primary-color);
}

.audit-badge-counter {
    display: inline-block;
    text-align: center;
    width: 27px;
    background-color: var(--pi-fifth-color);
    border-radius: 3px;
    font-size: 12px;
    margin-left: 4px;
    font-weight: 500;
}

.import-simple-audit-result {
    padding: 10px;
    background-color: var(--pi-third-white-color);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
    z-index: 1;
    height: 98px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--pi-eighth-gradient-color);
    overflow-y: scroll;
}

.simple-import-product-item {
    background-color: var(--pi-white-text);
    padding: 5px 15px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    cursor: pointer;
    text-align: left;
}

.simple-import-result-name {
    color: var(--pi-secondary-color);
    font-weight: 600;
    font-size: 12px;
}

.simple-import-result-nif,
.simple-import-result-company {
    display: inline;
    font-size: 11px;
    font-weight: 500;
    margin-right: 4px;
}

.simple-import-result-id {
    font-weight: 600;
    font-size: 12px;
    color: var(--pi-primary-color);
}

.simple-import-farmer-item {
    text-align: left;
    padding: 6px;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    cursor: pointer;
    width: 100%;
    display: block;
    margin-bottom: 5px;
}

.simple-import-farmer-item:hover,
.simple-import-product-item:hover {
    color: var(--pi-white-text) !important;
    background-color: var(--pi-eighth-gradient-color) !important;
}

.simple-import-farmer-item:hover .simple-import-result-name,
.simple-import-product-item:hover .simple-import-result-name,
.simple-import-product-item:hover .simple-import-result-id,
.simple-import-product-item:hover span {
    color: var(--pi-white-text) !important;
}

.structure-panel-container {
    margin-bottom: 15px;
    z-index: 3;
    /* padding: 10px;
    background-color: var(--pi-second-gradient-color); */
    border-radius: 3px;
}

.structure-point-item.custom .point-section {
    top: -17px !important;
    padding: 4px !important;
}

@media (min-width: 992px) {
    .structure-panel-container {
        position: sticky;
        top: 80px;
    }
}

.structure-point-finder-container {
    padding: 15px;
    background-color: var(--pi-select-item-bg);
    border-radius: 3px;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.card.resume-percentage-card {
    background-color: transparent !important;
    box-shadow: none !important;
}

.rule-version-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231891ac' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding: 9px !important;
    font-size: 0.825rem !important;
    border-radius: 3px !important;
    height: 32px;
    border: none !important;
    background-color: var(--pi-input-bg);
    width: 100%;
    appearance: none;
    outline: none;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px !important;
}

.quickfilter-rule-btn,
.quickfilter-rule-btn-af,
.quickfilter-rule-btn-cb,
.quickfilter-rule-btn-fv {
    padding: 9px !important;
    font-size: 0.825rem !important;
    border-radius: 3px !important;
    height: 32px;
    border: none !important;
    appearance: none;
    transition: all 0.8s;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px !important;
}

.quickfilter-rule-btn {
    background-color: var(--pi-input-bg);
    color: var(--pi-secondary-color);
}

.quickfilter-rule-btn-af {
    color: #00d5f7;
    background-color: var(--pi-white-text);
}

.quickfilter-rule-btn-cb {
    color: #a781f7;
    background-color: var(--pi-white-text);
}

.quickfilter-rule-btn-fv {
    color: #ff8672;
    background-color: var(--pi-white-text);
}

.quickfilter-rule-btn.active,
.quickfilter-rule-btn:hover {
    color: var(--pi-input-bg) !important;
    background-color: var(--pi-secondary-color) !important;
}

.quickfilter-rule-btn-af.active,
.quickfilter-rule-btn-af:hover,
.point-section-af {
    background-color: #00d5f7 !important;
    color: var(--pi-white-text) !important;
}

.quickfilter-rule-btn-cb.active,
.quickfilter-rule-btn-cb:hover,
.point-section-cb {
    background-color: #a781f7 !important;
    color: var(--pi-white-text) !important;
}

.quickfilter-rule-btn-fv.active,
.quickfilter-rule-btn-fv:hover,
.point-section-fv {
    background-color: #ff8672 !important;
    color: var(--pi-white-text) !important;
}

.structure-point-input {
    padding: 15px !important;
    font-size: 12px !important;
    border-radius: 3px !important;
    height: 32px;
    border: none !important;
    background-color: var(--pi-input-bg);
    width: 100%;
    appearance: none;
    outline: none;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px !important;
}

.massive-counter-container {
    margin-bottom: 10px;
}

.massive-total-data {
    padding: 0;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px !important;
    text-align: center;
    width: 100%;
}

.massive-counter-text {
    margin-left: 5px;
    font-size: 12px;
    margin-bottom: 2px;
    font-weight: 500;
    color: var(--pi-seventh-gradient-color);
}

.massive-counter {
    font-size: 14px;
    color: var(--pi-secondary-color);
    display: block;
}

.requirements-action-btn-box {
    display: flex;
    gap: 5px;
    position: absolute;
    bottom: 5px;
    right: 15px;
    min-width: 10em;
}

.btn-massive-post {
    background-color: var(--pi-success-color);
    padding: 10px;
    width: auto;
    border-radius: 3px;
    color: var(--pi-white-text);
    font-size: 13px;
    font-weight: 500;
    border: none;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.btn-massive-post i {
    font-size: 14px;
    margin-right: 3px;
    color: var(--pi-white-text);
    vertical-align: text-bottom;
}

.btn-massive-post:hover {
    background-color: var(--pi-white-text) !important;
    color: var(--pi-primary-color) !important;
}

.btn-massive-post:hover i {
    color: var(--pi-success-color) !important;
}

.requirement-points-info-box {
    position: absolute;
    width: 24em;
    top: 2px;
    right: 7px;
    display: flex;
    gap: 4px;
}

.requirement-points-info-box-det {
    position: absolute;
    width: 10em;
    top: 2px;
    right: 12px;
}

@media (max-width: 992px) {
    .requirement-points-info-box {
        position: inherit;
    }
}

@media (max-width: 1300px) {
    .requirements-action-btn-box,
    .requirement-points-info-box-det {
        position: inherit;
    }
}

/* zona puntos de requerimientos */

.points-paginate-container {
    background-color: var(--pi-select-finder-bg);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

/* .structure-point-container{
    max-height: 100vh;
    overflow: auto;
} */

.point-container-label {
    color: var(--pi-third-color);
    font-weight: 400;
    display: block;
    margin-bottom: 5px;
    padding: 15px;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    position: relative;
}

.structure-point-item {
    padding: 30px 10px 10px;
    background-color: var(--pi-select-item-bg);
    border-radius: 3px;
    position: relative;
}

.point-level-label {
    position: absolute;
    top: -12px;
    left: 115px;
    padding: 4px;
    width: 110px;
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
    z-index: 2;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.quickfilter-rule-btn-ma {
    color: var(--pi-danger-color);
}

.quickfilter-rule-btn-me {
    color: var(--pi-warning-color);
}

.quickfilter-rule-btn-re {
    color: #c6a119;
}

.point-level-label-ma,
.quickfilter-rule-btn-ma:hover {
    background-color: var(--pi-danger-color) !important;
    color: var(--pi-white-text) !important;
}

.point-level-label-me,
.quickfilter-rule-btn-me:hover {
    background-color: var(--pi-warning-color) !important;
    color: var(--pi-white-text) !important;
}

.point-level-label-re,
.quickfilter-rule-btn-re:hover {
    background-color: #c6a119 !important;
    color: var(--pi-white-text) !important;
}

.quickfilter-rule-btn.rule-btn-ma {
    color: var(--pi-danger-color);
    font-weight: 600;
}

.quickfilter-rule-btn.rule-btn-ma:hover,
.quickfilter-rule-btn.rule-btn-ma.selected {
    background-color: var(--pi-danger-color) !important;
    color: var(--pi-white-text) !important;
}

.quickfilter-rule-btn.rule-btn-me {
    color: var(--pi-warning-color) !important;
    font-weight: 600;
}

.quickfilter-rule-btn.rule-btn-me:hover,
.quickfilter-rule-btn.rule-btn-me.selected {
    background-color: var(--pi-warning-color) !important;
    color: var(--pi-white-text) !important;
}

.quickfilter-rule-btn.rule-btn-rec {
    color: #c6a119 !important;
    font-weight: 600;
}

.quickfilter-rule-btn.rule-btn-rec:hover,
.quickfilter-rule-btn.rule-btn-rec.selected {
    background-color: #c6a119 !important;
    color: var(--pi-white-text) !important;
}

.point-section {
    position: absolute;
    top: -16px;
    left: 3px;
    background-color: var(--pi-secondary-color);
    color: var(--pi-white-text);
    padding: 5px;
    width: 115px;
    text-align: center;
    border-radius: 3px;
    z-index: 2;
    font-size: 11px;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.point-requirement-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--pi-seventh-gradient-color);
    z-index: 1;
    border-radius: 3px;
}

@media (min-width: 1400px) {
    .quickfilter-rule-btn.requirement-cb-box {
        font-size: 13px !important;
        border-radius: 4px !important;
        padding: 7px 5px 5px !important;
        position: absolute !important;
        width: 100px !important;
        right: 5px !important;
        top: -13px !important;
        cursor: pointer !important;
        z-index: 1;
        text-align: center;
    }
}

@media (max-width: 1400px) {
    .quickfilter-rule-btn.requirement-cb-box {
        font-size: 12px !important;
        border-radius: 4px !important;
        padding: 4px 0px 0px !important;
        position: absolute !important;
        width: 90px !important;
        height: 25px;
        right: 5px !important;
        bottom: -10px !important;
        cursor: pointer !important;
        z-index: 1;
        text-align: center;
    }

    .quickfilter-rule-btn.requirement-cb-box input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        top: 6px !important;
    }
}

@media (max-width: 992px) {
    .quickfilter-rule-btn.requirement-cb-box {
        top: -13px !important;
    }
    .quickfilter-rule-btn.requirement-cb-box input[type="checkbox"] {
        top: 5px !important;
    }
}

.requirement-cb-box.selected {
    background-color: var(--pi-success-color) !important;
    color: var(--pi-white-text) !important;
}

.quickfilter-rule-btn.requirement-cb-box input[type="checkbox"] {
    margin-right: 5px;
    border: 1px dashed var(--pi-third-gradient-color);
    outline: none;
    position: absolute;
    left: -8px;
    top: 6px;
    width: 22px;
    border-radius: 3px;
    background-color: var(--pi-second-white-color);
}

.requirement-cb-box input[type="checkbox"]:checked {
    background-color: var(--pi-secondary-color) !important;
}

.point-principle-text {
    font-size: 12px;
    background-color: var(--pi-eighth-gradient-color);
    color: var(--pi-white-text);
    padding: 15px;
    border-radius: 3px;
    position: relative;
    height: 85px;
    overflow: auto;
    /* text-align: justify;*/
}

.structure-point-item .tiny-btn {
    position: absolute;
    top: 100px;
    right: 5px;
    /* border: 1px solid var(--pi-second-gradient-color); */
}

.btn-result-box {
    padding: 10px;
    text-align: center;
}

.btn-result-box .btn-group {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border: 1px solid var(--pi-white-text);
}

.btn-result-box .ai-btn-requirement-1,
.btn-result-box .ai-btn-requirement-2,
.btn-result-box .ai-btn-requirement-3 {
    min-width: 80px;
    font-size: 12px;
    color: var(--pi-secondary-color);
    border: 3px solid transparent;
    padding: 4px;
    background-color: var(--pi-white-text);
}

.btn-result-box .ai-btn-requirement-1 {
    /* background-color: var(--pi-success-color); */
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

/* .btn-result-box .ai-btn-requirement-2 {
    background-color: var(--pi-danger-color);
} */

.btn-result-box .ai-btn-requirement-3 {
    /* background-color: var(--pi-warning-color); */
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.btn-result-box button.selected {
    background-color: var(--pi-secondary-color) !important;
    border: 3px solid var(--pi-third-gradient-color);
    color: var(--pi-white-text);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.btn-result-box .ai-btn-requirement-1:hover,
.btn-result-box .ai-btn-requirement-2:hover,
.btn-result-box .ai-btn-requirement-3:hover {
    background-color: var(--pi-secondary-color);
    color: var(--pi-white-text);
}

.structure-point-criterion {
    background-color: var(--pi-primary-dark-color);
    color: var(--pi-white-text);
    font-size: 12px;
    padding: 30px 20px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
    text-align: justify;
    width: 100%;
}

.structure-point-criterion-text {
    max-height: 10em;
    overflow: auto;
    padding: 0 10px;
    white-space: pre-line;
}

.point-criterion-close-btn {
    background-color: var(--pi-eighth-gradient-color);
    padding: 2px 6px;
    width: auto;
    color: var(--pi-white-text);
    display: inline-block;
    position: absolute;
    right: 2px;
    bottom: 2px;
    cursor: pointer;
    border-radius: 2px;
    font-size: 11px;
}

.point-criterion-close-btn:hover {
    background-color: var(--pi-secondary-color);
}

.point-criterion-close-btn i {
    color: var(--pi-white-text);
    vertical-align: text-bottom;
    margin-right: 1px;
    font-size: 12px;
}

.justification-requirement textarea {
    min-height: 6em !important;
    max-height: 6em !important;
    overflow: auto !important;
    /* border: 1px dashed var(--pi-warning-color); */
    font-size: 12px;
    font-weight: normal;
}

/* condiciones de escritura masiva */

.point-conditions {
    padding: 20px;
    background-color: var(--pi-third-white-color);
    border-radius: 3px;
}

.point-condition-item {
    background-color: var(--pi-white-text);
    /* padding: 20px 15px 15px; */
    border-radius: 3px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    position: relative;
    height: 100%;
}

.point-condition-item .default-cb {
    position: absolute;
    border-radius: 2px;
    height: 26px;
    width: 26px;
    top: -7px;
    left: -10px;
    z-index: 2;
    background-color: var(--pi-fourth-gray-color);
}

.condition-item-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--pi-primary-dark-color);
    margin-bottom: 10px;
    height: 60px;
    border-radius: 2px;
    overflow: auto;
    background-color: var(--pi-btn-icon-box-bg);
    padding: 15px 20px 5px;
}

.condition-item-content {
    padding: 10px;
}

.condition-item-content .form-select {
    border: none !important;
    border-radius: 2px;
    padding: 0;
}

.condition-item-content .form-select option {
    background-color: transparent !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--pi-secondary-color) !important;
}

.ok-label {
    background-color: var(--pi-success-color) !important;
    color: var(--pi-white-text) !important;
    font-size: 12px !important;
    font-weight: 400;
    border-radius: 3px;
    /* min-width: 110px; */
    min-width: 80px;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.ko-label {
    background-color: var(--pi-danger-color) !important;
    color: var(--pi-white-text) !important;
    font-size: 12px;
    font-weight: 400;
    border-radius: 3px;
    /* min-width: 115px; */
    min-width: 80px;
    padding: 2px 5px;
    text-align: center;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    z-index: 2;
}

.default-label {
    background-color: var(--pi-secondary-color) !important;
    color: var(--pi-white-text) !important;
    font-size: 12px !important;
    font-weight: 400;
    border-radius: 3px;
    min-width: 110px;
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.warning-label {
    background-color: var(--pi-warning-color) !important;
    color: var(--pi-white-text) !important;
    font-size: 12px;
    font-weight: 400;
    border-radius: 3px;
    min-width: 115px;
    padding: 2px 5px;
    text-align: center;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.ok-label i,
.ko-label i,
.warning-label i {
    font-size: 12px;
    color: var(--pi-white-text);
    margin-right: 1px;
    vertical-align: middle;
}

@media (max-width: 992px) {
    .label-text-mobile-hidden {
        display: none !important;
    }

    .companies-results-box .ai-audits-farmers-counter,
    .companies-results-box .ok-label,
    .companies-results-box .default-label {
        min-width: auto;
        padding: 0.1em 2em;
        display: flex;
        gap: 0.5em;
        justify-content: center;
        align-items: center;
    }
}

.point-condition-item .ok-label,
.point-condition-item .ko-label {
    position: absolute;
    right: 5px;
    top: -10px;
}

.approval-custom-label-ko,
.approval-custom-label-ok {
    padding: 2px 10px;
    border-radius: 3px;
    margin-left: 6px;
    color: var(--pi-white-text);
    font-weight: 400;
    font-size: 11px !important;
    box-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    text-align: center;
    display: inline-block;
}

.approval-custom-label-ko {
    background-color: var(--pi-danger-color);
}

.approval-custom-label-ok {
    background-color: var(--pi-success-color);
}

.approval-custom-label-ko .approval-text,
.approval-custom-label-ok .approval-text {
    /* font-weight: 500;
    font-size: 12px;
    margin-right: 5px; */
    display: inline-block;
}

.approval-custom-label-ko .approval-text i,
.approval-custom-label-ok .approval-text i,
.approval-text.custom-label-ko i,
.approval-text.custom-label-ok i {
    font-size: 13px;
    vertical-align: text-bottom;
    color: var(--pi-white-text) !important;
}

.approval-custom-label-major,
.approval-custom-label-minor {
    /* width: 8em; */
    display: flex;
    margin-left: 5px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    color: var(--pi-secondary-color);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.approval-custom-label-major .approval-type-letter {
    padding: 3px 6px;
    background-color: var(--pi-white-text);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.approval-custom-label-minor .approval-type-letter {
    padding: 3px 6px;
    background-color: var(--pi-white-text);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.approval-text.custom-label-ko,
.approval-text.custom-label-ok {
    padding: 3px 6px;
    color: var(--pi-white-text);
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.custom-label-ok {
    background-color: var(--pi-success-color);
}

.custom-label-ko {
    background-color: var(--pi-danger-color);
}

.border-required {
    border-color: var(--pi-danger-color) !important;
}

.justification-label-warning {
    padding: 3px;
    border-radius: 3px;
    color: var(--pi-white-text);
    background-color: var(--pi-danger-color);
    font-size: 10px;
    position: absolute;
    right: 10px;
    top: 5px;
    font-weight: 600;
    opacity: 0.8;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

/* fin zona puntos requerimientos */

/* filtros de usuarios en cumplim. avanzada */

.ai-panel-filter {
    padding: 30px 10px 8px;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    position: relative;
    font-size: 12px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    height: 100%;
}

.ai-filter-label {
    font-size: 11px;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    padding: 2px 5px;
    background-color: var(--pi-secondary-color);
    color: var(--pi-white-text);
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.ai-panel-filter input,
.ai-panel-filter select {
    height: 28px !important;
    font-size: 11px !important;
    padding: 5px !important;
}

.farmer-audit-dates {
    background-color: var(--pi-select-finder-bg);
    padding: 10px;
    border-radius: 3px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.ai-farmer-filters-group-btn {
    position: absolute;
    right: 10px;
    top: 15px;
}

.tiny-date-label {
    padding: 3px 0;
    display: block;
    width: 90%;
    font-size: 11px;
    border-radius: 3px;
    font-weight: 600;
    background-color: var(--pi-fourth-white-color);
    color: var(--pi-primary-dark-color);
    border: 1px solid var(--pi-fifth-gray-color);
    text-align: center;
}

.tiny-date-label i {
    color: var(--pi-secondary-color);
    margin-right: 3px;
}

/* fin filtros usuarios en cumplim. avanzada */

/* selector de productos */
.products-list-input-btn {
    position: absolute;
    top: -25px;
    right: 5px;
    padding: 0 5px;
    border-radius: 3px;
    border: none;
    width: 3em;
    /* display: flex; */
    /* gap: 3px; */
    background-color: var(--pi-white-text);
    box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
    font-size: 11px;
    color: var(--pi-secondary-color);
}

.products-list-input-btn:hover {
    background-color: var(--pi-secondary-color);
    color: var(--pi-white-text);
}

.products-list-input-btn:hover i {
    color: var(--pi-white-text);
}

.products-list-input-btn i {
    font-size: 10px;
    color: var(--pi-secondary-color);
    margin-right: 5px;
}

.condition-selected-products {
    padding-top: 5px;
    padding-bottom: 5px;
}

.condition-selected-product-label {
    padding: 0;
    display: inline-block;
    margin-right: 5px;
    background-color: var(--pi-select-finder-bg);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border-radius: 3px;
    margin-bottom: 5px;
}

.condition-selected-product-label .product-label-text {
    padding: 2px 5px;
    font-size: 10px;
    vertical-align: middle;
    color: var(--pi-secondary-color);
    font-weight: 500;
    display: inline;
}

.condition-selected-product-label .product-label-delicon {
    padding: 2px 5px;
    background-color: var(--pi-danger-color);
    display: inline-block;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border: 1px solid var(--pi-third-gradient-color);
}

.condition-selected-product-label .product-label-delicon i {
    color: var(--pi-white-text);
    vertical-align: middle;
}

.ai-product-filter-box {
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    padding: 10px;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    max-height: 5em;
    overflow-y: auto;
}

.product-select-item {
    display: inline-block;
    margin-right: 6px;
    padding: 4px;
    border-radius: 3px;
    background-color: var(--pi-white-text);
    color: var(--pi-secondary-color);
    font-size: 11px;
    margin-bottom: 10px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    cursor: pointer;
}

.product-select-item.selected-product {
    background-color: var(--pi-success-color) !important;
    color: var(--pi-white-text) !important;
}

/* fin de selector de productos */

/* FIN MODULO AUDITORIAS */

/* BREADCRUMB PEQUEÑO */

.app-toolbar-tiny {
    background-color: var(--pi-white-text);
    border-radius: 3px;
    margin-bottom: 25px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.app-toolbar-tiny .breadCrumb {
    margin-top: 1px;
}

.app-toolbar-tiny .page-heading-title {
    padding: 6px 10px;
    background-color: var(--pi-secondary-color);
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    margin-right: 10px;
    text-align: center;
}

.page-heading-title .pg-icon-title i {
    font-size: 12px;
    color: var(--pi-white-text);
}

/* FIN BREADCRUMB */

/* PROGRESS BAR */

.progress-bar {
    color: var(--pi-white-text) !important;
    background-color: var(--pi-third-color) !important;
    /* font-weight: bold; */
    /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset !important; */
}

.progress-text {
    position: absolute;
    /* left: 50%; */
    transform: translate(0, -5px);
    width: 29px;
    /* bottom: 3px; */
    bottom: -2px;
    border-radius: 2px;
    color: var(--pi-secondary-color);
    background-color: var(--pi-white-text);
    font-weight: 500;
    font-size: 10px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.progress-bar.success-progress-bar {
    color: var(--pi-white-text) !important;
    background-color: var(--pi-success-color) !important;
}

.progress {
    /* background-color: var(--pi-btn-icon-box-bg) !important; */
    border-radius: 2px !important;
}

/* FIN PROGRESS BAR */

/* DETALLES AUDITORIA */

.audit-sidebar-box {
    /* padding: 0 5px 0 0;
    border-right: 5px solid var(--pi-fourth-white-color); */
    position: sticky;
    top: 80px;
    /* height: 61em; */
    overflow-y: auto;
    overflow-x: hidden;
}

@media(max-width:992px){
    .audit-sidebar-box{
        height: auto !important;
    }
}

.auditdet-menu-item-in,
.auditdet-menu-item-cr,
.auditdet-menu-item-ap,
.auditdet-menu-item-fc,
.auditdet-menu-item-s {
    border-bottom: 1px solid var(--pi-select-item-bg);
}

.auditdet-menu-item-in,
.auditdet-menu-item-cr,
.auditdet-menu-item-ap,
.auditdet-menu-item-fc,
.auditdet-menu-item-s,
.auditdet-menu-item-lg {
    background: var(--pi-white-text);
    margin-bottom: 5px;
    position: relative;
    cursor: pointer;
    border: 1px solid var(--pi-menu-link-i-bg);
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.auditdet-menu-item-in:after,
.auditdet-menu-item-cr:after,
.auditdet-menu-item-ap:after,
.auditdet-menu-item-fc:after,
.auditdet-menu-item-s:after,
.auditdet-menu-item-lg:after {
    content: "";
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    background: var(--pi-eighth-gradient-color);
    transition-property: height;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.auditdet-menu-item-in:hover:after,
.auditdet-menu-item-in:focus:after,
.auditdet-menu-item-in:active:after,
.auditdet-menu-item-cr:hover:after,
.auditdet-menu-item-cr:focus:after,
.auditdet-menu-item-cr:active:after,
.auditdet-menu-item-ap:hover:after,
.auditdet-menu-item-ap:focus:after,
.auditdet-menu-item-ap:active:after,
.auditdet-menu-item-fc:hover:after,
.auditdet-menu-item-fc:focus:after,
.auditdet-menu-item-fc:active:after,
.auditdet-menu-item-s:hover:after,
.auditdet-menu-item-s:focus:after,
.auditdet-menu-item-s:active:after,
.auditdet-menu-item-lg:hover:after,
.auditdet-menu-item-lg:focus:after,
.auditdet-menu-item-lg:active:after {
    right: -1px;
    left: auto;
    width: 2px;
    height: 100%;
    z-index: 1;
    top: 0;
}

/* LOS QUITAMOS EN DISPOSITIVOS MOVILES */

@media (max-width: 700px) {
    .auditdet-menu-item-in:hover:after,
    .auditdet-menu-item-in:focus:after,
    .auditdet-menu-item-in:active:after,
    .auditdet-menu-item-cr:hover:after,
    .auditdet-menu-item-cr:focus:after,
    .auditdet-menu-item-cr:active:after,
    .auditdet-menu-item-ap:hover:after,
    .auditdet-menu-item-ap:focus:after,
    .auditdet-menu-item-ap:active:after,
    .auditdet-menu-item-fc:hover:after,
    .auditdet-menu-item-fc:focus:after,
    .auditdet-menu-item-fc:active:after,
    .auditdet-menu-item-s:hover:after,
    .auditdet-menu-item-s:focus:after,
    .auditdet-menu-item-s:active:after,
    .auditdet-menu-item-lg:hover:after,
    .auditdet-menu-item-lg:focus:after,
    .auditdet-menu-item-lg:active:after {
        display: none;
    }
}

.auditdet-menu-item-in.selected:after,
.auditdet-menu-item-cr.selected:after,
.auditdet-menu-item-ap.selected:after,
.auditdet-menu-item-fc.selected:after,
.auditdet-menu-item-s.selected:after,
.auditdet-menu-item-lg.selected:after {
    right: -1px;
    left: auto;
    width: 2px;
    height: 100%;
    z-index: 1;
    top: 0;
}

.auditdet-menu-title {
    padding: 8px;
    font-weight: 500;
    color: var(--pi-warning-color) !important;
    /* background-color: var(--pi-select-finder-bg); */
}

.auditdet-menu-subtitle {
    padding: 5px 10px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--pi-second-gray-color);
}

.auditdet-progress {
    padding: 5px;
    /* background-color: var(--pi-second-white-color); */
}

.auditdet-progress .progress {
    height: 10px !important;
}

.auditdet-progress .progress-bar {
    height: 10px;
    font-size: 9px;
}

.result-requirement-box {
    font-size: 13px !important;
    border-radius: 4px !important;
    padding: 5px 5px 5px !important;
    width: 100% !important;
    cursor: pointer !important;
    text-align: center;
    height: 28px;
    margin-bottom: 5px;
    border: none !important;
    appearance: none;
    transition: all 0.8s;
    font-weight: 600;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px !important;
    background-color: var(--pi-white-text);
    color: var(--pi-secondary-color);
}

.result-requirement-box.selected {
    background-color: var(--pi-success-color) !important;
    color: var(--pi-white-text) !important;
}

.result-requirement-box-no {
    background-color: var(--pi-danger-color) !important;
    color: var(--pi-white-text) !important;
}

.result-requirement-box-na {
    background-color: var(--kt-text-warning)!important;
    color: var(--pi-white-text) !important;
}

.result-requirement-box input[type="checkbox"] {
    margin-right: 5px;
    border: 1px dashed var(--pi-third-gradient-color);
    outline: none;
    position: absolute;
    left: -8px;
    top: 6px;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background-color: var(--pi-second-white-color);
}

.result-requirement-box input[type="checkbox"]:checked {
    background-color: var(--pi-secondary-color) !important;
}

.point-principle-text-mini {
    font-size: 12px;
    background-color: var(--pi-seventh-gradient-color);
    color: var(--pi-white-text);
    padding: 16px;
    border-radius: 3px;
    position: relative;
    max-height: 53px;
    overflow: auto;
    text-align: justify;
}

.show-criterion-btn {
    margin-top: 4px;
    position: inherit !important;
    width: 100% !important;
    font-size: 12px !important;
    background-color: var(--pi-eighth-gradient-color);
    color: var(--pi-white-text);
}

.point-section.tiny-point,
.point-level-label.tiny-point {
    padding: 2px !important;
}

.structure-point-item.custom {
    padding: 20px 10px 10px !important;
}

.quickfilter-rule-btn.requirement-cb-box.requirement-cb-box-mini {
    padding: 7px 3px 3px !important;
    top: -18px !important;
}

.quickfilter-rule-btn.requirement-cb-box-mini {
    color: var(--pi-danger-color) !important;
}

.audit-details-box {
    background-color: var(--pi-white-text);
    padding: 2px 2px 16px;
    border-radius: 6px;
    margin-bottom: 15px;
    position: relative;
    border: 1px solid var(--pi-select-item-bg);
}

.audit-details-item {
    padding: 15px 5px;
    text-align: center;
    background-color: var(--pi-white-text);
}

.audit-details-icon {
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 2px;
    background-color: var(--pi-third-white-color);
}

.audit-details-icon i {
    font-size: 16px;
    color: var(--pi-secondary-color);
    vertical-align: middle;
}

.audit-details-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--pi-secondary-color);
}

.audit-details-value {
    font-size: 12px;
    color: var(--pi-eighth-gradient-color);
    font-weight: 400;
}

.audit-details-value-sub {
    font-size: 10px;
    margin-left: 5px;
}

.audit-details-value-sub i {
    font-size: 10px;
    color: var(--pi-eighth-gradient-color);
}

.audit-main-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.audit-main-progress .progress {
    border-radius: 0 !important;
}

.audit-main-progress .progress,
.audit-main-progress .progress-bar {
    height: 16px;
}

.audit-main-progress .progress {
    border-bottom-left-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}

/* .inspection-notes-container {
} */

/* .c-inspection-notes-container,
.a-inspection-notes-container {
} */

.inspection-note-title-label {
    padding: 15px;
    background-color: var(--pi-white-text);
    border-radius: 4px;
    color: var(--pi-secondary-color);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    position: relative;
}

.inspection-note-title-label button {
    position: absolute !important;
    right: 5px;
    bottom: -12px;
}

.inspection-note-form {
    padding: 25px 10px 10px;
    background-color: var(--pi-fourth-gray-color);
    margin-bottom: 20px;
    border-radius: 3px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
        rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
}

.audit-duration-div {
    position: absolute;
    top: -20px;
    right: 10px;
    width: 115px !important;
    text-align: center;
    background-color: var(--pi-third-color);
    border-radius: 3px;
    padding: 0 !important;
    font-size: 12px;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.audit-duration-label {
    background-color: var(--pi-third-gradient-color);
    width: 100%;
    padding: 1px;
    color: var(--pi-white-text);
    font-weight: 500;
}

.audit-duration-val {
    padding: 1px;
    color: var(--pi-white-text);
}

.approve-label {
    position: absolute;
    top: -10px;
    right: 5px;
}

/* ---- */
.progress-content {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border-radius: 2px;
    padding: 10px;
    background-color: var(--pi-white-text);
}

.progress-content-label {
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    font-size: 12px;
    color: var(--pi-secondary-color);
    font-weight: 600;
    margin-bottom: 0;
    padding: 8px;
    width: 100%;
    background-color: var(--pi-white-text);
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}

.progress-content-label i {
    font-size: 12px;
    color: var(--pi-warning-color);
    margin-right: 2px;
}

.progress.resume-progress {
    border-radius: 2px !important;
    height: 18px;
    font-size: 10px;
    font-weight: 600;
}

/* .progress.resume-progress .progress-bar {
    padding: 0 12px;
} */

.requirements-card-counter {
    background-color: var(--pi-second-gradient-color);
    padding: 2px 2px 1px;
    font-size: 11px;
    border-radius: 3px;
    margin-left: 4px;
    width: 50px;
    text-align: center;
    display: inline-block;
    vertical-align: text-top;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.requirements-card-counter-ok {
    background-color: var(--pi-success-color) !important;
}

.requirements-card-counter-ko {
    background-color: var(--pi-danger-color) !important;
}

.requirements-card-counter-ok i,
.requirements-card-counter-ko i {
    vertical-align: text-bottom !important;
    font-size: 12px !important;
}

.card.resume-percentage-card .card-body {
    max-height: 25em;
    overflow-y: auto;
}

.resume-percent-incomplete-item {
    /* background-color: var(--pi-third-white-color); */
    /* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px; */
    /* margin-top: 5px; */
    height: 100%;
    border-radius: 3px;
}

.ai-card-custom-body {
    padding: 10px 5px 10px;
    max-height: 20em;
    overflow-y: auto;
    margin-bottom: 2px;
    background-color: var(--pi-third-white-color);
    box-shadow: none !important;
}

.resume-percent-info {
    display: flex;
    gap: 4px;
    margin-bottom: 5px;
    /* padding: 3px; */
    background-color: transparent !important;
}

.resume-info-category,
.resume-info-section {
    padding: 3px;
    text-align: center;
    flex: auto;
    color: var(--pi-white-text);
    font-weight: 600;
    font-size: 10px;
    border-radius: 3px;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.resume-info-category i,
.resume-info-result-type-ko i,
.resume-info-result-type-ok i {
    font-size: 10px;
    color: var(--pi-white-text);
}

.resume-info-category-major {
    background-color: var(--pi-danger-color);
    opacity: 0.9;
}

.resume-info-category-minor {
    background-color: var(--pi-warning-color);
    opacity: 0.9;
}

.resume-info-category-rec {
    background-color: #c6a119;
    opacity: 0.9;
}

.resume-info-section-af {
    background-color: #00d5f7;
}

.resume-info-section-cb {
    background-color: #a781f7;
}

.resume-info-section-fv {
    background-color: #ff8672;
}

.resume-info-justification {
    font-size: 11px;
    color: var(--pi-primary-dark-color);
    padding: 9px;
    height: 6em;
    overflow-y: auto;
    background-color: var(--pi-white-text);
    border-radius: 2px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

.resume-info-criterion {
    background-color: var(--pi-eighth-gradient-color);
    font-size: 11px;
    color: var(--pi-white-text);
    padding: 10px;
    white-space: pre-line;
    height: 5em;
    overflow-y: auto;
    border-radius: 2px;
    margin-bottom: 2px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

/* detalles firmas */
#audit-wrapper {
    padding-left: 10px;
}

@media (max-width: 992px) {
    #audit-wrapper {
        padding-left: 0 !important;
        margin-top: 10px;
    }
}

.inspection-note-container {
    padding-top: 10px;
}

.audit-note-resume-card {
    background-color: var(--pi-white-text);
    border-radius: 3px;
    text-align: center;
    height: 100%;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.anr-label {
    padding: 10px 5px 5px;
}

.anr-label-icon {
    text-align: center;
    width: 24px;
    height: 24px;
    padding: 3px;
    display: inline-block;
    border-radius: 4px;
}

.anr-label-icon i {
    color: var(--pi-secondary-color);
    vertical-align: text-bottom;
}

.anr-label-text {
    color: var(--pi-secondary-color);
    font-size: 12px;
    font-weight: 700;
}

.anr-value {
    padding: 10px;
    max-height: 40px;
    overflow: auto;
    background-color: var(--pi-fourth-gray-color);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-top: 10px;
    font-size: 11px;
    color: var(--pi-secondary-color);
    font-weight: 500;
    text-align: left;
}

.anr-value i {
    font-size: 14px;
}

.anr-value-null {
    color: var(--pi-danger-color);
    margin-top: 5px;
    font-size: 11px;
    padding: 10px;
}

.btn-observations-put {
    position: absolute !important;
    right: 10px;
    bottom: -10px;
}

.signatures-box {
    padding: 15px;
    margin-top: 10px;
    border-radius: 3px;
    background-color: var(--pi-fifth-gradient-color);
}

.btn-remove-signature-user-profile {
    border: none;
    background-color: var(--pi-fourth-color);
    border-radius: 3px;
    text-align: center;
    width: 33px !important;
    height: 25px !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    position: absolute;
    top: -3px;
    left: -11px;
}

.btn-remove-signature-user-profile:hover {
    background-color: var(--pi-third-color);
}

.btn-remove-signature-user-profile i {
    font-size: 12px;
    color: var(--pi-eighth-gradient-color);
}

.btn-remove-signature-user-profile:hover i {
    color: var(--pi-fourth-color);
}

.signature-card {
    background-color: var(--pi-white-text);
    padding: 15px 15px 45px;
    border-radius: 4px;
    text-align: left;
    height: 100%;
    position: relative;
}

.signature-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border: none;
    padding: 10px;
    text-align: center;
    background-color: var(--pi-eighth-gradient-color);
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    color: var(--pi-white-text);
    font-size: 13px;
    font-weight: 500;
}

.signature-btn:hover,
.signature-btn:focus {
    background-color: var(--pi-third-color) !important;
}

.signature-btn i {
    color: var(--pi-white-text);
    margin-right: 3px;
}

.signature-resume-content {
    min-height: 8em;
    margin-bottom: 10px;
    text-align: center;
}

.signature-resume-content img {
    max-height: 8em;
    margin: 0 auto;
}

.signature-resume-date,
.signature-resume-user {
    color: var(--pi-secondary-color);
    font-size: 12px;
}

.signature-resume-date i,
.signature-resume-user i {
    color: var(--pi-secondary-color);
    font-size: 12px;
}

.signature-date-value {
    font-weight: 500;
    font-size: 11px;
}

.resume-info-result-type-ko {
    background-color: var(--pi-primary-dark-color);
    padding: 3px;
    text-align: center;
    flex: auto;
    color: var(--pi-white-text);
    font-weight: 600;
    font-size: 10px;
    border-radius: 3px;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.resume-info-result-type-ok {
    background-color: var(--pi-success-color);
    padding: 3px;
    text-align: center;
    flex: auto;
    color: var(--pi-white-text);
    font-weight: 600;
    font-size: 10px;
    border-radius: 3px;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

.condition-selected-products-xs {
    height: 25px;
    overflow: auto;
    background-color: var(--pi-third-color);
    margin-top: 2px;
    border-radius: 3px;
    padding: 1px;
}

.condition-selected-product-label-xs {
    display: inline-flex;
    font-size: 9px;
    padding: 2px;
    color: var(--pi-white-text) !important;
    border-radius: 3px;
    height: 18px;
    margin-right: 1px;
    background-color: var(--pi-seventh-gradient-color);
}

.product-label-delicon-xs {
    padding: 0px;
    margin-left: 3px;
    cursor: pointer;
    border-radius: 20px;
    background-color: var(--pi-white-text);
    width: 10px;
    height: 10px;
    text-align: center;
    position: relative;
    top: 2px;
}

.product-label-delicon-xs i {
    font-size: 8px;
    vertical-align: text-top;
    color: var(--pi-danger-color);
}

.ai-select-products-finder-xs .form-control.form-control-sm {
    /* padding: 2px; */
    /* padding-bottom: 0 !important; */
    /* font-size: 10px !important; */
    /* height: 8px !important; */
    line-height: 0 !important;
    /* min-height: 20px; */
    border-bottom-left-radius: 2px !important;
    border-bottom-right-radius: 2px !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.signature-canvas-content {
    position: relative;
}

.signature-buttons {
    display: flex;
    gap: 5px;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translate(-50%, 0);
}

.signature-tiny-btn {
    border: none;
    background-color: var(--pi-fourth-color);
    border-radius: 3px;
    text-align: center;
    width: 24px;
    height: 24px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}

.signature-tiny-btn i,
.reset-delete-sign-btn i {
    font-size: 12px;
    color: var(--pi-eighth-gradient-color);
}

.signature-tiny-btn.selected,
.signature-tiny-btn:hover,
.reset-delete-sign-btn:hover {
    background-color: var(--pi-third-color);
}

.signature-tiny-btn.selected i,
.signature-tiny-btn:hover i,
.reset-delete-sign-btn:hover i {
    color: var(--pi-fourth-color);
}

.reset-delete-sign-btn {
    border: none;
    background-color: var(--pi-fourth-color);
    border-radius: 3px;
    text-align: center;
    width: 24px;
    height: 24px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
    position: absolute;
    bottom: -3px;
    right: -11px;
}

.responsive-canvas-custom {
    margin: 0;
    padding: 0;
    /* height: 100%;
    width: 100%; */
    background-color: var(--pi-white-text);
    border-radius: 3px;
    /* display: block; */
    border: 2px solid var(--pi-secondary-color);
    /* margin-bottom: 5px; */
    /* width: 100%; */
}

/* fin detalles firmas */

.new-simple-audit-data-container {
    padding: 13px 13px 0;
    background-color: var(--pi-fifth-gradient-color);
    margin-top: 5px;
    margin-bottom: 15px;
    border-radius: 3px;
    height: 100%;
}

.audit-details-header,
.audit-details-footer {
    padding: 10px;
    margin-left: 10px;
    background-color: var(--pi-input-bg);
    margin-bottom: 10px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

.audit-details-footer {
    position: sticky;
    bottom: 10px;
    margin-top: 10px;
    z-index: 3;
    padding: 0 !important;
    height: 4em;
    display: flex;
    background-color: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 992px) {
    .audit-details-header,
    .audit-details-footer {
        margin-left: 0 !important;
    }
}

.audit-assistant-btn {
    width: 10em;
    padding: 10px;
    font-size: 14px;
    border: none;
    background-color: var(--pi-secondary-color);
    color: var(--pi-white-text);
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
}

.audit-assistant-btn.disabled,
.audit-assistant-btn.disabled:hover {
    cursor: default !important;
    background-color: var(--disabled-gray) !important;
}

.audit-assistant-btn i {
    color: var(--pi-white-text);
    vertical-align: middle;
    font-size: 14px;
}

.audit-assistant-btn:not(.disabled):hover {
    background-color: var(--pi-white-text) !important;
    color: var(--pi-secondary-color) !important;
}

.audit-assistant-btn:not(.disabled):hover i {
    color: var(--pi-secondary-color) !important;
}

/* .audit-assistant-btn-left {
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.audit-assistant-btn-right {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
} */

/* FIN DETALLES AUDITORIA */

.new-user-section-btn {
    width: 100%;
    display: block;
    padding: 10px;
    text-align: center;
    color: var(--pi-fifth-color) !important;
    background-color: var(--pi-third-gradient-color);
    border-radius: 3px;
    font-weight: 400;
    font-size: 13px;
    box-shadow:
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
}

.new-user-section-btn:hover {
    background-color: var(--pi-secondary-color) !important;
}

.new-user-section-btn i {
    font-size: 11px;
    color: var(--pi-fifth-color);
    vertical-align: text-top;
    padding-top: 2px;
}

/* NUEVO ALTA USUARIO */
/* .new-user-module-container {} */

.property-selector-div {
    /* background-color: var(--pi-fifth-gradient-color); */
    /* border-radius: 2px; */
    margin-top: 12px;
}

.property-selector-label {
    font-size: 12px;
    font-weight: 500;
    background-color: var(--pi-eighth-gradient-color);
    color: var(--pi-white-text);
    padding: 8px;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
}

.property-selector-content {
    padding: 20px;
    height: 17em;
    max-height: 17em;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--pi-third-white-color);
    margin-top: 10px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.property-card-item {
    background-color: var(--pi-white-text);
    border-radius: 3px;
    padding: 10px;
    cursor: pointer;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    border: 2px solid var(--pi-white-text);
    position: relative;
}

.property-card-item:not(.selected):hover {
    background-color: var(--pi-third-white-color) !important;
    border: 2px solid var(--pi-third-white-color) !important;
}

.property-card-item.selected {
    border: 2px solid var(--pi-success-color) !important;
}

.property-card-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--pi-menu-link-i-color);
}

.property-card-data {
    font-size: 11px;
    color: var(--pi-secondary-color);
}

.selected-property-icon {
    background-color: var(--pi-success-color);
    text-align: center;
    padding: 0;
    width: 18px;
    height: 18px;
    border-top-left-radius: 3px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.selected-property-icon i {
    color: var(--pi-white-text);
    font-size: 11px;
}

.badge-selector-count {
    display: inline-block;
    margin-left: 5px;
    width: 18px;
    background-color: var(--pi-third-gradient-color);
    font-size: 12px;
    text-align: center;
    border-radius: 3px;
}

.new-user-module-item {
    background-color: var(--pi-select-finder-bg);
    padding: 15px;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    position: relative;
    /* height: 100%; */
}

.new-user-module-item.active {
    background-color: var(--pi-white-text) !important;
}

.new-user-module-item .ok-label,
.new-user-module-item .ko-label {
    position: absolute;
    right: 10px;
    top: -5px;
    width: 90px;
}

.new-user-module-item .ok-label:hover,
.new-user-module-item .ko-label:hover {
    background-color: var(--pi-secondary-color) !important;
}

.new-user-module-i-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--pi-secondary-color);
    margin-bottom: 5px;
}

.new-user-module-i-desc {
    font-size: 11px;
    color: var(--pi-primary-dark-color);
    height: 3em;
    overflow: auto;
    font-weight: 500;
}

.new-user-select-xl {
    margin-top: 10px;
    padding: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pi-white-text);
    background-color: var(--pi-eighth-gradient-color);
    border-radius: 2px;
    position: relative;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 1px 1px,
        rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
}

.new-user-role-selected i {
    font-size: 14px;
    vertical-align: middle;
    color: var(--pi-secondary-color);
}

.new-user-role-unselected {
    padding: 5.55px;
}

.role-selected-icon {
    padding: 5px;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    min-width: 32px;
    height: 32px;
    margin-right: 8px;
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    box-shadow:
        rgba(0, 0, 0, 0.4) 0px 2px 4px,
        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.new-user-select-option-box {
    position: absolute;
    width: 100%;
    left: 0;
    top: 55px;
    background-color: wheat;
    border-radius: 3px;
    z-index: 2;
}

.new-user-select-option {
    background-color: var(--pi-eighth-gradient-color);
    border-radius: 0;
    padding: 10px;
    display: flex;
    cursor: pointer;
}

.new-user-select-option:hover {
    background-color: var(--pi-third-color) !important;
}

.new-user-select-option .user-role-icon {
    padding: 5px;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    min-width: 32px;
    height: 32px;
    text-align: center;
    margin-right: 8px;
    position: relative;
    top: 10px;
    vertical-align: text-bottom;
    box-shadow:
        rgba(0, 0, 0, 0.4) 0px 2px 4px,
        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
        rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.new-user-select-option .user-role-icon i {
    font-size: 15px;
    color: var(--pi-eighth-gradient-color);
    vertical-align: middle;
}

.new-user-select-option-title {
    display: block;
    font-size: 14px;
    color: var(--pi-white-text);
}

.new-user-select-option-subtitle {
    display: block;
    font-size: 11px;
    color: var(--pi-btn-icon-box-bg);
}

.company-audits-finder-label-special {
    font-size: 13px;
    font-weight: 400;
    color: var(--pi-white-text);
    display: block;
    background-color: var(--pi-eighth-gradient-color);
    padding: 10px;
    margin-bottom: 0;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.new-user-select-xl input {
    border-radius: 0 !important;
    box-shadow: none;
    border: none !important;
}

.audits-company-results-newuser {
    background-color: var(--pi-input-bg);
    border-radius: 2px;
    padding: 5px;
    position: absolute;
    left: 0;
    width: 100%;
    top: 35px;
    box-shadow:
        rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
        rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
    z-index: 2;
    max-height: 125px;
    overflow-y: auto;
}

.selected-company {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: inherit;
}

.selected-company i {
    vertical-align: bottom;
    display: inline-block;
    padding: 3px;
}

.selected-company .selected-company-name {
    display: inline;
    margin-right: 7px;
}

.new-user-delete-company-icon {
    display: inline-block;
    width: 12px;
    text-align: center;
    cursor: pointer;
}

.new-user-delete-company-icon:hover,
.new-user-delete-sign-btn:hover {
    opacity: 0.8;
}

.new-user-delete-company-icon i {
    color: var(--pi-white-text);
    font-size: 10px;
    background-color: var(--pi-danger-color);
    border-radius: 3px;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 1px 1px,
        rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    padding: 2px 3px;
    vertical-align: baseline !important;
}

.new-user-main-form {
    background-color: var(--pi-fifth-gradient-color);
    padding: 20px;
    margin-top: 25px;
    border-radius: 3px;
    position: relative;
}

.input-content-body {
    padding: 30px 20px 20px;
    background-color: var(--pi-first-gradient-color);
    border-radius: 3px;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 0px 5px 0px,
        rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    position: relative;
}

/* .input-form-box-signature {} */

.input-content-body .label-content {
    z-index: 1;
    position: absolute;
    top: -10px;
    left: 10px;
}

.input-content-body .ok-label {
    width: 130px;
    display: inline-block;
}

.input-content-body .module-label {
    background-color: var(--pi-secondary-color);
    color: var(--pi-white-text) !important;
    font-size: 12px;
    font-weight: 400;
    border-radius: 3px;
    width: 115px;
    padding: 2px 5px;
    text-align: center;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
    margin-left: 10px;
    display: inline-block;
}

.new-user-delete-sign-btn {
    position: absolute;
    background-color: var(--pi-danger-color);
    text-align: center;
    cursor: pointer;
    top: 25px;
    right: 0px;
    width: 30px !important;
}

.new-user-delete-sign-btn i {
    font-size: 12px;
    color: var(--pi-white-text);
}

.main-buttons-box {
    position: absolute;
    top: -10px;
    right: 10px;
}

.main-buttons-box button {
    display: inline-block;
    margin-left: 10px;
}

.responsive-canvas {
    margin: 0;
    padding: 0;
    height: 150px;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    display: block;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px !important;
}

/* FIN NUEVO ALTA USUARIO */

/* NOTIFICACIONES */
.badge-notification {
    position: absolute;
    top: -10px;
    right: -5px;
    height: 18px;
    width: 18px;
    color: white;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    background-color: var(--pi-danger-color);
}

.erp-notifications-panel {
    position: relative;
    z-index: 9999;
}

.erp-notifications-panel .menu.menu-sub {
    border-radius: 5px !important;
    box-shadow:
        rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
        rgba(9, 30, 66, 0.08) 0px 0px 0px 1px !important;
}

.notifications-header-panel {
    background-color: var(--pi-eighth-gradient-color) !important;
    opacity: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.notifications-header-panel .notifications-title-icon {
    border-radius: 3px;
    background-color: var(--pi-fifth-color);
    height: 24px;
    width: 27px;
    margin: 4px auto;
    display: inline-block;
    padding-top: 1px;
    margin-right: 3px;
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

.notifications-header-panel .notifications-title-icon i {
    color: var(--pi-eighth-gradient-color);
    font-size: 15px;
    vertical-align: text-bottom;
}

.notifications-header-panel .notifications-title-label {
    color: var(--pi-white-text);
    text-align: center;
    font-weight: 400;
    font-size: 14px;
}

.notifications-body-panel {
    height: 50vh;
    max-width: 60vh;
    overflow-y: scroll;
    background-color: var(--pi-eighth-gradient-color);
    padding: 16px 6px 15px 12px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.notification-item-card {
    padding: 25px 5px 5px;
    background-color: var(--pi-white-text);
    width: 100%;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    box-shadow:
        rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
        rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
}

.notification-item-card:hover .notification-item-content a {
    color: var(--pi-white-text) !important;
}

.notification-item-card:hover {
    transition: 0.8s;
    background-color: var(--pi-second-gradient-color) !important;
}

.notification-item-upper {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.notification-item-type,
.notification-item-date {
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    padding: 3px;
    flex-grow: 1;
}

.notification-item-type.type-success {
    background-color: #ccffce;
    color: var(--pi-success-color);
    font-weight: 600;
    border-top-left-radius: 3px;
}

.notification-item-type.type-success i {
    font-size: 11px;
    color: var(--pi-success-color);
    margin-right: 2px;
}

.notification-item-type.type-danger {
    background-color: #ffe4ea;
    color: var(--pi-danger-color);
    font-weight: 600;
    border-top-left-radius: 3px;
}

.notification-item-type.type-danger i {
    font-size: 11px;
    color: var(--pi-danger-color);
    margin-right: 2px;
}

.notification-item-date {
    background-color: var(--pi-fourth-color);
    color: var(--pi-secondary-color);
    font-weight: 500;
    border-top-right-radius: 3px;
}

.notification-item-date i {
    font-size: 11px;
    color: var(--pi-secondary-color);
    margin-right: 2px;
}

.notification-item-content {
    height: 34px;
    overflow: auto;
    padding: 2px;
    width: 100%;
    display: block;
}

.notification-item-content a {
    font-size: 10px;
    color: var(--pi-primary-dark-color) !important;
    display: block;
    width: 100%;
}

.btn-item-icon-close {
    border: none;
    width: 16px;
    height: 16px;
    background-color: var(--pi-danger-color);
    position: absolute;
    top: -5px;
    right: -6px;
    border-radius: 30px;
    padding: 2px;
    z-index: 2;
}

.btn-item-icon-close:hover {
    opacity: 0.8;
}

.btn-item-icon-close i {
    color: var(--pi-white-text);
    font-size: 10px;
    vertical-align: text-top;
}

/* FIN DE NOTIFICACIONES*/

/* PANEL DE NOTIFICACIONES DEL USUARIO*/

.acount-notifications-buttons {
    display: flex;
    gap: 5px;
    padding: 5px;
    position: absolute;
    top: 10px;
    right: 5px;
    z-index: 2;
}

.btn-notifications-filter {
    border: none;
    background-color: var(--pi-secondary-color);
    border-radius: 3px;
    padding: 10px;
    color: var(--pi-white-text);
    font-size: 12px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}

.btn-notifications-filter .requirements-card-counter {
    margin-top: -3px !important;
    padding: 3px !important;
}

.btn-notifications-filter:hover {
    background-color: var(--pi-white-text) !important;
    color: var(--pi-secondary-color) !important;
}

.btn-notifications-filter:hover .requirements-card-counter {
    background-color: var(--pi-secondary-color) !important;
    color: var(--pi-white-text) !important;
}

.btn-notifications-filter.selected-noti-filter {
    background-color: var(--pi-primary-dark-color);
}

.user-notifications-sidebar {
    padding: 12px;
    background-color: var(--pi-primary-dark-color);
    height: 45em;
    overflow: auto;
}

.user-settings-noti-item-card {
    width: 100%;
    padding: 35px 5px 5px;
    display: block;
    margin-bottom: 5px;
    background-color: var(--pi-white-text);
    border-radius: 3px;
    position: relative;
    box-shadow:
        rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
        rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.user-settings-noti-item-card .user-selected-noti {
    position: absolute;
    width: 17px;
    height: 17px;
    background-color: var(--pi-success-color);
    text-align: center;
    border-radius: 4px;
    top: 50%;
    right: -9px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}

.user-settings-noti-item-card .user-selected-noti i {
    font-size: 10px;
    color: var(--pi-white-text);
    vertical-align: middle;
    margin-bottom: 3px;
}

.user-settings-noti-item-card-upper {
    display: flex;
    gap: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.user-noti-type {
    flex-grow: 1;
    background-color: var(--pi-eighth-gradient-color);
    color: var(--pi-white-text);
    font-size: 10px;
    padding: 4px;
    white-space: nowrap;
    border-top-left-radius: 3px;
}

.user-noti-date {
    background-color: var(--pi-third-white-color);
    color: var(--pi-secondary-color);
    font-size: 10px;
    padding: 4px;
    /* white-space: nowrap; */
    max-height: 23px;
    overflow: auto;
    font-weight: 600;
    border-top-right-radius: 3px;
}

.user-noti-content {
    font-size: 11px;
    height: 40px;
    overflow: auto;
    color: var(--pi-primary-dark-color);
    font-weight: 500;
    display: block;
    width: 100%;
}

.notification-content-body {
    background-color: var(--pi-white-text);
    height: 100%;
    width: 100%;
}

.custom-notification-body {
    padding: 60px 20px 20px;
    background-color: var(--pi-third-white-color);
    color: var(--pi-primary-dark-color);
    font-size: 13px;
    height: 45em;
    max-height: 45em;
    overflow: auto;
    display: block;
}

.notification-details-buttons {
    position: absolute;
    bottom: -20px;
    left: 50%;
    display: flex;
    gap: 15px;
}

.notification-details-mark-btn {
    border: none;
    border-radius: 3px;
    padding: 10px;
    background-color: var(--pi-white-text);
    font-size: 12px;
    font-weight: 500;
    color: var(--pi-secondary-color);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.notification-details-mark-btn:hover {
    color: var(--pi-white-text);
    background-color: var(--pi-secondary-color);
}

.notification-details-mark-btn:hover i {
    color: var(--pi-white-text);
}

.notification-details-mark-btn i {
    font-size: 12px;
    color: var(--pi-secondary-color);
}

.notification-details-delete-btn {
    border: none;
    border-radius: 3px;
    padding: 10px;
    background-color: var(--pi-white-text);
    font-size: 12px;
    font-weight: 600;
    color: var(--pi-danger-color);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.notification-details-delete-btn:hover {
    color: var(--pi-white-text);
    background-color: var(--pi-danger-color);
}

.notification-details-delete-btn:hover i {
    color: var(--pi-white-text);
}

.notification-details-delete-btn i {
    font-size: 12px;
    color: var(--pi-danger-color);
    margin-right: 3px;
}

/* FIN DE PANEL DE NOTIFICACIONES DEL USUARIO*/

/* ESTILOS DE TODOS LOS SPINNER */
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

@keyframes audit-mini-spinner {
    0% {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(359deg);
    }
}

.spinner {
    height: 100%;
    width: 100%;
    background-color: rgb(0 0 0 / 38%);
    position: absolute;
    top: 0;
    left: 0;
    padding: 21px;
    z-index: 999;
}

.spinner:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    border-top-color: #000;
    animation: spinner 0.6s linear infinite;
}

.lds-dual-ring {
    display: flex;
    height: 75px;
    margin: 0 auto;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 10px);
    padding: 5px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 36px;
    height: 36px;
    margin: 15px 10px 10px;
    border-radius: 50%;
    border: 2px solid var(--pi-white-text);
    border-color: var(--pi-secondary-color) var(--pi-white-text) var(--pi-white-text) var(--pi-white-text);
    animation: lds-dual-ring 1.5s linear infinite;
}

#loading-text {
    position: absolute;
    bottom: 0;
    font-size: 12px;
    margin: 0 auto;
    color: var(--pi-white-text);
    font-weight: 500;
}

.x {
    width: 1em;
    height: 1em !important;
    color: #6d9b77;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: lds-dual-ring 2s infinite linear;
    transform-origin: center;
    letter-spacing: 0;
    margin-top: 0.2em;
    margin-left: -0.1em;
}

.lds-dual-ring-inside {
    display: flex;
    height: 75px;
    margin: 0 auto;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 10px);
    padding: 5px;
    background-color: var(--pi-fourth-gray-color);
    border-radius: 5px;
    box-shadow:
        rgb(9 30 66 / 25%) 0px 4px 8px -2px,
        rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.lds-dual-ring-inside:after {
    content: " ";
    display: block;
    width: 40px;
    height: 40px;
    margin: 8px;
    border-radius: 50%;
    border: 2px solid var(--pi-primary-dark-color);
    border-color: var(--pi-primary-dark-color) transparent #65a9a4 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

#loading-text-inside {
    position: absolute;
    bottom: 0;
    left: 10px;
    font-size: 10px;
    margin: 0 auto;
    color: #1e1e2d;
    font-weight: 600;
}

.lds-dual-ring-modal {
    width: 5em;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    background-color: var(--pi-third-white-color);
    border-radius: 5px;
    padding: 5px;
    box-shadow:
        rgb(0 0 0 / 10%) 0px 1px 3px 0px,
        rgb(0 0 0 / 6%) 0px 1px 2px 0px;
}

.lds-dual-ring-modal:after {
    content: " ";
    display: block;
    width: 40px;
    height: 40px;
    margin: 8px;
    border-radius: 50%;
    border: 2px solid var(--pi-primary-dark-color);
    border-color: var(--pi-primary-dark-color) transparent #65a9a4 transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

#loading-text-modal {
    font-size: 10px;
    margin: 0 auto;
    color: var(--pi-primary-dark-color);
    font-weight: 600;
}

.aa-spinner {
    transform: scale(var(--ggs, 1));
}

.aa-spinner,
.aa-spinner::after,
.aa-spinner::before {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    width: 14px;
    height: 14px;
    vertical-align: sub;
}

.aa-spinner::after,
.aa-spinner::before {
    content: "";
    position: absolute;
    border-radius: 100px;
}

.aa-spinner::before {
    animation: audit-mini-spinner 1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
    border: 3px solid transparent;
    border-top-color: currentColor;
}

.aa-spinner::after {
    border: 3px solid;
    opacity: 0.2;
}

.gg-spinner {
    transform: scale(var(--ggs, 1));
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-10px, 0px);
}

.gg-spinner,
.gg-spinner::after,
.gg-spinner::before {
    box-sizing: border-box;
    display: inline-flex;
    width: 14px;
    height: 14px;
    vertical-align: sub;
}

.gg-spinner::after,
.gg-spinner::before {
    content: "";
    position: absolute;
    border-radius: 100px;
}

.gg-spinner::before {
    animation: audit-mini-spinner 1s cubic-bezier(0.6, 0, 0.4, 1) infinite;
    border: 3px solid transparent;
    border-top-color: currentColor;
}

.gg-spinner::after {
    border: 3px solid;
    opacity: 0.2;
}

.lds-dual-ring-main {
    display: block;
    height: 75px;
    margin: 0 auto;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, 10px);
    padding: 0px;
}

.lds-dual-ring-main:after {
    content: " ";
    display: block;
    width: 36px;
    height: 36px;
    margin: 15px 10px 10px;
    border-radius: 100%;
    border: 1px solid var(--pi-white-text);
    border-color: #8ebe21 var(--pi-white-text);
    animation: lds-dual-ring 1.5s linear infinite;
}

/* FIN ESTILOS SPINNER */

/* estilos de los archivos de los requisitos*/
#requirement-files-input {
    opacity: 0;
    display: none;
}

    .requirement-file {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f9f9f9;
        margin-bottom: 10px;
        transition: background-color 0.3s;
        text-align: center;
    }
    .requirement-file:hover {
        background-color: #f1f1f1;
    }
    .requirement-file-name i {
        font-size: 2rem;
        color: #007bff;
    }
    .requirement-file-name span {
        display: block;
        margin-top: 5px;
        font-size: 0.9rem;
        color: #333;
    }
    .requirement-file-actions button {
        border: none;
        background: none;
        margin: 5px;
        color: #007bff;
        cursor: pointer;
    }
    .requirement-file-actions button:hover {
        color: #0056b3;
    }
    .requirement-file-list {
        height: 100%;
        overflow-y: scroll;
    }

    .requirement-file-list::-webkit-scrollbar {
        display: none !important;
    }

    .custom-input-requirement-files {
        border: 2px solid var(--pi-primary-color);
        box-shadow: none;
        text-align: center;
        padding: 3px;
        border-radius: 0;
    }

    .custom-input-requirement-files:focus {
        border: 2px solid var(--pi-primary-color);
        box-shadow: none;
    }
/* fin de los estilos de archivos de requisitos*/