@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";

.btn-clickup img {
height:16px;
object-fit:contain;
width:16px
}

.col-3 {
flex-shrink:0;
max-width:var(--sidebar-width)
}

.col-9 {
flex:1 0 auto;
flex-grow:1;
margin-left:var(--sidebar-width);
max-width:none;
overflow-y:auto;
padding:2rem;
padding-top:calc(2rem + var(--dev-banner-height));
transition:padding-top var(--transition-speed);
width:calc(100% - var(--sidebar-width))
}

.col-9.expanded {
margin-left:60px
}

.container {
margin:0 auto;
max-width:100%;
padding:0 1rem
}

#currentWaveName {
    font-weight: bold;
    color: #005e61;  /* var(--brand-dark-petroleum) */
    margin-bottom: 15px;
  }

#waveLabelsContainer {
position: relative;
height: 20px;
}

.wave-label {
position: absolute;
text-align: center;
font-size: 12px;
font-weight: bold;
color: #005e61;  /* var(--brand-dark-petroleum) */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.container-fluid {
align-items:stretch;
display:flex;
flex-direction:column;
min-height:100vh
}

.cool-sand-bright-pink {
background-color:var(--brand-cool-sand);
color:var(--brand-bright-pink)
}

.cool-sand-cool-blue {
background-color:var(--brand-cool-sand);
color:var(--brand-light-blue)
}

.cool-sand-dusty-purple {
background-color:var(--brand-cool-sand);
color:var(--brand-dusty-purple)
}

.dark-petroleum-cool-sand {
background-color:var(--brand-dark-petroleum);
color:var(--brand-cool-sand)
}

.dark-petroleum-fresh-blue {
background-color:var(--brand-dark-petroleum);
color:var(--brand-fresh-blue)
}

.dark-petroleum-g-icon {
background-color:var(--brand-dark-petroleum);
color:var(--brand-g-icon)
}

.fresh-blue-cool-sand {
background-color:var(--brand-fresh-blue);
color:var(--brand-cool-sand)
}

.fresh-blue-dark-petroleum {
background-color:var(--brand-fresh-blue);
color:var(--brand-dark-petroleum)
}

.fresh-blue-g-icon {
background-color:var(--brand-fresh-blue);
color:var(--brand-g-icon)
}

.mt-4 {
margin-top:1.5rem!important
}

.row.flex-grow-1 {
display:flex;
flex-grow:1;
flex-wrap:nowrap;
margin:0 auto;
max-width:100%;
width:100%
}

:root {
--background-color:var(--light-background-color);
--base-font-size:14px;
--border-color:var(--light-border-color);
--border-radius:.375rem;
--box-shadow:0 2px 4px #0000001a;
--box-shadow-hover:0 4px 6px #0000001a;
--brand-black:#000;
--brand-bright-pink:#E83368;
--brand-bright-pink-50:#f399b4;
--brand-bright-pink-75:#ee5f89;
--brand-cool-mint:#CBDDD6;
--brand-cool-mint-50:#e5f0eb;
--brand-cool-mint-75:#d9e7e2;
--brand-cool-sand:#CBDDD6;
--brand-dark-petroleum:#005E61;
--brand-dark-petroleum-50:#80a0a0;
--brand-dark-petroleum-75:#407f81;
--brand-dusty-purple:#70658F;
--brand-dusty-purple-50:#b8b4c7;
--brand-dusty-purple-75:#9089ac;
--brand-fresh-blue:#00ACA5;
--brand-fresh-blue-50:#80d9d2;
--brand-fresh-blue-75:#40c3be;
--brand-g-icon:#E83368;
--brand-light-blue:#4CC3D1;
--brand-light-blue-50:#a6e1e8;
--brand-light-blue-75:#79d2dd;
--brand-soft-green:#94C8B0;
--brand-soft-green-50:#cae5da;
--brand-soft-green-75:#b0d7c5;
--brand-web-copy:#798293;
--brand-white:#FFF;
--brand-yellow:#F9B122;
--brand-yellow-50:#fcd891;
--brand-yellow-75:#fac661;
--danger-color:var(--light-danger-color);
--dev-banner-height:0;
--h1-size:1.75rem;
--h2-size:1.375rem;
--h3-size:1.125rem;
--hover-color:var(--light-hover-color);
--info-color:var(--light-info-color);
--light-background-color:var(--brand-white);
--light-border-color:#dee2e6;
--light-danger-color:var(--brand-bright-pink);
--light-hover-color:#e9ecef;
--light-info-color:var(--brand-cool-mint);
--light-primary-color:var(--brand-dark-petroleum);
--light-secondary-color:var(--brand-fresh-blue);
--light-success-color:var(--brand-soft-green);
--light-text-color:var(--brand-web-copy);
--light-warning-color:var(--brand-yellow);
--min-contrast-ratio:4.5;
--p-size:.875rem;
--primary-color:var(--light-primary-color);
--secondary-color:var(--light-secondary-color);
--sidebar-width:250px;
--small-size:.7rem;
--success-color:var(--light-success-color);
--text-color:var(--light-text-color);
--transition-speed:.3s;
--warning-color:var(--light-warning-color)
}

