.navbar-light {
    background-color: #2295ad;
}

.navbar-light .navbar-nav .nav-link {
    color: #333;
}



.btn-info {
    color: #fff;
    border-color: #2295ad !important;
    background-color: #2295ad !important;
}

.btn-primary {
    color: #fff;
    border-color: #2295ad !important;
    background-color: #2295ad !important;
}

.bg-info {
    background-color: #2295ad !important;
}

#navbar-mobile li {
    color: #fff !important;
}

.table_dashboard th,
.table_dashboard td {
    padding: 1rem 0.6rem 0.5rem 0.6rem !important;
}

.smallHeight {
    height: 30px;
}

.info-status-chart {
    float: right;
}

.card-header-section {
    height: 42px;
}

.dot-orange {
    height: 25px;
    width: 25px;
    background-color: orange;
    color: white;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}

.dot-yellow {
    height: 25px;
    width: 25px;
    background-color: yellow;
    color: black;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}

.dot-red {
    height: 25px;
    width: 25px;
    background-color: red;
    color: white;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}

.dot-green {
    height: 25px;
    width: 25px;
    background-color: green;
    color: white;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}

.grid_header {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
}

.header_title {
    grid-column-start: 1;
    grid-column-end: 2;
}

.header_search {
    grid-column-start: 2;
    grid-column-end: 6;
}

.header_actions {
    grid-column-start: 5;
    grid-column-end: 6;
}

.header_search form {
    float: right;
}

.inner {
    width: 50%;
    float: left;
    display: inline-block;
}

.outer {
    width: 100%;
}

.list-group-item.active_client {
    z-index: 2;
    color: #fff !important;
    background-color: #1a80ad !important;
    border: 1px solid #1a80ad;
}

.active_client h5 {
    color: #1a80ad !important;
    font-weight: bold !important;
}

.nav.nav-pills .nav-item .nav-link.active.button-tab {
    color: #1a80ad;
    background-color: white !important;
    border-bottom: none !important;
    border: 1px solid white;
    border-top: 3px solid #1a80ad !important;
}

.nav.nav-pills .nav-item .nav-link.button-tab {
    color: black;
}

.nav.nav-pills.nav-pill-bordered .nav-item.button-tabs {
    border: 1px solid #d3d3d3;
    border-bottom: none !important;
}

.repeater-default .row {
    background-color: #f9f9f9;
    padding: 10px;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
}

.card-bordered {
    border: 1px solid #d3d3d3 !important;
    border-top: none !important;
}

.btn_delete_items {
    float: right;
}

.newVisit {
    margin-top: 20px;
}

.table-responsive tbody,
.table-responsive thead {
    width: 100% !important;
}

.header_search form input,
.header_search form select {
    margin-right: 5px;
    margin-bottom: 5px;
}

.header_search form button {
    margin-left: 10px;
    margin-bottom: 5px;
}

.table th {
    background-color: #d4e7f0;
    color: #333;
}

.table .btn {
    padding: .3rem .5rem !important;
    margin-bottom: 0px !important;
}

.dataTables_length .custom-select {
    width: 60px !important;
    height: 25px !important;
}

.btn_delete_items {
    padding: .4rem .5rem !important;
}

.horizontal-top-icon-menu #main-menu-navigation li.nav-item .nav-link i {
    font-size: 1.5rem;
    display: block;
    float: none;
    margin-right: 0;
    margin-bottom: .5rem;
    text-align: center;
}

.header-navbar .dropdown .dropdown-menu .dropdown-item {
    width: 100%;
    padding: 10px 20px;
}

.header-navbar .dropdown .dropdown-menu li>a.nav-link {
    padding: 1rem 1rem !important;
    min-width: 180px;
}

.header-navbar .dropdown .dropdown-menu li>a.nav-link:hover {
    background-color: #f5f5f5;
}

#header_search input,
#header_search select {
    margin-right: 10px;
}

.format-swal-msg pre {
    padding: 10px;
    font-size: 14px;
}

.grid_search_button {
    margin-top: 28px;
    display: inline-block;
}

.bold {
    font-weight: bold;
    color: #333;
}

.my_btn_export {
    margin-top: 28px;
    display: inline-block;
}

.canbill {
    float: left;
}

.pagination a {
    padding: 10px 15px;
    border: 1px solid #ddd;
}

.pagination li.active a {
    padding: 10px 15px;
    border: 1px solid #2295ad;
    background-color: #2295ad;
    color: #fff;
    font-weight: bold;
}

.nav_pagination nav {
    display: inline-block;
    width: auto;
}

.normal-text {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



.tooltip_calendar {
    position: absolute;
    background-color: #f2f2f2;
    color: #333;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 9999;
    pointer-events: none;
    max-width: 300px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid #666;
}

.tooltip_calendar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #f2f2f2 transparent transparent transparent;
}

.tooltip {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    z-index: 9999;
}

.ctrl-dragging {
    cursor: copy !important;
}

.blink_me {
    animation: blinker 2s linear infinite;
    color: red;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.active_filter,
.active_filter_color {
    background-color: rgba(34, 149, 173, .1);
}

#header_search .select2 {
    margin-right: 10px;
}


.searchoptions {
    float: left;
}

.gridColumnOptions {
    float: left;
    display: inline;
}

#visible_columns_options {
    float: left;
}

#form .nav-vertical .nav-left.nav-tabs li.nav-item a.nav-link {
    border-right: none !important;
}

#form .nav-vertical .nav-left~.tab-content {
    margin-left: 250px !important;
}

#form .tab-content .tab-pane {
    min-height: 400px;
}

.custom-link-tab {
    min-width: 251px !important;
}

.custom_checkboxes .tags input+label {
    background: #fff;
    height: 38px;
    width: auto;
    display: inline-block;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
    color: #646464;
    border: 1px solid #d7d7d7;
    min-width: 200px;
}

.custom_checkboxes .tags input:checked+label {
    background: #2295ad;
    border: 1px solid #2295ad;
    height: 38px;
    width: auto;
    display: inline-block;
    padding: 5px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
}

.label_bold label {
    font-weight: bold;
}


.rejected_bkg {
    background-color: #ff443e;
}

.corrected_bkg {
    background-color: #f0a8f0;
}

.pending_bkg {
    background-color: #fe8640;
}

.approved_bkg {
    background-color: #10b165;
}

.billed_bkg {
    background-color: #10b165;
}

.archived_bkg {
    background-color: #358fff;
}

.missing_bkg {
    background-color: #fd0c04;
}

.pastdue_bkg {
    background-color: #4b4a4a;
}

.ready_bkg {
    background-color: #358fff;
}

.rejected_color {
    color: #ff443e;
}

.corrected_color {
    color: #fe8640;
}

.pending_color {
    color: #f9cd43;
    color: #897022;
}

.approved_color {
    color: #10b165;
}

.billed_color {
    color: #10b165;
}

.archived_color {
    color: #358fff;
}

.pastdue_color {
    background-color: #4b4a4a;
}

.ready_color {
    color: #358fff;
}


.badge-filters {
    background-color: #1a80ad;
    padding: 5px !important;
}

.filters input[type=checkbox] {
    display: none;
}

.filters label {
    background: #fff;
    height: 35px;
    min-width: 120px;
    display: inline-block;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
    color: #1a80ad;
    border: 1px solid #1a80ad;
}

.filters input:checked+label {
    background: #1a80ad;
    border: 1px solid #1a80ad;
    height: 35px;
    min-width: 120px;
    display: inline-block;
    padding: 5px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
}


.display_mode input[type=radio] {
    display: none !important;
}

.display_mode label {
    background: #fff;
    height: 35px;
    min-width: 120px;
    display: inline-block;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
    color: #1a80ad;
    border: 1px solid #1a80ad;
    float: left;
    margin-right: 15px;
}

.display_mode input:checked+label {
    background: #1a80ad;
    border: 1px solid #1a80ad;
    height: 35px;
    min-width: 120px;
    display: inline-block;
    padding: 5px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    float: left;
    margin-right: 15px;
}

.custom_checkboxes .tags input[type=checkbox] {
    display: none;
}

.custom-card-content {
    background-color: #f9f9f9;
}

.assesments_files_select input[type="file"]#file {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.p07 {
    padding: .7rem !important;
}

.assesments_files_select label[for="file"] {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background-color: #1a80ad;
    display: inline-block;
    transition: all .5s;
    cursor: pointer;
    padding: 15px 40px !important;
    text-transform: uppercase;
    width: fit-content;
    text-align: center;
}

.text-custom-color {
    color: #1a80ad;
}

.fc-header-toolbar h2 {
    padding: 10px;
    width: 100%;
    margin-bottom: 15px;
    color: #333;
}

.fc-unthemed .fc-today {
    color: #fff;
    background: #2295ad;
}

.btn-outline-primary.disabled,
.fc button.disabled,
.btn-outline-primary:disabled,
.fc button:disabled {
    color: #2295ad;
}

.fc-unthemed .fc-content,
.fc-unthemed .fc-divider,
.fc-unthemed .fc-popover,
.fc-unthemed .fc-row,
.fc-unthemed tbody,
.fc-unthemed td,
.fc-unthemed th,
.fc-unthemed thead {
    border-color: #ccc;
}

.fc-left {
    width: 100%;
}

.fc button {
    color: #2295ad;
    border-color: #2295ad;
    background-color: transparent;
    background-image: none;
}

.fc-button-group {
    margin-right: 15px;
}

.fc-modal-footer {
    display: inline-block;
}

.fc-modal-header {
    background-color: #2295ad;
}

.fc-modal-header .modal-title {
    color: #fff;
}

.fc-modal-header {
    border-radius: 0px !important;
}

.fc-modal-header button {
    color: #fff;
    font-size: 2rem !important;
    padding-top: .9rem !important;
}

.calendar-sidebar,
.calendar-sidebar>span#sidebarToggler,
#eventListToggler {
    background-color: #1a80ad !important;
}

#eventListToggler,
.calendar-sidebar,
.calendar-sidebar>span#sidebarToggler,
.evo-calendar {
    box-shadow: none !important;
}

.calendar-table th[colspan="7"],
.event-list>.event-empty>p {
    color: #1a80ad !important;
}

.event-list>.event-empty {
    background-color: rgba(120, 144, 156, .15) !important;
    border: 1px solid #1a80ad !important;
}

.calendar-sidebar>.month-list>.calendar-months>li.active-month,
.calendar-sidebar>.month-list>.calendar-months>li:hover {
    background-color: #6a7e88 !important;
}

.calendar-sidebar>.month-list>.calendar-months>li {
    padding: 5px 30px !important;
}

input.status_modal[type=radio] {
    display: none;
}

input.status_modal+label {
    background: #fff;
    height: 33px;
    width: 19%;
    display: inline-block;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
    color: #646464;
    border: 1px solid #d7d7d7;
}

input.status_modal:checked+label {
    border: 1px solid #1a80ad;
    height: 33px;
    width: 19%;
    display: inline-block;
    padding: 5px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
}

#calendar-visits .event-container>.event-info>p.event-title {
    font-size: 17px !important;
}

#visits_modal i {
    color: #1a80ad;
}

.img_choice {
    position: absolute;
    left: -20px;
    top: -30px;
    z-index: 10;
    width: 100px;
}

.text-color-basic {
    color: #1a80ad;
}

.img_new_choice {
    position: absolute;
    left: -20px;
    top: -30px;
    z-index: 10;
    width: 120px;
}

.border-custom {
    border: 1px solid rgba(120, 144, 156, .5);
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 0 !important;
    margin-right: 8px !important;
    margin-bottom: 2px;
    padding: 2px 6px !important;
    color: #fff;
    border-color: #1a80ad !important;
    background-color: #1a80ad !important;
}

