:root {
    --portal-bg: #f7fafc;
    --portal-text: #102a43;
    --portal-muted: #627d98;
    --portal-title: #102a43;
    --portal-primary: #ffffff;
    --portal-primary-contrast: #005f73;
    --portal-hero-bg1: #003b5c;
    --portal-hero-bg2: #0f8f83;
    --portal-hero-gradient-angle: 132deg;
    --portal-hero-gradient: linear-gradient(var(--portal-hero-gradient-angle), var(--portal-hero-bg1), var(--portal-hero-bg2));
    --portal-hero-bg: var(--portal-hero-gradient);
    --portal-hero-bg-image: none;
    --portal-hero-bg-size: cover;
    --portal-hero-bg-repeat: no-repeat;
    --portal-hero-bg-position: center center;
    --portal-hero-bg-opacity: 0.22;
    --portal-internal-hero-bg-opacity: 0.18;
    --portal-hero-overlay-color: #001a2c;
    --portal-hero-overlay-opacity: 0.12;
    --portal-internal-hero-overlay-opacity: 0.18;
    --portal-hero-title: #ffffff;
    --portal-hero-subtitle: #dff8f5;
    --portal-accent: #0f8f83;
    --portal-accent-contrast: #ffffff;
    --portal-link: #005f73;
    --portal-surface: #ffffff;
    --portal-surface-text: #102a43;
    --portal-border: #d9e2ec;
    --portal-footer-bg: #f7fafc;
    --portal-category-icon-color: #0f8f83;
    --portal-category-icon-bg: color-mix(in srgb, var(--portal-category-icon-color) 13%, #ffffff);
    --portal-category-count: #627d98;
    --portal-contact-phone-icon: #0f8f83;
    --portal-contact-email-icon: #2563eb;
    --portal-contact-hours-icon: #059669;
    --portal-field-bg: #ffffff;
    --portal-field-text: #102a43;
    --portal-form-bg: #ffffff;
    --portal-form-border: #d9e2ec;
}

body, html {
    color: #102a43;
    background-color:#f7fafc;
}

a {
    color: #005f73;   
}

a:hover {
    color: #005f73;   
}

nav.navbar {
    background-color: #ffffff !important;
}

nav.navbar a {
    color: #005f73;
}

nav.navbar a:hover {
    color: #005f73;
}

.navbar-nav li.nav-item a.nav-link {
    color: #005f73;
}

.navbar-nav li.nav-item a.nav-link.active {
    color: #0f8f83;

}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(0, 95, 115)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")   
}

.title-bar {
    background-color: #0f8f83;
    color: #ffffff;
}

.search-bar {
    background-color: #0f8f83;
}

.search-bar .form-control {
    background-color: #ffffff;
    color: #102a43;  
}

.breadcrumb-section .breadcrumb li {
    background-color: #ffffff !important;
    color: #005f73;  
}

.breadcrumb-section .breadcrumb li a {
    color: #005f73;  
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #9fb3c8;  
}

.breadcrumb-section .breadcrumb li:last-child a {
    color: #0f8f83;  
}

.btn-primary {
    background-color: #0f8f83 !important;
    color: #ffffff !important;
    border-color: transparent;
}

.btn-primary:active {
    background-color: #0f8f83 !important;
    color: #ffffff !important;
    border-color: transparent !important;
}


.btn-primary:hover {
    background-color: #0f8f83 !important;
    border-color: transparent !important;
}

.btn-primary:disabled {
    background-color: #0f8f83 !important;
    border-color: transparent !important;
    opacity: 0.5 !important;
}

.btn-secondary {
    background-color: #ffffff !important;
    color: #003b5c !important;
    border-color: transparent !important;
}

.btn-secondary:active {
    background-color: #ffffff !important;
    color: #003b5c !important;
    border-color: transparent !important;
}

.badge.bg-primary {
    background-color: #0f8f83 !important;
}


.category-color, .category-color a {
    color: #102a43;
}

.folder-color , .folder-color a {
    color: #005f73;
}

.folder-color .bg-primary {
    background-color: #005f73 !important;
}

.folder-solutions-list li {
    color: #005f73;
}

