@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

@font-face {
    font-family: "Uni Neue";
    font-style: normal;
    font-weight: 300;
    src: url("../fonts/UniNeueLight.eot");
    src: local("☺"), url("../fonts/UniNeueLight.woff") format("woff"),
        url("../fonts/UniNeueLight.ttf") format("truetype"),
        url("../fonts/UniNeueLight.svg") format("svg");
}

@font-face {
    font-family: "Uni Neue";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/UniNeue.eot");
    src: local("☺"), url("../fonts/UniNeue.woff") format("woff"),
        url("../fonts/UniNeue.ttf") format("truetype"), url("../fonts/UniNeue.svg") format("svg");
}

@font-face {
    font-family: "Uni Neue";
    font-style: normal;
    font-weight: 600;
    src: url("../fonts/UniNeueBold.eot");
    src: local("☺"), url("../fonts/UniNeueBold.woff") format("woff"),
        url("../fonts/UniNeueBold.ttf") format("truetype"),
        url("../fonts/UniNeueBold.svg") format("svg");
}

:root {
    /* ── Brand Palette ── */
    --brand-main: #184389;
    --brand-secondary-dark-gray: #111222;
    --brand-secondary-green: #5ebfc0;

    /* ── Blue Scale ── */
    --dark-blue: #1d3c76;
    --darker-blue: #1f3464;
    --darkest-blue: #212d54;
    --near-black: #111222;
    --light-blue: #5272a7;
    --medium-blue: #5272a7;
    --lighter-blue: #e8edf5;
    --lighter-blue-2: #c5d0e1;

    /* ── Gray Scale ── */
    --border-light-gray: #d1d5db;
    --darker-gray: #111222;
    --medium-gray: #4b5563;
    --medium-gray-2: #6b7280;
    --light-gray: #f9fafb;
    --light-gray-2: #e5e7eb;
    --light-gray-3: #d1d5db;

    /* ── Semantic: Success / Teal ── */
    --dark-green: #3a9a9b;
    --darker-green: #2d7e7f;
    --medium-green: #5ebfc0;
    --light-green: #eaf5f5;
    --light-green-2: #d0edee;

    /* ── Semantic: Danger / Red ── */
    --danger: #e34a51;
    --danger-dark: #c73a40;
    --danger-rgba: rgba(227, 74, 81, 1);
    --light-red: #fceced;
    --light-red-2: #f9d2d4;

    /* ── Semantic: Warning ── */
    --warning: #f0a34e;
    --warning-dark: #d48f3e;
    --warning-darker: #7c562c;
    --warning-light: #f7d4a3;
    --light-orange: #fef3e2;
    --light-orange-2: #fff3cd;

    /* ── VCX Brand Accents (body content only) ── */
    --vcx-blue: #4253A0;
    --vcx-aqua: #27D196;
    --vcx-aqua-dark: #1EAE7A;
    --vcx-aqua-light: #e6f9f2;
    --vcx-crimson: #E10244;
    --vcx-crimson-dark: #B8023A;
    --vcx-crimson-light: #fce8ee;
    --vcx-dark: #282837;

    /* ── Links ── */
    --link-blue: #184389;

    /* ── OCS ── */
    --ocs-light-purple: #f0deec;
    --ocs-purple: #961b7e;

    /* ── Base ── */
    --white: #ffffff;

    /* ── Gradients ── */
    --gradient-brand: linear-gradient(45deg, #1f315b, #184389);
    --gradient-dark: linear-gradient(49deg, #111222, #212d54);
    --gradient-light: linear-gradient(90deg, #ffffff, #e8e8e7);

    /* ── Radius ── */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 100px;

    /* ── Transitions ── */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.3s ease;
}

html {
    font-size: 16px;
}

a,
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: var(--link-blue);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-fast);
}

a.btn.disabled,
fieldset:disabled a.btn {
    pointer-events: none;
}

a:hover,
a:focus-visible {
    color: var(--dark-blue);
    text-decoration: underline;
}

a:not(.btn) span,
a:not(.btn) i {
    margin-right: 5px;
    text-decoration: none;
}

a:hover span.fa,
a:focus-visible span.fa,
a:active span.fa,
a:hover i.fa,
a:focus-visible i.fa,
a:active i.fa {
    text-decoration: none !important;
}

a.carrier-collapse[aria-expanded="true"] span.fa-chevron-down:before {
    content: "\f187";
}

a.carrier-collapse[aria-expanded="false"] span.fa-chevron-up:before {
    content: "\f184";
}

.accordion-button {
    color: unset;
    font-size: unset;
}

.accordion-button::after {
    display: none;
}

.accordion-button:not(.collapsed) {
    background-color: unset;
    box-shadow: unset;
}

.accordion-button[aria-expanded="true"] span.fa-chevron-down:before {
    content: "\f077";
}

.accordion-item {
    border: unset;
}

.analysis-disclaimer {
    font-size: 0.9375rem;
}

.arrow-box {
    padding: 10px;
    position: relative;
    border: 2px solid var(--brand-main);
    border-radius: 8px;
    text-align: center;
}

.arrow-box.reduction-percentage {
    margin-left: 15px;
    border: 2px solid var(--dark-green);
}

.arrow-left {
    position: absolute;
    width: 10px;
    height: 21px;
    top: 50%;
    left: -7px;
    margin-top: -15px;
}

.arrow-left:before {
    content: "";
    width: 2px;
    height: 15px;
    position: absolute;
    background-color: var(--brand-main);
    transform: rotate(45deg);
    top: -2px;
    left: 0;
    box-shadow: 4px -4px 0px 3px var(--white);
}

.arrow-left:after {
    content: "";
    width: 2px;
    height: 15px;
    position: absolute;
    background-color: var(--brand-main);
    transform: rotate(-45deg);
    bottom: -2px;
    left: 0px;
    box-shadow: 4px 6px 0px 3px var(--white);
}

.arrow-box.reduction-percentage .arrow-left:before,
.arrow-box.reduction-percentage .arrow-left::after {
    background-color: var(--dark-green);
}

.actions-dropdown {
    left: auto;
    right: 0;
}

.alert {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-light-gray);
    border-radius: var(--radius-sm);
    color: var(--darker-gray);
}

.alert.alert-dismissible.notification {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0;
    padding: 0 10px;
}

.alert-danger {
    background-color: var(--light-red-2);
}

.alert-dismissible {
    padding-right: 1.875rem;
}

.alert-info {
    background-color: var(--lighter-blue-2);
}

.alert-success {
    background-color: var(--light-green-2);
}

.asset-img img {
    max-width: 570px !important;
}

.asset-img .modal-body {
    background: none;
}

.asset-img .modal-title {
    font-size: 1.5rem;
}

.asset-img p {
    display: inline !important;
}

.badge {
    cursor: default;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

#base-auth {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    color: var(--brand-secondary-dark-gray);
}

#base-auth.sign-up {
    background-image: url('../img/bg-base-auth-sonar-preview.webp');
}

#base-auth.gradient {
    background-image: url('../img/bg-base-auth-gradient.webp');
}

#base-auth > footer {
    background-color: rgba(40, 40, 55, 0.5);
}

#base-dashboard .dropdown-toggle::after {
    display: none;
}

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

.bg-info {
    background-color: var(--dark-green) !important;
}

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

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

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

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

.bg-warning-light {
    background-color: var(--warning-light) !important;
}

.bg-white {
    background: white !important;
}

.block-list {
    margin-top: 5px;
}

.block-list h2 .line {
    flex: auto;
}

.block-list h2 .text {
    flex: 0 1 auto !important;
}

body {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    color: var(--darker-gray);
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body#base-auth .alert {
    border-radius: var(--radius-sm);
}

body#base-sonar,
body#base-flow,
body#base-dashboard {
    padding-top: 48px;
}

body#base-sonar,
body#base-flow,
body#base-dashboard {
    height: 100vh;
}

body#base-sonar .table-responsive,
body#base-flow .table-responsive {
    padding-bottom: 5px;
}

body:not(#base-sonar):not(#base-flow) div#calendar {
    margin: 0 3% 0 3%;
}

body .table-condensed-container input[type="search"].form-control,
body .table-condensed-container select.form-control {
    height: 24px;
    padding: 0.25rem 0.25rem;
}

body .table-condensed-container .pagination .page-link {
    padding: 0.2rem 0.5rem;
    font-size: 0.8125rem;
}

body .table-condensed-container select.form-control {
    padding: 0.1875rem 0.9375rem 0.1875rem 0.25rem;
}

body .table-condensed-container span.fa-lg {
    font-size: 1.125rem;
}

body .table-condensed-container th {
    font-weight: 500;
}

body .table-condensed-container .dataTable tr {
    height: auto;
}

body .table-condensed-container .dataTable td,
body .table-condensed-container .dataTable th {
    padding: 0.375rem;
}

.border-1 {
    border: 1px solid var(--border-light-gray);
}

.border-bottom-light {
    border-bottom: 1px solid var(--lighter-blue);
}

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

.border-end-light {
    border-right: 1px solid var(--lighter-blue);
}

.border-primary {
    border: 1px solid var(--brand-main) !important;
}

.border-start-light {
    border-left: 1px solid var(--lighter-blue) !important;
}

.border-top-light {
    border-top: 1px solid var(--lighter-blue);
}

.breadcrumb {
    background-color: transparent;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
}

.breadcrumb > .active {
    color: var(--medium-gray);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--medium-gray-2);
}

.breadcrumb-item a {
    color: var(--light-blue);
    font-weight: 400;
}

.btn {
    display: inline-block;
    font-weight: 500;
    color: var(--brand-secondary-dark-gray);
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast),
        border-color var(--transition-fast), box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.btn[aria-expanded="false"] span.collapse-text-closed,
.btn[aria-expanded="true"] span.collapse-text-open {
    display: none;
}

.btn[aria-expanded="true"] span.collapse-text-closed,
.btn[aria-expanded="false"] span.collapse-text-open {
    display: inline-block;
}

.btn:hover {
    color: var(--brand-secondary-dark-gray);
    text-decoration: none;
}

.btn.active,
.btn:active {
    background-image: none;
    outline: 0 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn.disabled,
.btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.btn.focus,
.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.125rem rgba(0, 123, 255, 0.25);
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.btn-close {
    color: var(--darker-gray);
    font-size: 1.125rem;
    line-height: 0.625rem;
    opacity: 0.8;
    padding: 0.25rem;
}

.btn-close:hover {
    opacity: 1;
}

.btn-danger {
    color: var(--white);
    background-color: var(--danger) !important;
    border: 1px solid var(--danger) !important;
}

.btn-danger:hover {
    color: var(--white) !important;
    background-color: var(--danger-dark) !important;
    border-color: var(--danger-dark) !important;
}

.btn-danger.focus,
.btn-danger:focus-visible {
    color: var(--white) !important;
    background-color: var(--danger-dark) !important;
    border-color: var(--danger-dark) !important;
    box-shadow: 0 0 0 0.125rem rgba(225, 83, 97, 0.5) !important;
}

.btn-danger.disabled,
.btn-danger:disabled {
    color: var(--white) !important;
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.btn-danger:not(:disabled):not(.disabled).active,
.btn-danger:not(:disabled):not(.disabled):active,
.show > .btn-danger.dropdown-toggle {
    color: var(--white) !important;
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.btn-danger:not(:disabled):not(.disabled).active:focus-visible,
.btn-danger:not(:disabled):not(.disabled):active:focus-visible,
.show > .btn-danger.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(225, 83, 97, 0.5) !important;
}

.btn-dark {
    color: var(--white) !important;
    background-color: var(--brand-secondary-dark-gray);
    border-color: var(--brand-secondary-dark-gray);
}

.btn-dark:hover {
    background-color: var(--darker-gray);
    border-color: var(--darker-gray);
}

.btn-default {
    border: 1px solid var(--border-light-gray) !important;
    background-color: var(--white) !important;
    color: var(--brand-secondary-dark-gray) !important;
}

.btn-default:hover {
    color: var(--brand-secondary-dark-gray) !important;
    background-color: var(--light-gray) !important;
    border: 1px solid var(--medium-gray-2) !important;
    text-decoration: none !important;
}

.btn-group > .btn.actions {
    font-size: 0.9375rem;
    line-height: 1.5;
    border-radius: 0.125rem;
}

.btn-group-lg > .btn,
.btn-lg {
    padding: 0.375rem 0.875rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--radius-sm);
}

.btn-group-sm > .btn,
.btn-sm {
    padding: 0.1875rem 0.25rem;
}

.btn-lg {
    font-size: 1.25rem;
}

.btn-input {
    background-color: var(--white);
    border: 1px solid var(--light-gray-3);
    border-radius: var(--radius-sm);
    height: 36px;
    margin: 0 !important;
}

.btn-input.btn.active,
.btn-input.btn:active {
    border: 1px solid var(--light-gray-3);
    box-shadow: unset;
}

.btn-input:hover {
    background-color: var(--light-gray);
    border: 1px solid var(--light-gray-3);
}

.btn-input span {
    color: var(--brand-secondary-dark-gray);
    font-size: 1.375rem;
    margin-right: 0px;
    vertical-align: middle;
}

.btn-light {
    color: var(--brand-secondary-dark-gray);
    background-color: var(--light-gray);
    border-color: var(--light-gray);
}

.btn-link.btn,
.btn-link-border.btn,
.btn-link-no-bg.btn {
    color: var(--link-blue);
    font-weight: 400;
    text-decoration: none;
}

.btn-link.btn:hover,
.btn-link-border.btn:hover {
    background-color: var(--lighter-blue);
    color: var(--link-blue);
    text-decoration: underline;
}

.btn-link.btn.focus,
.btn-link.btn:focus-visible,
.btn-link-border.btn.focus,
.btn-link-border.btn:focus-visible {
    text-decoration: underline;
}

.btn-link.btn.disabled,
.btn-link.btn:disabled,
.btn-link-border.btn.disabled,
.btn-link-border.btn:disabled {
    color: #6c757d;
    pointer-events: none;
}

.btn-link.btn:hover span.fa-caret-down,
.btn-link.btn:active span.fa-caret-down {
    text-decoration: none !important;
}

.btn-link-border.btn {
    border: 1px solid var(--border-light-gray);
}

.btn-link-no-bg.btn {
    padding: 0;
    vertical-align: unset;
}

.btn-link-no-bg.btn:hover {
    color: var(--link-blue);
    text-decoration: underline;
}

.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-outline-danger:hover {
    color: var(--white);
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-outline-danger.focus,
.btn-outline-danger:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(220, 53, 69, 0.5);
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
    color: var(--danger);
    background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled).active,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.show > .btn-outline-danger.dropdown-toggle {
    color: var(--white);
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-outline-danger:not(:disabled):not(.disabled).active:focus-visible,
.btn-outline-danger:not(:disabled):not(.disabled):active:focus-visible,
.show > .btn-outline-danger.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(220, 53, 69, 0.5);
}

.btn-outline-info {
    background-color: var(--white) !important;
    color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}

.btn-outline-info:hover {
    color: var(--white) !important;
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}

.btn-outline-info.focus,
.btn-outline-info:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(23, 162, 184, 0.5) !important;
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
    color: var(--dark-green) !important;
    background-color: transparent !important;
}