.display-inline label {
    display: inline !important;
}

.not_incident_report_url label {
    margin-top: 6px;
}

.select2 {
    max-width: 100%;
}

.background-pyramid {
    background-color: #1a80ad !important;
}

input.actions[type=checkbox] {
    display: none;
}

input.actions+label {
    background: #fff;
    height: 33px;
    display: inline-block;
    width: 100%;
    padding: 5px;
    text-align: center;
    border-radius: 3px;
    color: #646464;
    border: 1px solid #d7d7d7;
}

input.actions:checked+label {
    border: 1px solid #1a80ad;
    background-color: #1a80ad !important;
    height: 33px;
    width: 100%;
    display: inline-block;
    padding: 5px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
}

form .form-section1 {
    line-height: 3rem;

    margin-bottom: 20px;

    color: #1d2b36;
    border-bottom: 1px solid #1d2b36;
}

form .form-section2 {
    line-height: 3rem;

    margin-bottom: 20px;

    color: #1d2b36;
    border-bottom: 2px solid #1d2b36;
}

form .form-section3 {
    line-height: 4rem;

    margin-bottom: 20px;

    color: #1d2b36;
    border-bottom: 3px solid #1d2b36;
}

.alert-info {
    color: #104153 !important;
    border-color: #3bafda !important;
    background-color: #77c8e5 !important;
}

.bs-callout-success {
    display: block;
    color: black;
    border-color: #37bc9b !important;
    border-radius: .25rem;
    background-color: #afe8d9;
}

.bs-callout-success {
    color: black;
}

[class*="bs-callout"].callout-bordered {
    border: 1px solid #ddd;
    border-top-color: rgb(221, 221, 221);
    border-right-color: rgb(221, 221, 221);
    border-bottom-color: rgb(221, 221, 221);
    border-left-color: rgb(221, 221, 221);
}

.client_list_mobile {
    display: none !important;
}

.client_list_desktop {
    display: block;
}

.blockOverlay {
    opacity: 0 !important;
}

.blockUI {
    position: fixed !important;
    padding: 5px !important;
    margin: 0px !important;
    width: 8% !important;
    top: 345px !important;
    left: 43% !important;
    text-align: center !important;
    color: rgb(0, 0, 0) !important;
    border: none !important;
    background-color: rgb(255, 255, 255) !important;
    cursor: wait !important;
}

.brand-text {
    line-height: 1 !important;
}

.brand-text small {
    font-size: 60% !important;
    float: right;
    margin-top: 4px;
}

#modal_notification .modal-header,
#modal_notification_single .modal-header {
    background-color: #1a80ad;
    text-align: center !important;
    border-radius: 0px;
}

#modal_notification .modal-header h4,
#modal_notification_single .modal-header h4 {
    color: #fff;

}

#modal_notification .modal-dialog,
#modal_notification_single .modal-dialog {
    margin-top: 10%;
}

#notification_title,
#notification_title_single {
    margin: auto;
}

.border-light-modal {
    border: 1px solid rgba(120, 144, 156, .2) !important;
}

.color-primary-pyr {
    color: #1a80ad;
}


.client_emp_relation .card {
    border: 1px solid #ddd;
    min-height: 200px;
}

.bg-gray {
    background-color: #f5f5f5;
}

.div-inline {
    display: inline-block;
}

.w100 {
    width: 100% !important;
}

.pr5 {
    padding-right: 5px !important;
}

.filter_by {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 10px;
    background-color: #dce6eb;
    font-size: 11px;
}

.filter_by strong {
    color: #333;
}

#main-menu-navigation li a i {
    color: #1a80ad !important;
}

.clock_hours {
    display: inline-block;
    width: 60px;
    height: calc(2.75rem + 2px);
    padding-left: 10px !important;
}

.clock_minutes {
    display: inline-block;
    width: 60px;
    height: calc(2.75rem + 2px);
    padding-left: 10px !important;
}

.clock_ampm {
    display: inline-block;
    width: 60px;
    height: calc(2.75rem + 2px);
    padding-left: 10px !important;
}


.star_yellow {
    color: #f6ca00;
}


.bg-danger-custom {
    background-color: rgb(255, 227, 227) !important;
}



.text-gray-disabled {
    color: #999;
}

.credits_available {
    background-color: #0c668e;
    min-height: 40px;
    padding: 10px;
    border-left: 2px solid #fff;
}

.credits_available .number {
    font-size: 30px;
    font-weight: bold;
    float: left;
    margin-right: 5px;
}

.card_updated {
    animation: fade 2s forwards;
    background-color: rgba(212, 231, 240, .5);
}

@keyframes fade {
    from {
        background-color: rgba(212, 231, 240, .5);
    }

    to {
        background-color: rgba(255, 255, 255, 1);
    }
}

.help-bubble {
    position: fixed;
    bottom: 0;
    right: 0;
    border: 3px solid #fff;
    border-bottom: none !important;
    padding: 5px 10px;
    background-color: #1a80ad;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    font-size: 14px;
}

.help-bubble a,
.help-bubble a:hover {
    color: #fff;
}

.icon-help {
    font-size: 55px !important;
    max-width: 50px;
    padding-left: 20px;
}

.icon-help-phone {
    margin-right: 44px;
}

.modal-title-help {
    padding: 10px;
    font-weight: bold;
}

.modal-footer-help {
    border-top: 1px solid #ddd;
}

.list_referrer_donut li {
    float: left;
    margin-right: 10px;
}

.height-230 {
    height: 228px !important;
}

#clients-list a {
    padding: 5px 10px;
}


.nav.nav-tabs.nav-top-border .nav-item a.nav-link.active {
    color: #555;
    border-top: 3px solid #1a80ad;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.nav.nav-tabs.nav-top-border .nav-item a {
    color: #1a80ad;
}

.icon_menu {
    width: 40px;
    display: block;
    text-align: center;
    margin: auto auto 5px;
}

.header-navbar .navbar-container ul.nav li>a.nav-link {
    font-size: 1.05rem;
    padding: 1.1rem 1rem;
}



.table_head_up {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 7px 7px;
    border-color: transparent transparent #c7c7c7 transparent;
    float: right;
    margin-right: 3px;
}

.table_head_down {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7px 0 7px;
    border-color: #c7c7c7 transparent transparent transparent;
    float: right;
    margin-right: 3px;
}

.order_container {
    display: inline-block;
    float: right;
    padding-top: 8px;
    margin-right: 5px;
}

.facebook_color {
    color: #1877f2;
}

.google_color {
    color: #ea4335;
}

.referals_color {
    color: #8cbfd6;
}

.direct_color {
    color: #34a853;
}

.nextdoor_color {
    color: #8ed500;
}

.ads_color {
    color: #32a34f;
}

.padding-5-15 {
    padding: 5px 10px !important;
}

.background-custom-color {
    background-color: #d4e7f0;
}

.background-custom-fade {
    background-color: rgba(212, 231, 240, .1);
}

.signature_preview {
    border: 2px dotted #ddd;
    min-height: 100px;
    display: block;
    text-align: center;
    vertical-align: middle;
    padding: 20px;
    font-size: 40px;
    font-family: 'Babylonica', cursive;
}

.signature_preview img {
    max-width: 100%;
}


.background-light {
    background-color: #f9f9f9;
    border: 1px solid #f5f5f5;
}

#div_clients_to_invoice {
    margin-right: 0px !important;
}

.heading-elements-custom {
    right: 0px !important;
}

.background-white {
    background-color: #fff !important;
}

#pager_per_page_selector {
    margin-bottom: 0px !important;
}

.btn_run_bulk_action {
    margin-top: -4px !important;
}

.border-light-custom {
    border: 1px solid #f5f5f5;
}

.row_objetive {
    cursor: pointer;

}

.row_objetive:hover {
    background-color: rgba(212, 231, 240, .3) !important;
}

.valid_date_item {
    border: 1px solid #ddd;
    padding: 5px;
}

.filter_search_select2,
.search_field {
    margin-right: 10px;
}

.form-section-pyr {
    line-height: 3rem;
    margin-bottom: 20px;
    color: #1d2b36;
    border-bottom: 1px solid #1d2b36;
}

.modal_categories label {
    display: block;
}

.employee_type_info {
    padding-right: 1.5rem !important;
}

.service_log_info_card .card {
    border: 1px solid #f5f5f5;
}

.service_log_info_card .header_info {
    background-color: rgba(212, 231, 240, 0.3);
    padding: 10px;
}

.service_log_info_card .header_info img {
    width: 50px;
}

#modal_invoice_blocked {
    top: 30%;

}


.dashboard_shortcut {
    border: 1px solid #ddd;
    padding: 10px 5px;
    display: inline-block;
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
    background-color: #fff;
}

.dashboard_shortcut img {
    filter: grayscale(100%);
    opacity: .5;
}

.dashboard_shortcut:hover>img {
    filter: grayscale(0%);
    opacity: 100;
}

.dashboard_shortcut:hover {
    border: 1px solid #1a80ad;
}

.dashboard_shortcut p {
    color: #55595c;
}

.dashboard_shortcut:hover>p {
    color: #1a80ad;
}

.dashboard_shortcut_active img {
    filter: grayscale(0%);
    opacity: 100;
}

.dashboard_shortcut_active p {
    color: #1a80ad;
}

.dashboard_shortcut_active {
    border: 1px solid #1a80ad;
    -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.29);
    -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.29);
    box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.29);
}



.data_header {
    text-align: center;
    background-color: #1a80ad;
    padding: 5px;
    color: #fff;
    margin-bottom: 15px;
}

.data_header_list li {
    padding: 5px 15px;
    border: none;
}

.data_header_list span.float-left {
    min-width: 30px;
}

.filter_clients_letter {
    list-style: none;
    display: block;
    text-align: left;
}

.filter_clients_letter li {
    float: left;
    padding: 10px;
    background-color: #fff;
    margin-right: 5px;
    text-align: center;
    cursor: pointer;
}

.filter_clients_letter li.letter {
    width: 3%;
}

.active_letter,
.active_filter_by {
    background-color: #2295ad !important;
    color: #fff !important;
}

.client_filter_by {
    cursor: pointer;
}

.badge-filter-by {
    background-color: #ddd;
    color: #333;
    padding: 3px 10px;
    border-radius: 5px;
}

.sidebar_add_sp_item {
    width: 18%;
    float: left;
    margin-top: 0px;
    margin-right: 10px;

}

.sidebar_add_sp_item_content {
    max-height: 600px;
}

.list_item_sp_category {
    padding: 5px 5px;
}

.sidebar_add_sp_item_title {
    border: 1px solid #f5f5f5;
    padding: 13px 10px;
    margin-bottom: 7px;
    margin-right: 5px;
    margin-left: 5px;
}

.sidebar_add_sp_item_info {
    line-height: 1.35 !important;
}

.dashboard_shortcut p {
    font-size: 14px;
}

.table-datasheets th,
.table-datasheets td {
    padding: .5rem .5rem !important;
    text-align: center;
}

.active_all_clients {
    background-color: #2295ad !important;
    color: #fff !important;
}

.view_all_clients {
    color: #55595c;
    width: 10%;
}

.table-datasheets-content tbody td {
    cursor: pointer;
    padding: 0px !important;
    height: 30px;
}

.td-checked i,
.td_checked_inactive i,
.td-checked {
    color: #fff;
}

.td-checked {
    background-color: #2295ad;
}

.td_checked_inactive {
    background-color: #ccc;
    cursor: none;
}

