:root {
	--bg-body: #121212;         
	--bg-surface: #1e1e1e;      
	--bg-hover: #2c2c2c;
	--accent-color: #ff4542;
	--accent-hover: #ff7875;
	--text-main: #e0e0e0;
	--text-muted: #a0a0a0;
	--border-color: #333333;
	--font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
	font-family: var(--font-main);
	background-color: var(--bg-body);
	color: var(--text-main);
	overflow-x: hidden;
}

/* --- Header Styles --- */
.main-header {
	background-color: var(--bg-surface);
	border-bottom: 1px solid var(--border-color);
	height: 70px;
	position: sticky;
	top: 0;
	z-index: 1020;
	display: flex;
	align-items: center;
	padding: 0 1rem;
}

.logo-area {
	/*font-weight: 700;
	font-size: 1.25rem;*/
	display: flex;
	align-items: center;
	min-width: 250px;
	justify-content:center;
	gap: 10px;
	color: var(--accent-hover);
	text-decoration:none;
}

.logo-area:hover {
	color: var(--accent-color) !important;
}

/* News Bar (jQuery Fading) */
.news-bar-wrapper {
	flex-grow: 1;
	background: #000;
	border-radius: 4px;
	margin: 0 1rem;
	padding: 0 15px;
	height: 40px;
	display: flex;
	align-items: center;
	border: 1px solid var(--border-color);
	font-size: 0.9rem;
	overflow:hidden;
}

.news-bar-content a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color 0.2s;
}

.news-bar-content a:hover {
	color: white;
	text-decoration: underline;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 15px;
	/*min-width: 220px;*/
	justify-content: flex-end;
}

/* Social Icon Dropdown */
.social-link {
	color: var(--text-muted);
	transition: color 0.2s;
	font-size: 1.2rem;
	text-decoration: none;
	cursor: pointer;
	padding:0px;
}
.social-link:hover, .social-link[aria-expanded="true"] { 
	color: var(--accent-hover); 
}

/* Search Input */
.custom-search {
	background-color: #000;
	border: 1px solid var(--border-color);
	color: white;
	font-size: 0.9rem;
}
.custom-search:focus {
	background-color: #000;
	border-color: var(--accent-color);
	color: white;
	box-shadow: none;
}

/* --- Layout --- */
.layout-container {
	display: grid;
	grid-template-columns: 280px 1fr;
	min-height: calc(100vh - 70px);
}

/* --- Sidebar Styles --- */
.sidebar {
	background-color: var(--bg-surface);
	border-right: 1px solid var(--border-color);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	height: calc(100vh - 70px);
	position: sticky;
	top: 70px;
}

.menu-filter-input {
	margin-bottom: 1.0rem;
	border-radius: 20px;
}