.btn-outline-info:not(:disabled):not(.disabled).active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.show > .btn-outline-info.dropdown-toggle {
    color: var(--white) !important;
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}

.btn-outline-info:not(:disabled):not(.disabled).active:focus-visible,
.btn-outline-info:not(:disabled):not(.disabled):active:focus-visible,
.show > .btn-outline-info.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(23, 162, 184, 0.5) !important;
}

.btn-outline-primary {
    background-color: var(--white) !important;
    color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
}

.btn-outline-primary:hover {
    color: var(--white) !important;
    background-color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
}

.btn-outline-primary.focus,
.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(103, 117, 179, 0.5) !important;
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: var(--brand-main) !important;
    background-color: var(--white) !important;
}

.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
    color: var(--white) !important;
    background-color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus-visible,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus-visible,
.show > .btn-outline-primary.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(103, 117, 179, 0.5) !important;
}

.btn-outline-secondary {
    color: var(--bs-border-color) !important;
    border-color: var(--bs-border-color) !important;
}

.btn-outline-warning {
    color: var(--warning-dark) !important;
    border-color: var(--warning-dark) !important;
}

.btn-outline-warning:hover {
    color: var(--brand-secondary-dark-gray) !important;
    background-color: var(--warning-dark) !important;
    border-color: var(--warning-dark) !important;
}

.btn-outline-warning.focus,
.btn-outline-warning:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(255, 193, 7, 0.5) !important;
}

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
    color: var(--warning-dark) !important;
    background-color: transparent !important;
}

.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.show > .btn-outline-warning.dropdown-toggle {
    color: var(--brand-secondary-dark-gray) !important;
    background-color: var(--warning-dark) !important;
    border-color: var(--warning-dark) !important;
}

.btn-outline-warning:not(:disabled):not(.disabled).active:focus-visible,
.btn-outline-warning:not(:disabled):not(.disabled):active:focus-visible,
.show > .btn-outline-warning.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(255, 193, 7, 0.5) !important;
}

.btn-primary {
    color: var(--white) !important;
    background-color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
}

.btn-primary:hover {
    color: var(--white) !important;
    background-color: var(--dark-blue) !important;
    border-color: var(--darker-blue) !important;
}

.btn-primary.focus,
.btn-primary:focus-visible {
    color: var(--white);
    background-color: var(--dark-blue);
    border-color: var(--darker-blue);
    box-shadow: 0 0 0 0.125rem rgba(103, 117, 179, 0.5);
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: var(--white);
    background-color: var(--brand-main);
    border-color: var(--brand-main);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    color: var(--white);
    background-color: var(--darker-blue);
    border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled).active:focus-visible,
.btn-primary:not(:disabled):not(.disabled):active:focus-visible,
.show > .btn-primary.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(103, 117, 179, 0.5);
}

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.btn-success {
    color: var(--white) !important;
    background-color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}

.btn-success.disabled,
.btn-success:disabled {
    color: var(--white) !important;
    background-color: var(--medium-green) !important;
    border-color: var(--medium-green) !important;
}

.btn-success.focus,
.btn-success:focus,
.btn-success:focus-visible {
    background-color: var(--darker-green) !important;
    color: var(--white) !important;
    box-shadow: 0 0 0 0.125rem rgba(58, 176, 195, 0.5) !important;
}

.btn-success:hover {
    color: var(--white) !important;
    background-color: var(--darker-green) !important;
    border-color: var(--darker-green) !important;
}

.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active,
.show > .btn-success.dropdown-toggle {
    color: var(--white);
    background-color: var(--darker-green) !important;
    border-color: var(--darker-green) !important;
}

.btn-success:not(:disabled):not(.disabled).active:focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus-visible,
.btn-success:not(:disabled):not(.disabled):active:focus-visible,
.show > .btn-success.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(58, 176, 195, 0.5) !important;
}

/* .btn-table is now styled via .dataTables_wrapper .dt-buttons .btn in base-enhancements.css */

.btn-warning {
    color: var(--brand-secondary-dark-gray) !important;
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
}

.btn-warning:hover {
    color: var(--brand-secondary-dark-gray) !important;
    background-color: var(--warning-dark) !important;
    border-color: var(--warning-dark) !important;
}

.btn-warning.focus,
.btn-warning:focus-visible {
    color: var(--brand-secondary-dark-gray) !important;
    background-color: var(--warning-dark) !important;
    border-color: #d39e00 !important;
    box-shadow: 0 0 0 0.125rem rgba(222, 170, 12, 0.5) !important;
}

.btn-warning.disabled,
.btn-warning:disabled {
    color: var(--brand-secondary-dark-gray) !important;
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
}

.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active,
.show > .btn-warning.dropdown-toggle {
    color: var(--brand-secondary-dark-gray) !important;
    background-color: #d39e00 !important;
    border-color: #c69500 !important;
}

.btn-warning:not(:disabled):not(.disabled).active:focus-visible,
.btn-warning:not(:disabled):not(.disabled):active:focus-visible,
.show > .btn-warning.dropdown-toggle:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(222, 170, 12, 0.5) !important;
}

.btn-white {
    background-color: var(--white) !important;
    border: 1px solid var(--white) !important;
    color: var(--brand-secondary-dark-gray) !important;
}

.btn-white:hover {
    background-color: var(--light-gray) !important;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--white);
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition-normal);
}

.card > hr {
    margin-right: 0;
    margin-left: 0;
}

.card > .list-group {
    border-top: inherit;
    border-bottom: inherit;
}

.card > .list-group:first-child {
    border-top-width: 0;
    border-top-left-radius: calc(0.1875rem - 1px);
    border-top-right-radius: calc(0.1875rem - 1px);
}

.card > .list-group:last-child {
    border-bottom-width: 0;
    border-bottom-right-radius: calc(0.1875rem - 1px);
    border-bottom-left-radius: calc(0.1875rem - 1px);
}

.card .list-group-item.active {
    color: var(--darker-gray) !important;
    background-color: var(--white) !important;
    border-color: rgba(0, 0, 0, 0.125) !important;
}

.card > .card-header + .list-group,
.card > .list-group + .card-footer {
    border-top: 0;
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}

.card-report .table-responsive .col-md-12 {
    display: flex;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
}

.card-title.title-color-blue {
    color: var(--brand-main);
}

.card-title.title-color-green {
    color: var(--brand-secondary-green);
}

.card-title.title-color-red {
    color: var(--danger);
}

.chat-message .message {
    position: relative;
}

.chat-message:not(.flex-row-reverse) .message {
    background-color: var(--white);
}

.chat-message.flex-row-reverse .message {
    background-color: var(--light-green);
}

.chat-message .message:after,
.chat-message .message:before {
    right: 100%;
    top: 15px;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.chat-message:not(.flex-row-reverse) .message:after,
.chat-message:not(.flex-row-reverse) .message:before {
    right: 100%;
}

.chat-message.flex-row-reverse .message:after,
.chat-message.flex-row-reverse .message:before {
    left: 100%;
}

.chat-message .message:after {
    border-width: 8px;
    margin-top: -8px;
}

.chat-message:not(.flex-row-reverse) .message:after {
    border-right-color: #fff;
}

.chat-message.flex-row-reverse .message:after {
    border-left-color: var(--light-green);
}

.chat-message .message:before {
    border-width: 9px;
    margin-top: -9px;
}

.chat-message:not(.flex-row-reverse) .message:before {
    border-right-color: var(--light-gray-3);
}

.chat-message.flex-row-reverse .message:before {
    border-left-color: var(--light-gray-3);
}

.close-notification {
    font-size: 1.625rem;
    margin-right: 5px;
    position: inherit !important;
}

.compare.panel .panel-body ul:first-child {
    text-align: right;
    margin-right: 3%;
}

.compare.panel .panel-heading.left {
    background: #f1f0f5;
}

.compare.panel .panel-heading.right {
    background: #e2e4f8;
    border-top-left-radius: 0;
    border-top-right-radius: 3px;
}

.color-check-false {
    color: var(--danger) !important;
}

.color-check-true {
    color: var(--brand-secondary-green) !important;
}

#column-management-modal-body {
    max-height: 400px;
}

.content-disabled {
    /* Konqueror HTML */
    -khtml-user-select: none;
    /* Old versions of Firefox */
    -moz-user-select: none;
    /* Internet Explorer/Edge */
    -ms-user-select: none;
    /* iOS Safari */
    -webkit-touch-callout: none;
    /* Safari */
    -webkit-user-select: none;
    opacity: 0.4;
    pointer-events: none;
    /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    user-select: none;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-pointer {
    cursor: pointer;
}

.custom-card {
    background-color: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.custom-next-update-icon {
    position: relative;
}

.custom-next-update-icon .next-update-icon-inner {
    position: absolute;
    left: 8px;
    top: 1px;
    font-size: 7px;
    font-weight: 900;
}

.dataTable tr {
    height: 48px;
}

.dataTables_wrapper {
    padding: 0px;
}

/* dataTables_length is now styled in base-enhancements.css */

.datepicker {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
    font-size: 1rem;
}

.datepicker-dropdown::after,
.datepicker-dropdown::before {
    display: none;
}

.datepicker-month-selection {
    cursor: pointer;
    text-align: center;
    width: 80px;
}

.datepicker table tr td span:hover {
    background-color: var(--light-gray);
}

.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover {
    background-image: unset;
}

.datepicker table tr td span.active {
    background-color: var(--brand-main);
}

.datepicker table tr td span.active:hover {
    background-color: var(--darker-blue);
}

.display-none {
    /* NOTE (@hugo_piauilino): This rule was created because jquery `.show()` method does not work
                               with the !important rule.
    */
    display: none;
}

/* dataTables_filter input is now styled in base-enhancements.css */

div.dataTables_wrapper .dataTables_paginate .paginate_button,
div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active,
div.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
div.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    all: unset;
}

div.dataTables_wrapper div.dataTables_processing {
    background-color: #d1e1f1;
    padding: 0.5rem;
    top: 35px;
    z-index: 1;
}

div.dataTables_processing > div:last-child {
    display: none;
}

div.dt-buttons button.buttons-colvis + div.dt-button-collection {
    padding: 0.25rem;
    width: unset !important;
}

div.dt-buttons button.buttons-colvis + div.dt-button-collection div.dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    max-height: 160px;
    overflow-y: scroll;
    width: 600px;
}

div.dt-buttons div.btn-group:not(:first-child) {
    margin-left: 0.25rem;
}

div.dt-buttons div.dt-button-collection {
    border: unset;
    box-shadow:
        0 2px 4px -1px rgb(0 0 0 / 20%),
        0 4px 5px 0 rgb(0 0 0 / 14%),
        0 1px 10px 0 rgb(0 0 0 / 12%);
    font-size: 1rem;
    opacity: 1 !important;
    padding: 0;
    width: auto;
    z-index: 10;
}

div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.dropdown-item {
    background: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    color: var(--brand-secondary-dark-gray);
    font-size: 0.9375rem;
    font-weight: 400;
    padding: 0.625rem 0.9375rem;
    text-align: inherit;
    white-space: nowrap;
}

div.dt-buttons div.dt-button-collection div.dropdown-menu a.dt-button.active:focus:not(.disabled) {
    background: none !important
}

div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.dropdown-item:active,
div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.dropdown-item:hover:not(.disabled),
div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.dropdown-item:focus,
div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.dropdown-item:focus-visible {
    background: none;
    box-shadow: none;
}

div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.dropdown-item:hover:not(.disabled) {
    background-color: var(--light-gray);
}

div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.buttons-columnVisibility {
    border: 1px solid;
    flex: 0 0 calc(33.33% - 0.25rem);
    margin: 0.125rem;
    min-width: unset;
    padding: 0.25rem;
    text-overflow: ellipsis;
}

div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.buttons-columnVisibility.active {
    border-color: var(--medium-gray);
}

div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.buttons-columnVisibility::before {
    content: "\f1d4";
    font: normal normal normal 14px/1 FontAwesome;
    margin: 0 0.5rem 0 0.25rem;
}

div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.buttons-columnVisibility:not(.active) {
    border-color: var(--light-gray-3);
    opacity: 0.6;
}

div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.buttons-columnVisibility:not(.active)::before {
    content: "\f1d5";
}

div.dt-buttons div.dt-button-collection div.dropdown-menu .dt-button.buttons-columnVisibility:not(.active) span {
    text-decoration: line-through;
}

div:not(.table-new-standard) .table {
    margin: 0;
}

div:not(.table-new-standard) .table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

div:not(.table-new-standard) .table-with-scroll .dataTables_scrollBody {
    overflow: visible !important;
}

.donut-md-4-height svg {
    max-height: 200px;
}

.dropdown-divider {
    border-top: 1px solid var(--light-gray-2);
}

