@media screen and (max-width: 768px) {

	:root{
		--main_container-padding: 24px 24px 40px;
	}

	#sidebar.first-hide {
		width: 10px;
		background-color: var(--panelClose-background);
		border-right: #6bf7ba 1px solid;
		box-shadow: 5px 0px 10px 0px rgba(40, 176, 252, 0.5);
	}

	#sidebar.first-hide .sidebar-top .user {
		opacity:0;
		transition: .2s ease;
	}

	#sidebar.first-hide .side-menu li a {
		width: calc(48px - (4px * 2));
		transition: width .2s ease;
	}

	#sidebar.first-hide ~ #content {
		width: calc(100% - 10px);
		left: 10px;
	}

	#content nav .panel.first-hide {
		background-color: var(--panelClose-background);;
		padding-right: 10px;
	}


	#content main.hide .overlay {
		display: unset;
		width: 100vw;
		height: 100dvh;
		/* position: absolute; */
		background-color: rgb(255 255 255 / 70%);
		top: 0;
		left: 0;
		/* filter: blur(60px); */
		backdrop-filter: blur(2px);
		transition: var(--transition-menu);
	}


	/*
	#sidebar {
		width: 200px;
	}
	*/

	
	section#content {
		/* width: calc(100% - 60px); */
		width: calc(100% + 260px);
		/*left: 200px;*/
	}
	

	#content nav .nav-link {
		display: none;
	}

	#content main.hide {
		overflow-y: hidden;
	}

}






@media screen and (max-width: 576px) {

	:root{
		--main_container-padding: 24px 10px 40px;
		--container-padding: 15px;

		--space-between-elements: 15px;
	}

	h1 {
		font-size: 30px;
	}

	h2 {
		font-size: 24px;
	}

	.ico > * {
		width: 22px;
		height: 22px;
	}

	#content .main__container {
		/* padding: 24px 24px 40px; */
		padding: var(--main_container-padding);
	}

	#content.hide .main__container.full-width-m {
		padding: 0;
	}


	#content main .container {
		grid-gap: 24px;
	}

	#content main .box-wrapper > div {
		/* padding: 10px; */
		padding: var(--container-padding);
	}

	#content main .table-data > div {
		/* padding: 10px; */
		padding: var(--container-padding);
	}

	#content nav {
		grid-gap: 15px;
	}

	#content nav .logo img {
		max-height: 35px;
	}

	#content nav form .form-input input {
		display: none;
	}

	#content nav form .form-input button {
		width: auto;
		height: auto;
		background: transparent;
		border-radius: none;
		color: var(--dark);
	}

	#content nav form.show .form-input input {
		display: block;
		width: 100%;
	}
	#content nav form.show .form-input button {
		width: 36px;
		height: 100%;
		border-radius: 0 36px 36px 0;
		color: var(--light);
		background: var(--red);
	}

	#content nav form.show ~ .notification,
	#content nav form.show ~ .profile {
		display: none;
	}


	#content main .box-info {
		grid-template-columns: 1fr;
	}

	#content main .table-data .head {
		min-width: 420px;
	}
	#content main .table-data .order table {
		min-width: 420px;
	}
	#content main .table-data .todo .todo-list {
		min-width: 420px;
	}

	#content nav .user .user-info .user-avatar {
		margin-right: 5px;
	}













	/*********************************/
	/* btn */
	/*********************************/

	.btn-submit {
		font-size: 14px;
	}


	/*********************************/







}