/* Menu Lists */
.sidebar-menu, .popular-menu {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* Collapsible Menu Labels */
.menu-label-toggle {
	display: flex;
	align-items: center;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
	margin-top: 0.6rem;
	letter-spacing: 0.5px;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s;
}
.menu-label-toggle:hover { color: white; }

.sidebar-menu li, .popular-menu li {
	margin-bottom: 0.25rem;
}

/* Main Links */
.nav-link-custom {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	color: var(--text-main);
	text-decoration: none;
	border-radius: 6px;
	transition: all 0.2s ease;
	font-size: 0.95rem;
	cursor: pointer;
	width: 100%;
	border: none;
	background: none;
	text-align: left;
	gap:8px;
}

.nav-link-custom:hover { background-color: var(--bg-hover); color: #fff; }
.nav-link-custom.active { background-color: var(--accent-color); color: white; }

.nav-link-custom i.fa-fw {
	margin-right: 12px;
	font-size: 1.1rem;
	color: var(--text-muted);
	transition: color 0.2s;
}
.nav-link-custom:hover i.fa-fw, .nav-link-custom.active i.fa-fw { color: white; }

/* Nested Sub-menus */
.submenu-list {
	list-style: none;
	padding-left: 0;
	margin-top: 2px;
	background-color: rgba(0,0,0,0.2); 
	border-radius: 6px;
	padding-bottom: 5px;
}

/* Submenu Separator */
.submenu-separator {
	font-size: 0.65rem;
	text-transform: uppercase;
	color: #666;
	padding: 12px 15px 4px 46px;
	font-weight: 700;
	letter-spacing: 0.5px;
	pointer-events: none; /* Unclickable */
}

.submenu-link {
	padding: 8px 15px 8px 46px; 
	color: var(--text-muted);
	font-size: 0.9rem;
	display: block;
	text-decoration: none;
	transition: color 0.2s;
}
.submenu-link:hover { color: white; background-color: rgba(255,255,255,0.05); }

/* Chevron */
.chevron-icon { margin-left: auto; transition: transform 0.3s ease; font-size: 0.85rem !important; }
[aria-expanded="true"] .chevron-icon { transform: rotate(180deg); }

/* --- Content & Mobile --- */
.content-area { padding: 2rem; }

.card-custom {
	background-color: var(--bg-surface);
	border: 1px solid var(--border-color);
	border-radius: 8px;
}
.card-custom .card-header {
	border-bottom: 1px solid var(--border-color);
	font-weight: 600;
	color: #fff;
}

@media (max-width: 992px) {
	.layout-container { grid-template-columns: 1fr; }
	.sidebar { display: none; }
	.news-bar-wrapper { display: none; }
	.header-actions .search-bar-top{ display: none; }
}


/*logo*/
.logo-container { 
display: flex; 
flex-direction: column; 
gap: 50px; 
color:#fff;
}

.logo { 
display: flex; 
align-items: center; 
gap: 12px; 
text-decoration: none; 
}

.dark-red { color: #b71c1c;/*#8B0000*/ }
.white { color: #ffffff; }

.v4 { 
font-family: 'Montserrat', sans-serif; 
font-size: 28px; 
letter-spacing: -1.5px;
}

.v4 .icon { 
font-size: 17px;
border: 2px solid #b71c1c;
border-radius: 8px;
padding: 6px 6px 6px 4px;
background: #b71c1c;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
box-sizing: content-box;
}


/*modifications*/
#sectionTitle{font-size:calc(1.325rem + .9vw)}

@media(min-width: 990px){
	#sectionTitle{font-size:2em}
}

.text-danger{
	color: #ff4255;
}

#newsTicker{
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
	text-align: center;
    width: 100%;
}

.search-bar-top .btn-outline-secondary{
	border:1px solid var(--border-color);
}

#popularSection .menu-label-toggle, #mobilePopularSection .menu-label-toggle{
	gap:5px;
}

.main-title{
	font-family: 'Montserrat', sans-serif;
}

.main-title .v4{
	font-size:inherit;
}

.main-title .logo{
	display:inline-flex;
}

.main-title-card, .card-no-border-hover{
	border-color: var(--border-color) !important;
}

.main-subtitle{
	font-size:2.5em;
}

.unclickable{
	cursor:default;
}

.home-cards .card-custom:hover{
	border-color: var(--accent-color);
}

#leftside_banner{
	/*height:250px;*/
	overflow: hidden;
	font-size:smaller;
	line-height:2em;
	text-align:center;
}

#leftside_banner .imvustylez_banner img{
	max-width: 100% !important;
    height: auto !important;
}

#featuredprods{
	text-align:center
}

#side-buttons-container .btn-outline-secondary{
	margin-bottom:10px;
}

.updates-view-more{
	text-align:center;
	line-height:2em;
}

/*styles for includenavonly*/
@media(min-width: 990px){
	.layout-container-navonly {
		grid-template-columns: 0px 1fr;
	}
}
.layout-container-navonly.sidebar-expanded {
    grid-template-columns: 280px 1fr;
}

/* Update the existing sidebar class to handle hiding text cleanly */
.layout-container-navonly .sidebar {
    transition: padding 0.3s ease, opacity 0.2s ease; /* Add transition */
}

/* Add this rule to completely hide sidebar contents when collapsed */
.layout-container-navonly:not(.sidebar-expanded) .sidebar {
    padding: 0;
    border: none;
    opacity: 0;
}

/*inherited styles*/
html, html *{
	scrollbar-width: thin;
	scrollbar-color: #800 #444;
}

