/* ERROR MESSAGE OVERRIDES */
.validation-summary ul {
    padding: 0;
    margin: 0;
}

.validation-summary li {
    list-style: none;
    padding: .4rem .75rem;
    margin-bottom: .4rem;
    background: rgba(255, 0, 0, 0.08);
    border-left: 4px solid #dc3545;
    border-radius: 4px;
    font-size: .9rem;
}

.success-panel {
    list-style: none;
    padding: .4rem .75rem;
    margin-bottom: .4rem;
    background: rgba(40, 167, 69, 0.08);
    border-left: 4px solid #28a745;
    border-radius: 4px;
    font-size: .9rem;
}

.warning-panel {
    list-style: none;
    padding: .4rem .75rem;
    margin-bottom: .4rem;
    background: rgba(255, 193, 7, 0.15);
    border-left: 4px solid #ffc107;
    border-radius: 4px;
    font-size: .9rem;
}

.info-panel {
    list-style: none;
    padding: .4rem .75rem;
    margin-bottom: .4rem;
    background: rgba(23, 162, 184, 0.08);
    border-left: 4px solid #17a2b8;
    border-radius: 4px;
    font-size: .9rem;
}

.error-panel {
    list-style: none;
    padding: .4rem .75rem;
    margin-bottom: .4rem;
    background: rgba(255, 0, 0, 0.08);
    border-left: 4px solid #dc3545;
    border-radius: 4px;
    font-size: .9rem;
}
/* ERROR MESSAGE OVERRIDES */

/* DataTables utilities */
.table.dataTable tbody td {
    vertical-align: top;
}

