/*grid-view*/
.grid-view {
	display:block;
}
.grid-view > .content{
	display:grid;
    grid-auto-rows: 1fr;
    user-select: none;
}
.grid-view > .content .item{
	overflow:hidden;
	width:100%;
	position:relative;
    text-align:center;
}
.grid-view > .content .item .thumb{
	display:block;
	position:relative;
    text-align: center;
}
.grid-view > .content .item .thumb img{
	display:block;
	width:100%;
	height:100%;
}

.grid-view > .content .item .text{
    display:block;
}
.grid-view > .content .item .text .title{
	display:block;
    color:#222;
    padding:5px 0;
    font-size:14px;
	position:relative;
}
.grid-view > .content .item .text .sub-title{
	display:block;
	font-size:12px;
	color:#888;
	padding:3px 0;
	position:relative;
}

.grid-view > .items1 
{
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: auto;
    grid-auto-columns: auto;
}
.grid-view > .items2{
    grid-template-columns: repeat(2, 1fr);
}
.grid-view > .items3{
    grid-template-columns: repeat(3, 1fr);
}
.grid-view > .items4{
    grid-template-columns: repeat(4, 1fr);
}
.grid-view > .items5{
    grid-template-columns: repeat(5, 1fr);
}
.grid-view > .items6{
    grid-template-columns: repeat(6, 1fr);
}

.grid-view > .in-row .item {
    display:flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap:16px !important;
}
.grid-view > .items1 .item .thumb {
    flex:0 0 35%;
}
.grid-view > .items1 .item .thumb img{
    display:block;
    width:100%;
}
.grid-view > .items1 .item .text {
    flex: 1;
    padding:0 !important;
}
.grid-view > .items1 .item .text .title {
    font-size:16px;
    color:#111;
}
.grid-view > .items1 .item .text .sub-title {
    font-size:14px;
    color:#444;
}

/*list-view*/
.list-view{
    display:flex;
    flex-direction: column;
}
.list-view > .item{
    flex:1;
    padding:8px 12px;
    text-decoration: none;
    display:flex;
    align-items: center;
    gap:16px;
    cursor:pointer;
    border-radius:6px;
}
.list-view > .item:hover{
    background: #e5e5e5;
}
.list-view > .item:active{
    background:#ccc;
}

.list-view > .item > .text{
    flex:1;
    display: flex;
    flex-direction: column;
    gap:2px;
}
.list-view > .item > .text > .title{
    font-size:16px;
    word-break: break-all;
}
.list-view > .item > .text > .sub-title{
    font-size:12px;
    font-size:16px;
    word-break: break-all;
}

/*Context-side*/
.context-side-wrapper{
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:100%;
	background:rgba(0,0,0,0.4);
	z-index:10;
	transition: all ease-in-out 0s;
}
.ctxwrap-open{
	width:100%;
}

.context-side-content{
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:100%;
	background:var(--color1-pale);
	z-index:12;
	overflow-y: auto;
	transition: all ease-in-out 0.3s;
    box-shadow: 8px 0 6px -8px #000;
	display:block;
    opacity: 0;
}
.ctxcont-open{
	display:block;
	width:240px;
    opacity: 1;
}

nav.context-side-items{
	position:relative;
	float:left;
	clear:both;
	width:100%;
	text-align:left;
	font-weight:normal;
}
.context-side-items ul,
.context-side-items li{
	list-style-type:none;
	margin:0;
	padding:0;
	position:relative;
}

.context-side-items ul{
	width:100%;
}

.context-side-items ul li{
	display:block;
}

.context-side-items ul li > .item,
.context-side-items ul li > .title{
    display:block;
	color:#222;
    padding:10px 16px;
}

.context-side-items ul li > .title{
	font-weight:bold;
}
.context-side-items ul li > .item{
	cursor:pointer;
}

.context-side-items ul li:hover{
	background:var(--color1-pale-hover);
}
.context-side-items ul li:active{
	background:var(--color1-pale-active);
}
.content-side-close{
	float:left;
	clear:both;
	width:100%;
	padding:8px 12px;
}
.context-side-items hr{
	height:1px;
	border:0;
	background:#d5d5d5;
}

nav.menuctx{
	text-align:left;
	font-weight:normal;
	display:none;
    z-index:10;
}
.menuctx ul,
.menuctx li{
	list-style-type:none;
	margin:0;
	padding:0;
	position:relative;
	background:#fff;
}

