/* Common */
body.lock {overflow: hidden;}

.mx-none {margin-left:-1.5rem; margin-right:-1.5rem;}
    @media (max-width: 768px) {
        .mx-none {margin-left:-1rem; margin-right:-1rem;}
    }

/* Buttons */
.btn  {padding:0.25rem 1.5rem 0.35rem 1.5rem; border-radius:2rem; font-size:1.2rem}

.btn.style1 {background-color: rgb(var(--color2)); color:rgb(var(--font-color)); border:2px solid rgb(var(--color2)) }
.btn.style1:hover {background-color: transparent; color:rgb(var(--font-color)); border:2px solid rgb(var(--color2-ui)); }
    
.btn.style2 {background-color: rgb(var(--color1)); color:rgb(var(--font-color-inv)); border:2px solid rgb(var(--color1)) }
.btn.style2:hover {background-color: rgb(var(--content-bg)); color:rgb(var(--font-color)); border:2px solid rgb(var(--color1-ui));  }    

.btn.disabled, button:disabled, .btn.style1.disabled, button.style1:disabled, .btn.style2.disabled, button.style2:disabled {
	background-color: rgba(var(--font-color), .15); color:rgba(var(--font-color), .75); border:2px rgba(var(--font-color), .15); }    


/* Main menu */

:root {
	--nav-height:36px;
	--nav-font-size:1.2rem;
}


#zenMenu 	{ background-color: rgb(var(--navbar-color)); height:var(--nav-height); line-height:var(--nav-height);
		display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; margin-left:2rem }
#zenMenu a 	{ text-decoration:none; white-space:nowrap; font-size:var(--nav-font-size); line-height:var(--nav-font-size); color: rgb(var(--nav-font-color)) }


.menu-items { margin:0; padding:0; display:-webkit-flex; display:flex; flex-wrap:wrap; width:100%; overflow:hidden; height:var(--nav-height)}
.menu-items .nav-item 	{ list-style: none; margin:0; padding:0;  height:var(--nav-height); 
		display:flex; border:1px solid transparent; border-radius:2rem; padding:.4rem 1rem 0 1rem; }
.menu-items .nav-item:hover, .menu-items .nav-item.active { border:1px solid rgb(var(--nav-active-color)); }

	
.more, .side-menu {width:36px; height:var(--nav-height); position:relative; cursor:pointer}
.more {display: none;}

#zenMenu a.mob-nav-icon {margin-right:1rem; line-height:.5rem }


.more-btn {height:var(--nav-height); width:36px; border:none}
.more-btn:hover, .more-btn.show {}
.more-btn i, .more-btn i::before, .more-btn i::after {
	position:absolute; width:5px; height:5px; background: rgb(var(--nav-font-color)); border-radius: 50%; content: ""
	}
.more-btn i {top:14px; left:16px} .more-btn i::before {top:-8px; left:0} .more-btn i::after {top:8px; left:0}

.more-items {background-color: rgb(var(--nav-color)); border-radius:0; top: -2px !important; padding:0 !important; margin:0 !important}
.more-items li {display:block}
.more-items a {color:rgb(var(--nav-font-active-color)); padding:.4rem 1rem; height:var(--nav-height); display:block}
.more-items .nav-item:hover, .more-items .nav-item.active {background-color:rgba(var(--nav-active-color), .75);}
#zenMenu .more-items .nav-item.active a, #zenMenu .more-items .nav-item:hover a {color:white}
		

/* Side menu on mobile */

.side-menu-btn {box-shadow:none; border:none; width:40px; height:24px; position:relative; background:transparent; margin-left:1rem}
.side-menu-btn i, .side-menu-btn i::before, .side-menu-btn i::after {
	position:absolute; width:24px; height:3px; background: rgb(var(--nav-font-color)); border-radius: 2px; content: ""
	}
.side-menu-btn i {left:0; top:10px} .side-menu-btn i::before {top:-8px; left:0} .side-menu-btn i::after {top:8px; left:0}	


.side-menu {position:fixed; left:-100%; right:0; top:0; width:75%; height:100%; padding:1rem; background-color:rgb(var(--content-bg));
			z-index:2000; box-shadow: 0 0 2rem rgba(0,0,0,0.3) !important; transition: left ease .3s}
.side-menu.show {left:0; transition: left ease .3s;}
.side-menu ul {margin:0; padding:0; list-style:none}
.side-menu .nav-item a { display:block; width:100%; color: rgb(var(--font-color)); text-decoration:none; padding:.25rem 1rem;}
.side-menu .nav-item a.active { background:rgb(var(--color1)); color: rgb(var(--font-color-inv)); padding:.5rem 1rem;}

.overlay {position:fixed; left:-100%; right:0px; top:0px; width:100%; height:100%; z-index:1100; background-color:black; 
	opacity:0; transition:opacity ease .5s;}
.overlay.show {left:0; opacity:.5; transition:opacity ease .5s;}