.dropdown-item {
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.dropdown-menu {
    -webkit-background-clip: unset;
    background-clip: unset;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
    padding: 4px;
}

.dropdown-menu-end {
    right: 0;
    left: auto;
}

.dropzone {
    background: var(--light-gray);
    border-radius: var(--radius-md);
    border: 2px dashed var(--border-light-gray);
    box-shadow: none;
    margin: auto;
    min-height: unset;
    padding: 1.25rem;
    width: 100%;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.dropzone:hover {
    border-color: var(--brand-main);
    background: var(--lighter-blue);
}

.dropzone a.dz-remove {
    background: var(--white);
    border-radius: 3px;
    border: 1px solid var(--border-light-gray);
    cursor: pointer;
    font-weight: 600;
    padding: 5px 15px;
}

.dropzone .dz-preview {
    border: 1px solid var(--border-light-gray);
    margin: 0.25rem;
}

.dropzone .dz-default.dz-message {
    background: none;
    position: relative;
    height: initial;
    width: 100%;
    margin: 0;
    top: initial;
    left: initial;
}

.dropzone.dz-started .dz-message {
    display: none;
}

.dropzone .dz-default.dz-message .dz-button {
    border: 0;
    background: transparent;
}

.dropzone .dz-preview {
    box-shadow: 1px 1px 4px rgb(0 0 0 / 16%);
    border: 1px solid var(--border-light-gray);
    padding: 6px;
}

.dropzone .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-success-mark {
    display: none;
}

.end-0 {
    right: 0 !important;
}

.expiration-list {
    max-height: 250px;
}

.fa-lg {
    font-size: 1.375rem;
}

.fa-xl {
    font-size: 1.875rem;
}

/* ── Extra-large icon with baseline metrics, aligned to adjacent text ── */
.icon-xl {
    font-size: 1.5em;
    line-height: 1;
    vertical-align: -0.125em;
}

.fc-button {
    border: 1px solid var(--brand-secondary-dark-gray) !important;
    background-color: var(--white) !important;
    color: var(--brand-secondary-dark-gray) !important;
    line-height: 100%;
}

.fc-button:disabled {
    opacity: 0.3;
    pointer-events: none;
}

.fc-button-primary {
    background-color: var(--white) !important;
    color: var(--dark-green) !important;
    border-color: var(--dark-green) !important;
}

.fc-button-primary {
    background-color: var(--white) !important;
    color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
}

.fc-button-primary:hover {
    color: var(--white) !important;
    background-color: var(--brand-main) !important;
    border-color: var(--brand-main) !important;
}

.fc-button-primary.focus,
.fc-button-primary:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(103, 117, 179, 0.5) !important;
}

.fc-button-primary.disabled,
.fc-button-primary:disabled {
    background-color: transparent !important;
    color: var(--white);
    border: 1px solid var(--border-light-gray);
    cursor: pointer;
    display: inline-block;
    height: inherit;
    line-height: 1.5;
    overflow: hidden;
    padding: 0.4em 0.65em;
    position: relative;
    white-space: nowrap;
}

.fc-left h2 {
    font-weight: inherit;
}

.fc-left h2::first-letter {
    text-transform: uppercase;
}

.fc-unthemed td.fc-today {
    background: #f2abbe;
}

.feed-activity-list .feed-element {
    border-bottom: 1px solid #e7eaec;
}

.feed-element:first-child {
    margin-top: 0;
}

.feed-element {
    padding-bottom: 15px;
}

.feed-element,
.feed-element .media {
    margin-top: 15px;
}

.feed-element,
.media-body {
    overflow: hidden;
}

.feed-element > .pull-left {
    margin-right: 10px;
}

.feed-element img.img-circle {
    width: 38px;
    height: 38px;
}

fieldset[disabled] label,
fieldset[disabled] small {
    opacity: 0.5;
}

.first-letter-capitalized {
    display: inline-block;
    text-transform: lowercase;
}

.first-letter-capitalized::first-letter {
    text-transform: uppercase;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.flex-2 {
    flex: 2;
}

.flex-4 {
    flex: 4;
}

.form-check-input {
    border: 1px solid var(--light-gray-3);
    height: 14px;
}

.form-check-input:checked {
    background-color: var(--brand-main);
    border-color: var(--brand-main);
}

.form-check-input:not(:checked) ~ .form-check-label span.disabled-text,
.form-check-input:checked ~ .form-check-label span.enabled-text {
    display: none;
}

.form-check-input:checked ~ .form-check-label span.disabled-text,
.form-check-input:not(:checked) ~ .form-check-label span.enabled-text {
    display: inline;
}

.form-control {
    border: 1px solid #c0c5cc;
    font-size: 0.875rem;
    height: 36px;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:disabled {
    cursor: not-allowed;
}

.form-control:focus {
    border-color: var(--brand-main) !important;
    box-shadow: 0 0 0 3px rgba(24, 67, 137, 0.12);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: url('../img/bootstrap-5.3.3-icons/exclamation-circle-danger.svg');
}

.form-control-sm {
    border-radius: var(--radius-sm);
    height: 30px;
    line-height: 1.5;
    padding: 0.25rem 0.625rem;
}

.form-select {
    border: 1px solid #c0c5cc;
    font-size: 0.875rem;
    height: 36px;
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-select:disabled {
    cursor: not-allowed;
    background-color: var(--light-gray);
}

.form-select:focus {
    border-color: var(--brand-main) !important;
    box-shadow: 0 0 0 3px rgba(24, 67, 137, 0.12);
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    background-image: url('../img/bootstrap-5.3.3-icons/exclamation-circle-danger.svg');
}

.form-select-sm {
    border-radius: var(--radius-sm);
    height: 30px;
    line-height: 1.5;
    /* Right padding reserves space for the Bootstrap dropdown arrow (avoids icon over text) */
    padding: 0.25rem 2rem 0.25rem 0.625rem;
}

.form-switch .form-check-input {
    border-radius: 2.5rem;
    height: 1.25rem;
    width: calc(1.875rem + 0.5rem);
}

.form-switch .form-check-input:checked ~ .form-check-label::after {
    transform: translateX(calc(1.25rem - 0.1875rem));
}

.form-switch .form-check-label {
    padding-left: 1.5rem;
    padding-top: 0.25rem;
}

.fs-12px {
    font-size: 0.75rem;
}

.fs-13px {
    font-size: 0.8125rem;
}

.fs-14px {
    font-size: 0.875rem;
}

.fs-16px {
    font-size: 1rem;
}

.fs-20px {
    font-size: 1.25rem;
}

.fs-18px {
    font-size: 1.125rem;
}

.fs-25px {
    font-size: 1.5625rem;
}

.fs-30px {
    font-size: 1.875rem;
}

.fs-xx-l {
    font-size: xx-large;
}

.fs-xxx-l {
    font-size: 2.5rem;
}

.fw-semibold {
    font-weight: 500 !important;
}

.h-36px {
    height: 36px;
}

.h-40px {
    height: 40px;
}

.h-48px {
    height: 48px;
}

.h-100 {
    height: 100%;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-weight: 600;
    font-family: "Uni Neue", "Roboto", Helvetica, Arial, sans-serif;
    color: var(--near-black);
    letter-spacing: -0.01em;
}

h1,
.h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h2,
.h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

h3,
.h3 {
    font-size: 1.25rem;
}

h4,
.h4 {
    font-size: 1.0625rem;
}

h5,
.h5 {
    font-size: 0.9375rem;
}

h6,
.h6 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

h3,
h4,
h5 {
    margin-top: 5px !important;
}

.hardware-timeline-bar {
    width: 2px;
    background-color: var(--light-gray-3);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0px;
}

.header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.hide-full-asset-history {
    border-bottom: 1px solid var(--light-gray-3);
    max-height: 500px;
    overflow: hidden;
}

.hide-full-hardware-history {
    border-bottom: 1px solid var(--light-gray-3);
    max-height: 300px;
    overflow: hidden;
}

hr {
    border-top: 1px solid var(--light-gray-2);
    opacity: 1;
}

.inner-line:not(:last-child) {
    border-right: 1px solid #e7eaec;
}

input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
    height: 14px;
}

.input-group button {
    align-items: center;
    display: flex;
    z-index: 2;
}

.input-group button:nth-child(2) {
    margin-left: -1px !important;
}

.input-group input:invalid ~ .btn-input {
    pointer-events: none;
}

.input-group input:invalid ~ .btn-input span {
    opacity: 0.2;
    pointer-events: none;
}

.input-group-select2 {
    display: flex;
}

.input-group-select2 .input-group-text {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-right: 0;
    height: 100%;
}

.input-group-select2 .select2-selection {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.input-group-text {
    background-color: var(--white);
    border-color: var(--light-gray-3);
    height: 36px;
}

.input-group-text:not(.fa-lg) {
    font-size: 1rem;
}

.invoice-process-progress-bar {
    background-color: #e9ecef;
    border: 1px solid #ccc;
    height: 1rem;
    font-size: 0.75rem;
}

label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--medium-gray);
    margin-bottom: 0.375rem;
}

label[for="id_avatar"] {
    margin-bottom: 0;
}

.landline-analysis-banner {
    padding: 20px;
    background-color: var(--darker-green);
    color: var(--white);
    display: flex;
    flex-wrap: wrap;
}

.landline-analysis-banner > div {
    align-self: center;
}

.landline-analysis-banner > div:first-child {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
}

.landline-analysis-banner > div:last-child p:first-child {
    font-size: 1.5rem;
    font-weight: 700;
}

.landline-analysis-banner > div:last-child p:last-child {
    font-size: 1.125rem;
}

li > p {
  display: inline;
  margin: 0;
}

.line-height-150 {
    line-height: 150%;
}

.list-style-none {
    list-style: none;
}

.map-overlay .listing {
    overflow: auto;
    height: 288px;
}

.map-overlay .listing > * {
    display: block;
    padding: 5px 10px;
    margin: 0;
}

.map-overlay .listing a:last-child {
    border: none;
}

.modal {
    z-index: 2050 !important;
}

.modal .btn-close {
    font-size: 1.25rem;
}

.modal-backdrop {
    z-index: 2020;
}

.modal-body,
.modal-footer,
.modal-header {
    padding: 24px 28px;
}

.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.modal-header {
    border-bottom: 1px solid var(--light-gray-2);
}

.modal-footer {
    border-top: 1px solid var(--light-gray-2);
}

.modal-title {
    font-size: 1.75rem;
}

.multiple_emails-container input.multiple_emails-error {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px var(--danger) !important;
    outline: thin auto var(--danger) !important;
}

main div#page-wrapper,
main#wrapper div#page-wrapper {
    margin-left: 48px;
    transition: margin-left var(--transition-slow);
}

main div#page-wrapper.open,
main#wrapper div#page-wrapper.open {
    margin-left: 240px;
}

.marker {
    background-image: url("../img/favicon-sonar.png");
    background-size: cover;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}

.max-height-250 {
    max-height: 250px;
}

.max-width-90-vw {
    max-width: 90vw;
}

.min-height-30 {
    min-height: 30px !important;
}

.min-h-200 {
    min-height: 200px;
}

.min-h-375 {
    min-height: 375px;
}

.min-h-450 {
    min-height: 450px;
}

.morris-hover-point {
    text-align: left;
}

.morris-hover-row-label {
    text-align: left;
}

.ms-negative-5 {
    margin-left: -5px;
}

nav.side-nav-sonar {
    background: var(--gradient-dark);
    width: 48px;
    padding: 6px 0;
    position: fixed;
    top: 48px;
    bottom: 0;
    left: 0;
    z-index: 1110;
    overflow: hidden;
    overflow-y: auto;
    transition: width var(--transition-slow);
}

/* Collapsed: show only icons, centered */
nav.side-nav-sonar:not(:hover):not(.open) > ul > li > a.btn {
    font-size: 0;
    justify-content: center;
    padding: 0;
    width: 48px;
    height: 34px;
}
nav.side-nav-sonar:not(:hover):not(.open) > ul > li > a.btn span:first-child {
    font-size: 1rem;
    margin-right: 0;
}
nav.side-nav-sonar:not(:hover):not(.open) > ul > li > a.btn span.fa-angle-down {
    display: none;
}

nav.side-nav-sonar.open {
    width: 240px;
}

nav.side-nav-sonar:hover {
    z-index: 2080;
    width: 240px;
}

nav.side-nav-sonar ul {
    list-style: none;
    transition: all var(--transition-slow);
}

nav.side-nav-sonar a.btn,
nav.side-nav-sonar a.btn:focus-visible {
    border: none;
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.85);
}

nav.side-nav-sonar a.btn:focus-visible {
    outline: 1px solid var(--lighter-blue);
}

nav.side-nav-sonar a.btn {
    padding: 0.375rem 0.75rem;
    transition: all var(--transition-fast);
}

nav.side-nav-sonar a.btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--white);
    font-weight: 600;
}

nav.side-nav-sonar > ul {
    padding: 0;
}

nav.side-nav-sonar > ul > li {
    overflow: hidden;
    margin-bottom: 0;
    background-color: transparent;
    border: 0;
    border-bottom-color: transparent;
    border-radius: 0;
}

nav.side-nav-sonar ul li {
    white-space: nowrap;
}

nav.side-nav-sonar ul li a.btn {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

nav.side-nav-sonar ul li a.btn:first-child:active {
    color: var(--white);
}

nav.side-nav-sonar > ul > li > a.btn {
    height: 34px;
    padding: 0 12px;
    margin-bottom: 1px;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

nav.side-nav-sonar > ul > li > a.btn:active {
    box-shadow: none;
}

nav.side-nav-sonar > ul > li > a.btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
}

nav.side-nav-sonar:not(.open) ul li ul.in {
    display: none;
}

nav.side-nav-sonar:hover ul li ul.in {
    display: block;
}

nav.side-nav-sonar:not(.open) ul li ul.show {
    display: none;
}

nav.side-nav-sonar:hover ul li ul.show {
    display: block;
}

nav.side-nav-sonar ul li.active > a.btn {
    color: var(--white);
    font-weight: 600;
}

nav.side-nav-sonar > ul > li.active > a.btn {
    background-color: rgba(255, 255, 255, 0.12);
}

nav.side-nav-sonar > ul > li > a.btn span:first-child {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    margin-right: 8px;
    flex-shrink: 0;
}

nav.side-nav-sonar ul li a.btn span.fa-angle-down {
    margin-left: auto;
    opacity: 0.4;
    font-size: 0.625rem;
    transition: transform var(--transition-fast);
}

nav.side-nav-sonar ul li a.btn[aria-expanded="true"] span.fa-angle-down {
    transform: rotate(180deg);
}

nav.side-nav-sonar > ul > li > ul {
    padding-left: 40px;
}

nav.side-nav-sonar > ul > li > ul > li > ul {
    padding-left: 20px;
}

nav.side-nav-sonar > ul > li > ul > li > a.btn {
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
    height: 30px;
    color: rgba(255, 255, 255, 0.6);
}

nav.side-nav-sonar > ul > li > ul > li > a.btn:hover {
    color: var(--white);
}

nav.side-nav-sonar > ul > li > ul > li.active > a.btn {
    color: var(--white);
    font-weight: 600;
}

nav.top-nav {
    height: 48px;
    padding: 3px 4vw 3px 3px;
    background: var(--white) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 1010;
}

nav.top-nav button#top-nav-btn {
    width: 48px;
    height: 100%;
    color: var(--brand-main);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

nav.top-nav button#top-nav-btn:hover,
nav.top-nav button#help-and-support-btn:hover {
    background: var(--lighter-blue);
    color: var(--brand-main);
}