.td_interrupted {
    background-color: #e75353;
    cursor: none;
}

.td_interrupted_inactive {
    background-color: #ccc;
    cursor: none;
}

.show_filter_clients {
    background-color: #ff9f00;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 5px;
    color: #fff;
    display: inline-block;
    width: 120px;
}

.show_filter_clients_container {
    margin-top: -15px;
}

.show_available_units {
    background-color: #ff9f00;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 5px;
    color: #fff;
    display: inline-block;
    width: 180px;
}

.show_available_units_container {
    margin-top: -15px;
    margin-bottom: 5px;
}

.document_locked {
    padding: 10px;
}

.document_locked i {
    margin-bottom: 5px;
}




.package_title {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    font-size: 2.9rem !important;
    color: #F7901E !important;
}

.buy_credits {
    background-color: #1EBAF7 !important;
    border-color: #1EBAF7 !important;
    font-weight: bold;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.37);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.37);
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.37);
    min-width: 220px;
}

.save_in_comments {
    color: #1EBAF7 !important;
    font-size: 1.5rem;
}

.txt_select {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.42);
}

.card_prices {
    box-shadow: 0 2px 2px rgba(0, 0, 0, .3) !important;
}


.datasheet_header {
    border: 1px solid #e3ebf3;
    padding: 15px 15px 0px 15px;
    margin-bottom: 15px;
    font-size: 1.1rem;
    background-color: rgba(227, 235, 243, .2);
}

.datasheet_header_client {
    background-color: #1a80ad;
    color: #fff;
    padding: 10px 15px 10px 10px;
    max-width: 230px;
    text-align: left;
    font-weight: bold;
    border-radius: 10px;
    margin-top: 0px;
    display: inline-block;
}

.datasheet_header_date {
    float: right;
    padding: 10px 10px 10px 10px;
}

.datasheet_header_list {
    list-style: none;
}

.datasheet_header_list li {
    padding: 0px;
}

.datasheet_header_btn_show {
    min-width: 120px;
    background-color: #ff9f00;
    color: #fff;
    margin-top: 26px;
}



.table_checks_prices {
    margin: auto;
    margin-bottom: 15px;
}

.package_price {
    background-color: #1a80ad;
    color: #fff;
    padding: 0px 5px;
    max-width: 200px;
    margin: auto;
}

.custom_comments_list {
    list-style: none;
}

.package_price_custom_comments {
    background-color: #1a80ad;
    color: #fff;
    padding: 0px 5px;
    max-width: 150px;
    margin: auto;
    font-weight: bold;
}

.custom_comments_right {
    border: 1px solid #ddd;
    padding: 30px 20px;
}

#client_cant_comments,
#client_custom_budget {
    max-width: 145px;
    height: 70px;
    padding: 20px;
    font-size: 39px;
    font-weight: bold;
    margin: auto;
    color: #1a80ad;
}

.text-robot {
    font-weight: bold;
    color: #f7901e;
}

.buy_credits_custom {
    background-color: #1EBAF7 !important;
    border-color: #1EBAF7 !important;
    font-weight: bold;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.37);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.37);
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.37);
    min-width: 220px;
    color: #fff;
}



.txt_hello_abby {
    font-size: 13px;
}



.welcome_header {
    background-color: #fff;
    padding: 10px;
    max-width: 600px;
    margin: auto;
    margin-top: -14px;
    color: #fff;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

.welcome_header h1 {
    color: #1a80ad;
    font-weight: bold;
}

.welcome_header p {
    color: #444;
}

.welcome h4 {
    font-weight: bold;
    color: #1a80ad;
}

.title_welcome {
    line-height: 3rem;
    margin-bottom: 20px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 24px !important;
    /*background-color: #1ebaf7;*/
    border-radius: 15px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08);
}

.title_welcome_1 {
    background-color: #2295ad;
}

.title_welcome_2 {
    background-color: #37bc9b;
}

.title_welcome_3 {
    background-color: #fa9f04;
}

.welcome_1_triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #2295ad transparent transparent transparent;
    margin: auto;
    margin-bottom: 10px;
}

.welcome_2_triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #37bc9b transparent transparent transparent;
    margin: auto;
    margin-bottom: 10px;
}

.welcome_3_triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #fa9f04 transparent transparent transparent;
    margin: auto;
    margin-bottom: 10px;
}

.welcome .card:hover img {
    transform: scale(1.1);
    cursor: pointer;
}


.welcome_column {
    background-color: rgba(212, 231, 240, 0.4);
    padding: 20px 15px 1px 15px;
}

.list_welcome {
    list-style-type: none;
    padding: 10px;
    border-radius: 5px;
}

.list_welcome li {
    color: #333;
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    font-size: 16px;
}

.list_welcome li span {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background-color: #2295ad;
    color: #fff;
    font-weight: bold;
    margin-right: 10px;
    font-size: 18px !important;
}


.objetive_status {
    float: right;
    padding: 0px 10px 10px 10px;
}

.objetive_not_started {
    padding: 5px 10px;
    background-color: #ddd;
    color: #333;
    border-radius: 10px;
}

.objetive_in_progress {
    padding: 5px 10px;
    background-color: #ff9f00;
    color: #fff;
    border-radius: 10px;
}

.objetive_finished {
    padding: 5px 10px;
    background-color: #37bc9b;
    color: #fff;
    border-radius: 10px;
}

.objetive_canceled {
    padding: 5px 10px;
    background-color: #ccc;
    color: #777;
    border-radius: 10px;
}

.datasheet_btn_edit {
    border: 1px solid rgba(227, 235, 243, .8);
    background-color: rgba(227, 235, 243, .2);
    font-size: 10px;
    cursor: pointer;
    color: #1a80ad;
}

.datasheet_btn_edit:after {
    content: '' !important;
    padding: 0px !important;
}

.blue_light_background {
    background-color: rgba(227, 235, 243, .2);
}

.td_inactive {
    background-color: #ddd;
}

.td_no_visit {
    background-color: #f0f8ff;
}

.novisit_legend {
    width: 20px;
    height: 20px;
    background-color: #f0f8ff;
    border: 1px solid #e3ebf3;
    display: inline-block;
}

#objetives_graphic canvas {
    left: -70px !important;
}

#objetives_graphic {
    border: 2px solid #ddd;
    padding: 20px 0px 20px 20px;
    background-color: rgba(227, 235, 243, .2);

}

.session_length_value_container {
    position: relative;
}

.session_length_value_container_note {
    position: absolute;

}


.session_length_input_container {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    z-index: 9999;
    display: none;
}

.session_length_input_inner {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    width: 150px;
}

.session_length_input_inner input {
    display: block;
    margin-bottom: 10px;
}


/*------------------*/

.recording_input {
    max-width: 30px;
}

/*------------------*/


.modal_smartchat {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    z-index: 1000;
    max-width: 700px;
    width: 700px;
}


.chat_client_text {
    background-color: #1a80ad;
    color: #fff;
    border-radius: 5px;
    padding: 10px;
    text-align: left;
    margin-bottom: 10px;
}

.chat_abby_text {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    text-align: left;
    margin-bottom: 10px;
}


.footer_smartchat {
    position: absolute;
    bottom: 20px;
}

.modal-content-smartchat-inner {
    display: block;
    max-height: 600px;
}

.modal-content_smartchat {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    max-height: 100%;
    background-color: #f9f9f9;
}

.modal-footer-smartchat {
    margin-top: auto;
    border: none !important;
}

.modal-content_smartchat {
    position: relative;
}

.smartchat_content {
    max-height: 580px;
    min-height: 580px;
    padding: 20px;
}

.smartchat_block {
    margin-top: 15px;
}


.smartchat-title {
    background-color: #1a80ad;
    color: #fff;
    padding: 15px;
    text-align: center;
    font-size: 20px;
}


.abby_writing_cointaner {
    min-height: 35px;
}

.btn-close-chat {
    background-color: #ddd;
    color: #333;
    border-radius: 0px;
}

.vertical-scroll-smartchat {
    max-height: 670px;
}

.modal-backdrop-smartchat {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    /* oculta la capa por defecto */
}

.modal-backdrop-smartchat.show {
    display: block;
    /* muestra la capa si tiene la clase "show" */
}

.beta-box {
    padding: 5px 10px;
    background-color: #f6a632;
    color: #fff;
    float: right;
    font-size: 12px;
}

/*----------------------*/

.table-reports-datasheets thead th {
    background-color: #1a80ad;
    color: #fff;
}

.sp_dash_title {
    background-color: #d4e7f0;
}

.service_plan .card {
    background-color: rgba(212, 231, 240, .1);
}

.btn-sp_button {
    background-color: #fff;
    /*background: linear-gradient(180deg, rgba(212,231,240,1) 0%, rgba(212,231,240,1) 50%, rgba(255,255,255,1) 100%);*/
    border-color: #d4e7f0;
    color: #1a80ad;
}

.btn-sp_button:hover {
    background: rgba(212, 231, 240, .2);
    /*background: linear-gradient(0deg, rgba(212,231,240,1) 0%, rgba(212,231,240,1) 50%, rgba(255,255,255,1) 100%);*/
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.47);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.47);
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.47);
}

.border-sp {
    border: 1px solid #d4e7f0 !important;
}

.text-orange {
    color: #fe9e00;
}

.arrow_to_dates {
    margin-left: 5px;
    margin-right: 5px;
}

.custom-background-light {
    background-color: rgba(212, 231, 240, .2);
}

.custom-background-light .card-body:hover {
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1);
    background-color: #fff;
}

.service_plan .card-title strong {
    color: #1a80ad;
}

.badge-secondary-light {
    background-color: rgba(26, 128, 173, .6);

}

.item_client_dashboard {
    padding: 5px;
    text-align: left;
    margin-bottom: 10px;
    border-radius: 5px;
    /*background-color: rgba(212, 231, 240, .2);*/
    color: #1a80ad;
    border-bottom: 1px solid #ddd;
}

.item_client_dashboard img {
    padding: 5px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid rgba(34, 149, 173, .2);
}

.item_client_dashboard:hover {
    -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.title_dashboard {
    line-height: 3rem;
    margin-bottom: 20px;
    color: #55595c;
    border-bottom: 1px solid #ddd;
}

.coming_soon_abby {
    font-size: 12px;
}

.dashboard-help .action:hover img {
    transform: scale(1.1);
}

.procode_graphs {
    padding: 3px;
}

.procode_graphs .procode_graph_item {
    border: 1px solid #ddd;
    padding-top: 15px;
    background-color: rgba(212, 231, 240, .1);
}


.abasmart_loading {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    animation: spin 1s linear infinite;
    margin: 0 auto;

}

.abasmart_loading_sl {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    animation: spin 1s linear infinite;
    display: inline-block;

}

.error_collision_invoices_content li {
    font-weight: bold;
}

/* Cinta en la esquina superior derecha */
.ribbon {
    position: absolute;
    top: -2px;
    right: -2px;
    overflow: hidden;
    width: 138px;
    height: 134px;
    text-align: right;
    z-index: 100;
}

.ribbon span {
    position: absolute;
    display: block;
    width: 200px;
    padding: 10px 0;
    background-color: #9868a4;
    color: white;
    text-align: center;
    font-weight: bold;
    transform: rotate(45deg);
    top: 30px;
    right: -45px;
    font-size: 14px;
}

/* Borde de la cinta */
.ribbon span::before,
.ribbon span::after {
    content: "";
    position: absolute;
    border: 5px solid #9868a4;
    border-color: transparent transparent transparent #9868a4;
    top: 100%;
    left: 0;
}

.ribbon span::before {
    left: auto;
    right: 0;
    border-color: transparent red red transparent;
    top: -5px;
}

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

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

.background-light-custom {
    background-color: #fbfdfe !important;
}

.table-head-dark th {
    background-color: rgb(212, 231, 240);
    border-top: 1px solid rgb(212, 231, 240);
    border-bottom: 2px solid rgb(212, 231, 240);
    color: #55595c;
    padding: 3px 10px;
    font-weight: normal;
}

.tr-expandible {
    cursor: pointer;
}

.top_client_name h4 {
    margin-bottom: 20px;
    color: #1a80ad;
}

.progress-container {
    position: relative;
    width: 100%;
    height: 15px;
    background-color: #ddd;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar-units {
    position: relative;
    height: 100%;
    border-radius: 10px;
}

.progress-invoiced {
    height: 100%;
    background-color: #1a80ad;
    float: left;
}

.progress-remaining {
    height: 100%;
    background-color: #37bc9b;
    float: left;
}

.bullet-invoiced {
    color: #1a80ad;
}

.bullet-remaining {
    color: #37bc9b;
}

.progress-invoiced {
    background-color: #1a80ad;
    animation: progressAnimation-invoiced 1s linear forwards;
}

.progress-remaining {
    background-color: #37bc9b;
    animation: progressAnimation-remaining 5s linear forwards;
}


.more-info-link {
    background-color: #f6a531;
    padding: 5px 15px;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.48);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.48);
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.48);
    border-radius: 15px;
}