body {
-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;
background-color:var(--background-color);
color:var(--text-color);
display:flex;
flex-direction:column;
font:;
font-family:"var(--base-font-size)/1.4 Inter",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
font-style:normal;
font-variant:normal;
font-weight:normal;
padding-top:var(--dev-banner-height);
transition:background-color var(--transition-speed),color var(--transition-speed);
transition:padding-top var(--transition-speed)
}

body,#sidebar {
transition:padding-top var(--transition-speed)
}

body.has-dev-banner {
--dev-banner-height:50px
}

h1 {
font-size:var(--h1-size);
font-weight:700;
margin-bottom:1.5rem
}

h2 {
font-size:var(--h2-size);
font-weight:600;
margin-bottom:1.25rem
}

h3 {
font-size:var(--h3-size);
font-weight:600;
margin-bottom:1rem
}

p {
font-size:var(--p-size);
margin-bottom:1rem
}

@media (max-width: 768px) {
#dev-banner .commit-message {
display:none
}
}

@media (max-width: 576px) {
#dev-banner .commit-message,#dev-banner .btn-clickup {
display:none
}
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background-color: #f5f5f5;
}

#content {
    margin-left: var(--sidebar-width);
    padding-top: calc(2rem + var(--dev-banner-height));
    transition: margin-left var(--transition-speed), width var(--transition-speed); /* Add transition for width */
    width: calc(100% - var(--sidebar-width)); /* Adjust width */
}

#content.expanded {
    margin-left: 60px;
    width: calc(100% - 60px); /* Adjust width when sidebar is collapsed */
}

#notification-area {
border-left:4px solid;
margin-bottom:1rem
}

#notification-area.alert-danger,.toast.danger {
border-left-color:var(--brand-bright-pink)
}

#notification-area.alert-info,.toast.info {
border-left-color:var(--brand-light-blue)
}

#notification-area.alert-success,.toast.success {
border-left-color:var(--brand-soft-green)
}

#notification-area.alert-warning,.toast.warning {
border-left-color:var(--brand-yellow)
}

/* Sidebar styles */
#sidebar {
    background-color: var(--brand-white);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: 100vh;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: var(--dev-banner-height, 0);
    transition: width var(--transition-speed), top var(--transition-speed); /* Apply transition to width */
    width: var(--sidebar-width);
    z-index: 1000;
}

#sidebar.collapsed {
    width: 60px;
}

#sidebar .nav-link {
    align-items: center;
    display: flex;
    transition: padding var(--transition-speed); /* Apply transition to padding */
}

#sidebar .nav-link i {
    font-size: 1.2rem;
    min-width: 30px;
    transition: margin-right var(--transition-speed); /* Apply transition to margin-right */
}

#sidebar .navbar-nav {
    flex-grow: 1;
    overflow-y: auto;
}

#sidebar .sidebar-text {
    overflow: hidden;
    transition: opacity var(--transition-speed), width var(--transition-speed); /* Apply transition to opacity and width */
    white-space: nowrap;
}

#sidebar > .d-flex {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--dev-banner-height));
    min-height: 0;
}

#sidebar-toggle {
    margin-left: 10px; /* Adjust as needed */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

#sidebar.collapsed #sidebar-toggle i {
    transform: rotate(180deg);
}

#sidebar.collapsed .env-full {
    display: none;
}

#sidebar.collapsed .env-short {
    display: inline;
}

#sidebar.collapsed .sidebar-text {
    display: none;
    opacity: 0;
    width: 0;
}

