:root{
    --menu-accent:#ffffff;
    --menu-accent-dark:#d6d6d6;
    --menu-accent-glow: rgba(255, 255, 255, .30);
    --netflix-black:#0b0b0b;
    --netflix-black-2:#141414;
    --netflix-white:#ffffff;
}

/* ===== HEADER (NETFLIX STYLE) ===== */
html.headercolor3 .topbar,
html.color-header.headercolor3 .topbar{
    background: linear-gradient(90deg, var(--netflix-black) 0%, var(--netflix-black-2) 55%, #222 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}

html.color-header .topbar .navbar-nav .nav-link,
html.color-header .topbar .top-menu-left .nav-item .nav-link{
    color: var(--netflix-white) !important;
    font-weight: 800 !important;
    letter-spacing: .2px !important;
}

html.color-header .topbar .navbar-nav .nav-link:hover,
html.color-header .topbar .top-menu-left .nav-item .nav-link:hover{
    color: #ffffff !important;
    text-shadow: 0 0 16px var(--menu-accent-glow) !important;
}

/* barra pesquisa */
html.color-header .search-bar input{
    color: #111 !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.08) !important;
    border-radius: 14px !important;
}

html.color-header .search-bar input:focus{
    box-shadow: 0 0 0 .20rem var(--menu-accent-glow) !important;
    border-color: rgba(255,255,255,.55) !important;
}

html.color-header .search-bar input::placeholder,
html.color-header::placeholder{
    color: #111 !important;
    opacity: .55 !important;
}

html.color-header .search-show{
    color: #111 !important;
}

/* user */
html.color-header .user-info .user-name,
html.color-header .user-info .designattion{
    color: #fff !important;
}

html.color-header .user-box{
    border-left: 1px solid rgba(255,255,255,.18) !important;
}

html.color-header .mobile-toggle-menu{
    color: #fff !important;
}

/* ===== SWITCHER HEADER COLORS ===== */
.switcher-body .headercolor1{ background:#0727d7 !important; }
.switcher-body .headercolor2{ background:#23282c !important; }
.switcher-body .headercolor3{ background:#ffffff !important; }
.switcher-body .headercolor4{ background:#157d4c !important; }
.switcher-body .headercolor5{ background:#673ab7 !important; }
.switcher-body .headercolor6{ background:#795548 !important; }
.switcher-body .headercolor7{ background:#d3094e !important; }
.switcher-body .headercolor8{ background:#ff9800 !important; }

html.headercolor1 .topbar{ background:#0727d7; }
html.headercolor2 .topbar{ background:#23282c; }
html.headercolor3 .topbar{ background:#1f1f1f; }
html.headercolor4 .topbar{ background:#157d4c; }
html.headercolor5 .topbar{ background:#673ab7; }
html.headercolor6 .topbar{ background:#795548; }
html.headercolor7 .topbar{ background:#d3094e; }
html.headercolor8 .topbar{ background:#ff9800; }

/* ===== SIDEBAR (NETFLIX DARK) ===== */
html.color-sidebar .sidebar-wrapper{
    background: linear-gradient(180deg, #0a0a0a 0%, #111 60%, #090909 100%) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
}

html.color-sidebar .sidebar-header{
    background: transparent !important;
    border-right: 1px solid rgba(255,255,255,0) !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

html.color-sidebar .menu-label{
    color: rgba(255,255,255,.62) !important;
    font-weight: 900 !important;
    letter-spacing: .6px !important;
}

html.color-sidebar .sidebar-wrapper .sidebar-header .logo-text{
    color: #fff !important;
    font-weight: 1000 !important;
}

html.color-sidebar .sidebar-wrapper .sidebar-header .toggle-icon{
    color: #fff !important;
}

html.color-sidebar .simplebar-scrollbar:before{
    background: rgba(255,255,255,.28) !important;
}

/* menu */
html.color-sidebar .sidebar-wrapper .metismenu a{
    color: rgba(255,255,255,.86) !important;
    font-weight: 800 !important;
}

.sidebar-wrapper .metismenu a .parent-icon{
    color: var(--menu-accent) !important;
    font-size: 24px;
    line-height: 1;
}

/* hover/active branco */
html.color-sidebar .sidebar-wrapper .metismenu .mm-active>a,
html.color-sidebar .sidebar-wrapper .metismenu a:active,
html.color-sidebar .sidebar-wrapper .metismenu a:focus,
html.color-sidebar .sidebar-wrapper .metismenu a:hover{
    color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 60%, rgba(0,0,0,0) 100%) !important;
    border-left: 5px solid var(--menu-accent) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14) !important;
}

html.color-sidebar .sidebar-wrapper .metismenu a:hover .parent-icon,
html.color-sidebar .sidebar-wrapper .metismenu .mm-active>a .parent-icon{
    color: #fff !important;
}

/* submenu */
html.color-sidebar .sidebar-wrapper .metismenu ul{
    border: 1px solid rgba(255,255,255,0) !important;
    background: rgba(255,255,255,.05) !important;
    border-radius: 14px !important;
}

/* manter teus themes de background */
html.color-sidebar .sidebar-wrapper{
    background-size: 100% 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
}

.switcher-wrapper .sidebarcolor1{ background-image: url(../images/bg-themes/1.png); }
.switcher-wrapper .sidebarcolor2{ background-image: url(../images/bg-themes/2.png); }
.switcher-wrapper .sidebarcolor3{ background-image: url(../images/bg-themes/3.png); }
.switcher-wrapper .sidebarcolor4{ background-image: url(../images/bg-themes/4.png); }
.switcher-wrapper .sidebarcolor5{ background-image: url(../images/bg-themes/5.png); }
.switcher-wrapper .sidebarcolor6{ background-image: url(../images/bg-themes/6.png); }
.switcher-wrapper .sidebarcolor7{ background-image: url(../images/bg-themes/7.png); }
.switcher-wrapper .sidebarcolor8{ background-image: url(../images/bg-themes/8.png); }

html.color-sidebar.sidebarcolor1 .sidebar-wrapper{ background-image: url(../images/bg-themes/1.png); }
html.color-sidebar.sidebarcolor2 .sidebar-wrapper{ background-image: url(../images/bg-themes/2.png); }
html.color-sidebar.sidebarcolor3 .sidebar-wrapper{ background-image: url(../images/bg-themes/3.png); }
html.color-sidebar.sidebarcolor4 .sidebar-wrapper{ background-image: url(../images/bg-themes/4.png); }
html.color-sidebar.sidebarcolor5 .sidebar-wrapper{ background-image: url(../images/bg-themes/5.png); }
html.color-sidebar.sidebarcolor6 .sidebar-wrapper{ background-image: url(../images/bg-themes/6.png); }
html.color-sidebar.sidebarcolor7 .sidebar-wrapper{ background-image: url(../images/bg-themes/7.png); }
html.color-sidebar.sidebarcolor8 .sidebar-wrapper{ background-image: url(../images/bg-themes/8.png); }


html.color-sidebar .sidebar-wrapper .metismenu a,
html.semi-dark .sidebar-wrapper .metismenu a,
html.dark-theme .sidebar-wrapper .metismenu a{
    border-left-color: rgba(255,255,255,.42) !important;
}

html.color-sidebar .sidebar-wrapper .metismenu a .parent-icon,
html.color-sidebar .sidebar-wrapper .metismenu a i,
html.color-sidebar .sidebar-wrapper .metismenu a .menu-title,
html.semi-dark .sidebar-wrapper .metismenu a .parent-icon,
html.semi-dark .sidebar-wrapper .metismenu a i,
html.semi-dark .sidebar-wrapper .metismenu a .menu-title,
html.dark-theme .sidebar-wrapper .metismenu a .parent-icon,
html.dark-theme .sidebar-wrapper .metismenu a i,
html.dark-theme .sidebar-wrapper .metismenu a .menu-title{
    color: rgba(255,255,255,.92) !important;
}

html.color-sidebar .sidebar-wrapper .metismenu .mm-active>a,
html.color-sidebar .sidebar-wrapper .metismenu a:hover,
html.color-sidebar .sidebar-wrapper .metismenu a:focus,
html.color-sidebar .sidebar-wrapper .metismenu a:active,
html.semi-dark .sidebar-wrapper .metismenu .mm-active>a,
html.semi-dark .sidebar-wrapper .metismenu a:hover,
html.semi-dark .sidebar-wrapper .metismenu a:focus,
html.semi-dark .sidebar-wrapper .metismenu a:active,
html.dark-theme .sidebar-wrapper .metismenu .mm-active>a,
html.dark-theme .sidebar-wrapper .metismenu a:hover,
html.dark-theme .sidebar-wrapper .metismenu a:focus,
html.dark-theme .sidebar-wrapper .metismenu a:active{
    color:#ffffff !important;
    border-left-color:#ffffff !important;
    background: linear-gradient(90deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.08) 60%, rgba(0,0,0,0) 100%) !important;
}

html.color-sidebar .sidebar-wrapper .menu-label,
html.semi-dark .sidebar-wrapper .menu-label,
html.dark-theme .sidebar-wrapper .menu-label{
    color: rgba(255,255,255,.68) !important;
}
