@media (min-width: 768px) {
	.form-inline .form-group {
		vertical-align: top;
	}

}
@media only screen and (max-width: 769px){
	#small-stats{
		display: block;
	}
	.main-stats{
		display: none;
	}
	.nav-sidebar{
		display: none;
	}
	.page-wrapper {
		padding-left: 10px;
	}
	#melmelipah-buttons{
		flex-direction: column;	
	}

	#progress-buttons{
		flex-direction: column;
		gap:20px;
	}

	#sub-head{
		flex: 1 1 100%;
	}
	#kartaharu-download{
		text-align: start;
		margin-top:20px;
	}
}	
@media only screen and (max-width: 600px) {
	#navbar-bar{
		display: block;
	}
	
	
	.custom-container-fluid {
		width: 100%;
		padding-left:0;
		background-color: #f8f4fc;
	}
	
	.nav-sidebar{
		width:40px;
	}
	#dash-small-head{
		width: 100%;
		line-height: 2rem;
  } 

  
@media (min-width: 1200px) {
	.toggle-page .ul-sidebar li ul {
		transform: translate3d(50px -42px 0);
		-webkit-transform: translate3d(50px, -42px, 0);
		left: 0;
		position: fixed;
		width: 170px;
		display: block;
		background-color: #fafafa;
		border: solid 1px #eee;
		box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.1);
		visibility: hidden;
		opacity: 0;
		height: auto !important;
	}

	.toggle-page .ul-sidebar li:hover ul {
		visibility: visible;
		opacity: 1;
	}
	
}

@media (max-width: 1200px) {
	body{
		background-color: #f8f4fc;
	}
	.nav-sidebar {
		width: 70px;
	}
	
	.nav-sidebar ul li a i{
		margin-right: 20px;
	}

	.nav-sidebar.active .toggler{
		opacity: 1;
	}
	.nav-sidebar .toggle-page span{
		opacity: 0;
	}

	.toggle-page .nav-sidebar {
		width: 220px;
		box-shadow: inset -2px 0 0 #e5e5e5, 2px 1px 3px rgba(0, 0, 0, 0.1);
	}
	
	.page-wrapper {
		padding-left: 10px;
	}

	.toggle-button {
		width: 48px;
	}

	.toggle-page .toggle-button {
		width: 218px;
	}

	.toggle-button span {
		opacity: 0;
		display: none;
	}

	.toggle-button:before {
		content: "\f101";
	}
	
	.nav-sidebar .toggle-button span{
		display: inline-block;
		opacity: 0;
	}
	.toggle-page .toggler span {
		opacity: 1;
	}

	.toggle-page .toggle-button:before {
		content: "\f100";
	}

	.span-link,
	.ul-sidebar a.arw:after {
		display: none;
	}

	.ul-sidebar li a{
		display: block;
		text-align: center;
		padding: 20px 20px;
	}

	.ul-sidebar li a .span-link{
		margin-right: 80px;
	}
	.toggle-page .span-link,
	.toggle-page .ul-sidebar a.arw:after {
		display: none;
	}

	.ul-sidebar li a i {
		float: none;
		display: block;
		height: 18px;
	}

	.toggle-page .ul-sidebar li a i {
		float: left;
		height: auto;
	}

	.page-wrapper:not(.toggle-page) .ul-sidebar li ul {
		transform: translate3d(50px -42px 0);
		-webkit-transform: translate3d(50px, -42px, 0);
		left: 0;
		position: fixed;
		width: 170px;
		display: block;
		background-color: #fafafa;
		border: solid 1px #eee;
		box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.1);
		visibility: hidden;
		opacity: 0;
		height: auto !important;
	}

	.page-wrapper:not(.toggle-page) .ul-sidebar li ul li a {
		padding-left: 25px;
	}

	.page-wrapper:not(.toggle-page) .ul-sidebar li:hover ul {
		visibility: visible;
		opacity: 1;
	}

	.ul-sidebar ul li:first-child {
		display: block;
	}

	.toggle-page .ul-sidebar ul li:first-child {
		display: none;
	}

}

}