.more-info-link a {
    color: #fff;
    font-size: 1.2rem;
}

.td-checked-times {
    background-color: #eef5f9;
}

.td-checked-times i {
    color: #888;
}

.collision_to_fix {
    border: 2px solid red;
}

.sp_objetives_signatures {
    background-color: rgba(227, 235, 243, .3);
}

.sp_signatures_divisor {
    background-color: #f3f3f3;
    height: 10px;
    margin-top: 30px;
    margin-bottom: 30px;
    clear: both;
    margin-left: -40px;
    width: 130%;
}

.btn-save-sp-signatures {
    min-width: 200px;
    font-size: 20px;
    padding: 10px;
}

.abby_list_introduction {
    list-style: none;
    padding-left: 0px;
    display: block;
}

.abby_list_introduction li a {
    float: left;
    margin-right: 10px;
    background-color: rgba(212, 231, 240, .1);
    border: 1px solid #d4e7f0 !important;
    padding: 5px 10px;
    border-radius: 15px;
    margin-bottom: 5px;
    color: #1a80ad;
}

.list_dashboard li {
    padding: 0px 5px;
}

.divider {
    background-color: #f3f3f3;
    height: 15px;
    width: 110%;
    margin-left: -30px;
    border: none;
}

.divider_alerts {
    background-color: #f3f3f3;
    height: 15px;
    width: 110%;
    margin-left: -35px;
    border: none;
}


.behavior_functions {
    margin-top: -20px;
}

.first_letter_bold {
    font-weight: bold;
    font-size: 1.05rem
}

.btn-share-fb {
    background-color: #2295ad;
    border-radius: 10px;
    color: #fff;
}

.btn-share-fb:hover {
    color: #fff;
}

.cmd_print_data_review {
    min-width: 200px;
    font-size: 20px;
    padding: 10px;
}

.black_friday_container {
    padding: 15px;
    border: 1px solid #d4e7f0 !important;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 10px;
}

.black_friday_container h2 {
    font-weight: bold;
    color: #1a80ad;
}

.blackfriday_label {
    color: #fff;
    background-color: #ff9800;
    padding: 5px 10px;
}

.claim_now {
    width: 200px;
    padding: 10px;
    background-color: #2295ad;
}

.blackfriday_info {
    float: right !important;
}

.roles_verify_list {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

.roles_verify_list li {
    display: inline-block;
    margin: 0 10px;
    font-size: 1.1rem;
}

/* Estilo para ocultar los radio buttons */
.roles_verify_list input[type="radio"] {
    display: none;
}

/* Estilo para los botones personalizados */
.roles_verify_list .custom-radio-button {
    padding: 30px 0px;
    cursor: pointer;
    border-radius: 5px;
    width: 100% !important;
    height: 100px;
    color: #3bafda;
    font-size: 20px;
    border: 1px solid #3bafda;
}

/* Estilo para los botones seleccionados */
.roles_verify_list input[type="radio"]:checked+label {
    background-color: #2295ad;
    color: #fff;
    font-weight: bold;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.51);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.51);
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.51);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.42);
    border: none;
}

.modal-header-roles {
    background-color: #3bafda;
}

.modal-header-roles h5 {
    color: #fff;
}

.callout-border-left {
    border-left: 5px solid;
    border-left-color: currentcolor;
}

.bs-callout-info {
    display: block;
    color: #030e13;
    border-color: #3bafda !important;
    border-radius: .25rem;
    background-color: #c4e7f4;
}


.fc-toolbar-chunk h2 {
    font-size: 1.3em !important;
    padding: 4px !important;
    border-radius: 5px;
}


.btn_dow {
    border-radius: 4px;
    border: 1px solid #fff;
    overflow: hidden;
    float: left;
}

.btn_dow label {
    float: left;
    line-height: 3.0em;
    width: 5.5em;
    height: 3.0em;
    margin-right: 5px;
    ;
    background-color: #a8a8a8;
    cursor: pointer;
}

.btn_dow label span {
    text-align: center;
    display: block;
    font-size: .9rem;
}

.btn_dow label input {
    position: absolute;
    display: none;
    color: #fff !important;

}

/* selects all of the text within the input element and changes the color of the text */
.btn_dow label input+span {
    color: #fff;
}


/* This will declare how a selected input will look giving generic properties */
.btn_dow input:checked+span {
    color: #ffffff;
}


#modal_visit .modal-header {
    background-color: #1a80ad;
    border-radius: 0px;
    ;
}

#modal_visit .modal-header h5 {
    color: #fff;
}

#modal_visit {
    overflow-y: scroll;
    z-index: 11000 !important;
}

#error_collision_invoices {
    z-index: 13000 !important;
}

#modal_supervisee {
    z-index: 12000 !important;
}

.swal2-container {
    z-index: 999999 !important;
}

.swal-overlay {
    z-index: 999999 !important;
}

.dow input:checked+span {
    background-color: #2295ad;
}


#info_calendar_popup {
    width: 350px;
    background-color: #F2F0F1;
    color: #333;
    text-align: left;
    display: none;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px;
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.32);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.32);
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.32);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.fc .fc-button-primary {
    background-color: #1a80ad;
    border-color: #1a80ad;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background-color: #135f80;
    border-color: #135f80;
}

.fc .fc-button-primary:hover {
    background-color: #135f80;
    border-color: #135f80;
}

.fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
    border: none;
    box-shadow: none;
}

.fc-day-today {
    background-color: #fffadf !important;
}

.event-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}


.switch_container {
    border: 1px solid #ddd;
    padding: 5px 3px 1px 15px;
    border-radius: 5px;
    max-width: 225px;
    ;
}

.abasmart_loading_calendar {
    position: absolute;

    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    animation: spin 1s linear infinite;
    margin: 0 auto;

    left: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.documents_alert {
    background-color: rgba(212, 231, 240, .2);
    padding: 0px 20px 20px 20px;
    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .05) !important;
    box-shadow: 0 2px 1px rgba(0, 0, 0, .05) !important;
}

.documents_alert .card-header {
    background-color: transparent;
}

.checks_alerts {
    background-color: rgba(212, 231, 240, .2);
    padding: 20px 20px 20px 20px;
    -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
}



.checks_inner .card-body {
    padding: 5px 15px;
}

.card-title-checks {
    text-align: center;
    background-color: #1a80ad;
    padding: 5px;
    color: #fff;
    margin-bottom: 15px;
    border-radius: 10px;
    ;
}

.margin-5 {
    margin-bottom: 5px;
}

.checks_inner .card-body:hover h4 {
    cursor: pointer;
    color: #1a80ad;
}

.img_checks {
    width: 60px;
    height: auto;
}

.alerts_title {
    background-color: #1a80ad;
    padding: 5px;
    color: #fff;
    margin-bottom: 15px;
    text-align: center;
}




.loader_alerts span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #d4e7f0;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 0;
    animation: loader-animation 1.5s infinite;
}

.loader_alerts span:nth-child(1) {
    animation-delay: 0.2s;
}

.loader_alerts span:nth-child(2) {
    animation-delay: 0.4s;
}

.loader_alerts span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes loader-animation {

    0%,
    80%,
    100% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }
}


.card-header-custom {
    padding: .8rem !important;
}

.list-group-item-custom {
    padding: .5rem !important;
}

.list_notifications {
    padding: 5px 10px;
    ;
}

.notification_single_dashboard:hover {
    background-color: #f7fafc;
    cursor: pointer;
}

.notification_open_color {
    color: #b8d8e7;
}

.view_documents_btn {
    position: absolute;
    right: 35px;
    bottom: 28px;
    cursor: pointer;

}

.view_pas_btn {
    cursor: pointer;
}

.incomming_visits {
    padding: 5px 10px;
    ;
}

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

.upcoming_event_procode_item_link {
    display: inline-block;
    padding-top: 3px;
}

.event_procode_label {
    float: left;
    margin-bottom: 0px;
    ;
    padding: 5px;
    margin-right: 15px;
    ;
}

.fc-event div {
    width: 100% !important;
}

.fc-more-popover {
    max-height: 500px;
    overflow-y: scroll;
}


.inputfileCustom {
    display: none;
}

.custom-file-upload {
    margin-bottom: 0px;
    ;
}

/* Estilo opcional para resaltar el botón al pasar el ratón sobre él */
.custom-file-upload:hover {
    background-color: #2295ad;
}


#sl_upload_progress {
    width: 100%;
    height: 20px;
    border: 1px solid #ccc;
    margin-top: 10px;
    display: none;
}

#sl_upload_progress {
    width: 0;
    height: 100%;
    background-color: #4CAF50;
}

.fc-daygrid-day-number {
    background-color: #1a80ad;
    color: #fff;
    min-width: 25px;
    text-align: center;
}

.btn-pay-here {
    background-color: #f9f9f9;
    color: #333;
    border: 1px solid #f8d890;
    padding: 5px;
    border-radius: 5px;
    margin-left: 10px;
}

.cmd_clear_card_content {
    float: right;
}

.td_no_visit .fa-pause {
    color: red !important;
}

.supervision_literature_list {
    list-style: none;
    padding-left: 0px;
    font-size: .8rem;
}

.supervision_literature_list li {
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 3px;
}

.hidden_checkbox_supervision_literature {
    display: none;
    /* Hace que el checkbox sea invisible */
}

.selected_supervision_literature {
    background-color: #1a80ad;
    color: #fff;
}

.supervision_literature_list_container {
    max-height: 300px;
    overflow-y: auto;
}

.supervision_literature_list_container li {
    line-height: 1.3 !important;
    cursor: pointer;
}

.selectize-input {
    padding: 10px !important;
}

.selectize-control.single .selectize-input {
    background-image: none !important;
    background-color: white !important;
}

.limited_mode_warning {
    color: hsl(0, 96%, 50%);
    float: center;
    font-size: 1.2rem;
}

