/* PC Side Nav */
@media only screen and (min-width: 800px) {
  .navbar {
		background-color: #1f454d;
		width: 230px;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		font-size: 14px;
		color: white;
		transition: width 0.1s;
	}

	.collapsed .navbar {
		width: 100px;
		color: rgba(255, 255, 255, 0.6);
		font-size: 12px;
	}

	.navbar-logo {
		max-width: 128px;
		margin: 40px auto;
	}

	.collapsed .navbar-logo {
		max-width: 80px;
	}

	.navbar-list-container {
		padding: 0 16px;
	}

	.nav-box {
		background-color: #2b4e56;
		border-radius: 4px;
		cursor: pointer;
		overflow: hidden;
		transition: height 0.3s;
	}

	.nav-box.have-sub {
		height: 188px;
		position: relative;
	}

	.collapsed .nav-box {
		text-align: center;
		height: auto !important;
	}

	.nav-box.have-sub > .nav-box__list {
		background-color: #35575e;
	}

	.nav-box + .nav-box {
		margin-top: 8px;
	}

	.nav-box .icon {
		width: 28px;
		margin-right: 8px;
	}

	.nav-box .nav-box__list {
		padding: 8px;
		position: relative;
	}

	.nav-box .nav-box__list:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.nav-box .nav-box__list > * {
		display: inline-block;
		vertical-align: middle;
	}

	.collapsed .nav-box .nav-box__list > * {
		margin: auto;
	}

	.nav-box .arrow {
		width: 24px;
		height: 24px;
		position: absolute;
		top: 50%;
		right: 8px;
		transform: translateY(-50%);
		padding: 4px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
	}

	.nav-box .arrow img {
		transition: transform 0.3s;
	}

	.nav-box.nav-collapsed {
		height: 47px;
	}

	.nav-box.nav-collapsed .arrow img {
		transform: rotate(180deg);
	}

	.collapsed .arrow,
	.collapsed .nav-box__sub-nav {
		display: none;
	}
  #nav-collapsed-button {
		width: 48px;
		height: 48px;
		background-color: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		margin: 30px auto;
		transition: transform 0.1s;
	}
	#nav-collapsed-button img {
		width: 16px;
	}
}