#sidebar.collapsed .user-avatar,
#sidebar.collapsed .bottom-buttons .btn i,
#sidebar.collapsed .sidebar-bottom .nav-link i {
    margin-right: 0;
}

#sidebar.collapsed .user-info {
    justify-content: center;
}

#sidebar::-webkit-scrollbar {
    width: 6px;
}

#sidebar::-webkit-scrollbar-thumb {
    background-color: var(--brand-cool-mint);
    border-radius: 3px;
}

#sidebar::-webkit-scrollbar-track {
    background-color: transparent;
}

.accordion-body {
background-color:var(--brand-white);
border:1px solid var(--brand-cool-mint)
}

.accordion-button {
background-color:var(--brand-cool-mint);
border:none;
color:var(--brand-dark-petroleum)
}

.accordion-button::after {
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23005E61'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.accordion-button:focus {
border-color:var(--brand-fresh-blue);
box-shadow:0 0 0 .25rem #00aca540
}

.accordion-button:not(.collapsed),.bg-dark-petroleum {
background-color:var(--brand-dark-petroleum);
color:var(--brand-white)
}

.accordion-button:not(.collapsed)::after {
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
}

.alert {
border:1px solid transparent;
border-radius:var(--border-radius);
margin-bottom:1rem;
padding:1rem
}

.alert-danger {
background-color:var(--brand-bright-pink-50);
border-color:var(--brand-bright-pink);
color:var(--brand-dark-petroleum)
}

.alert-dismissible .btn-close {
color:var(--brand-dark-petroleum);
padding:.5rem;
position:absolute;
top:50%;
transform:translateY(-50%)
}

.alert-success {
background-color:var(--brand-soft-green-50);
border-color:var(--brand-soft-green);
color:var(--brand-dark-petroleum)
}

.bg-bright-pink {
background-color:var(--brand-bright-pink);
color:var(--brand-white)
}

.bg-cool-mint,.page-link:hover,.navbar-nav .nav-item .nav-link:hover,.navbar-nav .nav-item .nav-link.active-link,.input-group .btn-outline-secondary:hover {
background-color:var(--brand-cool-mint);
color:var(--brand-dark-petroleum)
}

.bg-dusty-purple {
background-color:var(--brand-dusty-purple);
color:var(--brand-white)
}

.bg-fresh-blue {
background-color:var(--brand-fresh-blue);
color:var(--brand-white)
}

.bg-yellow {
background-color:var(--brand-yellow);
color:var(--brand-dark-petroleum)
}

.bottom-buttons {
display:flex;
flex-direction:column;
gap:.5rem
}

/* .bottom-buttons .btn i,.sidebar-bottom .nav-link i {
display:flex;
justify-content:center;
margin-right:.5rem;
min-width:30px
} */

.bottom-buttons .btn {
align-items:center;
display:flex;
justify-content:flex-start;
padding:.5rem 1rem;
width:100%
}

.breadcrumb {
background-color:transparent;
margin-bottom:1.5rem;
padding:.5rem 0
}

.breadcrumb-item + .breadcrumb-item::before {
color:var(--brand-fresh-blue);
content:"›"
}

.breadcrumb-item a {
color:var(--brand-dark-petroleum);
text-decoration:none;
transition:color .3s ease
}

.breadcrumb-item.active {
color:var(--brand-web-copy)
}

.btn {
background-color:transparent;
border:1px solid transparent;
border-radius:.175rem;
color:#212529;
display:inline-block;
font-size:.9rem;
font-weight:400;
line-height:1.25;
padding:.375rem .75rem;
text-align:center;
transition:color .75s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
user-select:none;
vertical-align:middle
}

.btn-outline-secondary,.input-group .btn-outline-secondary {
border-color:var(--brand-cool-mint);
color:var(--brand-dark-petroleum)
}

.btn-outline-secondary:hover {
background-color:var(--brand-fresh-blue);
border-color:var(--brand-fresh-blue);
color:var(--brand-white)
}

.btn-primary,.page-item.active .page-link {
background-color:var(--brand-dark-petroleum);
border-color:var(--brand-dark-petroleum);
color:var(--brand-white)
}

.btn-primary:hover,.btn-primary:focus {
background-color:var(--brand-dark-petroleum-75);
border-color:var(--brand-dark-petroleum-75)
}

.btn-secondary {
background-color:var(--brand-fresh-blue);
background-color:var(--brand-fresh-blue);
border-color:var(--brand-fresh-blue);
border-color:var(--brand-fresh-blue);
color:var(--brand-white)
}

