@import url(/bukeala-static/v-1769785276/styles/panelita/components/searchresult.css);
@import url(/bukeala-static/v-1769785276/styles/panelita/wizard-asignacion.css);
@import url(/bukeala-static/v-1769785276/styles/custom/hospitalbritanico/wizard-hb-responsive.css);
@import url(/bukeala-static/v-1769785276/styles/panelita/wizard-fluid-height.css);

:root {
  --border-radius: 4px;

  --input-font-size: 14px;

  --bg-color: white;

  --color-text-title: var(--color-main);

  --filter-color-main: brightness(0) saturate(100%) invert(14%) sepia(83%) saturate(3826%) hue-rotate(198deg) brightness(89%) contrast(104%);
  --filter-color-accent: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(2555%) hue-rotate(211deg) brightness(90%) contrast(91%);
  --filter-color-main-dark: brightness(0) saturate(100%) invert(12%) sepia(20%) saturate(6951%) hue-rotate(191deg) brightness(94%) contrast(103%);
  --filter-icon-disabled: brightness(0) saturate(100%) invert(90%) sepia(11%) saturate(486%) hue-rotate(197deg) brightness(89%) contrast(88%);
}

body {
  font-weight: 400;
  color: var(--color-black);
}

main {
  height: 100%;
}

.loading {
  background-image: url(/bukeala-static/images/panelita/loading-grey.svg);
  background-color: var(--bg-color);
  background-position: center;
  position: fixed;
}

.step-content {
  background-color: var(--bg-color);
}

.subtitle {
  color: var(--color-grey-dark2);
  font-weight: 400;
}

.semibold {
  font-weight: 600 !important;
}

.btn-container {
  gap: 10px;
}

.btn {
  border-radius: var(--btn-border-radius) !important;
}

.btn.btn-primary {
  background-color: var(--color-b500);
  color: var(--color-n0) !important;
}

.btn.btn-primary:hover {
  background-color: #0065ff;
  color: var(--color-n0) !important;
}

.btn.btn-primary.main-action {
  width: 100%;
  border-radius: 16px !important;
  height: 44px;
}

.btn.btn-secondary {
  background-color: var(--color-n0) !important;
  color: #0052cc !important;
}

.btn.btn-secondary:hover {
  background-color: var(--color-n0) !important;
  color: var(--color-main) !important;
}

.btn.btn-secondary:active,
.btn.btn-secondary:focus {
  background-color: var(focus-color-n0) !important;
  color: var(--color-main-dark) !important;
}

#device[value="mobile"]~.wizard .btn.btn-main-action {
  width: 100%;
  height: 44px;
  border-radius: 16px !important;
}

.step-content[data-step^="findAva-searchBy"]:not([data-step^="findAva-searchByAuthorization"]) input.search {
    background-image: none;
    padding-left: 8px;
}

input[type="search"]:focus,
input[type="search"]:active {
  border: 1px solid var(--color-accent);
}

.top-nav {
  background-color: var(--bg-color);
}

.substep .top-nav {
  background-color: var(--color-n0);
}

.top-nav .go-back,
.top-nav .go-home {
  filter: var(--filter-color-main-dark);
}

.top-nav .go-back {
  padding-left: 0;
}

.desktop-nav-container {
  background-color: var(--bg-color);
}

.desktop-nav {
  border-color: #e5e5e5;
}

.desktop-nav .nav-link,
.desktop-nav .nav-link svg path {
  color: var(--color-grey-dark1);
}

.desktop-nav .nav-link .link-name {
  font-weight: 600;
}

.desktop-nav .nav-link.active::after {
  content: '';
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  position: absolute;
  bottom: -15px;
}

.user-header .icon-container {
  background-size: 20px;
  filter: var(--filter-color-accent);
}

.img-container.onboarding-welcome {
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/welcome.svg);
}

.img-container.onboarding-bookings {
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/onboarding-bookings.svg);
}

.img-container.onboarding-favorites {
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/onboarding-favs.svg);
}

.img-container.onboarding-history {
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/onboarding-history.svg);
}

.img-container.onboarding-optimize {
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/onboarding-optimize.svg);
}

.alert{
  border-radius: 8px !important;
}