.og-table-ellipsis {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.og-table-ellipsis-120 {
    max-width: 120px;
}

.og-table-ellipsis-140 {
    max-width: 140px;
}

.og-table-ellipsis-160 {
    max-width: 160px;
}

.og-table-ellipsis-200 {
    max-width: 200px;
}

.og-table-ellipsis-240 {
    max-width: 240px;
}

.og-table-ellipsis-320 {
    max-width: 320px;
}

/* SIDE DRAWER */
.user-drawer {
    position: fixed;
    top: 0;
    right: -450px;
    width: 450px;
    height: 100vh;
    background: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    transition: right 0.3s ease-in-out;
    z-index: 1050;
    overflow-y: auto;
}

    .user-drawer.open {
        right: 0;
    }

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1040;
}

    .drawer-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.drawer-header {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

.app-header .brand-logo .brand-logo-img {
    height: 64px;
    width: auto;
    max-height: none;
}

.picker .pc-select {
    max-width: none;
    min-width: 100%;
    width: 100%;
}

.picker .pc-trigger {
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
    padding: 0.375rem 0.75rem;
}

.picker .pc-trigger:hover {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

.picker .pc-list {
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.picker .pc-list input[type=search] {
    background: var(--bs-light);
    border-bottom: 1px solid var(--bs-border-color);
}

.drawer-body {
    padding: 1.5rem;
    color: #212529;
    font-size: 0.95rem;
}

.btn-action {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    margin: 0 2px;
}

.badge-verified {
    background-color: #28a745;
}

.badge-unverified {
    background-color: #dc3545;
}

dl.row dd {
    word-break: break-word;
}

.user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
}
/* SIDE DRAWER */

.overlay {
    cursor: pointer;
    background: rgba(255,255,255,.7);
    padding-left: 29px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 20px;
    height: 27px;
    border-radius: 20px;
    color: #5c5c5c;
    box-shadow: 1px 1px 1px rgba(30,30,30,.3);
    z-index: 100;
    width: 9%;
}

.overlay:hover {
    background: rgba(255,255,255,1);
    z-index: 101;
}

.overlay:after {
    content: '';
    width: 64px;
    height: 64px;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: -19px;
    background: #333;
    background: url('images/flagpole.png');
}

.overlay i {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background: #333;
    border-radius: 50%;
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    padding-top: 1px;
}

.overlay i.moving, .moving {
    background: #7bbf6a;
    padding-left: 3px;
}

    .overlay i.movingwithoutdo, .movingwithoutdo {
        background: #9B59B6;
        padding-left: 3px;
    }

    .overlay i.idle, .idle {
        background: #3498db;
        padding-left: 3px;
    }

    .overlay i.loss, .loss {
        background: #e04006;
        padding-left: 3px;
    }

.overlay i.off, .off {
    background: #5c5c5c;
    padding-left: 2px;
}

.overlay strong {
    font-size: 12px;
    white-space: nowrap;
}

/* Skeleton loading */
.skeleton {
    -webkit-animation: skeleton-loading 1s linear infinite alternate;
    animation: skeleton-loading 1s linear infinite alternate;
}

@-webkit-keyframes skeleton-loading {
    0% {
        background-color: #c2cfd6;
    }

    100% {
        background-color: #f0f3f5;
    }
}

@keyframes skeleton-loading {
    0% {
        background-color: #c2cfd6;
    }

    100% {
        background-color: #f0f3f5;
    }
}

.skeleton-text {
    width: 60%;
    height: 0.7rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
}

.skeleton-header {
    width: 60%;
    height: 0.7rem;
    margin-bottom: 0.25rem;
    border-radius: 0.25rem;
}

.skeleton-text__100 {
    width: 100%;
}

.skeleton-text__50 {
    width: 50%;
}

.skeleton-text__30 {
    width: 30%;
}
/* Skeleton loading */


/*SquareShapeDiv*/

.overlayEvent {
    cursor: default;
    background: rgba(255,255,255,.7);
    box-shadow: rgba(30,30,30,.3);
    z-index: 9998;
    position: absolute;
    width: 100px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    opacity: 0.9;
    color: black;
}

.overlayEvent:hover {
    background: rgba(255,255,255,1);
    z-index: 9999;
}

.overlayEvent:after {
    content: '';
    width: 64px;
    height: 64px;
    display: inline-block;
    position: absolute;
    top: 50px;
    left: -35px;
    background: #333;
    background: url('images/flagpole.png');
}

.overlayEvent i.moving, .moving {
    background: #7bbf6a;
}

.overlayEvent i.movingwithoutdo, .movingwithoutdo {
    background: #9B59B6;
}

.overlayEvent i.idle, .idle {
    background: #3498db;
}

.overlayEvent i.loss, .loss {
    background: #e04006;
}

.overlayEvent i.off, .off {
    background: #5c5c5c;
}

.overlayEvent strong {
    font-size: 12px;
    white-space: nowrap;
}

#closeButton {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    color: black;
    font-weight: bold;
}

/* Loading Overlay overwrites */
#app_loading-overlay {
    position: fixed !important;
    height: 100vh !important;
}

.select2-container--default .select2-selection--single {
    height: 35px;
    padding: 10px 8px;
    font-size: 13px;
    line-height: 1.2;
    border-radius: 6px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top: 85%;
}

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

.select2-container--default .select2-selection--single {
    border: 1px solid #CCC;
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

/* Layout Page - Alert Bar */
.alert-div {
    position: fixed;
    top: 60px; /* match .app-header height */
    left: 0;
    width: 100%;
    z-index: 1030;
}

.bg-danger-transparent {
    background-color: rgba(220, 53, 69, 0.8); /* Adjust the RGBA values and opacity as desired */
}

.bg-warning-transparent {
    background-color: #ffeb99;
}

/* Breadcrumb Page */
/* The switch */
.switch input {
    display: none;
}

/* The slider Switches */
.switch .slider {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    border-radius: 34px;
    background-color: gray;
    transition: background-color 0.2s ease-in-out;
}

/* The slider when active */
.switch input:checked + .slider {
    background-color: limegreen;
}

/* The slider handle */
.switch .slider::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    border-radius: 50%;
    background-color: white;
    transition: transform 0.2s ease-in-out;
}