.btn-secondary:hover,.btn-secondary:focus {
background-color:var(--brand-fresh-blue-75);
border-color:var(--brand-fresh-blue-75)
}

.card {
background-color:var(--brand-white);
border:1px solid var(--border-color);
border-radius:var(--border-radius);
box-shadow:var(--box-shadow);
margin-bottom:1.5rem;
transition:box-shadow .3s ease
}

.card-body {
padding:1.5rem
}

.card-body-kpi {
align-items:center;
display:flex;
flex-direction:column;
height:150px;
justify-content:center;
position:relative
}

.card-header {
background-color:var(--brand-cool-mint);
border-bottom:1px solid var(--border-color);
color:var(--brand-dark-petroleum);
font-size:var(--h3-size);
font-weight:600;
padding:1.25rem 1.5rem
}

.card-kpi {
background-color:var(--brand-white);
border:1px solid var(--brand-cool-mint);
border-radius:8px;
height:100%
}

.card:hover {
box-shadow:var(--box-shadow-hover)
}

.column-toggle {
position:relative
}

.column-toggle-item {
align-items:center;
display:flex;
padding:.25rem 0
}

.column-toggle-item label {
margin-bottom:0;
margin-left:.5rem
}

.column-toggle-menu {
background-color:var(--brand-white);
border:1px solid var(--brand-cool-mint);
border-radius:var(--border-radius);
display:none;
min-width:200px;
padding:.5rem;
position:absolute;
right:0;
top:100%;
z-index:1000
}

.column-toggle-menu.show {
display:block
}

.custom-breadcrumb-margin {
margin-top:-20px
}

.custom-breadcrumb-padding {
padding-top:0
}

.dropdown-item {
background-color:transparent;
border:0;
clear:both;
color:#212529;
display:block;
font-weight:400;
padding:.25rem 1.5rem;
text-align:inherit;
white-space:nowrap;
width:100%
}

.dropdown-menu {
min-width:300px
}

/* Adjust the width of the dropdown menu */
#columnToggleMenu {
    min-width: 200px; /* Adjust this value as needed */
}

/* Adjust the font size of the column names */
#columnToggleMenu .form-check-label {
    font-size: 14px; /* Adjust this value as needed */
}

.fade-transition {
opacity:1;
transition:opacity var(--transition-speed)
}

.fade-transition.d-none {
opacity:0
}

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

.form-group {
margin-bottom:1.5rem
}

.form-switch .form-check-input {
background-color:var(--brand-cool-mint);
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,0,0,0.25%29'/%3e%3c/svg%3e");
background-position:left center;
border-color:var(--brand-fresh-blue);
border-radius:2em;
margin-left:-2.5em;
transition:background-position .15s ease-in-out;
width:2em
}

.form-switch .form-check-input:checked {
background-color:var(--brand-fresh-blue);
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
background-position:right center;
border-color:var(--brand-fresh-blue)
}

.icon {
background-color:var(--brand-dark-petroleum);
border-radius:50%;
color:var(--brand-white);
padding:.5rem
}

.icon-secondary {
background-color:var(--brand-fresh-blue);
border-radius:50%;
color:var(--brand-white);
padding:.5rem
}

.input-group .btn {
align-items:center;
display:flex;
justify-content:center
}

.input-group .btn i {
font-size:1rem
}

.input-group .form-select,.input-group .form-control {
border-color:var(--brand-cool-mint)
}

.kpi-card {
animation:popIn .5s forwards;
animation-delay:var(--animation-delay,0s);
background-color:var(--brand-white);
border:none;
box-shadow:0 2px 6px #005e611a;
opacity:0;
transform:translateY(20px);
transition:transform var(--transition-speed),box-shadow var(--transition-speed)
}

.kpi-card .card-body {
padding:1rem
}

.kpi-card:hover {
box-shadow:0 4px 12px #005e6133;
transform:translateY(-5px)
}

.kpi-counter {
color:var(--brand-dark-petroleum);
font-size:1.5rem;
margin-bottom:.2rem
}

.kpi-icon {
color:var(--brand-dark-petroleum);
font-size:2.5rem;
margin-bottom:.5rem
}

.kpi-link {
color:inherit;
text-decoration:none
}

