/* Custom CSS for 222 Entertainment Network branded File Browser */

/* Primary brand colors */
:root {
    --primary-color: #00B7C2;
    --accent-color: #FF9900;
    --dark-blue: #00324E;
    --sideBar_bg-color: #00324E;
    --header_bg-color: #00324E;
    --link-color: #00B7C2;
}

/* sideBar customization */
.sideBar {
    background-color: var(--sideBar_bg-color);
}

.sideBar a {
    color: #ffffff;
}

.sideBar a.active,
.sideBar a :hover {
    background-color: var(--link-color);
    color: #ffffff;
}

/* Header customization */
.header {
    background-color: var(--header_bg-color);
    border-bottom: 2px solid var(--link-color);
}

/* Buttons and links */
button, .button, a {
    color: var(--link-color);
}

button :hover, .button :hover, a :hover {
    opacity: 0.8;
}

/* Logo customization (assuming logo placed in branding folder) */
.logo {
    background-image: url("img/logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 150px;
    height: 50px;
}

/* Text color adjustments for better contrast */
body, .sideBar a, .header a, .header-title {
    color: #ffffff;
}

/* Active navigation element highlight */
.sideBar .active, .sideBar a.active {
    background-color: #FF9900;
    color: #ffffff;
}

/* Scrollbar styling (optional but nice polish) */
::-webkit-scrollbar-thumb {
    background-color: #00B7C2;
    border-radius: 10px;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #00324E;
}