/* The slider handle when active */
.switch input:checked + .slider::before {
    transform: translateX(22px);
}

/* Profile header */
#frame-image {
    width: 45px;
    height: 45px;
    overflow: hidden;
    position: relative;
}

#frame-image img {
    max-height: 45px;
    left: 0;
    top: 0;
    transform: translate(0%,0%);
}

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

/* LOGIN SECTION */
.login-container {
    min-height: 100vh;
    position: relative;
}

.login-demo-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
}

/* LEFT SIDE */
.login-left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertical centering of form */
    padding: 4rem 6rem; /* this creates the “offset left” spacing */
    min-height: 100vh;
    z-index: 1;
}

    /* Left background (50% opacity) */
    .login-left::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('/img/bg-login/hex-1.jpg');
        background-color: #fff;
        background-size: cover;
        background-position: center;
        opacity: 0.8;
        z-index: 0;
    }

/* MAIN LOGIN CONTENT */
.login-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    color: #1a1a1a;
    text-align: left; /* keep it modern and aligned */
}

/* LOGO TOP LEFT */
.login-logo {
    position: absolute;
    top: 2rem;
    left: 6rem; /* MUST MATCH login-left padding for alignment */
    z-index: 2;
}

    .login-logo img {
        height: 46px; /* adjust as needed */
    }

/* BOTTOM DISCLAIMER */
.login-disclaimer {
    position: absolute;
    bottom: 2rem;
    left: 6rem; /* SAME left alignment */
    z-index: 2;
    max-width: 320px;
    font-size: 0.85rem;
    color: #6c757d; /* muted */
    line-height: 1.4;
}

/* RIGHT SIDE RANDOM BACKGROUND */
.login-right {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 0;
}

.demo-content {
    padding-top: 44px;
}

@@media (max-width: 767.98px) {
    .login-right

{
    display: none;
}

.login-left {
    padding: 3rem 2rem;
}

.login-logo {
    left: 2rem;
}

.login-disclaimer {
    left: 2rem;
}

}

/* ---------------------------------------------------------------------------
   Delivery status pills.

   Modifier tokens come from DisplayHelpers.PhaseToken / DeploymentStatusToken -
   never hand-write one in a view. BadgeClass() still serves the rest of the
   portal; these exist because it maps a status *string* and had no entry for
   most delivery phases, so six of them rendered as the same dark badge.

   Deliberately the same tokens and palette as the admin console, so an operator
   and a customer looking at the same rollout see the same colours.
   --------------------------------------------------------------------------- */
.og-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

.og-status::before {
    content: "";
    flex: 0 0 auto;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

.og-status--lg {
    padding: 0.3rem 0.75rem;
    font-size: 0.82rem;
}

.og-status--pending {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #475569;
}

.og-status--queued {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}

.og-status--delivered {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #075985;
}

.og-status--accepted {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #3730a3;
}

.og-status--transferring {
    background: #fef3c7;
    border-color: #fde68a;
    color: #854d0e;
}

.og-status--applied {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #166534;
}

.og-status--verified {
    background: #ccfbf1;
    border-color: #99f6e4;
    color: #115e59;
}

.og-status--failed {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.og-status--expired {
    background: #ffedd5;
    border-color: #fed7aa;
    color: #9a3412;
}

.og-status--rolledback {
    background: #ede9fe;
    border-color: #ddd6fe;
    color: #5b21b6;
}

/* ---------------------------------------------------------------------------
   Progress meter: one stacked bar carrying updated / in progress / failed /
   skipped, instead of four separate numbers.
   --------------------------------------------------------------------------- */
.og-meter {
    display: flex;
    width: 100%;
    height: 0.5rem;
    overflow: hidden;
    background: #eef2f6;
    border-radius: 999px;
}

.og-meter--sm {
    height: 0.3rem;
}

.og-meter__seg {
    height: 100%;
    transition: width 0.35s ease;
}

.og-meter__seg--completed {
    background: #16a34a;
}

.og-meter__seg--inflight {
    background: #6366f1;
}

.og-meter__seg--failed {
    background: #dc2626;
}

.og-meter__seg--excluded {
    background: #cbd5e1;
}

.og-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.og-legend__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: #475569;
}

.og-legend__swatch {
    align-self: center;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 2px;
}

.og-legend__value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #0f172a;
}