.links-color {
    color: #005f73;
}

.solution-page .solution-title {
    color: #102a43;
}

.solution-resume {
    color: #627d98 !important;
}

.tickets-link-color {
    color: #005f73;
}

.tickets-search-bar .nav-tabs .nav-item .nav-link.active {
    border-bottom-color: #0f8f83 !important;
    background: transparent;
}

.customer-service-boxes .box, .card {
    background-color: #ffffff !important;
    border-color:  #d9e2ec !important;
    color:  #102a43 !important;
}

.form {
    background-color: #ffffff !important;
    border-color:  #d9e2ec !important;
    color:  #102a43 !important;
}

.text-secundary-muted {
    color: #627d98 !important;
}

#ticket-form .form-label, .form .form-label {
    color:  #102a43 !important;
}

.tickets-search-bar .form-control, #ticket-form .form-control, .form .form-control , .ticket-reply .form-control ,
    .tickets-search-bar .form-select , #ticket-form .form-select, .form .form-select {
    background-color: #ffffff !important;
    border-color:  #bcccdc !important;
    color:  #102a43 !important;
}

.table th, .table td {
    background-color: transparent !important;
}

.portal-modern-layout .breadcrumb-section .breadcrumb li {
    background-color: transparent !important;
    color: var(--portal-muted) !important;
}

.portal-modern-layout .breadcrumb-section .breadcrumb li a {
    color: var(--portal-muted) !important;
}

.portal-modern-layout .breadcrumb-section .breadcrumb li:last-child a {
    color: var(--portal-title) !important;
}

.portal-modern-layout nav.navbar a.portal-ticket-btn {
    background-color: var(--portal-accent) !important;
    color: var(--portal-accent-contrast) !important;
    border-color: var(--portal-accent) !important;
}