.select2-selection__choice {
    white-space: pre-wrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.sp_missing {
    position: absolute;
    z-index: 1000;
    top: 4px;
    color: #febc40;
    margin-left: -6px;
}

.banner_jobs {
    background-color: #2295ad;
    margin-top: 15px;
    padding: 15px 15px 25px 15px;
}

.banner_jobs h4,
.banner_jobs p {
    color: #fff;
}

.banner_jobs h4 {
    margin-bottom: 0px;
    font-size: 1.7rem !important;
}

.banner_jobs p {
    font-size: 1.2rem !important;
}

.job_cta {
    color: #fff;
    background-color: #f3a535;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 15px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
}

.job_cta:hover {
    color: #fff;
    text-decoration: none;
    background-color: #f6960d;
}

.btn-form-job {
    color: #fff;
    text-decoration: none;
    background-color: #f6960d;
    padding: 15px 30px;
    border-radius: 15px;
    border: none;
    margin-top: 20px;
    font-size: 20px;
}

.calendar-alerts a {
    color: #fff;
    font-weight: bold;
}

@media only screen and (max-width: 600px) {
    .grid_header {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .header_title {
        grid-column-start: 1;
        grid-column-end: 6;
        margin-top: 20px;
    }

    .header_search {
        grid-column-start: 1;
        grid-column-end: 6;
    }

    .header_search .btn-success {
        margin-top: 10px !important;
        float: right;
    }

    .header_actions {
        grid-column-start: 1;
        grid-column-end: 6;
    }

    .document_name {
        font-size: .6rem !important;
    }

    .horizontal-top-icon-menu #main-menu-navigation li.nav-item .nav-link i {
        display: inline-block !important;
        margin-right: 10px;
    }

    .fa-ellipsis-v {
        display: none !important;
    }

    #header_search input,
    #header_search select {
        margin-right: 0px;
        margin-bottom: 10px;
    }

    .client_list_mobile {
        display: block !important;
    }

    .client_list_desktop {
        display: none !important;
    }

    form .form-section3,
    form .form-section {
        line-height: 1.8rem !important;
    }

    .fc-toolbar-chunk {
        display: block !important;
        margin-bottom: 5px;
        text-align: center;
    }

    .fc .fc-toolbar {
        display: block !important;
    }

    #btn_export_document_issues {
        margin-top: 10px;
    }


}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {

    .grid_header {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .header_title {
        grid-column-start: 1;
        grid-column-end: 6;
        margin-top: 20px;
    }

    .header_search {
        grid-column-start: 1;
        grid-column-end: 6;
    }

    .header_search .btn-success {
        margin-top: 10px !important;
        float: right;
    }

    .header_actions {
        grid-column-start: 1;
        grid-column-end: 6;
    }

    form .form-section {
        line-height: 1.6rem;
    }



}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 600px) {

    /* Styles */
    .clock_hours {
        display: inline-block;
        width: 60px;
        height: calc(2.75rem + 2px);
    }

    .clock_minutes {
        display: inline-block;
        width: 60px;
        height: calc(2.75rem + 2px);
    }

    .clock_ampm {
        display: inline-block;
        width: 60px;
        height: calc(2.75rem + 2px);
    }

    .dropzone .dz-message {
        font-size: 1.2rem !important;
    }

    .custom-link-tab {
        min-width: 115px !important;
    }

    #form .nav-vertical .nav-left~.tab-content {
        margin-left: 50px !important;
    }

    .header-actions {
        display: inline-block !important;
    }

    .header-actions-container {
        position: relative !important;
        top: 10px !important;
    }

    .table-responsive-custom {
        display: block;
        overflow-x: auto !important;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }


    #sendInvite {
        float: right;
        margin-top: 10px;
    }

    .inner {
        width: 100%;
        float: left;
    }

    .outer {
        width: 100%;
    }




}


/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {

    /* Styles */
    .clock_hours {
        display: inline-block;
        width: 60px;
        height: calc(2.75rem + 2px);
        padding-left: 10px !important;
    }

    .clock_minutes {
        display: inline-block;
        width: 60px;
        height: calc(2.75rem + 2px);
        padding-left: 10px !important;
    }

    .clock_ampm {
        display: inline-block;
        width: 60px;
        height: calc(2.75rem + 2px);
        padding-left: 10px !important;
    }

}

@media only screen and (max-width : 1440px) {
    .invoiced-legend {
        font-size: 0.7em;
    }

    .note-ready-legend {
        font-size: 0.7em;
    }

}

.ribbon-locked {
    width: 89px;
    position: absolute;
    z-index: 100;
    left: 8px;
    top: -6px;

}

.card-block-contact {
    border: 1px solid #ddd;
}

.card-block-contact .image-container img {
    transition: transform 0.3s ease;
    transform: scale(1);
}

.card-block-contact:hover .image-container img {
    transform: scale(1.2);
    /* Aumenta ligeramente el tamaño */
}


.card-block-contact:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    /* Añade una sombra */
}

.filter-actions {
    top: 2px !important;
    right: 5px !important;
}


.invoice_items_header .col {
    font-weight: bold;
    margin-bottom: 5px;
    background-color: #1a80ad;
    color: #fff;
    padding: 5px;
}

.invoice_items_info {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.invoice_items_row {
    padding: 10px 5px 10px 5px;
}

.invoice_items_row .col {
    padding-left: 0px;
}

.row_odd {
    background-color: rgba(245, 247, 250, .5);
}

.nav.nav-tabs.nav-linetriangle .nav-item a.nav-link.active {
    color: #1a80ad;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    border-bottom-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: #1a80ad;
}

.nav.nav-tabs.nav-linetriangle .nav-item a.nav-link {
    font-size: 20px;
    line-height: 2;
}

.nav.nav-tabs.nav-linetriangle .nav-item a.nav-link.active::before {
    margin-left: -11px;
    border-width: 12px;
    border-top-color: #1a80ad;
}

.nav.nav-tabs.nav-linetriangle .nav-item a.nav-link.active:focus {
    color: #1a80ad;
}

.nav.nav-tabs.nav-linetriangle {
    border-bottom-color: #ddd;
}

.nav.nav-tabs.nav-linetriangle .nav-item a.nav-link img,
.nav.nav-tabs.nav-linetriangle .nav-item a.nav-link {
    opacity: 30%;
}

.nav.nav-tabs.nav-linetriangle .nav-item a.nav-link.active img,
.nav.nav-tabs.nav-linetriangle .nav-item a.nav-link {
    opacity: 100%;
}

.tabs-assigned-clients {
    background-color: #f9f9f9;
    padding: 15px 15px 15px 15px;
}

.icd10s_block {
    display: block;
}

.add_new_client_with_insurance {
    border: 1px solid #2295ad;
}

.sp_item_note {

    margin-top: 15px;
    border: 1px solid #ddd;
    padding: 15px;

}

.legend_note p {
    float: left;
    margin-right: 15px;
}

.table-datasheets-content-note td {
    min-width: 20px;
    max-width: 20px;
}

.datasheet_btn_edit_note {
    border: 1px solid rgba(227, 235, 243, .8);
    background-color: #fff;
    font-size: 10px;
    cursor: pointer;
    color: #1a80ad;
    padding: 5px;
}

#loading-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 9999;
}