/* ---------------------------------------------------------------------------
   Firmware operations page.
   --------------------------------------------------------------------------- */

/* Target mode: two labelled choices rather than a dropdown, because picking one
   device or a whole group is the decision the page exists for. */
.og-fw-choice {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.og-fw-choice__option {
    flex: 1 1 12rem;
    position: relative;
    min-width: 11rem;
}

.og-fw-choice__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.og-fw-choice__body {
    display: block;
    height: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
    cursor: pointer;
}

.og-fw-choice__option input:checked + .og-fw-choice__body {
    border-color: #4f46e5;
    background: #f8faff;
    box-shadow: inset 0 0 0 1px #4f46e5;
}

.og-fw-choice__option input:focus-visible + .og-fw-choice__body {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

.og-fw-choice__title {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: #0f172a;
}

.og-fw-choice__hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    color: #6c757d;
}

.og-fw-live {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #6c757d;
}

.og-fw-live__dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #16a34a;
}

.og-fw-live--paused .og-fw-live__dot {
    background: #94a3b8;
}

.og-fw-live--stale .og-fw-live__dot {
    background: #f59e0b;
}

/* One rollout = one row that opens, rather than a full card per campaign. */
.og-fw-run {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
}

.og-fw-run + .og-fw-run {
    margin-top: 0.75rem;
}

.og-fw-run__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    text-align: left;
}

.og-fw-run__head:hover {
    background: #f8fafc;
}

.og-fw-run__title {
    flex: 1 1 14rem;
    min-width: 0;
}

.og-fw-run__name {
    display: block;
    font-weight: 600;
    color: #0f172a;
}

.og-fw-run__scope {
    display: block;
    font-size: 0.78rem;
    color: #6c757d;
}

.og-fw-run__meter {
    flex: 0 1 12rem;
    min-width: 8rem;
}

.og-fw-run__counts {
    font-size: 0.78rem;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

.og-fw-run__body {
    padding: 0 1rem 1rem;
}

.og-fw-devices {
    max-height: 26rem;
    overflow: auto;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
}

.og-fw-devices table {
    margin-bottom: 0;
}

.og-fw-devices thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8f9fa;
    border-bottom: 1px solid #e2e8f0;
    color: #495057;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.og-fw-devices td {
    font-size: 0.82rem;
    vertical-align: middle;
}

.og-fw-devices tr[hidden] {
    display: none;
}

.og-fw-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.og-fw-chip {
    padding: 0.15rem 0.6rem;
    border: 1px solid #ced4da;
    border-radius: 999px;
    background: #fff;
    color: #343a40;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.5;
}

.og-fw-chip:hover {
    border-color: #adb5bd;
}

.og-fw-chip[aria-pressed="true"] {
    border-color: #4f46e5;
    background: #eef2ff;
    color: #3730a3;
}

.og-fw-chip__count {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

.og-fw-filter {
    max-width: 14rem;
}

.og-fw-empty {
    padding: 1.5rem 0.75rem;
    color: #6c757d;
    font-size: 0.85rem;
    text-align: center;
}

.og-fw-skipped {
    font-size: 0.8rem;
}

@media (max-width: 767.98px) {
    .og-fw-run__meter {
        flex: 1 1 100%;
    }

    .og-fw-devices {
        max-height: none;
    }
}