/*text highlighting*/
::-moz-selection{ background:#a00; color:#fff;}
::-webkit-selection{ background:#a00; color:#fff;}
::-o-selection{ background:#a00; color:#fff;}
::selection { background:#a00; color:#fff;}


.footer a:link,.footer a:visited, a.link-red:link,a.link-red:visited{
	color:var(--accent-color);
	text-decoration:none;
	transition: all 0.3s ease;
}

.footer a:hover,a.link-red:hover{
	color: var(--accent-hover);
	text-decoration:underline;
}

.footer a:active,a.link-red:active{ 
	text-decoration: none; 
	color: #FFD700; 
}

.footer hr{
	width: 100px;
    margin: 0px auto;
    padding: 10px;
}


@media (max-width: 768px){
	/*center title and desc on mobile*/
    #sectionTitle,#sectionDesc,#side-buttons-container,#section-description{
        text-align: center;
    }
	/*move buttons to the right on mobile*/
	.main-header .header-actions{
		flex-grow: 1;
	}
}

label{
	cursor:pointer;
}

a img{
	border:0px !important;
}

area,map{cursor:pointer;outline:0;}

button:active{
	outline:0 !important;
}

iframe{
	border:0px;
}

.displaytable{display:table;border-collapse:collapse;border:0px}
.displayrow{display:table-row}
.displaycell{display:table-cell;vertical-align:middle;text-align:center;padding:3px}
.tablepadding .displaycell{padding:12px 20px}
.displayinline{display:inline}
.tablebg .displaycell{background:#222}
.tablebg2 .displaycell{background:#1c1c1c}
.tableround{border-radius:14px;overflow:hidden;border:5px solid #222}

@supports (-moz-appearance: none){
	.tableround{border:0px}
}

.margintop10{
	margin-top:10px;
}

.tableheader{
    background:#000 !important;
    color: #fff;
    font-weight:bold;
}

.tableborder .displaycell{
	border:1px solid #333;
}

.tablenoborder .displaycell{
	border:0px;
}

form .displaycell{
	line-height:24px;
}

.left{text-align:left}
.right{text-align:right}
.center{text-align:center}
.gowide{width:100%}
.hidden{display:none}

.violet{color:#A3A}

.bold,.bold_text,.stepnum{font-weight:bold}

.underline{text-decoration:underline;}

.italics{font-style:italic}

.margincenter{margin:0px auto}

.go80{width:80%}
.go50{width:50%}

.defaultfont{font-family:Arial !important}

.floatleft{float:left}

.floatright{float:right}

.valigntop{vertical-align:top}

.valignmiddle{vertical-align:middle}

.valignbottom{vertical-align:bottom}

.clickable,input[type=button], input[type=image],.cursorpointer{cursor: pointer}

.smaller{font-size:smaller}

.lowercase{text-transform:lowercase}

ul.circle {list-style-type:circle}
ul.square {list-style-type:square}

.legend,.legend_text{
  color: #aaa;
  font-style: italic;
  font-size: smaller;
}

input:disabled:not(.form-check-input) {background:#ccc;color:#888}

#banner_rotator_container img{
	width:100%;
	height:auto;
	box-shadow: 0px 0px 30px 2px #000;
}

.ad645 img{
	max-width:645px;
	max-height:60px;
}

.ad500 img{
	max-width:500px;
	max-height:150px;
}

.footer{
  text-align: center;
  color: #333;
  padding:20px;
  margin-top:50px;
}

.subheader{
	font-variant: small-caps;
	font-size: 23px;
	font-weight: bold;
	margin-bottom:15px;
}

#home-splash{
	margin: 0px auto;
	width: 950px;
	height: 250px;
	overflow:hidden !important;
}

.jumbobox{
	text-align:center;
}

/*#home-splash-image{
	position:absolute; margin-left:0px; margin-top:0px;
}*/

#home-splash-inner{
	margin-left:627px; margin-top:70px;position: absolute; text-align: center; color: #FFF
}

#home-splash-link{
	margin-left:120px; margin-top: 190px;position: absolute;width:400px; height:30px
}

@media(max-width: 1360px){
#home-splash iframe{
	display:none;
}

#home-splash{
	width:99% !important;
	height:auto;
	text-align:center;
	border:0px;
}

#home-splash img{
	width:90%;
	max-width:950px;
	height:auto;
	position:relative;
}
}

.menu_datainput_box{
	text-align:center;
	padding:7px;
}

.menu_datainput_box, .menu_datainput_box .btn,.menu_datainput_box .form-control{
	font-size:smaller;
}

#product_zone{
	width:100%;
	text-align:center;
}

#product_zone a img{
	width:100px;
	height:80px;
	margin-bottom:4px;
}

#product_zone_arrows{
	text-align:center;
}

@media(max-width: 600px){
#product_zone_arrows{
	display:none;
}
}