nav.top-nav button#top-nav-btn span,
nav.top-nav button#help-and-support-btn span {
    font-size: 1.25rem;
}

nav.top-nav div#top-nav-brand a img {
    height: 24px;
}

nav.top-nav .global-nav div.dropdown-menu {
    border-radius: var(--radius-md);
    overflow: hidden;
}

nav.top-nav .global-nav div.dropdown-menu a:hover {
    background: var(--lighter-blue);
    color: var(--brand-main);
}

nav.top-nav .global-nav div#user-profile-container button img {
    opacity: 0.9;
    border-radius: 50%;
    transition: opacity var(--transition-fast);
}

nav.top-nav .global-nav div#user-profile-container button img:hover {
    opacity: 1;
}

nav.top-nav .global-nav div#user-profile-container button span.badge {
    right: -5px;
}

nav.top-nav .global-nav .dropdown-toggle::after {
    display: none;
}

nav.top-nav button#help-and-support-btn {
    border-radius: var(--radius-sm);
    font-size: 1rem;
    font-weight: 500;
    color: var(--medium-gray);
    transition: all var(--transition-fast);
}

.nav-tabs {
    border-bottom: 2px solid var(--light-gray-2);
}

.nav-tabs > li > button {
    font-weight: 500;
    color: var(--medium-gray);
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 0.5rem 0.75rem;
    transition: all var(--transition-fast);
}

.nav-tabs > li > button:focus,
.nav-tabs > li > button:hover {
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: var(--medium-gray-2);
    color: var(--brand-main);
    font-weight: 500;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    font-weight: 600;
    color: var(--brand-main);
    border: none;
    border-bottom: 2px solid var(--brand-main);
    background-color: transparent;
}

.nav > li.active {
    border-left: 0;
    background: #293846;
}

.note-editor {
    min-height: 100px;
    margin: 0px;
}

.note-editor > .note-editable {
    min-height: 100px;
}

.note-editor blockquote {
    border-left: 5px solid #eee;
    padding: 0.25rem 0.375rem;
}

.note-editor pre {
    display: block;
    font-size: 1rem;
    padding: 0.125rem 0.25rem;
    color: #333;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.notice-board {
    height: 590px !important;
}

.notification-circle-8 {
    border-radius: 50%;
    height: 0.5rem;
    width: 0.5rem;
}

.notification-circle-12 {
    border-radius: 50%;
    height: 0.75rem;
    width: 0.75rem;
}

#notifications-list.only-unread-notifications li.read {
    display: none;
}

#notifications-list li.read div.read-notification-message {
    display: block !important;
}

#notifications-list li button.load-notification-button {
    background-color: transparent;
    border: 0;
}

#notifications-list li button.load-notification-button:hover {
    background-color: var(--lighter-blue) !important;
}

#notifications-list li.unread button.mark-as-read-button {
    color: var(--white) !important;
    display: block !important;
    line-height: 1;
    padding: 2px;
}

#notifications-list li.unread button.mark-as-read-button:hover {
    color: var(--dark-green);
}

#notifications-list li.unread button h3 {
    font-weight: 700;
}

#ocs-pending-assets_wrapper .dt-buttons {
    float: right;
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pace.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: var(--brand-main);
    position: fixed;
    z-index: 2040;
    top: 0;
    right: 100%;
    width: 100%;
    height: 3px;
}

.page-link {
    color: var(--brand-main);
    font-size: 1rem;
    border-radius: var(--radius-sm);
    border-color: var(--light-gray-2);
    transition: all var(--transition-fast);
}

.page-link:hover {
    background-color: var(--lighter-blue);
    border-color: var(--lighter-blue);
    color: var(--brand-main);
}

.page-item.active .page-link {
    background-color: var(--brand-main);
    border-color: var(--brand-main);
}

.pagination ul > li {
    display: inline;
}

.pagination ul > li > a,
.pagination ul > li > span {
    float: left;
    padding: 4px 12px;
    line-height: 20px;
    text-decoration: none;
    background-color: var(--white);
    border: 1px solid #dddddd;
    border-left-width: 0;
}

.pagination ul > li > a:hover,
.pagination ul > li > a:focus-visible,
.pagination ul > .active > a,
.pagination ul > .active > span {
    background-color: #f5f5f5;
}

.pagination ul > .active > a,
.pagination ul > .active > span {
    color: #6b7280;
    cursor: default;
}

.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover,
.pagination ul > .disabled > a:focus-visible {
    color: #6b7280;
    cursor: default;
    background-color: transparent;
}

.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-left-width: 1px;
    border-top-left-radius: 4px;
}

.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.panel {
    box-shadow: none;
}

.popover {
    background-color: var(--near-black);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}

.popover,
.tooltip {
    font-size: 0.8125rem;
}

.popover.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
    border-bottom-color: var(--darker-gray);
}

.popover.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
    border-left-color: var(--darker-gray);
}

.popover.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
    border-right-color: var(--darker-gray);
}

.popover.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
    border-top-color: var(--darker-gray);
}

.popover.fade.show,
.tooltip.fade.show {
    display: block;
}

.popover.fade:not(.show),
.tooltip.fade:not(.show) {
    display: none;
}

.popover-body {
    color: var(--white);
}

.pos-bottom-end-n10 {
    position: absolute;
    bottom: -10px;
    right: -10px;
}

.pos-top-end-0 {
    position: absolute;
    top: 0;
    right: 0;
}

.pos-top-end-10 {
    position: absolute;
    top: 10px;
    right: 10px;
}

.pos-top-start-0 {
    position: absolute;
    top: 0;
    left: 0;
}

.px-4vw {
    padding-right: 4vw !important;
    padding-left: 4vw !important;
}

.scroll-content {
    height: 750px !important;
    overflow-y: auto;
}

#secondary-switches-container.content-disabled .form-check-label:before {
    pointer-events: none;
}

select {
    -webkit-appearance: auto;
    appearance: auto;
    background-color: var(--white);
    border: 1px solid var(--border-light-gray);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--darker-gray);
    transition: border-color var(--transition-fast);
}

select:focus {
    border-color: var(--brand-main) !important;
    outline: none;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--border-light-gray);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--brand-main);
    box-shadow: 0 0 0 3px rgba(24, 67, 137, 0.12);
}

.select2-results__option--highlighted {
    background-color: var(--lighter-blue) !important;
    color: var(--brand-main) !important;
}

.is-invalid + .select2-container--default .select2-selection--single,
.is-invalid + .select2-container--default .select2-selection--multiple {
    background-image: url('../img/bootstrap-5.3.3-icons/exclamation-circle-danger.svg');
    background-position: right calc(1em + 0.5rem) center;
    background-repeat: no-repeat;
    background-size: calc(0.75em + 0.234rem) calc(0.75em + 0.234rem);
    border-color: #dc3545;
}

.select2-container--open {
    z-index: 2070;
}

.select2-container .select2-search--inline .select2-search__field {
    margin-top: 0;
}

.select2-container .select2-selection--multiple {
    padding: 0;
}

/* Vertically center the multi-select pill (balances the `padding: 0` set above). */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin-top: 3px;
    margin-bottom: 3px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    height: 34px;
    padding: 6px 12px;
}

.select2-container--default {
    width: 100% !important;
}

.select2-container--default .select2-results__option--disabled {
    cursor: not-allowed;
}

.select2-container--default .select2-selection--single {
    font-size: 1.125rem;
    height: 34px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.42857143;
}

.select2-dropdown {
    z-index: 10;
}

#services-map {
    top: 0;
    bottom: 0;
    min-height: 348px;
}

.shadow-1 {
    box-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
        0 1px 1px 0 rgb(0 0 0 / 14%),
        0 1px 3px 0 rgb(0 0 0 / 12%);
}

.shadow-2 {
    box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%),
        0 2px 2px 0 rgb(0 0 0 / 14%),
        0 1px 5px 0 rgb(0 0 0 / 12%);
}

.shadow-3 {
    box-shadow: 0 3px 3px -2px rgb(0 0 0 / 20%),
        0 3px 4px 0 rgb(0 0 0 / 14%),
        0 1px 8px 0 rgb(0 0 0 / 12%);
}

.shadow-4 {
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%),
        0 4px 5px 0 rgb(0 0 0 / 14%),
        0 1px 10px 0 rgb(0 0 0 / 12%);
}

.shadow-5 {
    box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%),
        0 5px 8px 0 rgb(0 0 0 / 14%),
        0 1px 14px 0 rgb(0 0 0 / 12%);
}

.shadow-6 {
    box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%),
        0 6px 10px 0 rgb(0 0 0 / 14%),
        0 1px 18px 0 rgb(0 0 0 / 12%);
}

.shadow-7 {
    box-shadow: 0 4px 5px -2px rgb(0 0 0 / 20%),
        0 7px 10px 1px rgb(0 0 0 / 14%),
        0 2px 16px 1px rgb(0 0 0 / 12%);
}

.shadow-8 {
    box-shadow: 0 5px 5px -3px rgb(0 0 0 / 20%),
        0 8px 10px 1px rgb(0 0 0 / 14%),
        0 3px 14px 2px rgb(0 0 0 / 12%);
}

.shadow-9 {
    box-shadow: 0 5px 6px -3px rgb(0 0 0 / 20%),
        0 9px 12px 1px rgb(0 0 0 / 14%),
        0 3px 16px 2px rgb(0 0 0 / 12%);
}

.shadow-10 {
    box-shadow: 0 6px 6px -3px rgb(0 0 0 / 20%),
        0 10px 14px 1px rgb(0 0 0 / 14%),
        0 4px 18px 3px rgb(0 0 0 / 12%);
}

.shadow-12 {
    box-shadow: 0 7px 8px -4px rgb(0 0 0 / 20%),
        0 12px 17px 2px rgb(0 0 0 / 14%),
        0 5px 22px 4px rgb(0 0 0 / 12%);
}

.shadow-16 {
    box-shadow: 0 8px 10px -5px rgb(0 0 0 / 20%),
        0 16px 24px 2px rgb(0 0 0 / 14%),
        0 6px 30px 5px rgb(0 0 0 / 12%);
}

.shadow-24 {
    box-shadow: 0 11px 15px -7px rgb(0 0 0 / 20%),
        0 24px 38px 3px rgb(0 0 0 / 14%),
        0 9px 46px 8px rgb(0 0 0 / 12%);
}

small {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--medium-gray);
}

.max-width-140 {
    max-width: 140px;
}

.max-width-180 {
    max-width: 180px;
}

span.fa-info-circle {
    cursor: pointer;
}

.spinner-border {
    width: 1.875rem;
    height: 1.875rem;
    border-width: 0.25rem;
}

.spinner-border-sm {
    width: 0.9375rem;
    height: 0.9375rem;
    border-width: 0.2em;
}

.suggested-asset ~ span > span > span > span[title="O seguinte ativo foi sugerido pois ambos tem o mesmo número de série."]::after {
    content: "Ativo Sugerido ❔";
    background-color: #e8e8e8;
    font-size: 12px;
    font-weight: bold;
    padding: 3px 5px;
    border-radius: 5px;
    margin-left: 5px;
}

.summary .item {
    padding: 24px;
    text-align: center;
}

.summary .item:last-child,
.summary .item:first-child {
    border: none;
}

.summary .item .icon {
    float: none;
}

.summary .item .text {
    float: none;
    margin-left: 0px;
}

.swal2-actions button.swal2-styled {
    font-size: 1rem;
}

.swal2-close {
    color: #000 !important;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 1.875rem;
    font-weight: 700;
    opacity: 0.5;
}

.swal2-close:hover {
    opacity: 1;
}

.swal2-container {
    z-index: 10000;
}

.swal2-content {
    color: var(--darker-gray);
    text-align: left;
    margin: 20px 0;
    font-size: 1rem;
    line-height: 150%;
}

.swal2-header-custom {
    font-size: 1rem;
    border-bottom: 1px solid #dcdcea;
    margin-bottom: 30px;
}

.swal2-html-container {
    color: var(--darker-gray);
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
    font-size: 1rem;
    line-height: 150%;
}

.swal2-icon {
    margin: 0;
    border: 0;
    font: normal normal normal 14px/1 FontAwesome;
    width: auto;
    height: auto;
}

.swal2-icon span {
    font-size: 2.25rem;
    color: var(--darker-gray);
}

.swal2-input-label {
    font-size: 1rem;
    justify-content: start;
    margin: 0.625rem 0 0 1.25rem;
}

.swal2-modal {
    border-radius: var(--radius-lg);
}

.swal2-modal-md {
    width: 500px;
}

.swal2-modal-md .swal2-title {
    font-size: 1.5rem;
}

.swal2-show {
    animation: fadeIn 0.5s;
}

.table,
.table:hover {
    color: var(--darker-gray);
    font-size: 1rem;
}

table.dataTable.no-footer {
    border-bottom: 1px solid var(--light-gray-2);
}

table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: unset;
    background-color: var(--light-gray);
}