.loading-text {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.tabs-data-note li a.active h3 {
    color: #fff;
}

.tabs-data-note li a h3 {
    color: #1a80ad;

}

.tabs-data-note li a {
    background-color: rgba(227, 235, 243, .2);

}



.session_length_value_link,
.session_length_clock {
    position: absolute;
    left: 25px;
    top: -9px;
}

.select_colored {
    color: white;
    /* Color del texto */
    border: 1px solid #ffffff;
    /* Borde opcional */
    appearance: none;
    /* Oculta el diseño nativo en algunos navegadores */
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    font-size: 16px;
    padding-right: 30px;
    /* Espacio para la flecha */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    /* Flecha blanca */
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

/* Para que las opciones mantengan el fondo por defecto */
.select_colored option {
    background-color: white;
    /* Color de fondo de las opciones */
    color: black;
    /* Color del texto */
    padding: 8px;
}

.border-bottom-light {
    border-bottom: 1px solid #ddd;
    ;
}


/* HTML: <div class="loader"></div> */
.loader_transmitting {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    background: linear-gradient(90deg, #ff9f00 50%, #0000 0) right/200% 100%;
    animation: l21 2s infinite linear;
}

.loader_transmitting::before {
    content: "Transmitting claims...Please wait.";
    color: #0000;
    padding: 0 5px;
    background: inherit;
    background-image: linear-gradient(90deg, #fff 50%, #ff9f00 0);
    -webkit-background-clip: text;
    background-clip: text;
}

.loader_receiving {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    background: linear-gradient(90deg, #ff9f00 50%, #0000 0) right/200% 100%;
    animation: l21 2s infinite linear;
}

.loader_receiving::before {
    content: "Receiving payment data... Please wait.";
    color: #0000;
    padding: 0 5px;
    background: inherit;
    background-image: linear-gradient(90deg, #fff 50%, #ff9f00 0);
    -webkit-background-clip: text;
    background-clip: text;
}

.loader_eligibility {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    background: linear-gradient(90deg, #ff9f00 50%, #0000 0) right/200% 100%;
    animation: l21 2s infinite linear;
}

.loader_eligibility::before {
    content: "Checking eligibility... Please wait.";
    color: #0000;
    padding: 0 5px;
    background: inherit;
    background-image: linear-gradient(90deg, #fff 50%, #ff9f00 0);
    -webkit-background-clip: text;
    background-clip: text;
}

.loader_working {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    background: linear-gradient(90deg, #ff9f00 50%, #0000 0) right/200% 100%;
    animation: l21 2s infinite linear;
}

.loader_working::before {
    content: "Working...";
    color: #0000;
    padding: 0 5px;
    background: inherit;
    background-image: linear-gradient(90deg, #fff 50%, #ff9f00 0);
    -webkit-background-clip: text;
    background-clip: text;
}

.transmit-row-selected {
    background-color: #e7f5f9 !important;
    /* azul muy suave */
}



.scroll-table-container .header_report {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #d4e7f0;
    border-top: none !important;
    /* 🔥 esta línea elimina cualquier borde arriba */
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: none;
    /* Por si hay alguna sombra */
}


/* Columnas del header y datos */
.header_report div,
.row-data div {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Encabezado con ajustes visuales */
.header_report {
    font-weight: bold;
    border-bottom: none;
    /* sobrescrito arriba si quieres línea */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.header_report>div {
    border-top: none !important;
    border-bottom: none;
}

.scroll-table-container {
    border-top: none !important;
    margin-top: 0;
    padding-top: 0;
}

.footer-total-row {
    background-color: #e8f0f5;
    border-top: none !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: none;
}

.ui-datepicker {
    z-index: 99999 !important;
    position: absolute !important;
}

.kpi-box {
    background-color: #fff;
    padding: 0.3rem 0.7rem 0.3rem 0.2rem;
    height: 100%;
    border-radius: 0px !important;
}

.kpi-label {
    color: #777;
    font-size: 1rem;
}

.kpi-value {
    color: #333;
    font-size: 1.3rem;
    font-weight: bolder;
}

.kpi-box {
    transform: scale(0.7);
    opacity: 0;
    transition: all 0.4s ease-in-out;
}


.kpi-box.show {
    transform: scale(1);
    opacity: 1;
}

.subtotal-row {
    background-color: #e6f0f7 !important;
    border-top: 2px solid #2295ad;
    font-weight: bold;
}

#kpis-card-dashboard {
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    background-color: #ffffff;
}


.kpi-box-dashboard {
    background-color: #fff;
    padding: 0.4rem 0.4rem;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    line-height: 1.2;
}


.kpi-box-dashboard:hover {
    background-color: #f9f9f9;
    transform: scale(1.03);
}

.kpi-label-dashboard {
    color: #555;
    font-size: 0.85rem;
    font-weight: 500;
}

.kpi-value-dashboard {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    /* negro Bootstrap */
    margin-top: 0.2rem;
}

.kpi-summary-wrapper {
    background-color: #e6f0f7;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

#kpis-summary-dashboard .card {
    margin-bottom: 0 !important;
}

.kpi-box-dashboard_notes_to_be_approved {
    border-left: 2px solid #fe8640;
}

.kpi-box-dashboard_logs_to_be_approved {
    border-left: 2px solid #358fff;
}

.kpi-box-dashboard_visits_to_be_billed {
    border-left: 2px solid #10b165;
}

.kpi-box-dashboard_claims_rejected {
    border-left: 2px solid #dc3545;
}

.kpi-box-dashboard_notes_missing {
    border-left: 2px solid #dc3545;
}

.kpi-box-dashboard_logs_pending {
    border-left: 2px solid #fe8640;
}




@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.kpi-blink {
    animation: blink 1s ease-in-out infinite;
    color: red;
    /* Puedes cambiar el color aquí */
    font-weight: bold;
}

.subtotal-row td {
    border: 1px solid #d0d7de !important;
    vertical-align: middle;
}

.grand-total-row {
    background-color: #1a80ad !important;
    color: white !important;
    font-weight: bold;
}

.grand-total-row td {
    border: 1px solid #ffffff44 !important;
    vertical-align: middle;
}



@keyframes l21 {
    100% {
        background-position: left
    }
}

#reports-grid_search_inv_emp_id,
#reports-grid_search_inv_client_id,
#reports-grid_search_insurance,
#reports-grid_search_ii_pro_code_id,
#reports-grid_search_ii_date_of_service_start,
#reports-grid_search_ii_date_of_service_to,
#reports-grid_search_not_status,
#reports-grid_search_not_status {
    max-width: 12% !important;
}

#grid_claims thead tr th {
    padding: .5rem .5rem !important;
}

#grid_claims tbody tr td {
    padding: .5rem .5rem !important;
}

#grid_claims thead tr th .order_container {
    display: none !important;
}


.sticky {
    position: fixed;
    top: 120px;
    right: 30px;
    z-index: 4000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #1a80ad;
    padding: 10px 15px;
    border-radius: 5px;
    color: #fff !important;
}


.kpi-box-secondary {
    border-left: 2px solid #55595c;
}

.kpi-box-success,
.kpi-box-billed_bkg,
.kpi-box-note-approved_bkg {
    border-left: 2px solid #37bc9b;
}

.kpi-box-danger,
.kpi-box-rejected_bkg,
.kpi-box-note-rejected_bkg {
    border-left: 2px solid #da4453;
}

.kpi-box-info {
    border-left: 2px solid #1a80ad;
}

.kpi-box-warning {
    border-left: 2px solid #f6bb42;
}

.kpi-box-corrected_bkg {
    border-left: 2px solid #f0a8f0;
}

.kpi-box-pending_bkg,
.kpi-box-note-pending_bkg {
    border-left: 2px solid #fe8640;
}

.kpi-box-note-archived_bkg {
    border-left: 2px solid #358fff;
}

.kpi-box-note-corrected_bkg {
    border-left: 2px solid #f0a8f0;
}

.card-body.clients-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.horizontal-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding: 10px;
    margin: 0;
    box-sizing: border-box;
}

.client_square {
    margin-right: 8px;
    min-width: 130px;
    max-width: 160px;
    height: 65px;
    border-radius: 0.5rem;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    position: relative;
    text-align: center;
    /*overflow: hidden;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.client_square a.clients {
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    color: #333;
}

.client_square a.active_client {
    background-color: #1f95c9;
    color: #fff !important;
    border-radius: 0.5rem;
    font-weight: 600;
}


.client_square:last-child {
    margin-right: 20px;
    /* evita que se corte el último */
}


.client_square:hover {
    background-color: #f5faff;
    border-color: #b6dcfe;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2);
}

.client_square .clients {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 10px 15px;
    font-weight: 500;
}

.client_square .active_client {
    background-color: #b6dcfe;
    color: white !important;
    border-radius: 0.5rem;
}

.client_square.active_square {
    background-color: #b6dcfe;
    color: #fff;
}

.client_square.active_square a {
    color: #fff;
}

.sp_missing {
    position: absolute;
    top: -11px;
    left: -3px;
    font-size: 1rem;
    color: #ffc107;
    z-index: 10;
}


.filter-inline-item {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    margin-bottom: 10px;
}

.filter-inline-item-reports label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}

.search_form_report .filter-inline-item-reports:first-child {
    margin-left: 20px;
}

.search_form_report {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    /* clave */
    width: 100%;
}

.grid_search_button_export {
    margin-top: 24px;
    display: inline-block;
}

.quick-date-dropdown-menu {
    position: absolute !important;
    top: 100%;
    left: 0;
    display: none !important;
    z-index: 1050;
    min-width: 180px;
    white-space: nowrap;
    background: white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.dropdown.show .quick-date-dropdown-menu {
    display: block !important;
}

.floating-help {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: inline-block;
    width: 60px;
    height: 60px;
    z-index: 1000;
    cursor: pointer;
}

.floating-help img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.floating-help:hover img {
    transform: scale(1.1);
}

.swal-wide p {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.swal-wide strong,
.swal-wide b {
    color: #222;
}

/* Citas o bloques destacados */

.swal-wide blockquote {
    background: #f0fbff;
    border-left: 5px solid #1a80ad;
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    font-style: italic;
    color: #333;
    border-radius: 0.5rem;
}

/* Código inline */

.swal-wide code {
    background: #f4f4f4;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
    color: #ff9f00;
}

/* Bloques de código */

.swal-wide pre {
    background: #1a1a1a;
    color: #ffffff;
    padding: 1rem;
    border-radius: 0.7rem;
    overflow-x: auto;
    font-size: 0.9rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.swal-wide pre code {
    color: #f7d360;
}

/* Links */

.swal-wide a {
    color: #1a80ad;
    text-decoration: none;
    border-bottom: 1px dashed #1a80ad;
    transition: all 0.3s ease;
}

.swal-wide a:hover {
    color: #ff9f00;
    border-bottom: 1px solid #ff9f00;
}

/* Listas */

.swal-wide ul {
    list-style: disc inside;
    padding-left: 1rem;
}

.swal-wide ul li {
    font-size: 1.05rem;
}

.sweet-wide {
    background: linear-gradient(145deg, #ffffff, #f0faff);
}


.sweet-wide {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;
}

.swal-wide .swal2-icon-content {
    font-size: 34px;
}

.swal2-icon .swal2-info .swal2-icon-show {
    width: 3em !important;
    height: 3em !important;
}

.swal-wide {
    background-color: #f9f9f9;
    color: #333;
    padding: 2rem;
    border-radius: 1rem;
    max-height: 90vh;
    overflow-y: auto;
}

/* Estilos internos de texto */
.swal-wide h1,
.swal-wide h2,
.swal-wide h3 {
    font-weight: 700;
    color: #1a80ad;
    position: relative;
    margin-bottom: 1rem;
}

.swal-wide p {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.swal-wide p,
.swal-wide ul li,
.swal-wide h3 {
    text-align: left;
}

.swal-wide {
    max-width: 70%;
    min-width: 60%;
}


/* Fondo oscuro semi-transparente */
.session-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    font-family: "Helvetica", "Arial", sans-serif;
}

.hidden {
    display: none !important;
}

/* Tarjeta del modal */
.session-modal-content {
    background: #ffffff;
    width: 430px;
    padding: 28px 32px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    text-align: center;
}

/* Header */
.session-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}

.session-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: #1d72c2;
    margin: 14px 0 0 0;
}

.session-icon {
    width: 48px;
    opacity: 0.9;
}

/* Texto */
.session-text {
    font-size: 16px;
    color: #333;
    margin-top: 10px;
}

#session-timer {
    font-weight: bold;
    color: #333;
    /* rojo suave */
    font-size: 18px;
}

/* Subheading */
.session-subtext {
    margin-top: 8px;
    color: #666;
    font-size: 14px;
}

/* Botones */
.session-buttons {
    margin-top: 22px;
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Asegura que el modal de auditoría esté SIEMPRE arriba de cualquier otro */
#auditHistoryModal.modal {
    z-index: 5000 !important;
}

.modal-backdrop.audit-history-backdrop {
    z-index: 4000 !important;
}



/****************************************
 * 1) Z-INDEX: que siempre quede encima
 ****************************************/
#auditHistoryModal.modal {
    z-index: 2050;
    /* por encima del resto de modales */
}


/****************************************
 * 2) Shell del modal (estructura básica)
 ****************************************/
#auditHistoryModal .modal-dialog {
    max-width: 1140px;
    /* XL pero contenido */
    margin: 2rem auto;
    /* centrado horizontal, separación razonable arriba */
}

#auditHistoryModal .modal-content {
    border-radius: 12px;
    border: none;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.28);
}

/* Header con gradiente ABASmart */
#auditHistoryModal .modal-header {
    background: linear-gradient(90deg, #1a80ad, #0ea5e9);
    border-bottom: none;
    padding: 0.75rem 1.25rem;
}

/* Forzamos TODO el texto del header en blanco */
#auditHistoryModal .modal-header,
#auditHistoryModal .modal-header * {
    color: #f9fafb !important;
}

#auditHistoryModal .modal-title {
    font-weight: 600;
    letter-spacing: 0.02em;
}

#auditHistoryModal .modal-header .close {
    opacity: 1;
}

#auditHistoryModal .modal-header .close span {
    font-size: 1.4rem;
}

/* Cuerpo y footer */
#auditHistoryModal .modal-body {
    background: #f3f4f6;
    padding: 1.2rem;
}

#auditHistoryModal .modal-footer {
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
}

/****************************************
 * 3) Spinner / estado de carga
 ****************************************/
#auditHistoryModal #auditModalSpinner {
    color: #6b7280;
}

#auditHistoryModal #auditModalSpinner i {
    color: #2563eb;
}

/****************************************
 * 4) Contenedor de historial
 ****************************************/
#auditHistoryModal .audit-history-container {
    font-size: 0.85rem;
}

/* Texto "Total records found" */
#auditHistoryModal .audit-history-container>p.text-muted {
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

#auditHistoryModal .audit-history-container>p.text-muted strong {
    font-weight: 600;
    color: #111827;
}

/****************************************
 * 5) Tabla principal
 ****************************************/
#auditHistoryModal .audit-history-container .table-responsive {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    overflow: hidden;
}

/* Cabecera */
#auditHistoryModal .audit-history-container thead {
    background: #f9fafb;
}

#auditHistoryModal .table .thead-light th {
    border: none !important;
}

#auditHistoryModal .table th,
.table td {
    border-top: none !important;
}

#auditHistoryModal .audit-history-container thead th {
    border-bottom: 1px solid #e5e7eb !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

/* Filas */
#auditHistoryModal .audit-history-container tbody tr {
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#auditHistoryModal .audit-history-container tbody tr:hover {
    background: #eef2ff;
    box-shadow: inset 2px 0 0 #2563eb;
}

/* Columna fecha */
#auditHistoryModal .audit-history-container td:nth-child(2) {
    font-weight: 500;
    color: #111827;
}

/* Usuario */
#auditHistoryModal .audit-history-container td strong {
    color: #111827;
    font-weight: 600;
}

/****************************************
 * 6) Badges de acción (create, edit, etc.)
 ****************************************/