.logout-button {
background-color:var(--brand-bright-pink);
border:none;
border-radius:var(--border-radius);
color:var(--brand-white);
margin-top:1rem;
padding:.5rem;
transition:background-color .3s ease;
width:100%
}

.logout-button:hover {
background-color:var(--brand-bright-pink-75)
}

.matrix-canvas {
height:100%;
left:0;
opacity:0;
pointer-events:none;
position:absolute;
top:0;
transition:opacity var(--transition-speed);
width:100%
}

.menu-item {
overflow:hidden;
position:relative
}

.menu-item:hover .matrix-canvas,.menu-item .nav-link.active-link .matrix-canvas {
opacity:.2
}

.nav-separator {
background-color:var(--border-color);
height:1px;
margin:.5rem 1rem
}

.navbar-brand {
align-items:center;
border-bottom:1px solid var(--border-color);
color:var(--brand-dark-petroleum);
display:flex;
font-size:1.125rem;
font-weight:600;
padding:.75rem 1rem;
text-decoration:none
}

.navbar-nav {
display:flex;
flex-direction:column;
flex-grow:1;
padding:.5rem 0
}

.navbar-nav .nav-item {
margin-bottom:.25rem
}

.navbar-nav .nav-item .nav-link {
align-items:center;
border-radius:0;
color:var(--brand-web-copy);
display:flex;
font-size:var(--base-font-size);
font-weight:400;
padding:.5rem 1rem;
transition:background-color var(--transition-speed),color var(--transition-speed)
}

.navbar-nav .nav-item .nav-link i {
color:var(--brand-fresh-blue);
margin-right:.5rem;
text-align:center;
width:1.25rem
}

.navbar-nav .nav-item .nav-link.active-link {
border-left:3px solid var(--brand-dark-petroleum);
font-weight:600
}

.navbar-nav .nav-item .nav-link.disabled {
color:var(--brand-web-copy);
font-size:var(--base-font-size);
font-weight:500;
opacity:.6
}

.navbar-nav .nav-link {
font-size:var(--base-font-size);
font-weight:400
}

.page-item {
margin:0 .25rem
}

.page-link {
border:1px solid var(--border-color);
border-radius:var(--border-radius);
color:var(--brand-dark-petroleum);
padding:.5rem .75rem;
text-decoration:none;
transition:background-color .3s ease,color .3s ease
}

.pagination {
display:flex;
list-style:none;
margin:1.5rem 0;
padding:0
}

/* Sidebar bottom styles */
.sidebar-bottom {
    background-color: var(--brand-cool-mint-50);
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    padding: 1rem;
}

.sidebar-bottom .nav-item {
    margin-bottom: 0.5rem;
}

.sidebar-bottom .nav-link {
    border-radius: var(--border-radius);
    /* padding: 0.5rem 0.75rem; */
    margin-top: 10px;
    gap: 1rem;
    transition: background-color 0.3s ease;
}

.sidebar-bottom .nav-link i {
    margin-right: 0.5rem;
    text-align: center;
    width: 1.25rem;
}

.sidebar-bottom .nav-link:hover {
    background-color: var(--brand-cool-mint);
}

.sidebar-content {
    height: 100%;
    overflow-x: hidden;
}

.sidebar-toggle-btn {
    align-items: center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 2px 4px #0000001a;
    display: flex;
    height: 40px;
    justify-content: center;
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    width: 40px;
}

.sidebar.collapsed .sidebar-toggle-btn i {
    transform: rotate(180deg);
}

.sidebar-toggle-btn {
align-items:center;
background-color:#fff;
border:1px solid #ddd;
border-radius:50%;
box-shadow:0 2px 4px #0000001a;
display:flex;
height:40px;
justify-content:center;
position:absolute;
right:-20px;
top:50%;
transform:translateY(-50%);
transition:transform .3s ease;
width:40px
}

.sidebar.collapsed .sidebar-toggle-btn i {
transform:rotate(180deg)
}

.status-active {
background-color:var(--brand-soft-green)
}

.status-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-circle.active {
    background-color: green;
}

.status-circle.inactive {
    background-color: red;
}

.status-inactive {
background-color:var(--brand-bright-pink)
}

.subscription-header {
align-items:center;
display:flex;
justify-content:space-between
}

.subscription-header .info {
flex-grow:1
}

.subscription-header h5 {
color:var(--brand-dark-petroleum);
font-size:1.25rem
}

