﻿
.inside-main-sidebar-container {
    display: flex;
    height: 100vh;
}

.inside-main-sidebar-badge-new {
    background-color: #1fa2f1;
    color: #fff;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    padding: 0.2em 0.4em;
    margin-left: 1rem;
}

.inside-main-sidebar {
    width: 300px;
    flex-shrink: 0;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: background-color 0.4s ease, color 0.4s ease, transform 0.3s ease;
}

.inside-main-sidebar-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.inside-main-sidebar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inside-main-sidebar-link {
    display: block;
    color: #212529;
    padding: 0.5rem;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.2s, font-weight 0.2s;
}

.inside-main-sidebar-link:hover {
    background-color: #e9ecef;
    font-weight: 850;
}

.inside-main-sidebar-link-active {
    background-color: #1fa2f1 !important;
    font-weight: 850;
    color: white;
}

.inside-main-sidebar-icon {
    width: 1.25rem;
    height: auto;
    vertical-align: middle;
    margin-right: 0.5rem;
}
.inside-main-sidebar-icon {
    width: 1.7rem;
    height: auto;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.inside-main-sidebar {
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

    .inside-main-sidebar.open {
        transform: translateX(0);
    }

    .inside-main-sidebar.closed {
        transform: translateX(-100%);
    }

/*Steam*/
.steam-layout .inside-main-sidebar {
    background-color: #25282f;
    border-right: 2px solid #17181a;
}

    .steam-layout .inside-main-sidebar-link {
        color: #858c99 !important;
        transition: color 0.3s ease !important;
    }


.steam-layout .inside-main-sidebar-link-active {
    color: #4b9df4 !important;
    background-color: #25282f !important;
}

.steam-layout .inside-main-sidebar-icon {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.7;
}

    .steam-layout .inside-main-sidebar-icon:hover {
        opacity: 1;
    }

.steam-layout .inside-main-sidebar-icon {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.steam-codes-page .inside-main-sidebar-title {
    transition: color 0.3s ease;
}

.steam-codes-page .inside-main-sidebar-separator {
    transition: border-color 0.3s ease;
}
