.kodo-page-bottom-panel {
    position: sticky;
    bottom: 0;
    width: 100%;
    max-width: 28rem;
    display: block;
    z-index: 100;
}

.kodo-page-bottom-panel .bottom-nav {
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	padding-top: 8px;
	padding-bottom: 16px;

	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(24px);

	border-top: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 2.5rem 2.5rem 0 0;

	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.04);

	flex-shrink: 0;
	z-index: 50;
}

.kodo-page-bottom-panel .nav-item-holder {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	cursor: pointer;

	color: #9ca3af;
	background: transparent;
	border: none;

	transition: color 0.2s ease;
}

.kodo-page-bottom-panel .nav-item {
	flex: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	cursor: pointer;

	color: #9ca3af;
	background: transparent;
	border: none;

	transition: color 0.2s ease;
}

.kodo-page-bottom-panel .nav-item:hover {
	color: #6b7280;
}

.kodo-page-bottom-panel .nav-item-active {
	color: #d97706;
}

.kodo-page-bottom-panel .nav-icon-wrapper {
	padding: 12px;
	border-radius: 16px;
	transition: all 0.2s ease;
	background: transparent;
	display: flex;
}

.kodo-page-bottom-panel .nav-item-active .nav-icon-wrapper {
	background: #fef3c7;
}

.kodo-page-bottom-panel .nav-icon {
	width: 28px;
	height: 28px;
	stroke-width: 2px;
}

.kodo-page-bottom-panel .nav-icon-thick {
	stroke-width: 2.5px;
}