table.dataTable .fixed-col-end-shadow,
table.dataTable.table-hover > tbody > tr:hover > .fixed-col-end-shadow {
    box-shadow: 3px 1px 2px 0 rgb(0 0 0 / 8%);
}

table.dataTable .fixed-col-start-shadow,
table.dataTable.table-hover > tbody > tr:hover > .fixed-col-start-shadow {
    box-shadow: -3px 1px 2px 0 rgb(0 0 0 / 8%);
}

table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
    border-bottom: 2px solid var(--light-gray-2);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--medium-gray-2);
    padding: 0.625rem 0.75rem;
}

.table td,
.table th {
    border-bottom: unset;
    border-top: 1px solid var(--light-gray-2);
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
}

.table tr:nth-last-child(-n + 3) .btn-group ul.dropdown-menu {
    bottom: -15px;
    top: auto;
    right: 105%;
    left: auto;
}

.table-condensed th,
.table-condensed td {
    padding: 5px;
}

.table.table-condensed > tbody > tr > td,
.table.table-condensed > tbody > tr > th,
.table.table-condensed > tfoot > tr > td,
.table.table-condensed > tfoot > tr > th,
.table.table-condensed > thead > tr > td,
.table.table-condensed > thead > tr > th {
    padding: 5px;
}

.table-curved {
    border: solid var(--light-gray-2) 1px;
    border-collapse: separate;
    border-left: 0;
    border-radius: var(--radius-md);
}

.table-curved td,
.table-curved th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.table-curved th {
    border-top: none;
}

.table-curved th:first-child {
    border-radius: 6px 0 0 0;
}

.table-curved th:last-child {
    border-radius: 0 6px 0 0;
}

.table-curved th:only-child {
    border-radius: 6px 6px 0 0;
}

.table-curved > *:last-child > tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
}

.table-curved > *:last-child > tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
}

.table-fixed {
    table-layout: fixed;
}

.table-new-standard .dataTables_scrollBody,
.table-new-standard .dataTables_scrollHead {
    border: unset !important;
}

.table-new-standard .table-bordered {
    border: 1px solid #dee2e6;
}

.table-new-standard .table td,
.table-new-standard .table th {
    padding: 0.75rem;
}

.table-new-standard .table-bordered td,
.table-new-standard .table-bordered th {
    border-left: unset;
    border-right: unset;
}

.table-new-standard table.dataTable tbody tr td.highlight,
.table-new-standard table.dataTable tbody tr:hover,
.table-new-standard table.dataTable tbody tr:hover td {
    background-color: var(--light-gray);
}

.table-new-standard div.dataTables_scrollBody {
    margin-bottom: 10px;
}

/* dataTables_length select is now styled in base-enhancements.css */

.table-new-standard td .copy-btn {
    position: relative;
}

.table-new-standard td .copy-btn span.fa-copy {
    color: var(--light-blue);
    cursor: pointer;
    display: none;
    position: absolute;
    top: 0px;
}

.table-new-standard td:hover .copy-btn span.fa-copy {
    display: block;
}

.table-new-standard td .copy-btn.copy-btn-ln span.fa-copy {
    left: -20px;
}

.table-new-standard td .copy-btn.copy-btn-rn span.fa-copy {
    right: -20px;
}

.table-new-standard .table td {
    vertical-align: middle;
}

.table-new-standard .table td.dataTables_empty {
    background-color: var(--light-gray);
    text-align: left;
}

.table-new-standard .table-sm td,
.table-new-standard .table-sm th {
    padding: 0.25rem;
}

.table-sm.dataTable thead tr th {
    background-color: transparent !important;
}

.table-sm.dataTable tr {
    height: unset;
}

.table-spacing {
    padding: 30px;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--light-gray);
}

#terms-of-use .overflow-auto {
    height: 330px;
}

.text-break {
    white-space: normal;
}

textarea {
    max-height: 300px;
}

textarea.form-control {
    height: auto;
}

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

.text-bg-danger-light {
    background-color: var(--light-red);
    color: var(--danger-dark);
}

.text-bg-dark {
    background-color: var(--darker-gray) !important;
    color: var(--white) !important;
}

.text-bg-default {
    background-color: var(--border-light-gray);
    color: var(--darker-gray);
}

.text-bg-disable {
    background-color: var(--light-gray-2);
    color: var(--medium-gray-2);
}

.text-bg-info {
    background-color: var(--medium-blue) !important;
    color: var(--white) !important;
}

.text-bg-light {
    background-color: var(--light-gray-2) !important;
    color: var(--darker-gray) !important;
}

.text-bg-ocs {
    background-color: var(--ocs-light-purple);
    color: var(--ocs-purple);
}

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

.text-bg-primary-light {
    background-color: var(--lighter-blue);
    color: var(--dark-blue);
}

.text-bg-success {
    background-color: var(--dark-green) !important;
    color: var(--white) !important;
}

.text-bg-success-light {
    background-color: var(--light-green);
    color: var(--darker-green);
}

.text-bg-white {
    background-color: var(--white);
    color: var(--darker-gray);
}

.text-bg-warning {
    background-color: var(--warning) !important;
    color: var(--darker-gray) !important;
}

.text-bg-warning-light {
    background-color: var(--light-orange);
    color: var(--warning-darker);
}

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

.text-dark {
    color: var(--darker-gray) !important;
}

.text-light {
    color: var(--light-gray-3) !important;
}

.text-info {
    color: var(--dark-green) !important;
}

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

.text-warning {
    color: var(--warning-dark) !important;
}

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

.timeline-bar {
    width: 3px;
    background-color: var(--light-gray-3);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 23px;
}

.timeline-icon {
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.toast {
    border: unset;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.toast > div {
    border: 1px solid var(--light-gray-2);
    border-radius: var(--radius-md);
    color: var(--darker-gray);
    font-size: 1rem;
}

.toast:not(.show) {
    display: unset;
}

.toast a {
    color: var(--link-blue);
}

.toast a:hover {
    text-decoration: underline;
}

.toast > div:not(.toast-success) .progress {
    display: none;
}

.toast .progress {
    bottom: 0;
    height: 4px;
    left: 0;
    position: absolute;
    width: 100%;
}

.toast .progress-bar {
    background-color: var(--dark-green) !important;
    transition: width 6000ms linear;
    width: 100%;
}

.toast .toast-body,
.toast .toast-header {
    padding: 0;
}

.toast .toast-header {
    background-clip: unset;
    background-color: unset;
    border: unset;
}

.toast-container-top-center,
.toast-container-top-start {
    display: flex;
    flex-flow: column;
    gap: 0.625rem;
    position: fixed;
    top: 15vh;
    z-index: 2090;
}

.toast-container-top-center {
    left: 50%;
    transform: translateX(-50%);
}

.toast-container-top-start {
    left: 15vh;
}

.toast-danger {
    background-color: var(--light-red-2);
}

.toast-danger .toast-header {
    color: var(--danger-dark);
}

.toast-info {
    background-color: var(--lighter-blue-2);
}

.toast-info .toast-header {
    color: var(--dark-blue);
}

.toast-success {
    background-color: var(--light-green-2);
}

.toast-success .toast-header {
    color: var(--darker-green);
}

.toast-warning {
    background-color: var(--light-orange-2);
}

.toast-warning .toast-header {
    color: var(--warning-darker);
}

.tooltip-inner {
    text-align: left;
    background-color: var(--near-black);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.5rem;
}

.tooltip.show {
    opacity: 1;
}

.top-navigation .nav > li > a i.fa-bell {
    font-size: 2.25rem;
}

tr.shown .details-control button:first-child,
tr .details-control button:last-child {
    display: none;
}

tr.shown + tr > td {
    box-shadow: inset 0px 1px 3px 1px rgba(0 0 0 / 10%);
    background-color: #fcfcfc;
}

tr .details-control button:first-child,
tr.shown .details-control button:last-child {
    display: inline-block;
}

.transfer-double {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    height: auto;
    width: 100%;
}

.transfer-double-content {
    display: flex;
    padding: 0.625rem;
}

.transfer-double-content-end,
.transfer-double-content-start {
    height: 330px;
    flex: 9;
}

.transfer-double-content-middle {
    flex: 1;
    margin: 20% 0.625rem 0 0.625rem;
}

.transfer-double-content-param {
    border: 0;
    font-weight: 500;
    padding-left: 0.5rem;
    text-align: left;
}

.transfer-double-footer,
.transfer-double-header {
    display: none;
}

.transfer-double-list label,
.transfer-double-selected-list label {
    font-weight: 400;
}

.transfer-double-list-footer {
    border: 0;
}

.transfer-double-list-footer label {
    margin-left: 0;
}

.transfer-double-list-main .transfer-double-group-list-ul {
    padding-left: 0.9375rem;
}

.transfer-double-list-main .transfer-double-group-list-ul .transfer-double-group-list-li .transfer-double-group-list-li-ul {
    margin-left: 0;
    padding-left: 1.875rem;
}

.transfer-double-list-search-input,
.transfer-double-selected-list-search-input {
    width: 100%;
}

.transfer-double-selected-list-main .transfer-double-selected-list-ul {
    padding-left: 0.9375rem;
}

.treemap-chart {
    height: 100%;
    max-height: 600px;
    min-height: 400px;
    width: 100%;
}

.unselectable {
    cursor: not-allowed !important;
}

#upload-file-dz5 .modal-body,
#upload-file-dz5 .modal-header {
    background: none;
    border: none;
    text-align: center;
}

#upload-file-dz5.inmodal .modal-title {
    margin-top: 25px;
    font-size: 2.25rem;
    font-weight: bold;
    color: var(--brand-main);
}

#upload-file-dz5.inmodal .modal-header img {
    max-width: 7vw;
}

.vh-50 {
    height: 50vh;
}

.w-36px {
    width: 36px;
}

.w-42px {
    width: 42px;
}

.w-48px {
    width: 48px;
}

.wrap {
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

@media (min-width: 425px) {
    .navbar-top-links .dropdown-alerts {
        width: 400px;
    }
}

@media (max-width: 768px) {
    .header button {
        margin-top: 10px;
    }
}

@media (min-width: 768px) {
    .vertical-timeline-content h2 {
        font-size: 18px;
    }

    .vertical-timeline-content p {
        font-size: 13px;
    }

    .vertical-line {
        border-left: 1px solid #bcbcd3;
    }
}

@media (max-width: 991px) {
    nav.top-nav {
        padding-right: 15px;
    }

    .summary .item:nth-child(2) {
        border-top: 1px solid #a6aaba;
        border-bottom: 1px solid #a6aaba;
    }
}

@media (min-width: 992px) {
    .asset-img img {
        max-width: 820px !important;
    }

    .summary .item:nth-child(2) {
        border-right: 1px solid #a6aaba;
        border-left: 1px solid #a6aaba;
    }
}

@media (min-width: 1200px) {
    .donut-md-4-height svg {
        max-height: 250px;
    }
}

@media (max-width: 1720px) {
    .summary .item .icon {
        margin-bottom: 20px;
    }

    .summary .item .text {
        display: block;
        float: none;
    }
}

/* ════════════════════════════════════════════════════════════
   Sonar Environment Theming (body#base-sonar)
   Client-facing: lighter, airier, professional
   ════════════════════════════════════════════════════════════ */

body#base-sonar {
    background-color: #f0f2f7;
}

body#base-sonar .card.border-0.shadow-1 {
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

body#base-sonar > footer {
    background-color: transparent !important;
    color: var(--medium-gray-2);
    border-top: 1px solid var(--light-gray-2);
}

body#base-sonar > footer small {
    color: var(--medium-gray-2);
    font-size: 0.875rem;
}

/* Sonar page header refinement */
body#base-sonar header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--near-black) !important;
    margin-bottom: 0.25rem;
}

/* Sonar primary action enhancement */
body#base-sonar .btn-primary {
    background: var(--gradient-brand) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(24, 67, 137, 0.2);
}

body#base-sonar .btn-primary:hover {
    box-shadow: 0 4px 12px rgba(24, 67, 137, 0.3);
    transform: translateY(-1px);
}

body#base-sonar .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(24, 67, 137, 0.2);
}

/* ════════════════════════════════════════════════════════════
   Global UI Refinements
   ════════════════════════════════════════════════════════════ */

/* Improved focus ring — accessible and branded */
:focus-visible {
    outline: 2px solid var(--brand-main);
    outline-offset: 2px;
}

.btn:focus-visible {
    outline: 2px solid var(--brand-main);
    outline-offset: 2px;
    box-shadow: none;
}

/* Disabled state — clearer visual distinction */
.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: auto;
}

/* Subtle card hover for clickable cards */
a.card:hover,
.card[role="button"]:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Better summary/item blocks */
.summary .item {
    padding: 1.25rem;
}

/* DataTable spacing — now in base-enhancements.css */

/* Improved empty state styling */
.dataTables_empty {
    padding: 1.875rem 0.625rem !important;
    color: var(--medium-gray);
    font-style: italic;
}

/* Consistent input-group styling */
.input-group .form-control:focus,
.input-group .form-select:focus {
    z-index: 3;
}

/* Better accordion styling */
.accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(24, 67, 137, 0.12);
}

/* ══════════════════════════════════════════════════════════════
   Base Enhancements (merged from base-enhancements.css)
   ══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   Base Enhancements — Shared styles for both Sonar and Flow
   ═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   Flow Enhancements — Shared styles for /flow/ pages
   Shared styles for both Sonar and Flow
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page Header Enhancement ── */
.flow-page-header {
    background: var(--gradient-brand);
    border-radius: var(--radius-lg);
    color: #fff;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    position: relative;
    overflow: visible;
    z-index: 2;
}
.flow-page-header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -3%;
    width: 300px;
    height: 300px;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
    pointer-events: none;
}
.flow-page-header .page-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.flow-page-header .page-title .fa {
    font-size: 1.125rem;
    opacity: 0.7;
}
.flow-page-header .page-subtitle {
    color: rgba(255,255,255,0.65);
    font-size: 0.8125rem;
    margin: 0.25rem 0 0;
}
.flow-page-header .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0.25rem 0 0;
}
.flow-page-header .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.55);
}
.flow-page-header .header-actions {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.flow-page-header .header-actions .btn {
    border-color: rgba(255,255,255,0.3);
    color: #fff;
    font-size: 0.8125rem;
    transition: all var(--transition-fast);
}
.flow-page-header .header-actions .btn:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.5);
}
.flow-page-header .header-actions .btn-add {
    background: var(--medium-green);
    border-color: var(--medium-green);
}
.flow-page-header .header-actions .btn-add:hover {
    background: var(--dark-green);
    border-color: var(--dark-green);
}