.product_zone_btn{
	width:108px;
	white-space:pre-wrap;
	color: #fff !important;
	font-size:0.75em;
}

#product_zone_arrows a{
	color:#fff !important;
}

#product_zone2{
	height: 80px;
    overflow: hidden;
}

#product_zone2_container{
	text-align:center;
	font-size: smaller;
    line-height: 2em;
}

#banner_rotator_container{
    text-align: center;
    max-width: 800px;
    margin: 0px auto;
}

.textarea_input{
	width: 300px !important;
	height: 200px !important;
}

.small_input,.short_input{
	width:70px;
	display:inline;
}

.previewbox{
	width: 300px;
	height: 240px;
	background-color: #999; 
	text-align: center;
	overflow:auto;
    padding: 5px;
	line-height:normal;
	border-radius: 6px;
	align-items: center;
    justify-content: center;
    display: inline-flex;
}

@media(max-width: 480px){
.previewbox{
	width: 100%;
}
}

.previewbox a:link,.previewbox a:visited{
	color: #00F;
	text-decoration: underline;
}

.preview-text{
	color:#555;
	text-align:center;
	padding-top:15px;
}

.copycell{
	width:100%;
	height:100px !important;
	overflow:auto;
	resize:none
}

.copycell_txt{
	font-weight:bold;
	text-align:center;
}

.input_color_txt{
	width:70px !important;
}

.code_container{
	width:400px;
	height:250px !important;
/*	background-color:#ccc;*/
}

#previewcontainer{
	text-align:center
}

.big-input{
	max-width:300px;
	display:inline;
}

div.modal-title,span.modal-title{
	font-size:x-large;
}

/*login texts*/
#login_error_text,#account_error_text,#reg_error_text,#forgot_error_text,.error_box,.account_error_text{
	color:#e00;
	text-align:center;
}

#login_success_text,#account_success_text,#reg_success_text,#forgot_success_text,.success_box,.account_success_text{
	color:#0a0;
	text-align:center;
}

.account_error_text,.account_success_text{
	padding:5px;
}

/*cookie privacy bubble*/
#footer-privacy-bubble{
	position:fixed;
	bottom:10px;
	right:45px;
	box-shadow:0px 0px 30px 5px #101010;
	width:300px;
	padding:7px;
	z-index:999999999;
	background:#222;
    color:rgb(220,220,220);
	font-size: 0.8em;
	padding:10px;
}

.footer-privacy-bubble-title{
	font-weight:bold;
	font-size:14px;
}

@media(max-width: 750px){
#footer-privacy-bubble{
	right:auto;
	width:100%;
}
}

@media(max-width: 1360px){
#home-splash iframe{
	display:none;
}

#home-splash{
	width:99% !important;
	height:auto;
	text-align:center;
	border:0px;
}

#home-splash-image{
	width:90%;
	max-width:950px;
	height:auto;
	position:relative;
}
}

.adplan-txt{
	text-align:center;
	font-size:small;
	line-height:2em;
}

/*uppercase all buttons*/
.btn:not(.btn-link,.btn-outline-secondary,.product_zone_btn){
    text-transform: uppercase;
}

.color-custom{
	display:inline-block;
    height:25px;
    width:60px;
}

.table-bg .displaycell{
	border-color:#333;
}

/* cij banner */
#cij-container{
	background:url("/images/mini-cij-bg.png");
	width:250px;
	height:50px;
	animation: cij-snow 30s infinite linear;
	border-radius:5px;
	cursor:pointer;
	margin: 0px auto;
}

@keyframes cij-snow {
  from {background-position: center bottom}
  to {background-position: center top}
}

#cij-inner{
	height:100%;
	background-position:center center;
	background-repeat:no-repeat;
	animation: cij-slideshow 6s infinite ease alternate;
}

@keyframes cij-slideshow{
  0%   {background-image:url("/images/mini-cij-logo.png")}
  33%   {background-image:url("/images/mini-cij-logo.png")}
  66%   {background-image:url("/images/mini-cij-join.png")}
  100% {background-image:url("/images/mini-cij-join.png")}
}

/*youtube video tutorial styles*/
.video-thumb-container{
	float:left;
	padding-left:5px;
	padding-right:20px;
}

#frame-videotut{
	max-width:460px;
	aspect-ratio:16/9;
}

@media(max-width: 768px){
.video-thumb-container{
	float:none;
	text-align:center;
	padding-right:5px;
}
}