.img-alert {
  margin-bottom: 32px;
}

.img-alert.home-msg::before {
  left: 6px;
  bottom: 0;
  width: 60px;
  height: 93px;
  background-position: bottom;
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/char.svg);
}

.img-alert .close-btn {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 16px;
  height: 16px;
  background-image: url(/bukeala-static/images/icons/panelita/close.svg);
  background-repeat: no-repeat;
  background-size: 16px;
  cursor: pointer;
}

.img-alert.optimize-msg::before {
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/optimize.svg);
  width: 210px;
  height: 116px;
  bottom: 0;
  left: -34px;
}

.img-alert.optimize-msg .text-content {
  height: inherit;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 16px 16px 16px 136px;
}

.welcome-title {
  color: var(--color-main);
}

.welcome-text .subtitle {
  font-size: 20px;
  font-weight: 400;
  max-width: 27ch;
  line-height: 27px;
  margin: 4px auto 0 !important;
}

.msg-title {
  color: var(--color-main);
}

.msg-desc {
  color: var(--color-black);
}

.msg.warning .msg-img {
  background-image: url(/bukeala-static/images/panelita/warning.svg);
}

.msg.success .msg-img {
  background-image: url(/bukeala-static/images/illustrations/calendar.svg);
  height: 200px;
  background-position: center;
}

.msg.error .msg-img {
  background-image: url(/bukeala-static/images/panelita/error.svg);
  height: 200px;
  min-height: unset;
  max-height: unset;
}

.msg.no-booking .msg-img,
.msg.no-booking-search-results .msg-img,
.msg.no-results .msg-img,
.msg.no-full-list-results .msg-img,
.msg.no-plan-results .msg-img,
.msg.no-favorites .msg-img,
.msg.no-area-results .msg-img,
.msg.no-branch-results .msg-img,
.msg.no-components-results .msg-img {
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/notfound.svg);
}

.msg.session-expired .msg-img {
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/session-expired.svg);
}

.booking-slider .booking-card-container .booking-card {
  font-size: 14px;
  min-height: unset;
  margin: 0;
}

.booking-slider .booking-card-container .booking-card .right .bottom .line+.line {
  margin-top: 2px;
}

.main-nav-link .link-title {
  color: var(--color-main);
  font-weight: 600;
}

.multiple-counter {
  font-size: 18px;
}

/* autocomplete al buscar m�dico en findAvailability */
.form-field input.ui-autocomplete-input:focus {
  outline: none !important;
}

.form-field ul.ui-autocomplete.ui-front {
  position: absolute;
  top: calc(100% - 3px) !important;
  left: 0;
  border: 1px solid var(--color-grey-light1) !important;
  border-top: 0 !important;
  box-shadow: none;
  background: #fff;
  border-radius: 0 0 4px 4px;
  z-index: 1010;
}

.form-field .ui-autocomplete .ui-menu-item {
  padding: 8px 16px 8px 32px !important;
}

.form-field .ui-autocomplete .ui-menu-item:hover {
  background: #F8F8F8;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  background: transparent !important;
  border-color: transparent !important;
  color: #3A3A3C;
}

.ui-menu-item.selected .ui-state-active,
.ui-menu-item.selected .ui-widget-content .ui-state-active,
.ui-menu-item.selected .ui-widget-header .ui-state-active,
.ui-menu-item.selected a.ui-button:active,
.ui-menu-item.selected .ui-button:active,
.ui-menu-item.selected .ui-button.ui-state-active:hover {
  color: white !important;
}

.form-field .ui-menu .ui-menu-item-wrapper {
  padding: 0;
}

#noResultRefilters {
  overflow-x: auto;
}

.search-result {
  width: 100%;
  border-color: #D8D8D8;
  background-color: var(--color-n0);
}

.search-result:hover {
  background-color: var(--color-b50) !important;
}

.results-list .result.selected,
.results-list .result.selected .row-cell,
.results-list .result.selected .row-cell span {
  background: var(--color-n0)!important;
}

.search-result.selected:hover {
  background-color: var(--color-accent) !important;
  color: var(--color-white);
}

.search-result.area .card-image {
  background-image: url(/bukeala-static/images/icons/panelita/account-profile.svg);
}