.close-btn {width:24px; height:24px; position:absolute; top:12px; right:12px;  z-index:1101; cursor:pointer; opacity:.5}
.close-btn i, .close-btn i::after {position:absolute; width:19px; height:2px; background: rgba(var(--font-color), .7); content: ""}
.close-btn i {transform: rotate(45deg); top:10px; left:3px}
.close-btn i::after {transform: rotate(-90deg);}

#sideMenuHeader .logo img {aspect-ratio: 1}
#sideMenuFooter {}
#sideMenuFooter a {text-decoration:none;}


/* Sprites | Icons */

.icon {
	--size: 24px; --x-shift:0; --y-shift:0; --active:0; display: inline-block; vertical-align:middle;
	width:var(--size); height:var(--size); background-size:calc(var(--size)*8) calc(var(--size)*3); 
	background-image:url(/assets/img/icons.svg); background-repeat:no-repeat; 
	background-position:calc(0px - var(--size) * var(--x-shift)) calc(0px - var(--size) * (var(--y-shift) + var(--active)) )
}

.set2 {background-image:url(/assets/img/icons2.svg)} .set3 {background-image:url(/assets/img/icons3.svg)}

.s16 {--size: 16px } .s24 {--size: 24px } .s32 {--size: 32px } .s48 {--size: 48px } .s64 {--size: 64px }
.x1 {--x-shift:0} .x2 {--x-shift:1} .x3 {--x-shift:2} .x4 {--x-shift:3} .x5 {--x-shift:4} .x6 {--x-shift:5} .x7 {--x-shift:6} .x8 {--x-shift:7}
.y1 {--y-shift:0} .y2 {--y-shift:1} .y3 {--y-shift:2} .y4 {--y-shift:3} .y5 {--y-shift:4} .y6 {--y-shift:5} .y7 {--y-shift:6} .y8 {--y-shift:7}

.n1, .n2, .n3, .n4, .n5, .n6, .n7, .n8 {background-size:calc(var(--size)*8) calc(var(--size)*2) !important}
.n1 {--x-shift:0; --y-shift:0} .n2 {--x-shift:1; --y-shift:0} .n3 {--x-shift:2; --y-shift:0} .n4 {--x-shift:3; --y-shift:0}
.n5 {--x-shift:4; --y-shift:0} .n6 {--x-shift:5; --y-shift:0} .n7 {--x-shift:6; --y-shift:0} .n8 {--x-shift:7; --y-shift:0}

.icon.hover:hover {--active:1; cursor:pointer;} .icon.active {--active:1} .icon.disabled {opacity:.25; cursor:default !important; --active:0 !important}
.icon2.hover:hover {--active:1; cursor:pointer;} .icon2.active {--active:1} .icon2.disabled {opacity:.25; cursor:default !important; --active:0 !important}

/* Aspect ratios */

	.ar-1-1 {width:100%; aspect-ratio:1}
	.ar-3-1 {width:100%; aspect-ratio:3}
	.ar-3-2 {width:100%; aspect-ratio:1.5}
	.ar-4-3 {width:100%; aspect-ratio:1.33}
	.ar-16-9 {width:100%; aspect-ratio:1.78}
	.ar-3-4 {width:100%; aspect-ratio:0.75}

/* Index List */

	.index-list { list-style:none; padding:0 }
	.index-list li { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom:.75rem;
		background-image: linear-gradient(to right, #aaa 25%, white 0%); background-size: 8px 2px;
		background-position: left 0 bottom 3px; background-repeat: repeat-x }
	.index-list b, .index-list i, .index-list u { font-weight:normal; font-style:normal; text-decoration:none }
	.index-list i { max-width:70% }
	.index-list b { max-width:30%; text-align:right }
	.index-list u { background-color: #cFc }
	.index-list i u { padding-right: 1rem; background-color:white }
	.index-list b u { padding-left: .5rem; background-color:white }
	.index-list b img, .index-list i img { vertical-align: bottom }


/* Button Bar */

 .btn-bar-content { display:none }
    .btn-bar-content.active { display:block }
    
    :root {
    	--btn-bar-border:rgb(var(--color1));
    	--btn-bar-bg: rgba(var(--color1), 0);
    	--btn-bar-hover: rgba(var(--color1), .25);
    	--btn-bar-active: rgb(var(--color1));
    }

    .zen-btn-bar { display: inline-flex; flex-direction: row; border-radius:5rem; border:2px solid var(--btn-bar-border); background-color: var(--btn-bar-bg) }
    .zen-btn-bar .btn { border:none; background-color:transparent; border-radius:0 }
    .zen-btn-bar .btn:first-child { border-radius: 5rem 0 0 5rem; padding-left:1.5rem }
    .zen-btn-bar .btn:last-child { border-radius: 0 5rem 5rem 0; padding-right:1.5rem }
    .zen-btn-bar .btn:hover { border:none; background-color:var(--btn-bar-hover) }
    .zen-btn-bar .btn.active { border:none; background-color:var(--btn-bar-active); color:white }