#auditHistoryModal .badge-success {
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem;
    text-transform: capitalize;
    font-weight: 500;
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

#auditHistoryModal .badge-warning {
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    font-size: 0.7rem;
}

/****************************************
 * 7) Botón "View Data Diff"
 ****************************************/
#auditHistoryModal .btn-history-details.btn-info {
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.7rem;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

#auditHistoryModal .btn-history-details.btn-info:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}

/****************************************
 * 8) Panel diff (Previous / New data)
 ****************************************/
#auditHistoryModal .history-data-cell {
    padding: 0 !important;
    background-color: #e5e7eb;
}

#auditHistoryModal .data-diff-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
}

/* Paneles izquierdo y derecho */
#auditHistoryModal .old-data,
#auditHistoryModal .new-data {
    flex: 1 1 260px;
    background: #ffffff;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

#auditHistoryModal .old-data h6,
#auditHistoryModal .new-data h6 {
    font-size: 0.8rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.4rem;
}

/* Área <pre> con look de consola */
#auditHistoryModal .old-data pre,
#auditHistoryModal .new-data pre {
    white-space: pre-wrap;
    font-size: 0.7rem;
    max-height: 220px;
    overflow-y: auto;
    background: #f3f4f6;
    color: #333;
    padding: 0.5rem;
    border-radius: 6px;
    margin-bottom: 0;
    font-family: "Fira Code", "SF Mono", Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

/* Scrollbar suave para el código */
#auditHistoryModal .old-data pre::-webkit-scrollbar,
#auditHistoryModal .new-data pre::-webkit-scrollbar {
    width: 6px;
}

#auditHistoryModal .old-data pre::-webkit-scrollbar-thumb,
#auditHistoryModal .new-data pre::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.9);
    border-radius: 999px;
}

/****************************************
 * 9) Responsive
 ****************************************/
@media (max-width: 768px) {
    #auditHistoryModal .data-diff-wrapper {
        flex-direction: column;
    }

    #auditHistoryModal .modal-dialog {
        margin: 1rem auto;
    }
}

/****************************************
 * Badges de acción unificados
 ****************************************/
/* Estilo base para TODAS las badges dentro del modal */
#auditHistoryModal .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;
    padding: 0.15rem 0.8rem;
    min-width: 70px;
    /* mismo ancho mínimo para todas */
    font-size: 0.70rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: capitalize;
    border: 1px solid transparent;
}

/* Create / success */
#auditHistoryModal .badge-success {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.4);
}

/* Edit / warning */
#auditHistoryModal .badge-warning {
    background: rgba(250, 204, 21, 0.15);
    color: #92400e;
    border-color: rgba(250, 204, 21, 0.6);
}

/* Por si en el futuro usas otros estados */
#auditHistoryModal .badge-danger {
    background: rgba(248, 113, 113, 0.15);
    color: #b91c1c;
    border-color: rgba(248, 113, 113, 0.6);
}

#auditHistoryModal .badge-info,
#auditHistoryModal .badge-primary {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.5);
}

/* Celda que envuelve todo el diff */
.audit-history-container .history-data-cell {
    padding: 0 !important;
    background-color: #e5e7eb;
}

/* Contenedor de los dos paneles (Previous / New) */
.audit-history-container .data-diff-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
}

/* Cada panel */
.audit-history-container .old-data,
.audit-history-container .new-data {
    flex: 1 1 260px;
    background: #ffffff;
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.audit-history-container .old-data h6,
.audit-history-container .new-data h6 {
    font-size: 0.8rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.4rem;
}

/* Grid de campos dentro de cada panel */
.audit-history-container .audit-diff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}

/* Tarjeta de cada campo */
.audit-history-container .audit-diff-item {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 0.35rem 0.5rem;
}

.audit-history-container .audit-diff-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 0.15rem;
}

.audit-history-container .audit-diff-value {
    font-size: 0.8rem;
    font-weight: 500;
    word-break: break-word;
}

/* Viejo vs nuevo: colores diferentes */
.audit-history-container .audit-diff-value--old {
    color: #b91c1c;
}

.audit-history-container .audit-diff-value--new {
    color: #15803d;
}

/* Cuando no hay datos o son legacy */
.audit-history-container .audit-diff-raw {
    white-space: pre-wrap;
    font-size: 0.7rem;
    max-height: 220px;
    overflow-y: auto;
    background: #0b1120;
    color: #e5e7eb;
    padding: 0.5rem;
    border-radius: 6px;
    margin: 0;
    font-family: "Fira Code", "SF Mono", Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}

.audit-history-container .audit-diff-empty {
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .audit-history-container .data-diff-wrapper {
        flex-direction: column;
    }
}





/* Contenedor del formulario principal */
.upload-container {
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin: 20px;
    /* Elimina el 'auto' para evitar el centrado horizontal */
    max-width: 600px;
    /* Las siguientes líneas se eliminan para evitar el centrado:
    display: flex;
    justify-content: center;
    align-items: center;
    */
}

/* Título del formulario */
.upload-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

/* Estilos de los formularios */
.upload-form-group {
    margin-bottom: 20px;
}

.upload-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #555;
}

.upload-input,
.upload-select,
.upload-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

.upload-input:focus,
.upload-select:focus,
.upload-textarea:focus {
    outline: none;
    border-color: #007bff;
}

/* Zona de arrastrar y soltar */
.upload-drop-zone {
    border: 2px dashed #007bff;
    background-color: #f8faff;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.upload-drop-zone p {
    margin: 0;
    color: #007bff;
    font-weight: bold;
}

/* Feedback visual para arrastrar y soltar */
.upload-drop-zone.is-dragover {
    background-color: #eaf3ff;
    border-color: #0056b3;
}

.upload-drop-zone.selected {
    border: 2px solid #28a745;
}

.upload-selected-file-info {
    font-style: italic;
    color: #555;
    text-align: center;
    margin-top: -10px;
    margin-bottom: 20px;
}

.upload-hidden-input {
    display: none;
}

/* Botones de acción */
.upload-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
}

/* Contenedor principal */
.permission-container {
    background-color: #fff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.permission-title {
    font-size: 20px;
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.permission-form-group {
    margin-bottom: 15px;
}

.permission-form-group label {
    font-weight: bold;
    color: #555;
    margin-bottom: 8px;
    display: block;
}

/* Caja de búsqueda */
.permission-search-box {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.permission-search-box input {
    border: none;
    padding: 10px;
    flex-grow: 1;
    font-size: 16px;
}

.permission-search-box input:focus {
    outline: none;
}

.permission-search-box .search-btn {
    background-color: #f4f7f9;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    color: #007bff;
}

.permission-search-results {
    border: 1px solid #ddd;
    border-top: none;
    max-height: 150px;
    overflow-y: auto;
    background-color: #fff;
    z-index: 10;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: #f8faff;
}

.search-result-item i {
    color: #007bff;
    margin-right: 10px;
}

.search-result-item span {
    flex-grow: 1;
}

.search-result-item .add-btn {
    background: none;
    border: none;
    color: #28a745;
    cursor: pointer;
    font-size: 16px;
}

/* Lista de seleccionados */
.permission-list {
    list-style: none;
    padding: 0;
}

.permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.permission-item i {
    color: #007bff;
    margin-right: 10px;
}

.permission-item span {
    flex-grow: 1;
}

.permission-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.permission-controls label {
    margin: 0;
    font-weight: normal;
}

.permission-controls input[type="checkbox"] {
    width: auto;
}

.permission-controls .remove-btn {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    font-size: 16px;
}


/* ============================================================
        ABASmart Resources UI (LIGHT / Modern / WOW)
        - No frameworks
        - Resistant to global dashboard CSS overrides
        ============================================================ */

:root {
    --rs-bg: #f6f8fb;
    --rs-surface: #ffffff;
    --rs-border: rgba(15, 23, 42, .10);

    --rs-text: #0f172a;
    --rs-muted: rgba(15, 23, 42, .62);

    --rs-primary: #1a5b8e;
    --rs-accent: #f39c12;

    --rs-radius-xl: 18px;

    --rs-shadow-1: 0 10px 24px rgba(2, 6, 23, .08);
    --rs-shadow-2: 0 18px 45px rgba(2, 6, 23, .12);

    --rs-ring: 0 0 0 4px rgba(26, 91, 142, .14);
    --rs-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --rs-card-h: 176px;
}

.rs-wrap,
.rs-wrap * {
    box-sizing: border-box;
}

.rs-wrap svg {
    width: auto;
    height: auto;
}

.rs-wrap img {
    max-width: 100%;
    height: auto;
}

.rs-wrap button,
.rs-wrap input,
.rs-wrap a {
    font-family: var(--rs-font);
}

.rs-wrap {
    font-family: var(--rs-font);
    /*background: var(--rs-bg);*/
    color: var(--rs-text);
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: var(--rs-radius-xl);
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.rs-wrap::before {
    content: "";
    position: absolute;
    inset: -140px -120px auto auto;
    width: 520px;
    height: 420px;
    background: radial-gradient(closest-side, rgba(26, 91, 142, .20), rgba(26, 91, 142, .00) 72%);
    pointer-events: none;
}

.rs-wrap::after {
    content: "";
    position: absolute;
    inset: auto auto -160px -140px;
    width: 520px;
    height: 420px;
    background: radial-gradient(closest-side, rgba(243, 156, 18, .18), rgba(243, 156, 18, .00) 72%);
    pointer-events: none;
}

.rs-toolbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 4px 2px 12px;
}

.rs-title h2 {
    margin: 0;
    font-size: 18px;
    letter-spacing: .2px;
    font-weight: 700;
}

.rs-title p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--rs-muted);
}

.rs-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.rs-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-width: min(520px, 70vw);
    background: var(--rs-surface);
    border: 1px solid var(--rs-border);
    border-radius: 999px;
    box-shadow: 0 1px 0 rgba(2, 6, 23, .03);
    transition: box-shadow .16s ease, border-color .16s ease, transform .16s ease;
}

.rs-search:focus-within {
    border-color: rgba(26, 91, 142, .28);
    box-shadow: var(--rs-ring), 0 10px 22px rgba(2, 6, 23, .06);
    transform: translateY(-1px);
}

.rs-search svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    color: rgba(15, 23, 42, .55);
}

.rs-search input {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: var(--rs-text);
    padding: 0;
    margin: 0;
}

.rs-search input::placeholder {
    color: rgba(15, 23, 42, .42);
}

.rs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--rs-border);
    background: var(--rs-surface);
    color: var(--rs-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.rs-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(15, 23, 42, .16);
    box-shadow: 0 12px 24px rgba(2, 6, 23, .08);
}

.rs-btn:active {
    transform: translateY(0px);
    box-shadow: 0 6px 16px rgba(2, 6, 23, .08);
}

.rs-btn:disabled,
.rs-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.rs-btn-primary {
    border-color: rgba(26, 91, 142, .18);
    background: linear-gradient(180deg, rgba(26, 91, 142, .12), rgba(26, 91, 142, .06));
    color: var(--rs-primary);
}

.rs-btn-primary:hover {
    border-color: rgba(26, 91, 142, .28);
    background: linear-gradient(180deg, rgba(26, 91, 142, .16), rgba(26, 91, 142, .08));
}

.rs-btn-ghost {
    background: rgba(255, 255, 255, .55);
}

.rs-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
}

.rs-cats {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 2px 14px;
    align-items: center;
}

.rs-cat {
    appearance: none;
    border: 1px solid var(--rs-border);
    background: rgba(255, 255, 255, .72);
    color: rgba(15, 23, 42, .72);
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}


.rs-cat.rs-cat-admin {
    border-style: dashed;
    color: rgba(15, 23, 42, .64);
}