.subscriptions-container {
max-height:calc(100vh - 50px);
overflow-y:auto
}

.table {
border:1px solid var(--border-color);
border-collapse:separate;
border-radius:var(--border-radius);
border-spacing:0;
box-shadow:var(--box-shadow);
font-size:.9rem;
font-size:calc(12px + 0.1vw);
overflow:hidden;
width:100%
}

.table .btn {
transition:all .2s ease-in-out
}

.table .btn + .btn {
margin-left:.25rem
}

.table .btn i {
font-size:.8rem
}

.table .btn-danger {
background-color:var(--brand-bright-pink);
border-color:var(--brand-bright-pink);
color:var(--brand-white)
}

.table .btn-danger:hover {
background-color:var(--brand-bright-pink-75);
border-color:var(--brand-bright-pink-75)
}

.table .btn-sm {
font-size:.75rem;
padding:.25rem .5rem
}

.table .btn-warning {
background-color:var(--brand-yellow);
border-color:var(--brand-yellow);
color:var(--brand-dark-petroleum)
}

.table .btn-warning:hover {
background-color:var(--brand-yellow-75);
border-color:var(--brand-yellow-75)
}

.table .btn:focus {
box-shadow:0 0 0 .2rem #00aca540
}

.table tbody td {
padding:.5rem .75rem;
vertical-align:middle
}

.table tbody tr {
border-bottom:1px solid var(--brand-cool-mint-50)
}

.table tbody tr:hover {
background-color:var(--brand-cool-mint-50)
}

.table th,.table td {
border-bottom:1px solid var(--border-color);
padding:1rem
}

.table thead th {
background-color:var(--brand-cool-mint);
color:var(--brand-dark-petroleum);
font-size:var(--small-size);
font-weight:700;
letter-spacing:.5px;
padding:.5rem .75rem;
text-transform:uppercase
}

.text-bright-pink {
color:var(--brand-bright-pink)
}

.text-dark-petroleum,.form-switch .form-check-label {
color:var(--brand-dark-petroleum)
}

.text-dusty-purple {
color:var(--brand-dusty-purple)
}

.text-fresh-blue,.breadcrumb-item a:hover {
color:var(--brand-fresh-blue)
}

.text-yellow {
color:var(--brand-yellow)
}

.toast {
backdrop-filter:blur(10px);
background-color:var(--brand-white);
border:1px solid var(--brand-cool-mint);
box-shadow:0 .25rem .75rem #0000001a;
color:var(--brand-dark-petroleum);
margin-bottom:.75rem;
max-width:350px;
opacity:0;
overflow:hidden;
position:relative;
transform:translateX(100%);
transition:opacity var(--transition-speed),transform var(--transition-speed);
width:100%
}

.toast-body {
padding:.75rem
}

.toast-container {
align-items:flex-end;
display:flex;
flex-direction:column;
position:fixed;
right:1rem;
top:1rem;
z-index:1050
}

.toast-header {
align-items:center;
background-clip:padding-box;
background-color:rgba(var(--brand-cool-mint),0.85);
border-bottom:1px solid var(--brand-cool-mint);
color:var(--brand-dark-petroleum);
display:flex;
padding:.5rem .75rem
}

.toast-icon {
color:var(--brand-fresh-blue);
font-size:1.25rem;
margin-right:.5rem
}

.toast-progress {
background-color:var(--brand-fresh-blue);
bottom:0;
height:4px;
left:0;
position:absolute;
transition: width 0.1s linear;
width:0
}

.toast.show {
opacity:1;
transform:translateX(0)
}

.toast.showing {
opacity:1
}

.toast.success,.toast.danger,.toast.warning,.toast.info {
border-left:4px solid
}

.user-avatar {
align-items:center;
background-color:var(--brand-fresh-blue);
border-radius:50%;
color:var(--brand-white);
display:flex;
font-weight:700;
height:40px;
justify-content:center;
margin-right:.75rem;
min-width:40px;
width:40px
}

.user-avatar img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.avatar-placeholder {
    font-weight: bold;
    font-size: 18px;
}

.user-info {
    display: flex;
    align-items: center;
}

.user-info {
align-items:center;
display:flex;
margin-bottom:1rem
}

.user-name {
color:var(--brand-dark-petroleum);
font-weight:600
}