/* ── KPI Row ── */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}
.kpi-card-flow {
    background: #fff;
    border-radius: var(--radius-md);
    padding: 0.875rem 1rem;
    border: 1px solid var(--border-light-gray);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: box-shadow var(--transition-fast);
}
.kpi-card-flow:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.kpi-card-flow .kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.kpi-card-flow .kpi-icon.blue { background: var(--lighter-blue); color: var(--brand-main); }
.kpi-card-flow .kpi-icon.green { background: var(--light-green); color: var(--dark-green); }
.kpi-card-flow .kpi-icon.orange { background: var(--light-orange); color: var(--warning-dark); }
.kpi-card-flow .kpi-icon.red { background: var(--light-red); color: var(--danger); }
.kpi-card-flow .kpi-icon.purple { background: var(--ocs-light-purple); color: var(--ocs-purple); }
.kpi-card-flow .kpi-data .kpi-number {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--brand-secondary-dark-gray);
}
.kpi-card-flow .kpi-data .kpi-label {
    font-size: 0.75rem;
    color: var(--medium-gray-2);
    font-weight: 500;
    margin-top: 0.125rem;
}

/* ── Section Divider ── */
.flow-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0 0.875rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--lighter-blue);
}
.flow-section-header .section-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: var(--lighter-blue);
    color: var(--brand-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}
.flow-section-header .section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--brand-secondary-dark-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Chart Card Enhancement ── */
.chart-card {
    border-radius: var(--radius-lg) !important;
    overflow: hidden;
}
.chart-card .card-body { padding: 1rem 1.25rem; }
.chart-card .chart-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--brand-secondary-dark-gray);
    margin-bottom: 0.125rem;
}
.chart-card .chart-subtitle {
    font-size: 0.8125rem;
    color: var(--medium-gray-2);
    margin-bottom: 0.75rem;
}

/* ── Empty State ── */
.flow-empty-state {
    text-align: center;
    padding: 2.5rem 0.625rem;
    color: var(--medium-gray-2);
}
.flow-empty-state .empty-icon {
    font-size: 3.5rem;
    margin-bottom: 0.625rem;
    opacity: 0.2;
    color: var(--lighter-blue-2);
}
.flow-empty-state .empty-text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ── Filter Bar (standardized filter area for all pages) ── */
.flow-filter-bar {
    background: #fff;
    border: 1px solid var(--border-light-gray);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
}
.flow-filter-bar .filter-row {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.flow-filter-bar .filter-field {
    flex: 1;
    min-width: 150px;
}
.flow-filter-bar .filter-field label,
.flow-filter-bar .filter-field .form-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--medium-gray);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.flow-filter-bar .filter-field input,
.flow-filter-bar .filter-field select,
.flow-filter-bar .filter-field .form-control,
.flow-filter-bar .filter-field .select2-container .select2-selection {
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light-gray);
    font-size: 0.8125rem;
    width: 100%;
}
.flow-filter-bar .filter-field input:focus,
.flow-filter-bar .filter-field select:focus {
    border-color: var(--brand-main);
    box-shadow: 0 0 0 2px rgba(24,67,137,0.10);
    outline: none;
}
.flow-filter-bar .filter-actions {
    display: flex;
    gap: 0.375rem;
    align-items: flex-end;
    flex-shrink: 0;
}
.flow-filter-bar .filter-actions .btn {
    height: 38px;
    font-size: 0.8125rem;
    white-space: nowrap;
}
.flow-filter-bar .input-group {
    flex-wrap: nowrap;
}
.flow-filter-bar .input-group .input-group-text {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    border-color: var(--border-light-gray);
    background: var(--light-gray);
    height: 38px;
}
.flow-filter-bar .input-group .form-control {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Contextual filter row ──
   Filters that only apply to some records stay out of the bar until the selection that gives
   them meaning is made, instead of sitting disabled for everyone. The left rule and the tinted
   ground tie them to the field above that revealed them. */
.flow-filter-bar .filter-row-contextual {
    display: none;
    align-items: flex-end;
    background: var(--lighter-blue);
    border-left: 3px solid var(--brand-main);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    column-gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    row-gap: 0.75rem;
}
.flow-filter-bar .filter-row-contextual.is-visible {
    animation: contextual-filters-in 0.18s ease-out;
    display: flex;
}
@media (prefers-reduced-motion: reduce) {
    .flow-filter-bar .filter-row-contextual.is-visible {
        animation: none;
    }
}
@keyframes contextual-filters-in {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* The fields of the bar stretch to fill the row; here they must hug their pills instead, so the
   groups stay together next to the contract that revealed them. */
.flow-filter-bar .filter-row-contextual .filter-field {
    flex: 0 0 auto;
    min-width: 0;
}
.flow-filter-bar .filter-row-contextual .contextual-title {
    align-items: center;
    color: var(--brand-main);
    display: flex;
    font-size: 0.6875rem;
    font-weight: 700;
    gap: 0.375rem;
    letter-spacing: 0.03em;
    /* Sits on the same baseline as the pills, which carry the label above them. */
    padding-bottom: 0.5rem;
    text-transform: uppercase;
    white-space: nowrap;
}
.flow-filter-bar .filter-row-contextual .contextual-hint {
    color: var(--medium-gray);
    flex-basis: 100%;
    font-size: 0.75rem;
    margin: 0;
}
.flow-filter-bar .filter-row-contextual .contextual-hint.is-invalid {
    color: var(--dark-red, #b91c1c);
    font-weight: 600;
}

/* ── Filter pills (segmented control) ──
   A three-state filter reads faster as pills than as a select: every option is visible and one
   click away. They are real radios, so keyboard and screen readers keep working. */
.flow-filter-bar .filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem;
}
.flow-filter-bar .filter-pills input {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}
.flow-filter-bar .filter-pills label {
    background: #fff;
    border: 1px solid var(--border-light-gray);
    border-radius: 999px;
    color: var(--medium-gray);
    cursor: pointer;
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
    padding: 0.4375rem 0.875rem;
    text-transform: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
}
.flow-filter-bar .filter-pills label:hover {
    border-color: var(--brand-main);
    color: var(--brand-main);
}
.flow-filter-bar .filter-pills input:checked + label {
    background: var(--brand-main);
    border-color: var(--brand-main);
    color: #fff;
}
.flow-filter-bar .filter-pills input:focus-visible + label {
    box-shadow: 0 0 0 2px rgba(24, 67, 137, 0.35);
}

/* ── List Filter (Excel-like dropdown: search, select all, show/hide mode) ── */
.list-filter {
    position: relative;
}
/* The options use `display: flex`, which would ignore the `hidden` attribute. */
.list-filter [hidden] {
    display: none;
}
.list-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    height: 38px;
    padding: 0 0.625rem;
    background: #fff;
    border: 1px solid var(--border-light-gray);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--brand-secondary-dark-gray);
    text-align: left;
    transition: all var(--transition-fast);
}
.list-filter-toggle:hover {
    border-color: var(--brand-main);
}
.list-filter.open .list-filter-toggle {
    border-color: var(--brand-main);
    box-shadow: 0 0 0 2px rgba(24, 67, 137, 0.10);
}
.list-filter.filled .list-filter-toggle {
    border-color: var(--brand-main);
    color: var(--brand-main);
    font-weight: 600;
}
.list-filter-summary {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-filter:not(.filled) .list-filter-summary {
    color: var(--medium-gray-2);
}
.list-filter-caret {
    font-size: 0.6875rem;
    color: var(--medium-gray-2);
    transition: transform var(--transition-fast);
}
.list-filter.open .list-filter-caret {
    transform: rotate(180deg);
}
.list-filter-panel {
    position: absolute;
    z-index: 1000;
    top: calc(100% + 0.25rem);
    left: 0;
    width: 100%;
    min-width: 260px;
    padding: 0.625rem;
    background: #fff;
    border: 1px solid var(--border-light-gray);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* The panel is wider than the narrow fields: the last of a row opens leftwards. */
.filter-row .filter-field:last-child .list-filter-panel {
    right: 0;
    left: auto;
}
.list-filter-modes {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.list-filter-mode {
    flex: 1;
    padding: 0.3rem 0.5rem;
    background: var(--light-gray);
    border: 1px solid var(--border-light-gray);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--medium-gray);
    transition: all var(--transition-fast);
}
.list-filter-mode:hover {
    color: var(--brand-main);
}
.list-filter-mode.active {
    background: var(--lighter-blue);
    border-color: var(--brand-main);
    color: var(--brand-main);
}
.list-filter-mode[data-list-filter-mode="exclude"].active {
    background: #fee2e2;
    border-color: var(--danger);
    color: var(--danger);
}
.list-filter-search {
    position: relative;
    margin-bottom: 0.5rem;
}
.list-filter-search .fa-magnifying-glass {
    position: absolute;
    top: 50%;
    left: 0.55rem;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--medium-gray-2);
}
/* Scoped to `.list-filter-panel` to outweigh `.flow-filter-bar .filter-field label` and
   `.filter-field input`, which would render the options as uppercase 11px block labels. */
.list-filter .list-filter-panel input[type="text"] {
    width: 100%;
    height: 32px;
    padding-left: 1.75rem;
    border: 1px solid var(--border-light-gray);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
}
.list-filter-options {
    max-height: 220px;
    overflow-y: auto;
}
.list-filter-options::-webkit-scrollbar {
    width: 4px;
}
.list-filter-options::-webkit-scrollbar-thumb {
    background: var(--lighter-blue-2);
    border-radius: 4px;
}
.list-filter .list-filter-panel .list-filter-option {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.25rem 0.35rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--brand-secondary-dark-gray);
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}
.list-filter .list-filter-panel .list-filter-option:hover {
    background: var(--light-gray);
}
.list-filter .list-filter-panel .list-filter-option input {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--brand-main);
    cursor: pointer;
}
.list-filter .list-filter-panel .list-filter-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-filter .list-filter-panel .list-filter-select-all {
    margin-bottom: 0.25rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-light-gray);
    border-radius: 0;
    font-weight: 600;
}
.list-filter-empty {
    padding: 0.75rem 0.35rem;
    font-size: 0.8125rem;
    color: var(--medium-gray-2);
    text-align: center;
}
.list-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-light-gray);
}
.list-filter-count {
    font-size: 0.75rem;
    color: var(--medium-gray-2);
}
.list-filter-clear {
    padding: 0;
    background: none;
    border: none;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--brand-main);
}
.list-filter-clear:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   VCX Brand Design System — Body Content Elements
   Colors: Blue #4253A0 · Aqua #27D196 · Crimson #E10244 · Dark #282837
   ═══════════════════════════════════════════════════════════════════ */

