/* ------------------------------- HEADER BAR ------------------------------- */
#main .topbar {
	position: fixed;
	display: grid;
	grid-template-columns: auto auto;

	background-color: var(--panel-color);
	border-bottom: solid 1px var(--border-color);

	transition: width 0.5s;
	padding: 0px 18px;
	min-height: 56px;
	width: calc(100% - 232px);
	z-index: 999;
}

#main.collapsed .topbar {
	width: calc(100% - 56px);
}
/* -------------------------------------------------------------------------- */

/* -------------------------- HEADER BAR LEFT SIDE -------------------------- */
/* Sidebar collapse button */
.menu {
	display: grid;
	place-content: center;

	position: absolute;
	left: -10px;
	top: 16px;

	background-color: var(--panel-color);
	border: solid 1px var(--border-color);
	border-radius: 50%;
	cursor: pointer;

	width: 20px;
	height: 20px;
}
.menu i {
	color: var(--tc-primary);
	font-size: 14px;
}

/* Tablet size */
@media screen and (max-width: 768px) {
	div.topbar-left {
		display: none;
	}
}

/* Large phone size */
@media screen and (max-width: 425px) {
	#main div.mobile-topbar {
		height: 112px;
	}
}
/* -------------------------------------------------------------------------- */

/* -------------------------- HEADER BAR RIGHT SIDE ------------------------- */
.topbar-items {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.topbar-right {
	flex-wrap: wrap;
	gap: 0 6px;
}

.notificationButton i,
.navBtn i {
	font-size: 19px;
	margin: 8px 9px;
}

.badge-notifications {
	display: grid;
	place-content: center;
	padding: 0 10px;
	width: auto;
	height: 24px;
	border-radius: 3px;
	border: solid 1px #0091ff;
	background-color: rgba(77, 124, 254, 0.08);
}
/* -------------------------------------------------------------------------- */

/* ----------------------- EXTERNAL CUSTOMER DASHBOARD ---------------------- */
.customer-external-bottombar ~ .topbar {
	padding: 0 30px;
	height: auto;
}

/* timer display noning */
.customer-external-bottombar ~ .topbar .mobile-timer {
	display: none;
}

div.mobile-notifications-dropdown .notification-dropdown .fa-circle {
	color: transparent;
}
div.mobile-notifications-dropdown .notification-dropdown .fa-bell {
	color: var(--tc-primary);
}
/* -------------------------------------------------------------------------- */

/* ------------------------------ MOBILE TOPBAR ----------------------------- */
.mobile-topbar {
	background-color: var(--panel-color);
	border-bottom: solid 1px var(--border-color);
	padding: 10px 30px;
}

.topbar .topbar-items span {
	margin: 0px 5px;
}

.topbar-fixed {
	position: fixed;
	top: 0;

	transform: translate3d(0, 0, 0);
	white-space: nowrap;
	width: 100%;
	height: 60px;
	z-index: 99;
}
/* -------------------------------------------------------------------------- */

/* ------------------------------ TOPBAR ICONS ------------------------------ */
.topbar .topbar-items span,
.topbar .topbar-items a {
	margin: 0;
}

.topbar-items .addButton {
	font-size: 22px;
	margin-top: 4px;
}
/* -------------------------------------------------------------------------- */

/* --------------------------- NOTIFICATION BUTTON -------------------------- */

.navBtn i.tc-primary {
	font-size: 19px;
	padding: 3px 0;
}

/* notification dropdown stack of icons */
.notificationButton .fa-stack.has-badge {
	padding: 3px;
	height: 34px;
}
.notificationButton .fa-stack.has-badge:hover {
	border-radius: 50%;
}
.notification-dropdown .notificationButton:hover i.fa-circle {
	margin: -2.5px 0 0 0;
}

/* notification dropdown bell icon */
.notification-dropdown i.fa-bell {
	font-size: 20px;
	margin: 0;
}

/* notification dropdown circle icon */
.notificationButton i.fa-circle {
	display: none;
}

/* Bell, Cog and Wrench Buttons */
.notificationButton i,
.navBtn i {
	font-size: 19px;
	margin: 8px 9px;
}

/* Add Button Hover */
.topbar-right .topbar-right-add {
	min-width: 35px;
	min-height: 35px;
	display: grid;
	justify-items: center;
	align-content: center;
}

.notificationButton:hover i.fa-circle,
.navBtn:hover i {
	padding: 8px 9px;
	margin: 0;
}

/* Topbar Cog Button */
.navBtn:hover i.fa-wrench,
.navBtn:hover i.fa-cog {
	padding: 9px 9px;
}

.topbar .topbar-items > .notification-dropdown.dropdown,
.topbar .topbar-items > a.navBtn {
	margin: 0 1.5px;
}
/* -------------------------------------------------------------------------- */