:root {
    --main-background: #dedede;
    --openpath-card: #fff;
    --main-text: #121416;
    --openpath-bg: #fff;
    --openpath-logo-color: #333740;
    --openpath-brand: #0789d4;
    --openpath-text: #343a40;
    --openpath-link-text: #919eab;
    --heading-text: #424242;
    --body-color-text: #757575;
    --color-purple: #808ccc;
    --color-grey: #e0e0e0;
}


body.dark-mode {
    --main-background: #2c3133;
    --openpath-card: #1c2733;
    --main-text: #d5d3d3;
    --openpath-bg: #323b47;
    --openpath-logo-color: #e4e4e4;
    --openpath-text: #e8e8e8;
    --openpath-link-text: #d5d3d3;
    --heading-text: #d5d3d3;
    --body-color-text: #d5d3d3;
    --color-grey: #747474;
    color: var(--body-color-text);
}

.dark-mode .nav-tabs > li > a
{
    color:#fff;
}

.card {
    background: var(--openpath-card);
}

body {
    background: var(--main-background)
}
.open-text {
    fill: var(--openpath-logo-color)
}

.path-text {
    fill: var(--openpath-brand);
}

.panel {
    background-color: var(--openpath-bg);
}

.border-top {
    border-top: 1px solid var(--color-grey) !important;
}

.table > tfoot > tr > th, .table > thead > tr > th {
    color: var(--body-color-text);
}
.table {
    color: var(--body-color-text);
}
.table-hover tbody tr:hover {
    color: var(--main-text);
}
.brand-icon {
    margin: 20px 0 10px;
}

.brand-icon svg{
    height:45px;
}
header nav.navbar .container {
    display: block;
}

footer:not(.page-copyright) {
    background-color: var(--openpath-bg);
} 
.text-muted {
    color: var(--main-text) !important;
}
/* Theme Toggle Styles */
.theme-toggle-container {
    display: flex;
    align-items: center;
    column-gap: 5px;
    font-weight: 300;
    padding: 6px 13px;
} .theme-toggle-container .theme-toggle-label {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        margin-bottom: 0;
    } .theme-toggle-container input[type="checkbox"] {
        display: none;
    } .theme-toggle-container .toggle-slider {
        width: 50px;
        height: 25px;
        background-color: #ccc;
        border-radius: 25px;
        position: relative;
        transition: background-color 0.3s ease;
    } .theme-toggle-container .toggle-slider::before {
            content: "";
            width: 23px;
            height: 23px;
            background-color: white;
            border-radius: 50%;
            position: absolute;
            top: 1px;
            left: 1px;
            transition: transform 0.3s ease;
        } .theme-toggle-container input[type="checkbox"]:checked + .toggle-slider {
        background-color: #4b4b4b;
    } .theme-toggle-container input[type="checkbox"]:checked + .toggle-slider::before {
            transform: translateX(25px);
        }