/* ── Brand Accent Buttons ── */
.btn-vcx-aqua {
    background: var(--vcx-aqua);
    border-color: var(--vcx-aqua);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.btn-vcx-aqua:hover,
.btn-vcx-aqua:focus {
    background: var(--vcx-aqua-dark);
    border-color: var(--vcx-aqua-dark);
    color: #fff;
    box-shadow: 0 4px 12px rgba(39, 209, 150, 0.25);
}

.btn-vcx-crimson {
    background: var(--vcx-crimson);
    border-color: var(--vcx-crimson);
    color: #fff;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.btn-vcx-crimson:hover,
.btn-vcx-crimson:focus {
    background: var(--vcx-crimson-dark);
    border-color: var(--vcx-crimson-dark);
    color: #fff;
    box-shadow: 0 4px 12px rgba(225, 2, 68, 0.25);
}

.btn-outline-vcx-aqua {
    color: var(--vcx-aqua-dark);
    border: 1.5px solid var(--vcx-aqua);
    background: transparent;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.btn-outline-vcx-aqua:hover,
.btn-outline-vcx-aqua:focus {
    background: var(--vcx-aqua);
    color: #fff;
    border-color: var(--vcx-aqua);
}

.btn-outline-vcx-crimson {
    color: var(--vcx-crimson);
    border: 1.5px solid var(--vcx-crimson);
    background: transparent;
    font-weight: 600;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.btn-outline-vcx-crimson:hover,
.btn-outline-vcx-crimson:focus {
    background: var(--vcx-crimson);
    color: #fff;
    border-color: var(--vcx-crimson);
}

/* ── Brand Accent Badges ── */
.badge-vcx-aqua {
    background: var(--vcx-aqua-light);
    color: var(--vcx-aqua-dark);
    font-weight: 600;
    padding: 0.35em 0.85em;
    border-radius: var(--radius-pill);
}
.badge-vcx-crimson {
    background: var(--vcx-crimson-light);
    color: var(--vcx-crimson-dark);
    font-weight: 600;
    padding: 0.35em 0.85em;
    border-radius: var(--radius-pill);
}
.badge-vcx-blue {
    background: rgba(66, 83, 160, 0.10);
    color: var(--vcx-blue);
    font-weight: 600;
    padding: 0.35em 0.85em;
    border-radius: var(--radius-pill);
}
.badge-vcx-dark {
    background: rgba(40, 40, 55, 0.08);
    color: var(--vcx-dark);
    font-weight: 600;
    padding: 0.35em 0.85em;
    border-radius: var(--radius-pill);
}

/* ── Brand KPI Icon Variants ── */
.kpi-card-flow .kpi-icon.vcx-aqua {
    background: var(--vcx-aqua-light);
    color: var(--vcx-aqua-dark);
}
.kpi-card-flow .kpi-icon.vcx-crimson {
    background: var(--vcx-crimson-light);
    color: var(--vcx-crimson);
}
.kpi-card-flow .kpi-icon.vcx-blue {
    background: rgba(66, 83, 160, 0.10);
    color: var(--vcx-blue);
}

/* ── Brand Section Accent Stripe ── */
.vcx-accent-stripe {
    border-left: 3px solid var(--vcx-aqua);
}
.vcx-accent-stripe-crimson {
    border-left: 3px solid var(--vcx-crimson);
}

/* ── Brand Text Colors ── */
.text-vcx-aqua { color: var(--vcx-aqua-dark) !important; }
.text-vcx-crimson { color: var(--vcx-crimson) !important; }
.text-vcx-blue { color: var(--vcx-blue) !important; }
.text-vcx-dark { color: var(--vcx-dark) !important; }

/* ── Brand Background Colors ── */
.bg-vcx-aqua { background: var(--vcx-aqua) !important; color: #fff !important; }
.bg-vcx-crimson { background: var(--vcx-crimson) !important; color: #fff !important; }
.bg-vcx-blue { background: var(--vcx-blue) !important; color: #fff !important; }
.bg-vcx-dark { background: var(--vcx-dark) !important; color: #fff !important; }
.bg-vcx-aqua-light { background: var(--vcx-aqua-light) !important; }
.bg-vcx-crimson-light { background: var(--vcx-crimson-light) !important; }

/* ── Brand Chevron Decorative Element (>>) ── */
.vcx-chevron-icon::before {
    content: '\f101';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}
.vcx-chevron-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--vcx-aqua);
    color: #fff;
    font-size: 0.75rem;
}
.vcx-chevron-badge::before {
    content: '\f101';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
}
.vcx-chevron-badge.crimson { background: var(--vcx-crimson); }
.vcx-chevron-badge.blue { background: var(--vcx-blue); }
.vcx-chevron-badge.dark { background: var(--vcx-dark); }

/* ── Success / Action Button Enhancement ── */
/* Apply VCX aqua as the default success/confirm accent in body content */
.flow-page-header .header-actions .btn-add,
.flow-page-header .header-actions .btn-success {
    background: var(--vcx-aqua);
    border-color: var(--vcx-aqua);
    color: #fff;
}
.flow-page-header .header-actions .btn-add:hover,
.flow-page-header .header-actions .btn-success:hover {
    background: var(--vcx-aqua-dark);
    border-color: var(--vcx-aqua-dark);
    box-shadow: 0 4px 12px rgba(39, 209, 150, 0.25);
}

/* ── Delete / Destructive Action Enhancement ── */
.flow-page-header .header-actions .btn-danger {
    background: var(--vcx-crimson);
    border-color: var(--vcx-crimson);
}
.flow-page-header .header-actions .btn-danger:hover {
    background: var(--vcx-crimson-dark);
    border-color: var(--vcx-crimson-dark);
    box-shadow: 0 4px 12px rgba(225, 2, 68, 0.25);
}

/* ── Alert Enhancements with Brand Colors ── */
.alert-vcx-info {
    background: rgba(66, 83, 160, 0.08);
    border: 1px solid rgba(66, 83, 160, 0.2);
    color: var(--vcx-blue);
    border-left: 3px solid var(--vcx-blue);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
}
.alert-vcx-success {
    background: var(--vcx-aqua-light);
    border: 1px solid rgba(39, 209, 150, 0.25);
    color: var(--vcx-aqua-dark);
    border-left: 3px solid var(--vcx-aqua);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
}
.alert-vcx-danger {
    background: var(--vcx-crimson-light);
    border: 1px solid rgba(225, 2, 68, 0.2);
    color: var(--vcx-crimson-dark);
    border-left: 3px solid var(--vcx-crimson);
    border-radius: var(--radius-md);
    padding: 0.625rem 0.875rem;
}

/* ── Progress Bar Brand Variants ── */
.progress-bar.bg-vcx-aqua { background: var(--vcx-aqua) !important; }
.progress-bar.bg-vcx-crimson { background: var(--vcx-crimson) !important; }

/* ── Status Dot Indicator ── */
.vcx-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 0.25rem;
    vertical-align: middle;
}
.vcx-status-dot.active { background: var(--vcx-aqua); }
.vcx-status-dot.inactive { background: var(--medium-gray-2); }
.vcx-status-dot.alert { background: var(--vcx-crimson); }
.vcx-status-dot.pending { background: var(--warning); }

/* ── Card Accent Top Stripe (decorative brand element) ── */
.card-vcx-top-accent {
    border-top: 3px solid var(--vcx-aqua);
}
.card-vcx-top-accent.crimson {
    border-top: 3px solid var(--vcx-crimson);
}
.card-vcx-top-accent.blue {
    border-top: 3px solid var(--vcx-blue);
}

/* ── Tooltip / Popover Brand Styles ── */
.tooltip-vcx .tooltip-inner {
    background: var(--vcx-dark);
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.tooltip-wide .tooltip-inner {
    max-width: 22rem;
}

/* ── Link Brand Accent (CTA links in content area) ── */
a.vcx-link {
    color: var(--vcx-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-fast);
}
a.vcx-link:hover {
    color: var(--vcx-crimson);
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   Shared Component Enhancements — Applied to Sonar AND Flow
   ═══════════════════════════════════════════════════════════════════ */

/* ── Top Nav ── */
nav.top-nav {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

nav.top-nav .dropdown-item span[role="img"] {
    display: inline-block;
    width: 20px;
    text-align: center;
    font-size: 0.875rem;
}

/* ── Datepicker ── */
.datepicker-dropdown {
    z-index: 1050 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DataTable Design System — Unified toolbar controls
   All controls: 32px height, radius-sm, 13px font, consistent spacing.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.dataTables_wrapper {
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light-gray);
    padding: 0.75rem;
    position: relative;
    z-index: 0;
}

/* ── Toolbar row: align all controls with uniform gaps ── */
.dataTables_wrapper > .row:first-child {
    align-items: center;
    margin-bottom: 0.5rem;
}
.dataTables_wrapper > .row:first-child > [class*="col-"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.dataTables_wrapper > .row:first-child > [class*="col-"]:last-child {
    justify-content: flex-end;
}
/* Table-only DOMs (paginationDOM/tableOnlyDOM) render the table as the sole column of the
   first row; it must not be flexed like a toolbar (that shrinks it and right-aligns it). */
.dataTables_wrapper > .row:first-child > [class*="col-"]:only-child {
    display: block;
}

/* ── Length selector (e.g., "10 resultados") ── */
.dataTables_length {
    display: inline-flex !important;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--darker-gray);
    margin: 0 !important;
    padding: 0 !important;
}
.dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 !important;
    font-weight: 500;
    color: var(--darker-gray);
    white-space: nowrap;
}
.dataTables_length select,
.dataTables_length select.form-control,
.dataTables_length select.form-control-sm {
    height: 32px !important;
    padding: 0 0.5rem !important;
    border: 1px solid #c0c5cc !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.8125rem !important;
    color: var(--darker-gray) !important;
    background-color: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color var(--transition-fast);
    -webkit-appearance: auto;
    appearance: auto;
}
.dataTables_length select:hover {
    border-color: var(--medium-gray-2) !important;
}
.dataTables_length select:focus {
    border-color: var(--brand-main) !important;
    box-shadow: 0 0 0 2px rgba(24, 67, 137, 0.1) !important;
    outline: none !important;
}

/* ── Action buttons (Adicionar, Gerenciar Colunas, Ações) ── */
.dataTables_wrapper .dt-buttons {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0 !important;
}
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .btn.btn-default,
.dataTables_wrapper .dt-buttons .btn.btn-success,
.dataTables_wrapper .dt-buttons .btn.btn-table {
    height: 32px !important;
    padding: 0 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    border-radius: var(--radius-sm) !important;
    display: inline-flex !important;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
    line-height: 1;
    margin: 0 !important;
}
/* Bottom buttons (when placed after pagination, e.g. OCS Integrar) */
.dataTables_wrapper > .row:last-child .dt-buttons {
    margin-top: 0.75rem !important;
}
/* Primary CTA (Adicionar) — solid brand */
.dataTables_wrapper .dt-buttons .btn-success.btn-table {
    background: var(--brand-main) !important;
    border: 1px solid var(--brand-main) !important;
    color: #fff !important;
}
.dataTables_wrapper .dt-buttons .btn-success.btn-table:hover {
    background: var(--dark-blue) !important;
    border-color: var(--dark-blue) !important;
}
/* Secondary buttons (Gerenciar Colunas, Ações) — outline neutral */
.dataTables_wrapper .dt-buttons .btn-default,
.dataTables_wrapper .dt-buttons .btn-table:not(.btn-success) {
    background: #fff !important;
    border: 1px solid #c0c5cc !important;
    color: var(--darker-gray) !important;
}
.dataTables_wrapper .dt-buttons .btn-default:hover,
.dataTables_wrapper .dt-buttons .btn-table:not(.btn-success):hover {
    background: var(--light-gray) !important;
    border-color: var(--medium-gray-2) !important;
}
/* Primary button (Integrar, etc.) — solid brand */
.dataTables_wrapper .dt-buttons .btn-primary.btn-table,
.dataTables_wrapper .dt-buttons .btn.btn-primary {
    background: var(--brand-main) !important;
    border: 1px solid var(--brand-main) !important;
    color: #fff !important;
}
.dataTables_wrapper .dt-buttons .btn-primary.btn-table:hover,
.dataTables_wrapper .dt-buttons .btn.btn-primary:hover {
    background: var(--dark-blue) !important;
    border-color: var(--dark-blue) !important;
}
/* Dropdown collection (Ações dropdown) */
.dataTables_wrapper .dt-buttons .btn-success.dropdown-toggle {
    background: #fff !important;
    border: 1px solid #c0c5cc !important;
    color: var(--darker-gray) !important;
}
.dataTables_wrapper .dt-buttons .btn-success.dropdown-toggle:hover {
    background: var(--light-gray) !important;
    border-color: var(--medium-gray-2) !important;
}

/* ── Search/filter input ── */
.dataTables_filter {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0 !important;
    padding: 0 !important;
}
.dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 !important;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--darker-gray);
    white-space: nowrap;
}
.dataTables_filter input,
.dataTables_filter input.form-control,
.dataTables_filter input.form-control-sm {
    height: 32px !important;
    min-width: 180px;
    padding: 0 0.75rem !important;
    border: 1px solid #c0c5cc !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.8125rem !important;
    color: var(--darker-gray) !important;
    background: #fff !important;
    box-shadow: none !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.dataTables_filter input:hover {
    border-color: var(--medium-gray-2) !important;
}
.dataTables_filter input:focus {
    border-color: var(--brand-main) !important;
    box-shadow: 0 0 0 2px rgba(24, 67, 137, 0.1) !important;
    outline: none !important;
}

/* ── Pagination ── */
.dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.5rem;
}
.dataTables_paginate .paginate_button {
    height: 32px;
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm) !important;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--medium-gray);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.dataTables_paginate .paginate_button:hover {
    background: var(--light-gray);
    color: var(--darker-gray);
}
.dataTables_paginate .paginate_button.current {
    background: var(--brand-main) !important;
    color: #fff !important;
    border-color: var(--brand-main) !important;
    font-weight: 600;
}
.dataTables_paginate .paginate_button.disabled {
    opacity: 0.4;
    cursor: default;
}

/* ── Info text ── */
.dataTables_info {
    font-size: 0.75rem;
    color: var(--medium-gray-2);
    padding-top: 0.5rem;
}

/* ── Status filter (injected via JS) ── */
.dataTables_filter .status-filter {
    height: 32px !important;
    padding: 0 0.5rem !important;
    border: 1px solid #c0c5cc !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.8125rem !important;
    color: var(--darker-gray) !important;
    background-color: #fff !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: auto;
    appearance: auto;
}
.dataTables_filter .status-filter:hover {
    border-color: var(--medium-gray-2) !important;
}
.dataTables_filter .status-filter:focus {
    border-color: var(--brand-main) !important;
    box-shadow: 0 0 0 2px rgba(24, 67, 137, 0.1) !important;
    outline: none !important;
}

/* ── Table Structure ── */
table.dataTable {
    border-collapse: separate;
    border-spacing: 0;
}
table.dataTable thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--medium-gray-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--light-gray-2);
    padding: 0.625rem 0.75rem;
    white-space: nowrap;
    background: var(--light-gray);
}
table.dataTable tbody td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
    font-size: 0.8125rem;
    color: var(--darker-gray);
    border-bottom: 1px solid var(--light-gray-2);
    border-left: none;
    border-right: none;
}
table.dataTable tbody tr {
    transition: background var(--transition-fast);
}
table.dataTable tbody tr:hover {
    background: var(--lighter-blue) !important;
}
table.dataTable tbody tr:nth-child(even) {
    background: var(--light-gray);
}
table.dataTable tbody tr:nth-child(even):hover {
    background: var(--lighter-blue) !important;
}

/* Table badges */
table.dataTable .badge {
    font-size: 0.6875rem;
    padding: 0.25em 0.625em;
}

/* Table progress bar */
table.dataTable .progress {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--light-gray-2);
    min-width: 80px;
}
table.dataTable .progress-bar {
    border-radius: var(--radius-pill);
    font-size: 0;
    background: var(--brand-main);
}

/* Table action buttons */
table.dataTable .btn-sm {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}
table.dataTable .btn-link {
    text-decoration: none;
    font-weight: 600;
    color: var(--brand-main);
}
table.dataTable .btn-link:hover {
    color: var(--dark-blue);
    text-decoration: underline;
}

/* Table disabled content */
table.dataTable .content-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* Table child row (expanded details) */
table.dataTable tr.shown + tr > td {
    background: var(--lighter-blue);
    border-left: 3px solid var(--brand-main);
    padding: 0.625rem 0.9375rem;
}

/* DataTable search input */
.dataTables_filter input {
    border-radius: var(--radius-pill) !important;
    padding-left: 0.625rem !important;
    border: 1px solid var(--border-light-gray) !important;
    height: 38px;
}
.dataTables_filter input:focus {
    border-color: var(--brand-main) !important;
    box-shadow: 0 0 0 3px rgba(24,67,137,0.10) !important;
}

/* DataTable pagination */
.dataTables_paginate .paginate_button {
    border-radius: var(--radius-sm) !important;
    min-width: 34px;
}
.dataTables_paginate .paginate_button.current {
    background: var(--brand-main) !important;
    color: #fff !important;
    border-color: var(--brand-main) !important;
}