.portal-modern-layout nav.navbar .portal-secondary-action-btn {
    background-color: var(--portal-surface) !important;
    color: #005f73 !important;
    border-color: color-mix(in srgb, #005f73 44%, var(--portal-border)) !important;
}

.portal-modern-layout nav.navbar .portal-secondary-action-btn:hover {
    background-color: color-mix(in srgb, #005f73 7%, var(--portal-surface)) !important;
    color: #005f73 !important;
    border-color: #005f73 !important;
}

.portal-modern-layout nav.navbar .portal-logout-btn {
    color: var(--portal-accent) !important;
    border-color: color-mix(in srgb, var(--portal-accent) 36%, var(--portal-border)) !important;
}

.portal-modern-layout nav.navbar .portal-logout-btn:hover {
    background-color: color-mix(in srgb, var(--portal-accent) 7%, var(--portal-surface)) !important;
    color: var(--portal-accent) !important;
    border-color: var(--portal-accent) !important;
}

.portal-status-page {
    background: linear-gradient(180deg, #f3f6fa 0%, #ffffff 62%, #f7f9fc 100%);
    min-height: 620px;
    padding: 24px 0 64px;
}

.portal-status-shell {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(208, 213, 221, 0.7);
    border-radius: 14px;
    box-shadow: 0 22px 55px rgba(16, 24, 40, 0.10);
    padding: 22px;
}

.portal-status-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.portal-status-topbar h1 {
    margin: 0;
    color: var(--portal-title);
    font-size: 15px;
    font-weight: 700;
}

.portal-status-kicker {
    margin: 0 0 4px;
    color: var(--portal-muted);
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
}

.portal-status-summary {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 22px;
    min-height: 54px;
    padding: 12px 16px;
    text-align: center;
}

.portal-status-summary strong {
    font-size: 15px;
    font-weight: 700;
}

.portal-status-summary-alert {
    background: #fff3f0;
    border-color: #ffd5cc;
    color: #e5483f;
}

.portal-status-summary-ok {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
}

.portal-status-summary-chevron {
    font-size: 22px;
    font-weight: 400;
    margin-right: auto;
}

.portal-status-summary-dot {
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    margin-left: -2px;
    width: 7px;
}

.portal-status-summary-alert .portal-status-summary-dot {
    background: #f04438;
}

.portal-status-summary-ok .portal-status-summary-dot {
    background: #17b26a;
}

.portal-status-section-title {
    align-items: center;
    color: #344054;
    display: flex;
    font-size: 13px;
    margin-bottom: 12px;
}

.portal-status-services {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-status-service,
.portal-status-comment,
.portal-status-empty {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 8px;
    color: var(--portal-surface-text);
}

.portal-status-service {
    align-items: center;
    border-color: #edf1f7;
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.03);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 9px 12px;
}

.portal-status-monitor-history-wrap {
    display: grid;
    gap: 6px;
    grid-column: 1 / -1;
}

.portal-status-monitor-history-meta {
    align-items: center;
    color: var(--portal-muted);
    display: flex;
    font-size: 11px;
    gap: 10px;
    justify-content: space-between;
    line-height: 16px;
}

.portal-status-monitor-history-meta strong {
    color: var(--portal-muted);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.portal-status-monitor-history {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(30, minmax(0, 1fr));
    min-height: 18px;
}

.portal-status-monitor-day {
    border-radius: 999px;
    display: block;
    height: 14px;
    min-width: 5px;
    position: relative;
    transition: box-shadow 140ms ease, transform 140ms ease;
    z-index: 1;
}

.portal-status-monitor-day:hover {
    box-shadow: 0 8px 16px rgba(16, 24, 40, 0.18);
    transform: translateY(-1px) scale(1.08);
    z-index: 3;
}

.portal-status-monitor-day::after {
    background: #101828;
    border-radius: 7px;
    bottom: calc(100% + 10px);
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.2);
    color: #ffffff;
    content: attr(data-tooltip);
    font-family: inherit;
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    font-weight: 600;
    left: 50%;
    line-height: 17px;
    max-width: min(260px, 72vw);
    min-width: 190px;
    opacity: 0;
    padding: 8px 10px;
    pointer-events: none;
    position: absolute;
    text-align: center;
    transform: translate(-50%, 5px);
    transition: opacity 140ms ease, transform 140ms ease;
    visibility: hidden;
    white-space: normal;
    width: max-content;
    word-break: normal;
    overflow-wrap: anywhere;
    z-index: 1000;
}

.portal-status-monitor-day::before {
    border: 6px solid transparent;
    border-top-color: #101828;
    bottom: calc(100% - 1px);
    content: "";
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    transition: opacity 140ms ease;
    visibility: hidden;
    z-index: 1000;
}

.portal-status-monitor-day:hover::after,
.portal-status-monitor-day:hover::before {
    opacity: 1;
    visibility: visible;
}

.portal-status-monitor-day:hover::after {
    transform: translate(-50%, 0);
}

.portal-status-monitor-day:nth-child(-n + 4)::after {
    left: 0;
    text-align: left;
    transform: translate(0, 5px);
}

.portal-status-monitor-day:nth-child(-n + 4)::before {
    left: 50%;
    transform: translateX(-50%);
}

.portal-status-monitor-day:nth-child(-n + 4):hover::after {
    transform: translate(0, 0);
}

.portal-status-monitor-day:nth-last-child(-n + 4)::after {
    left: auto;
    right: 0;
    text-align: right;
    transform: translate(0, 5px);
}

.portal-status-monitor-day:nth-last-child(-n + 4)::before {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

.portal-status-monitor-day:nth-last-child(-n + 4):hover::after {
    transform: translate(0, 0);
}

.portal-status-monitor-day-operational {
    background: #17b26a;
}

.portal-status-monitor-day-degraded {
    background: #f79009;
}

.portal-status-monitor-day-unavailable {
    background: #f04438;
}

.portal-status-monitor-day-maintenance {
    background: #2e90fa;
}

.portal-status-monitor-day-no_data {
    background: #e4e7ec;
}

.portal-status-service-main {
    align-items: center;
    display: flex;
    gap: 11px;
    min-width: 0;
}

.portal-status-service-mark {
    align-items: center;
    background: color-mix(in srgb, currentColor 13%, #ffffff);
    border: 1px solid color-mix(in srgb, currentColor 20%, #e4e7ec);
    border-radius: 5px;
    color: #ff4000;
    display: inline-flex;
    flex: 0 0 28px;
    font-size: 14px;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.portal-status-service h2,
.portal-status-timeline h2,
.portal-status-comment h3 {
    margin: 0;
    color: var(--portal-title);
}

.portal-status-service h2 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-status-service p,
.portal-status-comment p {
    margin: 6px 0 0;
}

.portal-status-service small,
.portal-status-comment time {
    display: block;
    margin-top: 3px;
    color: var(--portal-muted);
    font-size: 11px;
}

.portal-status-service p {
    color: var(--portal-muted);
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.portal-status-dot {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    height: 18px;
    justify-content: center;
    width: 18px;
}

.portal-status-dot::after {
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

.portal-status-operational {
    color: #05603a;
    background: #d1fadf;
}

.portal-status-dot-operational {
    background: #32b76a;
}

.portal-status-dot-operational::after {
    content: "✓";
}

.portal-status-maintenance,
.portal-status-investigating {
    color: #93370d;
    background: #ffead5;
}

.portal-status-dot-maintenance,
.portal-status-dot-investigating {
    background: #f79009;
}

.portal-status-dot-maintenance::after,
.portal-status-dot-investigating::after {
    content: "!";
}

.portal-status-degraded,
.portal-status-partial_outage {
    color: #854a0e;
    background: #fef0c7;
}

.portal-status-dot-degraded,
.portal-status-dot-partial_outage {
    background: #f79009;
}

.portal-status-dot-degraded::after,
.portal-status-dot-partial_outage::after {
    content: "!";
}

.portal-status-major_outage {
    color: #912018;
    background: #fee4e2;
}

.portal-status-discontinued,
.portal-status-temporarily_unavailable {
    color: #344054;
    background: #f2f4f7;
}

.portal-status-dot-major_outage {
    background: #f04438;
}

.portal-status-dot-major_outage::after {
    content: "−";
}

.portal-status-dot-discontinued,
.portal-status-dot-temporarily_unavailable {
    background: #98a2b3;
}

.portal-status-dot-discontinued::after,
.portal-status-dot-temporarily_unavailable::after {
    content: "•";
}

.portal-status-timeline {
    margin-top: 28px;
}

.portal-status-timeline-heading h2 {
    font-size: 22px;
    margin-bottom: 12px;
}

.portal-status-comment {
    align-items: start;
    display: grid;
    gap: 14px;
    grid-template-columns: 155px minmax(0, 1fr) auto;
    margin-bottom: 10px;
    border-left-width: 4px;
    padding: 14px 16px;
}

.portal-status-comment-info {
    border-left-color: #667085;
}

.portal-status-comment-maintenance {
    border-left-color: #b54708;
}

.portal-status-comment-degraded {
    border-left-color: #b42318;
}

.portal-status-comment-incident {
    border-left-color: #9e165f;
}

.portal-status-comment-critical {
    border-left-color: #7a271a;
}

.portal-status-comment-normalized {
    border-left-color: #079455;
}

.portal-status-comment .portal-status-badge {
    margin-top: 0;
}

.portal-status-comment h3 {
    font-size: 15px;
}

.portal-status-comment-body small {
    color: var(--portal-muted);
    display: block;
    font-size: 12px;
    margin-top: 3px;
}

.portal-status-service-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 7px;
}

.portal-status-service-badges span {
    background: color-mix(in srgb, var(--portal-link) 9%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--portal-link) 18%, var(--portal-border));
    border-radius: 999px;
    color: var(--portal-link);
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 8px;
}

.portal-status-severity {
    display: inline-flex;
    margin-top: 6px;
    margin-right: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--portal-muted);
}

.portal-status-empty {
    padding: 18px;
    color: var(--portal-muted);
}

.portal-status-more {
    margin-top: 8px;
    background: var(--portal-accent) !important;
    color: var(--portal-accent-contrast) !important;
}

@media (max-width: 767px) {
    .portal-status-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .portal-status-services,
    .portal-status-comment {
        grid-template-columns: 1fr;
    }

    .portal-status-badge {
        min-width: 0;
    }
}