.search-result.component .card-image {
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/icons/component.svg);
}

.search-result.procedure .card-image {
  background-image: url(/bukeala-static/images/custom/hospitalbritanico/icons/testtube.svg);
}

.card.selection.search-result,
.search-result {
  border-radius: 8px !important;
}

.card {
  background-color: var(--color-bg-light);
}

.card.favorite.selected .picture.empty {
  filter: none !important;
}

.card .card-title {
  color: var(--color-main);
  font-weight: 500;
}

.card.selected .card-title {
  color: var(--color-white);
}

.card.favorite {
  background-color: var(--color-bg-light);
  gap: 0;
}

.card.favorite .card-title {
  margin-top: 6px;
  color: var(--color-black);
  font-weight: 600;
}

.card.favorite .card-text {
  font-weight: 500;
  color: var(--color-grey-dark1);
}

.unavailable.card.favorite .card-text {
  font-weight: 500;
  color: var(--color-grey-dark3);
}

.card.favorite .icon {
  background-image: url(/bukeala-static/images/icons/panelita/favorite.svg);
  background-size: 16px;
  filter: var(--filter-accent);
}

.card.unavailable {
  background-color: var(--color-grey-light3);
}

.card.unavailable .picture.empty {
  filter: grayscale(1);
}

.card.favorite.unavailable .fav-checkbox {
  filter: grayscale(100%);
}

.card.unavailable .card-title {
  color: var(--color-grey-dark3);
}

.card.confirm-search {
  height: 72px;
  background-color: var(--color-bg-light);
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
}

.card.confirm-search .icon-container {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.card.confirm-search .card-title {
  color: var(--color-black);
  font-size: 16px;
  font-weight: 600;
  padding-left: 24px;
}

.lozenge.fill {
  background-color: var(--color-main-light);
  border-color: var(--color-main);
}

.lozenge span {
  color: var(--color-main);
}

.lozenge.disabled span {
  color: var(--color-n600);
}

.lozenge .btn.btn-icon,
.lozenge .icon-container {
  filter: var(--filter-color-main);
}

.lozenge .icon-container {
  margin-right: 8px;
}

.doc-profile-header {
  min-height: 140px;
}

.doc-profile-header .doc-name {
  font-weight: 500;
}

.doc-profile-header .doc-component {
  color: var(--color-grey-dark2);
}

/* .doc-profile-header .doc-description {
  color: var(--color-grey-dark3);
} */

.selector+.selector {
  margin-top: 2em;
}

/* .card.icon-article .icon-container {
  background-image: url('/bukeala-static/images/custom/hospitalbritanico/icons/article-accent.svg');
}

.card.icon-presential .icon-container {
  background-image: url('/bukeala-static/images/custom/hospitalbritanico/icons/clinic-accent.svg');
}

.card.icon-virtual .icon-container {
  background-image: url('/bukeala-static/images/custom/hospitalbritanico/icons/virtual-accent.svg');
}

.card.icon-component .icon-container {
  background-image: url('/bukeala-static/images/custom/hospitalbritanico/icons/component.svg');
}

.card.icon-area .icon-container {
  background-image: url('/bukeala-static/images/custom/hospitalbritanico/icons/stethoscope-accent.svg');
}

.card.icon-procedure .icon-container {
  background-image: url('/bukeala-static/images/custom/hospitalbritanico/icons/testtube-accent.svg');
}

.card.icon-user .icon-container {
  background-image: url('/bukeala-static/images/custom/hospitalbritanico/icons/user.svg');
}

.card.search-result.area .icon-container {
  background-image: url('/bukeala-static/images/custom/hospitalbritanico/avatar-blue.svg'); 
  background-size: 24px;
}

.card.search-result.procedure .icon-container {
  background-image: url('/bukeala-static/images/custom/hospitalbritanico/icons/testtube-accent.svg'); 
  background-size: 24px;
} */

.card.selection.icon-selection.selected:not(.search-result) .icon-container {
  filter: var(--filter-n0);
}

nav.datepicker--nav {
  background: transparent;
  font-family: 'Open Sans';
}

select.time+.chzn-container {
  height: 32px;
  width: 98px !important;
}

select.time+.chzn-container .chzn-single {
  height: 32px;
  padding-left: 8px;
  color: var(--color-main);
}

.btn{
  border-radius: 8px !important;
}

.btn.day {
  color: var(--color-main);
  border-color: #e5e5e5 !important;
  border-radius: 8px !important;
}

.day-header {
  color: var(--color-grey-dark1);
}

/* [data-step=findAva-results] .wrapper.noresults {
  margin-top: -44px;
} */

[data-step=findAva-results] .refilters-title,
[data-step=findAva-multiple-results] .refilters-title {
  font-size: 14px;
}

.results-list .result .row-cell.branch span::before {
  color: var(--color-main);
}

.results-list .result:not(.multiple):not(.multiple-sessions){
  background-color: var(--bg-color) !important;
}

.results-list .result:not(.multiple):not(.multiple-sessions):hover{
  background-color: var(--color-b50) !important;
}

.form-field>label {
  font-weight: 500;
}

[data-step=bookingConfirm] .form-field.vertical {
  max-width: 380px;
}

[data-step=bookingEnd] button {
  width: 124px;
}

.wrapper.bookings .substep.show {
  transform: translateY(calc(-100% - 134px));
}

.wrapper.favorites .substep.show {
  transform: translateY(calc(-100% - 112px));
}

.wrapper.error-customerNotValid {
  height: 100vh;
  justify-content: center;
  top: var(--top-nav-height);
}

.booking-card .right .bottom .line.virtual .icon-container {
  background-position: top -1px left 1px;
}

.booking-card .right .bottom .line.duration .icon-container {
  background-size: 14px;
  background-position: center bottom 2px;
}

.multiple-sessions-card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.multiple-sessions-card {
  height: 72px;
  width: 240px;
  background: var(--color-b50);
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
}

.multiple-sessions-card .card-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-n800);
}