.visually-hidden {
clip:rect(1px 1px 1px 1px);
clip:rect(1px,1px,1px,1px);
height:1px;
overflow:hidden;
position:absolute!important;
white-space:nowrap;
width:1px
}

.footer-wrapper {
    margin-top: auto;
}

footer {
    background-color: var(--brand-cool-mint);
    border-top: 1px solid var(--brand-fresh-blue);
    color: var(--brand-dark-petroleum);
    display: flex;
    flex-shrink: 0;
    justify-content: space-between; /* Changed from flex-end to space-between */
    padding: 1rem;
    transition: margin-left var(--transition-speed), width var(--transition-speed); /* Add transition for width */
    width: calc(100% - var(--sidebar-width)); /* Adjust width */
    margin-left: var(--sidebar-width); /* Initial margin-left */
}

footer.expanded {
    margin-left: 60px; /* Adjust margin-left when sidebar is collapsed */
    width: calc(100% - 60px); /* Adjust width when sidebar is collapsed */
}

.footer-item {
    margin-right: 1rem; /* Ensure spacing between items */
}

.env-tag {
    margin-right: 1rem; /* Ensure spacing between items */
}

input,select,textarea {
border:1px solid var(--border-color);
border-radius:var(--border-radius);
font-size:var(--base-font-size);
padding:.625rem;
transition:border-color .3s ease,box-shadow .3s ease;
width:100%
}

input:focus,select:focus,textarea:focus {
border-color:var(--brand-dark-petroleum);
box-shadow:0 0 0 3px #005e6126;
outline:none
}

label {
color:var(--brand-dark-petroleum);
display:inline-block;
font-weight:500;
margin-bottom:.5rem
}

th.sortable {
cursor:pointer
}

th.sortable .sort-indicator {
color:var(--brand-fresh-blue);
margin-left:5px
}

th.sortable.asc .sort-indicator::after {
content:"▲"
}

th.sortable.desc .sort-indicator::after {
content:"▼"
}

@keyframes popIn {
to {
opacity:1;
transform:translateY(0)
}
}

#bar-chart {
height:100%;
width:100%
}

#component-contributions-container {
height:500px;
width:100%
}

.badge {
background-color:var(--brand-fresh-blue);
color:var(--brand-white);
font-size:.9em
}

.btn-no-wrap {
white-space:nowrap
}

.card-title .text-primary {
color:var(--brand-dark-petroleum);
font-weight:700
}

.componenet-table-responsive {
max-height:300px;
overflow-y:auto
}

.component-type-section {
background-color:var(--brand-white);
border:1px solid var(--brand-cool-mint);
border-radius:var(--border-radius);
margin-bottom:2rem;
padding:1rem
}

.custom-hr {
background:linear-gradient(to right,#005e6100,var(--brand-dark-petroleum),#005e6100);
border:0;
height:1px;
margin:5px auto;
width:100%
}

.progress {
background-color:var(--brand-cool-mint);
min-width:100px
}

.progress-bar {
background-color:var(--brand-fresh-blue);
position:relative;
transition:all var(--transition-speed)
}

.progress-bar .progress-text {
color:var(--brand-white);
left:50%;
position:absolute;
text-shadow:1px 1px 2px #000000b3;
top:50%;
transform:translate(-50%,-50%);
white-space:nowrap
}

.progress-legend .badge {
transition:all var(--transition-speed)
}

.progress-legend .form-check-input:checked + .form-check-label .badge {
box-shadow:0 0 5px #005e614d
}

.progress-legend .form-check-input:hover + .form-check-label {
cursor:pointer;
opacity:.8
}

.status-indicator {
border-radius:50%;
display:inline-block;
height:10px;
margin-right:8px;
width:10px
}

.status-no-version {
background-color:var(--brand-bright-pink)
}

.status-not-synced {
background-color:var(--brand-yellow)
}

.status-synced {
background-color:var(--brand-soft-green)
}

.total-progress {
color:var(--brand-dark-petroleum);
font-size:1.1em;
font-weight:700
}

html {
scroll-behavior:smooth
}

html,body {
height:100%;
margin:0;
padding:0
}

@media (max-width: 768px) {
#sidebar {
margin-left:calc(-1 * var(--sidebar-width))
}

#sidebar.collapsed {
margin-left:0;
width:60px
}

#sidebar.collapsed .bottom-buttons {
flex-direction:column
}