.menuctx ul{
	width:auto;
	border-radius:4px;
	box-shadow: 1px 1px 10px #999;
	padding:5px 0;
}

.menuctx ul li{
	display:block;
}

.menuctx ul li > .item{
	display:block;
	color:#222;
    border-radius:0;
	cursor:pointer;
    height:36px;
    line-height:36px;
    padding:0 12px;
    gap:10px;
    align-items: center;
}
.menuctx ul li > .item .label{
	display:block;
	text-overflow:ellipsis;
	white-space:nowrap;
	overflow:hidden;
}
.menuctx ul li:hover{
	background:#e7e7e7;
}
.menuctx ul li:active{
	background:#ccc;
}
.menuctx ul li > .item .title{
	font-weight:bold;
    font-size:14px;
}

.menuctx ul li > ul{
	position:absolute;
	top:0;
	display:none;
	width:100%;
}
.menuctx ul li:hover > ul{
	display:block;
}

.menuctx-w150 ul{
    width:150px;
}
.menuctx-w180 ul{
    width:180px;
}
.menuctx-w200 ul{
    width:200px;
}
.menuctx-w220 ul{
    width:220px;
}
.menuctx-w240 ul{
    width:240px;
}

.menuctx-left{
	left:0;
}
.menuctx-left ul li > ul{
	left:100%;
}

.menuctx-right{
	right:20px;
}
.menuctx-right ul li > ul{
	right:100%;
}

.menuctx-abs{
	position:absolute;
    top:100%;
    left:0;
}
.menuctx-fix{
	position:fixed;
}

/*tabs inline, column*/
.tab-panel{
    position:relative;
	height:100%;
	width:100%;
    /*position: absolute;*/
}
.tab-headers{
    display:flex;
    align-items: center;
    user-select: none;
    background: #fff;
}
.tab-headers > .item{
    flex:0 0 1;
    position: relative;
    font-size:14px;
    cursor:pointer;
    display:flex;
    align-items: center;
}
.tab-headers > .item label{
    flex:1;
    padding:0 10px;
    text-align: center;
    cursor:pointer;
}

.tab-headers > .item:hover{
    background:#e5e5e5;
}
.tab-headers > .item:active{
    background:#ccc;
}
.tab-panel > .body{
    position:relative;
	height:100%;
	width:100%;
	overflow:auto;
}

.tab-inline{
    position:absolute;
	top:0;
	left:0;
	width:100%;
    padding:40px 0 0 0;
	z-index:10;
}
.tab-inline > .tab-headers{
    position: absolute;
    top:0;
    height:40px;
    width:100%;
    border-bottom:1px solid #e5e5e5;
}
.tab-inline > .tab-headers > .item{
    height:100%;
    flex:1;
}

.tab-column {
    position:absolute;
    width:100%;
    height:100%;
    display:flex !important;
    flex-direction: row !important;
    column-gap: 16px !important;
}
.tab-column > .tab-headers {
    flex-basis:200px;
    height: 100%;
    overflow:auto;
    display:flex;
    flex-direction: column;
    align-items: left;
}
.tab-column > .tab-headers > .item {
    font-size:14px;
    width:100%;
    border:0;
}
.tab-column > .tab-headers > .item label {
    padding:6px 12px;
}

.tab-column > .body {
    flex:1;
}

/*Tabs actives*/
.tab-inline .item .tab-active{
    position:absolute;
    width:100%;
    left:0;
    bottom:0;
    height:4px;
    background:transparent;
}
.tab-inline .item-on label{ 
    color:var(--color1) !important;
}
.tab-inline .item-on .tab-active{ 
    background:var(--color1) !important;
}

.tab-column .item .tab-active{
    position:absolute;
    height:100%;
    left:0;
    width:4px;
    background:transparent;
}
.tab-column .item-on{ 
    background:var(--color1-pale) !important;
}
.tab-column .item-on label{ 
    color:var(--color1) !important;
}
.tab-column .item-on .tab-active{ 
    background:var(--color1) !important;
}