.rs-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
    align-items: stretch;
    padding: 2px;
    margin-top: 8px;
}

.rs-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .92));
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-xl);
    box-shadow: var(--rs-shadow-1);
    overflow: hidden;
    min-height: var(--rs-card-h);
    display: flex;
    flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}


/* ============================================================
   CARD TOP (badge arriba, title+desc debajo) + FIX overflow
   ============================================================ */
.rs-card-top {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 10px;
}

/* Stack vertical: badge arriba y texto debajo (como quieres) */
.rs-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Badge static (NO absolute) */
.rs-type {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    flex-shrink: 0;

    font-size: 11px;
    font-weight: 900;
    letter-spacing: .35px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 10px 18px rgba(2, 6, 23, .10);
}

.rs-type-pdf {
    background: linear-gradient(180deg, #ff5b5b, #ef4444);
}

.rs-type-img {
    background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.rs-type-doc {
    background: linear-gradient(180deg, #34d399, #16a34a);
}

.rs-type-other {
    background: linear-gradient(180deg, #a78bfa, #7c3aed);
}

.rs-meta {
    min-width: 0;
    margin-top: 0;
}

/* Título: 2 líneas + rompe palabras largas (NO se sale del card) */
.rs-name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--rs-text);

    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.rs-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(15, 23, 42, .66);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}

.rs-desc-muted {
    color: rgba(15, 23, 42, .45);
}

/* Pills row */
.rs-sub {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.rs-sub-pill {
    font-size: 12px;
    color: rgba(15, 23, 42, .70);
    background: rgba(15, 23, 42, .045);
    border: 1px solid rgba(15, 23, 42, .08);
    padding: 6px 10px;
    border-radius: 999px;
}

.rs-sub-pill-soft {
    background: rgba(26, 91, 142, .06);
    border-color: rgba(26, 91, 142, .14);
    color: rgba(26, 91, 142, .92);
}

.rs-card-bottom {
    margin-top: auto;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(15, 23, 42, .06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rs-btns {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rs-btn.rs-btn-compact {
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
}

.rs-btn.rs-btn-view {
    background: rgba(26, 91, 142, .08);
    border-color: rgba(26, 91, 142, .16);
    color: var(--rs-primary);
}

.rs-btn.rs-btn-view:hover {
    background: rgba(26, 91, 142, .12);
    border-color: rgba(26, 91, 142, .22);
}

.rs-btn.rs-btn-download {
    background: rgba(243, 156, 18, .10);
    border-color: rgba(243, 156, 18, .20);
    color: #a16207;
}

.rs-btn.rs-btn-download:hover {
    background: rgba(243, 156, 18, .14);
    border-color: rgba(243, 156, 18, .26);
}

/* Empty State */
.rs-empty {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 20px 0;
}

.rs-empty-card {
    width: min(560px, 96%);
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--rs-border);
    border-radius: var(--rs-radius-xl);
    box-shadow: var(--rs-shadow-1);
    padding: 22px;
    text-align: center;
}

.rs-empty-ico {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(closest-side at 25% 25%, rgba(26, 91, 142, .18), rgba(26, 91, 142, 0)),
        radial-gradient(closest-side at 75% 75%, rgba(243, 156, 18, .14), rgba(243, 156, 18, 0)),
        rgba(255, 255, 255, .9);
    border: 1px solid rgba(15, 23, 42, .08);
    box-shadow: 0 12px 22px rgba(2, 6, 23, .08);
    font-size: 26px;
}

.rs-empty-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 900;
}

.rs-empty-card p {
    margin: 0;
    font-size: 13px;
    color: var(--rs-muted);
}

/* Modal */
.rs-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 99999;
}

.rs-modal[aria-hidden="false"] {
    display: block;
}

.rs-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, .55);
    backdrop-filter: blur(8px);
}

.rs-modal-dialog {
    position: relative;
    width: min(1050px, calc(100vw - 30px));
    height: min(82vh, 760px);
    margin: 6vh auto 0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 40px 90px rgba(2, 6, 23, .35);
    overflow: hidden;
    animation: rsPop .18s ease-out;
}

@keyframes rsPop {
    from {
        transform: translateY(8px) scale(.99);
        opacity: .0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.rs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    background:
        radial-gradient(600px 160px at 10% 0%, rgba(26, 91, 142, .14), transparent 60%),
        radial-gradient(520px 160px at 90% 0%, rgba(243, 156, 18, .12), transparent 55%),
        rgba(255, 255, 255, .96);
}

.rs-modal-kicker {
    font-size: 12px;
    font-weight: 800;
    color: rgba(15, 23, 42, .56);
    letter-spacing: .25px;
    margin-bottom: 2px;
}

.rs-modal-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
    color: var(--rs-text);
}

.rs-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rs-modal-body {
    height: calc(100% - 64px);
    background: #f3f6fb;
}

.rs-modal-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
}

.rs-preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(2, 6, 23, .12);
    background: #fff;
}

.rs-preview-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(2, 6, 23, .12);
    background: #fff;
}

.rs-preview-fallback {
    max-width: 720px;
    width: 100%;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(2, 6, 23, .12);
    padding: 18px;
    text-align: center;
}

.rs-preview-fallback p {
    margin: 0 0 12px;
    color: rgba(15, 23, 42, .62);
    font-size: 13px;
}

@media (max-width: 900px) {
    .rs-search {
        min-width: min(520px, 92vw);
    }

    .rs-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (max-width: 520px) {
    .rs-toolbar {
        align-items: flex-start;
    }

    .rs-actions {
        width: 100%;
    }

    .rs-search {
        width: 100%;
        min-width: 100%;
    }
}

.rs-cat.active {
    background: #1a80ad;
    color: #fff;
    border-color: #1a80ad;
}


/* View toggle pill */
.rs-view-toggle {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 1px 0 rgba(2, 6, 23, .03);
}

.rs-view-btn {
    border: 0;
    background: transparent;
    color: rgba(15, 23, 42, .70);
    font-weight: 800;
    font-size: 12.5px;
    padding: 9px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, transform .16s ease;
    white-space: nowrap;
}

.rs-view-btn:hover {
    transform: translateY(-1px);
    background: rgba(15, 23, 42, .05);
}

.rs-view-btn.active {
    background: linear-gradient(180deg, rgba(26, 91, 142, .14), rgba(26, 91, 142, .08));
    color: rgba(26, 91, 142, .95);
    box-shadow: 0 10px 18px rgba(2, 6, 23, .08);
}

/* ---------- LIST VIEW LAYOUT ---------- */
.rs-grid[data-view="list"] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rs-grid[data-view="list"] .rs-card {
    min-height: auto;
    border-radius: 16px;
}

/* card becomes a row */
.rs-grid[data-view="list"] .rs-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow: hidden;
}

/* top section turns into main content left */
.rs-grid[data-view="list"] .rs-card-top {
    flex: 1;
    padding: 14px 14px;
    display: flex;
    align-items: center;
}

.rs-grid[data-view="list"] .rs-head {
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

/* badge column fixed width feel */
.rs-grid[data-view="list"] .rs-type {
    flex-shrink: 0;
    margin-top: 2px;
}

.rs-grid[data-view="list"] .rs-meta {
    min-width: 0;
}

/* name/desc in list: allow 1–2 lines, keep it compact */
.rs-grid[data-view="list"] .rs-name {
    margin: 0 0 4px;
    font-size: 14.5px;
    line-height: 1.2;

    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.rs-grid[data-view="list"] .rs-desc {
    min-height: 0;
    font-size: 13px;
    -webkit-line-clamp: 1;
}

/* bottom section becomes right actions column */
.rs-grid[data-view="list"] .rs-card-bottom {
    margin-top: 0;
    border-top: 0;
    border-left: 1px solid rgba(15, 23, 42, .06);
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    background: rgba(255, 255, 255, .65);
    min-width: 220px;
}

.rs-grid[data-view="list"] .rs-btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

/* make compact buttons slightly tighter on list rows */
.rs-grid[data-view="list"] .rs-btn.rs-btn-compact {
    padding: 8px 11px;
    font-size: 12.8px;
    border-radius: 12px;
}

/* responsive: list actions drop below on small widths */
@media (max-width: 720px) {
    .rs-grid[data-view="list"] .rs-card {
        flex-direction: column;
    }

    .rs-grid[data-view="list"] .rs-card-bottom {
        min-width: 100%;
        border-left: 0;
        border-top: 1px solid rgba(15, 23, 42, .06);
        justify-content: flex-start;
    }

    .rs-grid[data-view="list"] .rs-btns {
        justify-content: flex-start;
    }
}

#rsViewCards:focus,
#rsViewList:focus {
    outline: none !important;
}

.rs-headbar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* el tipo no se comprime */
.rs-headbar .rs-type {
    flex: 0 0 auto;
}

/* Shared by compacto y a la derecha (sin barra larga) */
.rs-shared {
    flex: 0 1 auto;
    /* <- clave: ya NO ocupa todo */
    margin-left: auto;
    /* <- lo empuja al extremo derecho */
    max-width: 68%;
    /* evita que se coma todo el row */
    display: inline-flex;
    align-items: center;

    font-size: 10px;
    line-height: 1;
    padding: 6px 10px;

    color: var(--muted);
    background: rgba(15, 23, 42, .04);
    border: 1px solid var(--border);
    border-radius: 999px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* LIST MODE: separar claramente columna de contenido vs columna de acciones */
.rs-grid[data-view="list"] .rs-card {
    display: flex;
    align-items: stretch;
}

.rs-grid[data-view="list"] .rs-card-top {
    flex: 1 1 auto;
    /* contenido ocupa todo lo posible */
    min-width: 0;
    /* necesario para ellipsis internos */
}

.rs-grid[data-view="list"] .rs-card-bottom {
    flex: 0 0 auto;
    /* acciones NO empujan el contenido */
}

/* El headbar debe estirarse para poder empujar "Shared by" al final del bloque de contenido */
.rs-grid[data-view="list"] .rs-headbar {
    width: 100%;
}

/* “Shared by” al borde derecho del área de contenido (sin caer en botones) */
.rs-grid[data-view="list"] .rs-shared {
    margin-left: auto;
    /* se alinea al extremo derecho del content */
    max-width: 45%;
    /* más estricto en list para que no choque */
}

/* Contenedor del shortcut */
.dashboard_shortcut {
    position: relative;
    display: block;
}

/* Estilo del badge NEW */
.badge-new-float {
    position: absolute;
    top: -5px;
    right: 15%;
    /* Ajusta según el diseño de tu grid */
    background: #27ae60;
    /* Un verde éxito para diferenciarlo del rojo de 'locked' */
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    z-index: 10;
    box-shadow: 0 0 0 rgba(39, 174, 96, 0.4);
    animation: pulse-green 2s infinite;
}

/* Animación de destello suave */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(39, 174, 96, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }

    100% {
        background-position: 1000px 0;
    }
}

.skeleton-box {
    display: inline-block;
    height: 100%;
    width: 100%;
    min-height: 20px;
    position: relative;
    overflow: hidden;
    background-color: #f0f0f0;
    background-image: linear-gradient(to right, #f0f0f0 0%, #e0e0e0 50%, #f0f0f0 100%);
    background-repeat: no-repeat;
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 4px;
}

.skeleton-row td {
    padding: 15px;
    vertical-align: middle;
}

.skeleton-card {
    background: #fff;
    border-radius: 5px;
    padding: 15px;
    border: 1px solid #e0e0e0;
    margin-bottom: 20px;
    height: 200px;
}