#sidebar.collapsed .sidebar-bottom,#sidebar.collapsed .bottom-buttons .btn {
padding:.5rem;
justify-content: center; /* Center icons in collapsed state */
}

#sidebar.collapsed .sidebar-bottom .user-avatar,
#sidebar.collapsed .sidebar-bottom .nav-link i {
    margin: 0;
    justify-content: center; /* Center icons when sidebar is collapsed */
    font-size: 1.2rem;
    min-width: 30px;
    text-align: center; /* Ensure icons are centered */
}


#sidebar.collapsed .sidebar-bottom .user-info {
    justify-content: center;
}

#sidebar.collapsed .sidebar-bottom .sidebar-text {
    display: none;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity var(--transition-speed), width var(--transition-speed);
    white-space: nowrap;
}

.bottom-buttons .btn {
    display: flex;
    align-items: center;
    justify-content: center; /* Center icons */
    padding: 0.5rem; /* Adjust padding */
    width: 100%;
}

#sidebar.show,.col-9.expanded {
margin-left:0
}

.col-9 {
margin-left:0;
width:100%
}
}

@media (max-width: 576px) {
#sidebar.collapsed {
width:0;
width:60px
}

.card-header {
padding:.75rem 1rem
}

.col-9,.card-body {
padding:1rem
}

.col-9.expanded {
margin-left:0;
margin-left:60px
}

.container {
padding:0 10px
}
}

@media print {
#sidebar,.navbar,footer {
display:none!important
}

.btn,.badge {
background-color:transparent!important;
border:1px solid var(--brand-dark-petroleum)!important;
color:var(--brand-dark-petroleum)!important
}

.card {
border:1px solid var(--brand-dark-petroleum)!important;
box-shadow:none!important
}

.col-9 {
margin-left:0!important;
width:100%!important
}

.progress-bar {
background-color:var(--brand-fresh-blue)!important
}

.table {
border-collapse:collapse!important
}

.table th,.table td,.progress {
border:1px solid var(--brand-dark-petroleum)!important
}

a {
color:var(--brand-fresh-blue)!important;
text-decoration:underline
}

body {
background-color:#fff!important;
color:var(--brand-dark-petroleum)!important
}

h1,h2,h3,h4,h5,h6 {
color:var(--brand-dark-petroleum)!important
}
}

.alert-primary {
background-color:var(--brand-cool-mint);
border-color:var(--brand-dark-petroleum);
color:var(--brand-dark-petroleum)
}

.alert-secondary {
background-color:var(--brand-cool-sand);
border-color:var(--brand-fresh-blue);
color:var(--brand-dark-petroleum)
}

.badge.bg-primary {
background-color:var(--brand-dark-petroleum)!important
}

.badge.bg-secondary {
background-color:var(--brand-fresh-blue)!important
}

.btn-primary,.page-item.active .page-link,.list-group-item.active,.form-check-input:checked {
background-color:var(--brand-dark-petroleum);
border-color:var(--brand-dark-petroleum)
}

.btn-primary:hover,.btn-primary:focus,.btn-secondary {
background-color:var(--brand-fresh-blue);
border-color:var(--brand-fresh-blue)
}

.btn-secondary:hover,.btn-secondary:focus {
background-color:var(--brand-light-blue);
border-color:var(--brand-light-blue)
}

.card {
border-color:var(--brand-cool-mint)
}

.card-header {
background-color:var(--brand-cool-mint);
color:var(--brand-dark-petroleum);
font-size:1.1rem;
padding:.75rem 1rem
}

.form-control:focus {
border-color:var(--brand-fresh-blue);
box-shadow:0 0 0 .25rem #00aca540
}

.modal-header {
background-color:var(--brand-cool-mint);
color:var(--brand-dark-petroleum)
}

.nav-tabs .nav-link.active {
border-color:var(--brand-cool-mint);
color:var(--brand-dark-petroleum)
}

.navbar-dark,.dropdown-item.active,.dropdown-item:active,.tooltip-inner {
background-color:var(--brand-dark-petroleum)
}

.navbar-light {
background-color:var(--brand-white)
}

.page-link,a:hover {
color:var(--brand-dark-petroleum)
}

.progress-bar {
background-color:var(--brand-fresh-blue)
}

.table-primary {
--bs-table-bg:var(--brand-cool-mint);
--bs-table-color:var(--brand-dark-petroleum)
}

a {
color:var(--brand-fresh-blue)
}