.multiple-sessions-card .card-time {
  font-size: 12px;
  color: var(--color-n800);
}

.marker {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	border-radius: 50%;
	background: var(--color-main-accent);
	color: var(--color-n0);
	flex-shrink: 0;
	font-size: 12px;
	padding: 0;
	flex-grow: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.marker::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 16px;
    background-position: center;
    filter: var(--filter-n0);
    background-repeat: no-repeat;
	
}

.marker.mdi-planGroup-particular::before{
	background-image: url(/bukeala-static/images/custom/hospitalbritanico/icons/planGroup-particular.svg);
}

.marker.mdi-planGroup-exclusive::before{
	background-image: url(/bukeala-static/images/custom/hospitalbritanico/icons/planGroup-exclusive.svg);
}

.marker.mdi-planGroup-outstanding::before{
	background-image: url(/bukeala-static/images/custom/hospitalbritanico/icons/planGroup-outstanding.svg);
}

.marker.mdi-planGroup-star::before{
	background-image: url(/bukeala-static/images/custom/hospitalbritanico/icons/planGroup-star.svg);
}

.ui-datepicker-calendar tbody td > * {
	height: 32px;
    width: 32px;
}

.btn.day, .btn.time-range {
    border-color: var(--color-n400) !important;
    color: var(--color-n800);
}

.results-list .result .row-cell.branch .icon-container {
    filter: var(--filter-color-main);
}

@media screen and (max-width: 799px) {
  .search-result {
    background-color: var(--color-bg-light);
    border-radius: 16px;
  }

  .search-result.selected {
    background-color: var(--color-bg-light);
    border-color: var(--color-accent);
    color: var(--color-text-main);
    background-image: url(/bukeala-static/images/icons/panelita/check-white.svg);
  }

  .search-results .selection.selected::before {
    filter: none;
  }

	.secondary-filters .filters-title {
		font-weight: 500;
	}
	
	.secondary-filters .filters-title, 
	.secondary-filters .filters-subtitle {
		color: var(--color-grey-dark2);
	}
}

@media screen and (min-width: 800px) {
  .btn.btn-sm {
    height: 32px;
    padding: 6px 12px !important;
  }

  form.secondary-filters {
    margin-bottom: 16px;
  }

  .search-results {
    background-color: var(--color-n0);
  }
}