: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;
}