/* DataTable info */
.dataTables_info {
    font-size: 0.75rem;
    color: var(--medium-gray-2);
}

/* DataTable length selector */
.dataTables_length select {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light-gray);
    padding: 0.25rem 0.25rem;
}

/* Badge refinement */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Table scrollbar */
.table-responsive::-webkit-scrollbar { height: 6px; }
.table-responsive::-webkit-scrollbar-thumb {
    background: var(--lighter-blue-2);
    border-radius: 3px;
}
.table-responsive::-webkit-scrollbar-track {
    background: var(--light-gray);
}

/* ── Card Enhancement ── */
.card.border-0 {
    border-radius: var(--radius-lg) !important;
    border-left: 3px solid var(--brand-main) !important;
    transition: box-shadow var(--transition-normal);
}
.card.border-0:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

/* ── Dashboard Cards ── */
.card.border-0.shadow-1 > .card-body {
    padding: 0.75rem 0.875rem;
}
.row.gx-5 {
    --bs-gutter-x: 0.75rem;
}
.card.border-0.shadow-1 .mb-5 {
    margin-bottom: 0.625rem !important;
}
.card.border-0.shadow-1 .mb-4 {
    margin-bottom: 0.375rem !important;
}
.card.border-0.shadow-1 .mt-3 {
    margin-top: 0.25rem !important;
}
.row.mt-3 {
    margin-top: 0 !important;
}
[class*="col-"] > .card.border-0.shadow-1 {
    margin-bottom: 0.75rem;
}

/* Dashboard titles */
.card.border-0.shadow-1 h2.h3,
.card.border-0.shadow-1 h2.h4,
.card.border-0.shadow-1 .h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--brand-secondary-dark-gray);
    margin-bottom: 0.5rem;
}
.card.border-0.shadow-1 h2.h3 .fw-light {
    font-weight: 400;
    color: var(--medium-gray);
}
.card.border-0.shadow-1 h3.h4,
.card.border-0.shadow-1 h3,
.card.border-0.shadow-1 .h4 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--medium-gray);
    margin-bottom: 0.375rem;
}

/* Chart areas */
.min-h-200 { min-height: 180px; }
.min-h-375 { min-height: 320px; }
.min-h-450 { min-height: 380px; }

/* Tables inside dashboard cards */
.card.border-0.shadow-1 .max-height-250 {
    max-height: 200px;
}

/* Services-by-location table follows the neighbor card height (flex-basis 0
   keeps the table from inflating the card); max-height is a runaway safety cap */
.card.border-0.shadow-1 .services-by-address-fill {
    flex: 1 1 0;
    min-height: 0;
    max-height: 80vh;
    overflow-y: auto;
}
.card.border-0.shadow-1 .table-condensed td,
.card.border-0.shadow-1 .table-condensed th {
    padding: 0.25rem 0.375rem;
    font-size: 0.8125rem;
}
.card.border-0.shadow-1 .table-condensed thead th {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--lighter-blue-2);
}

/* Big numbers */
.card.border-0.shadow-1 .col.text-center h1,
.card.border-0.shadow-1 .col.text-center .h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--brand-main);
    line-height: 1.1;
}
.card.border-0.shadow-1 .col.text-center p,
.card.border-0.shadow-1 .col.text-center small {
    font-size: 0.6875rem;
    color: var(--medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

/* Trophy / Legal icons */
.card.border-0.shadow-1 .fa-2x { font-size: 1.25rem; }
.card.border-0.shadow-1 .fs-18px { font-size: 1.25rem !important; font-weight: 700; }

/* Feed lists */
.card.border-0.shadow-1 .feed-activity-list {
    max-height: 220px;
    overflow-y: auto;
}
.card.border-0.shadow-1 .feed-activity-list li {
    padding: 0.25rem 0;
    font-size: 0.8125rem;
}

/* Expiration lists */
.card.border-0.shadow-1 .expiration-list {
    max-height: 200px;
    overflow-y: auto;
}
.card.border-0.shadow-1 .expiration-list li {
    gap: 0.5rem;
    align-items: center;
}
.card.border-0.shadow-1 .expiration-list .fa-xl {
    font-size: 1.25rem;
    line-height: 1.4;
}
.card.border-0.shadow-1 .expiration-list a {
    font-size: 0.8125rem;
    font-weight: 600;
}
.card.border-0.shadow-1 .expiration-list small {
    font-size: 0.6875rem;
}

/* Nav tabs inside cards */
.card.border-0.shadow-1 .nav-tabs .nav-link {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}

/* Select dropdowns inside cards */
.card.border-0.shadow-1 .form-select {
    font-size: 0.8125rem;
    /* Right padding reserves space for the Bootstrap dropdown arrow (avoids icon over text) */
    padding: 0.25rem 2rem 0.25rem 0.5rem;
}

/* "Ver Painel Completo" link */
.card.border-0.shadow-1 .text-end.mt-auto a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-main);
    text-decoration: none;
}
.card.border-0.shadow-1 .text-end.mt-auto a:hover {
    text-decoration: underline;
}

/* ── Form Enhancement ── */
.form-control:focus {
    border-color: var(--brand-main);
    box-shadow: 0 0 0 3px rgba(24,67,137,0.10);
}
.form-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--medium-gray);
}

/* ── Spinner ── */
.spinner-border.text-info {
    color: var(--brand-main) !important;
}

/* ── VCX Brand Accents — Body Content (shared Sonar + Flow) ── */

/* Success buttons */
#page-wrapper .btn-success {
    background: var(--vcx-aqua);
    border-color: var(--vcx-aqua);
}
#page-wrapper .btn-success:hover {
    background: var(--vcx-aqua-dark);
    border-color: var(--vcx-aqua-dark);
    box-shadow: 0 4px 12px rgba(39, 209, 150, 0.25);
}

/* Danger buttons */
#page-wrapper .btn-danger {
    background: var(--vcx-crimson);
    border-color: var(--vcx-crimson);
}
#page-wrapper .btn-danger:hover {
    background: var(--vcx-crimson-dark);
    border-color: var(--vcx-crimson-dark);
    box-shadow: 0 4px 12px rgba(225, 2, 68, 0.25);
}

/* Outline danger */
#page-wrapper .btn-outline-danger {
    color: var(--vcx-crimson);
    border-color: var(--vcx-crimson);
}
#page-wrapper .btn-outline-danger:hover {
    background: var(--vcx-crimson);
    border-color: var(--vcx-crimson);
    color: #fff;
}

/* Badge success */
#page-wrapper .badge.bg-success,
#page-wrapper .badge.badge-success {
    background: var(--vcx-aqua) !important;
}

/* Badge danger */
#page-wrapper .badge.bg-danger,
#page-wrapper .badge.badge-danger {
    background: var(--vcx-crimson) !important;
}

/* Alert success */
.alert-success {
    background: var(--vcx-aqua-light);
    border-color: rgba(39, 209, 150, 0.25);
    color: var(--vcx-aqua-dark);
    border-left: 3px solid var(--vcx-aqua);
}

/* Alert danger */
.alert-danger {
    background: var(--vcx-crimson-light);
    border-color: rgba(225, 2, 68, 0.2);
    color: var(--vcx-crimson-dark);
    border-left: 3px solid var(--vcx-crimson);
}

/* Progress bar success */
.progress-bar.bg-success {
    background: var(--vcx-aqua) !important;
}

/* KPI number accent */
.kpi-card-flow .kpi-data .kpi-number {
    color: var(--vcx-dark);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .flow-page-header { padding: 0.875rem 1rem; }
    .flow-page-header .page-title { font-size: 1.25rem; }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .flow-filter-bar .filter-field { min-width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   Sonar Enhancements (merged from sonar-enhancements.css)
   ══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   Sonar Enhancements — Sonar-only overrides (#base-sonar)
   Only sidebar behavior. All shared rules are in base-enhancements.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Sidebar: section separators ── */
#base-sonar nav.side-nav-sonar > ul > li {
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#base-sonar nav.side-nav-sonar > ul > li:last-child {
    border-bottom: none;
}

/* Subitems: hidden when collapsed, visible when expanded */
#base-sonar nav.side-nav-sonar > ul > li > ul {
    display: none;
}
#base-sonar nav.side-nav-sonar:hover > ul > li > ul,
#base-sonar nav.side-nav-sonar.open > ul > li > ul {
    display: block;
}

/* Section title */
#base-sonar nav.side-nav-sonar .side-nav-section-title {
    opacity: 0.95;
}

/* Sub-section title */
#base-sonar nav.side-nav-sonar .side-nav-sub-title {
    cursor: default;
    pointer-events: none;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6) !important;
    padding: 0.25rem 0.75rem 0.0625rem;
    margin-top: 0.125rem;
}

/* Help button icon */
#base-sonar nav.top-nav button#help-and-support-btn span[role="img"] {
    font-size: 1rem;
    margin-right: 0.25rem;
}

/* Empty state for DataTables with zero records */
.table-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--medium-gray);
}
.table-empty-state .empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
    display: block;
}
.table-empty-state .empty-text {
    font-size: 1rem;
}

/* ApexCharts: when the donut legend is height-capped (many slices), let it scroll
   instead of shrinking the chart area and overflowing the center label. Paired with
   the legend height cap in the Morris.Donut shim (default-apexcharts-options.js). */
.apexcharts-legend {
    overflow-y: auto !important;
}

/* Image attachments inside task comments (customer-facing modal) */
.comment-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.comment-attachment {
    width: 96px;
    height: 96px;
    border: 1px solid var(--border-light-gray);
    border-radius: 0.5rem;
    overflow: hidden;
    display: block;
}
.comment-attachment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ─────────────────────────── Column filters (SON-115) ─────────────────────────── */

.column-filter-tray {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    overflow: hidden;
    padding: 0;
}

/* Idle the strip takes no room at all; filled it needs to breathe away from the buttons above
 * and from the table below. */
.column-filter-tray[data-filled="true"] {
    padding: .875rem 0 1.125rem;
}

.column-filter-pill {
    align-items: center;
    background: #eef6f4;
    border: 1px solid #1ab394;
    border-radius: 999px;
    color: #14795f;
    cursor: pointer;
    display: inline-flex;
    font-size: .85rem;
    gap: .5rem;
    padding: .25rem .5rem .25rem .85rem;
}

.column-filter-pill:hover {
    background: #e2f1ed;
}

.column-filter-pill-remove {
    background: none;
    border: none;
    border-radius: 50%;
    color: #14795f;
    line-height: 1;
    padding: 0 .25rem;
}

.column-filter-pill-remove:hover {
    background: #1ab394;
    color: #fff;
}

.column-filter-clear-all {
    background: none;
    border: none;
    color: var(--darker-gray, #676a6c);
    font-size: .85rem;
    margin-left: .25rem;
    padding: 0 .5rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.column-filter-clear-all:hover {
    color: #1ab394;
}

.column-filter-funnel {
    background: none;
    border: none;
    border-radius: 4px;
    color: #9aa1a6;
    line-height: 0;
    margin-left: .5rem;
    padding: .2rem;
}

.column-filter-funnel:hover {
    color: #676a6c;
}

/* Condensed card tables trim the header padding DataTables reserves for its sort arrows, and a
   right-aligned column then has its funnel right under them: the click sorts instead of opening
   the filter. The reserved space comes back wherever a sortable header carries a funnel. */
.dataTables_wrapper table.dataTable thead > tr >
    th:is(.sorting, .sorting_asc, .sorting_desc):has(> .column-filter-funnel) {
    padding-right: 26px;
}

.column-filter-funnel.is-active {
    color: #1ab394;
}

/* With horizontal scroll the table body keeps a zero-height copy of the header, used only to
   size the columns. The funnel has to keep its width there — otherwise header and body drift
   apart — while taking no height, or a second row of icons shows up under the real one. */
.dataTables_scrollBody .column-filter-funnel {
    height: 0;
    overflow: hidden;
    padding-bottom: 0;
    padding-top: 0;
    visibility: hidden;
}

.column-filter-popover {
    background: #fff;
    border: 1px solid #e7eaec;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
    display: none;
    padding: .85rem;
    position: absolute;
    width: 260px;
    /* Above the modals of the project (2050) and below an open Select2 (2070), so a funnel
     * inside a modal still opens on top of it. */
    --column-filter-popover-z-index: 2060;

    z-index: var(--column-filter-popover-z-index);
}

.column-filter-popover.is-open {
    display: block;
}

/* The datepicker is pinned to 1050 by a global rule, so the popover that owns the field steps
 * below it while a calendar is open — otherwise the calendar opens behind its own popover. */
.column-filter-popover.has-datepicker {
    z-index: var(--column-filter-popover-z-index);
}

/* The calendar is anchored to the body as well, right after the popover, and the datepicker
 * plugin rewrites its inline z-index on every reposition. Lifting it from here keeps it above
 * the popover without touching the calendars of the rest of the system. */
.column-filter-popover.has-datepicker ~ .datepicker-dropdown {
    z-index: 2065 !important;
}

.column-filter-popover-label {
    color: var(--darker-gray, #676a6c);
    display: block;
    font-size: .75rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

.column-filter-popover-actions {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
}

.column-filter-popover-actions .btn {
    flex: 1;
}

/* ── Service Ticket: urgency pills ── */
.service-ticket-urgency-pill {
    cursor: pointer;
    font-size: 0.8125rem;
    opacity: 0.4;
    padding: 0.5em 1.1em;
    transition: opacity 0.15s ease-in-out;
}

.service-ticket-urgency-pill:hover {
    opacity: 0.7;
}

.btn-check:checked + .service-ticket-urgency-pill {
    font-weight: 600;
    opacity: 1;
}

.btn-check:focus-visible + .service-ticket-urgency-pill {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ── Bulk edit button: reachable tooltip while disabled ── */
/* Bootstrap sets `pointer-events: none` on a disabled dropdown item, which also blocks the hover
   that shows why the button is off. DataTables ignores the click on a disabled button anyway. */
.dt-button-collection .bulk-edit-button.disabled {
    cursor: not-allowed;
    pointer-events: auto;
}