/**
 * @license Copyright 2021 Lahuen Health SPA. All Rights Reserved.
 */
/* Raíz */
:root {
	--lh-top-appbar-height: 4.5rem;
}

.c-top-appbar__menu-wrapper {
	position: relative;
	display: inline-block;
}

.c-top-appbar__menu-dropdown {
	background-color: #fff;
	border-radius: 0.5rem;
	border: 1px solid #ccc;
	box-shadow: 0 0.75rem 0.75rem -1.1rem gray;
	position: absolute;
	right: 0;
	top: calc(100% + 0.5rem);
	width: 18rem;
	z-index: 1001;
}

.c-top-appbar__menu-dropdown ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0.6rem 0.5rem;
}

.c-top-appbar__menu-dropdown li {
	padding: 0.5rem 1rem;
	cursor: pointer;
}

.c-top-appbar__menu-dropdown .c-action {
	background-color: #fff;
}

.c-top-appbar__menu-dropdown .c-action .c-action__label {
	align-items: center;
	display: flex;
	color: var(--gray-a);
	font: 400 1.2rem / normal 'Open Sans', sans-serif;
}

.c-top-appbar__menu-dropdown__action-tasks .c-action__label {
	border-bottom: 0.1rem solid var(--gray-e);
}

.c-top-appbar__menu-dropdown__action-tasks .c-action__label::before {
	-webkit-mask-image: url('../images/icon_arrow_down.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: var(--primary-c-normal);
}

.c-top-appbar__menu-dropdown__action-profile .c-action__label::before {
	-webkit-mask-image: url('../images/icon_edit_profile.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: var(--primary-c-normal);
}

.c-top-appbar__menu-dropdown__action-password .c-action__label::before {
	-webkit-mask-image: url('../images/icon_password.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: var(--primary-c-normal);
}

.c-top-appbar__menu-dropdown__action-sync .c-action__label::before {
	-webkit-mask-image: url('../images/icon_device_phone.svg');
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: var(--primary-c-normal);
}

.c-top-appbar__menu-dropdown .c-action .c-action__label:before {
	content: ' ';
	height: 2rem;
	width: 2rem;
	margin-top: 0.5rem;
	margin-right: 0.7rem;
	margin-bottom: 0.5rem;
	margin-left: 0.5rem;
}

.c-top-appbar {
	align-items: center;
	background-color: #fff;
	display: flex;
	height: var(--lh-top-appbar-height);
	left: 0;
	padding-right: 2rem;
	position: fixed;
	top: 0;
	width: 100vw;
	box-shadow: 0 0.75rem 0.75rem -1.1rem gray;
	z-index: 500;
}

/* Sección de barra navegación */
.c-top-appbar__brand {
	display: flex;
}

.c-top-appbar__nav-action {
	background: center/75% no-repeat;
	border: none;
	cursor: pointer;
	height: 3.5rem;
	outline: none;
	padding: 0;
	width: 12rem;
}

.c-top-appbar__nav-action .c-label {
	display: none;
}

.c-top-appbar__customer-brand {
	margin-right: 0 0.5rem;
}

.c-top-appbar__customer-home {
	background-image: url('/assets/skins/lahuen/base/images/logo_simple.svg');
}

.c-top-appbar__main-brand {
	border-left: 0.2rem solid var(--gray-e);
	margin-left: 3.5rem;
}

.c-top-appbar__main-home {
	margin-left: 0.5rem;
}

.c-top-appbar__main-home {
	background-image: url('/assets/skins/lahuen/base/images/logo_simple.svg');
}

/* Sección de título */
.c-top-appbar__title {
	display: flex;
}

.c-top-appbar__maintitle {
	display: flex;
	margin: 0;
}

.c-top-appbar__maintitle .c-label {
	color: var(--primary-c-normal);
	font: 1.5rem/1.5rem 'Open Sans', sans-serif;
}

/* Sección de cuerpo */
.c-top-appbar__body {
	flex: 1;
}

/* Sección de barra herramientas */
.c-top-appbar__toolbar {
	align-items: center;
	display: flex;
}

/* Acciones de herramientas */
.c-top-appbar__tool-action {
	align-items: center;
	background: none;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	display: flex;
	height: 3.5rem;
	justify-content: center;
	outline: none;
	padding: 0;
	transition: background-color ease 0.25s;
	width: 3.5rem;
}

.c-top-appbar__tool-action:hover {
	background-color: var(--primary-e-bright);
}

.c-top-appbar__tool-action .c-label {
	-webkit-mask: center/cover no-repeat;
	background-color: var(--primary-c-normal);
	color: rgba(0, 0, 0, 0);
	display: flex;
	height: 2rem;
	user-select: none;
	width: 2rem;
}

.c-top-appbar__user-profile .c-label {
	-webkit-mask-image: url('/assets/skins/lahuen/base/images/icon_account_circle.svg');
}

.c-top-appbar__user-name {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--primary-c-normal);
	display: -webkit-box;
	font: 1.2rem/1.2rem 'Open Sans', sans-serif;
	overflow: hidden;
	padding: 0.3rem 0;
	text-transform: capitalize;
	width: 18rem;
}

.c-top-appbar__logout .c-label {
	-webkit-mask-image: url('/assets/skins/lahuen/base/images/icon_exit_door.svg');
}

.c-top-appbar__menu .c-label {
	-webkit-mask-image: url('/assets/skins/lahuen/base/images/icon_select.svg');
	height: 0.8rem;
	width: 1.3rem;
}