@media only screen and (min-width: 1024px) and (max-width: 1919px) { /*TABLET */
    .layout aside.oneFifth{
	width:40px;
	flex-basis: 40px;
	overflow: hidden;
	padding-right: 0px;
    }

    aside ul li i{
	margin-right: 0;
	width:100%;
	flex-basis: 100%;
	text-align: center;
    }

    aside + section.fourFifth{
	padding-top:10px;
	padding-left: 0px;
    }

    aside label{
	display:none;
    }

    body > .container{
	padding: 5px;
    }

    body:not(.auth) aside + section.fourFifth > div.layout{
	display:block;
    }

    .layout .fullColumn{
	width:calc(100% + 10px);
    }

}

@media only screen and (max-width: 1024px){ /*SMARTPHONE */
    html{
	font-size:16px;
    }

    body{
	font-size:1rem;
    }

    .onlyDesktop{
	display:none;
    }

    .onlyMobile{
	display:block;
    }

    div.debug{
	display:none !important;
    }

    .layout aside + section.fourFifth{
	flex:100 0 100%;
	overflow-y:auto;
	overflow-x:hidden;
    }

    .layout aside.oneFifth{
	bottom: 0;
	left: 0;
	right: 0;
	width: calc(100% + 20px);
	height: 54px;
	flex-basis: 44px;
	flex-direction: row;
	max-width: calc(100% + 20px);
	overflow: hidden;
	background:var(--bg-color);
	margin:0 0 0 -10px;
	border-top:2px solid var(--widget-bg-color);
	padding:10px 20px;
	order:2;
	position: fixed;
	z-index:1;
    }

    .layout aside.oneFifth .userCircle{
	width:30px;
	height:30px;
    }

    aside header{
	margin:0 10px 0 0;
    }

    aside ul{
	display:flex;
	overflow-y:hidden;
	overflow-x:scroll;
	min-width: 100%;
	height:calc(100% + 25px);
    }

    aside ul li{
	height:31px;
    }

    aside ul li i{
	margin-right: 0;
	width:100%;
	flex-basis: 100%;
	text-align: center;
    }

    aside + section.fourFifth{
	padding-top:10px;
	padding-left: 0px;
    }

    aside label{
	display:none;
    }

    body > .container{
	padding: 10px;
	flex-direction: column;
    }

    body:not(.auth) aside + section.fourFifth > div.layout{
	display:block;
    }

    .layout .fullColumn{
	width:100%;
    }

    body.auth div.container > section{
	margin:auto;
	width:90% !important;
	justify-content: center;
    }

    html body.auth div.container{
	width:100%;
    }

    html body.auth div.oneQuarter, html body.auth div.oneFifth{
	min-width: auto;
    }

    .layout .oneQuarter{
	flex-basis: calc(100% - 35px);
	width:calc(100% - 35px);
    }

    div.lightbox section{
	min-width: 100%;
    }

    section.widget main,
    section.widget header,
    section.widget main h1{
	padding:10px;
    }

    .layout{
	gap:15px;
    }

    .layout .oneThird{
	width:100%;
	flex-basis:100%;
    }


    .datalist{
	width:calc(100% - 40px);
    }


    .datalist.right {
	transform:  translate(0, 20px);
    }

}