.tailwind{display:none}
:root {
    --primary-font: 'Open Sans', sans-serif;
    --primary-font-color: #183e4b; /* Dark blue for main text */
    --primary-font-size: 14px; /* Reduced font size */
    --primary-font-weight: 400;

    --secondary-font-color: #8ba0a4; /* Soft grayish-blue for secondary text */

    --color-highlight: #225769;
    --white: #eaeaea; /* Light gray for background or subtle highlights */
    --disabled-color: #8ba0a4; /* Same as secondary font color for disabled states */
    --negative-color: #d74a49; /* Vibrant red for negative actions or alerts */
    --negative-color-dark: #b03b3a; /* Slightly darker red for hover or pressed states */

    --primary-color: #183e4b; /* Dark blue for primary elements */
    --primary-color-dark: #1b4552; /* Darker teal-blue for hover/active states */
    --primary-label-color: #eaeaea; /* Light gray for text on primary backgrounds */

    --secondary-color: #8ba0a4; /* Muted blue-gray for secondary elements */
    --secondary-color-dark: #1b4552; /* Darker teal for hover/active states */
    --secondary-label-color: #eaeaea; /* Light gray for text on secondary backgrounds */

    --tertiary-color: #d74a49; /* Red for tertiary elements or accents */
    --tertiary-label-color: #eaeaea; /* Light gray for text on tertiary backgrounds */

    --input-background-color: #eaeaea; /* Light gray for input fields */

    --table-secondary-color: #f7f7f7; /* Slightly off-white for table backgrounds */

    --difficulty-low-color: #8ba0a4; /* Blue-gray for low difficulty */
    --difficulty-low-font-color: #183e4b; /* Dark blue for contrast */
    --difficulty-medium-color: #ffe78f; /* Soft yellow for medium difficulty */
    --difficulty-medium-font-color: #7e5013; /* Warm brown for contrast */
    --difficulty-high-color: #ffa589; /* Light coral for high difficulty */
    --difficulty-high-font-color: #a33513; /* Deep red-brown for contrast */
    --difficulty-very-high-color: #d74a49; /* Vibrant red for very high difficulty */
    --difficulty-very-high-font-color: #b03b3a; /* Slightly darker red for contrast */
}

/* GLOBALS */
/* Apply global font settings */
body {
    font-family: var(--primary-font);
    font-size: var(--primary-font-size);
    font-weight: var(--primary-font-weight);
    color: var(--primary-font-color);
    background-color: var(--white);
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--primary-font);
    font-weight: 700;
    color: var(--primary-color);
}

/* BUTTONS */
.btn {
    border-radius: 30px;
    background-color: var(--primary-color);
    color: var(--primary-label-color);
    border: 1px solid var(--primary-color);
    box-shadow: none;
}
.btn:hover {
    background-color: var(--primary-color-dark);
    color: var(--primary-label-color);
}

/* NAVIGATION */
.nav-bar {
    background-color: #fff;
    border-bottom: 3px solid var(--tertiary-color);
    padding: 0px 15px;
}

.nav-bar--right .nav-bar__item, 
.nav-bar--right .nav-bar__dropdown {
    background:none !important;
} 

/* Navigation items */
.nav-bar__item,
.nav-bar__dropdown {
    font-family: var(--primary-font);
    font-weight: 400; /* Normal weight for cleaner look */
    font-size: 0.9rem; /* Smaller text size */
    color: var(--primary-label-color) !important; /* Light gray text for links */
    border-right: 1px solid #eee; /* Slightly lighter than menu background */
    padding:0;
    max-width: 20em;
}
.nav-bar__item a,
.nav-bar__dropdown .dropbtn {
    color: var(--primary-font-color); /* Light gray text for links */
    padding:20px;
}
.nav-bar__item:hover,
.nav-bar__item a:hover,
.nav-bar__dropdown:hover .dropbtn, 
.nav-bar__dropdown .dropbtn:hover {
    color: var(--primary-label-color); /* Light Gray hover text */
    background: var(--secondary-color-dark);
}
.nav-bar__item:last-child {
    border-right: none; /* Remove border for the last item */
}

/* Dropdown menu background */
.dropdown-content {
    background-color: var(--primary-color-dark); /* Darker Blue for dropdowns */
    border: 1px solid var(--secondary-color-dark); /* Subtle border */
    color: var(--primary-label-color);
}

/* Dropdown menu links */
.dropdown-content a,
.dropdown-content li {
    color: var(--secondary-label-color) !important; /* Light Gray text */
    font-size: 0.9rem; /* Match smaller font size */
}
.dropdown-content a:hover {
    color: var(--primary-label-color) !important; /* Lighter text on hover */
    background-color: var(--tertiary-color); /* Red hover background */
}

/* PAGE CONTENT */
/* Style the cards */
.card {
    background-color: var(--table-secondary-color);
    border-radius: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--secondary-color);
}
.card-body {
    padding: 20px;
}
.card h5 {
    font-family: var(--primary-font);
    color: var(--primary-color);
}

/* TAGS AND LABELS */
.label, .tag {
    background-color: var(--tertiary-color);
    color: var(--tertiary-label-color);
    border-radius: 15px;
}

/* PROGRESS BARS */
.progress {
    border-radius: 30px;
    background-color: var(--table-secondary-color);
}
.progress-bar {
    background-color: var(--primary-color);
}

/* FOOTER */
.footer {
    background-color: var(--primary-color);
    color: var(--primary-label-color);
}

/* INPUT FIELDS */
input, textarea {
    background-color: var(--input-background-color);
    color: var(--primary-font-color);
    border: 1px solid var(--secondary-color);
    border-radius: 5px;
}

/* DIFFICULTY INDICATORS */
.difficulty-low {
    background-color: var(--difficulty-low-color);
    color: var(--difficulty-low-font-color);
}
.difficulty-medium {
    background-color: var(--difficulty-medium-color);
    color: var(--difficulty-medium-font-color);
}
.difficulty-high {
    background-color: var(--difficulty-high-color);
    color: var(--difficulty-high-font-color);
}
.difficulty-very-high {
    background-color: var(--difficulty-very-high-color);
    color: var(--difficulty-very-high-font-color);
}

/* Specific styles for the btn-success class */
.btn.btn-success {
    background-color: var(--primary-color) !important; /* Dark Blue for background */
    color: var(--primary-label-color) !important; /* Light Gray for text */
    border: 1px solid var(--primary-color) !important; /* Match border to primary color */
}

/* Hover state for the btn-success button */
.btn.btn-success:hover {
    background-color: var(--primary-color-dark) !important; /* Darker Blue for hover */
    color: var(--primary-label-color) !important; /* Keep text light gray */
    border: 1px solid var(--primary-color-dark) !important; /* Match border to hover color */
}

/* Disabled state */
.btn.btn-success:disabled {
    background-color: var(--disabled-color) !important; /* Muted Blue-Gray for disabled */
    color: var(--white) !important; /* Light Gray text for readability */
    border: 1px solid var(--disabled-color) !important; /* Match border to disabled color */
}

/* Function buttons */
.function-btn {
    background-color: var(--primary-color) !important; /* Match primary theme */
    color: var(--primary-label-color) !important; /* Light Gray for text */
    border: 1px solid var(--primary-color-dark) !important; /* Slightly darker border */
}
.function-btn:hover {
    background-color: var(--primary-color-dark) !important;
}

/*Misc*/
.settings-pills>li>a.active.nav-link {
    background-color: var(--primary-color);
}

.nav-bar__item.nav-bar__logo:hover, 
.nav-bar__item.nav-bar__logo a:hover{
    background: none;
}