@media(min-width:768px){
	.menu-list{
		display:inline-flex;
        height:100%;
	}
	.menu-list ul, 
    .menu-list li{
		list-style-type:none;
		margin:0;
		padding:0;
		z-index:10;
	}
	.menu-list ul{
		float:left;
		position:relative;
	}
	.menu-list ul li{
		position:relative;
		float:left;
        width:150px;
        text-align: center;
    }
    .menu-list ul li:hover{
		background:var(--color-gris);
    }
    /*.menu-list ul li:hover a{
        color:#fff;
	}*/
	.menu-list ul li a{
		display:block;
		color:#222;
        font-size:14px;
        font-weight:bold;
		text-decoration:none;
		text-align:center;
        text-transform: uppercase;
	}
	.menu-list ul li a:hover{
        background:var(--color-gris-hover);
	}
	.menu-list ul li a:active{ 
		background:var(--color-gris-active);
	}
	.menu-list ul li > ul{
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		width:220px;
		background:var(--color1);
		box-shadow: 4px 4px 4px #222;
	}
	.menu-list ul li:hover > ul{
		display: block;
	}
	.menu-list ul li ul li > ul{
		position:absolute;
		margin:0;
		left:100%;
		top:0;
	}
	.menu-list ul li ul li:hover > ul{
		display:block;
	}
	.menu-list ul li ul li a{
		text-align:left;
		padding:12px;
		display:block;
		text-decoration: none;
		font-weight:normal !important;
		text-transform: none !important;
        font-size:14px !important;
	}
	.menu-list ul li ul li:hover{
		background:var(--color1-hover);
	}
	.menu-list ul li ul li a:hover{
		background:var(--color1-hover);
	}
	.menu-list ul li ul li a:active{
		background:var(--color1-active);
	}
	.menu-list ul li ul li{
		float:left;
		width:100%;
	}
	.menu-list ul li:hover > ul li a{
		color:var(--color-blanc);
	}

    .menu-list > ul{
        display:flex;
    }
    .menu-list > ul li{
        display:flex;
        flex-direction: column;
    }
    .menu-list > ul li a{
        display:flex;
        align-items: center;
        justify-content: center;
        height:100%;
        padding:0 16px;
    }
}

.btnMenuDrop{
	position:absolute;
    right:5px;
    top:10px;
    width:32px;
    height:32px;
    line-height:32px;
    text-align: center;
    color:#fff;
    font-size:18px;
    cursor:pointer;
    user-select: none;
	z-index:10;
	display:none;
}

@media(max-width:768px){
    .btnMenuDrop{
		display:block;
    }
        
	.ctxcont-open{
		width:320px;
	}
	.context-side-items ul li > .item{
		padding:14px 16px;
	}

    .menu-list ul, 
    .menu-list li{
		list-style-type:none;
		margin:0;
		padding:0;
		float:left;
		clear:both;
		width:100%;
	}

	.menu-list ul{
		float:left;
		position:relative;
	}
	.menu-list ul li > ul{
		display: none;
		position:relative;
		float:left;
		clear:both;
		width:100%;
	}
	.menu-list ul li{
		position:relative;
		float:left;
		clear:both;
		width:100%;
		border-bottom:1px solid var(--color1-active);
    }
	.menu-list ul li a{
		padding:15px 20px;
		display:block;
		color:#fff;
		font-size:16px;
		text-decoration:none;
		text-align:left;
	}
	.menu-list ul li a:active{
		background:var(--color1-active);
	}
	.menu-list ul li .btnMenuDrop a{
		padding:0px;
		text-decoration:none;
	}
	.menu-list ul li{
		position:relative;
	}
	.menu-list ul li ul li{
		float:left;
		width:100%;
		border:0;
    }
	.menu-list ul li ul li a{
		display:block;
		text-align:left;
		padding:14px 15px 16px;
		font-size:16px;
		text-decoration: none;
	}
    .menu-list ul li ul li a{
		padding-left:30px;
	}
    .menu-list ul li ul li ul li a{
		padding-left:60px;
	}
	.menu-list ul li ul li a:active{
		background:var(--color1-active);
		color:#fff;
	}
	.menu-list ul li > ul{
		padding:0 0 0 15px;
	}
	.menu-list ul li:hover > ul{
		display:none;
		padding:5px 0;
	}
	.menu-list ul li ul li > ul{
		position:relative;
		margin:0;
	}
	.menu-list ul li ul li:hover > ul{
		display:none;
	}

    .grid-view > .items1,
    .grid-view > .items2,
    .grid-view > .items3,
    .grid-view > .items4
    {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-view > .items1 > .item .thumb {
        width:160px;
    }
}

@media(max-width:480px){
	.menu-page > .wrapper > .items > .item .label{
        display:none;
    }

    .grid-view > .items1,
    .grid-view > .items2,
    .grid-view > .items3,
    .grid-view > .items4
    {
        grid-template-columns: repeat(1, 1fr) !important;
        grid-auto-rows: auto !important;
        grid-auto-columns: auto !important;
    }
}