/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS GLOBALES
*   --------------------------------------------------------------------------------------------------------------
*/
.vbf-buscador-plugin-container {
    width: 100%;
    height: 100%;
    max-width: 100%;
    color: #111;
    margin: 0;
    padding: 0;
}

.vbf-buscador-plugin-container i {
    font-size: 1em;
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS LOADER
*   --------------------------------------------------------------------------------------------------------------
*/
#vbf-listado-standby {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 500px;
}

.vbf-loader {
    width: 30px;
    aspect-ratio: 1;
    --_c: no-repeat radial-gradient(farthest-side,#111 92%,#0000);
    background: 
        var(--_c) top,
        var(--_c) left,
        var(--_c) right,
        var(--_c) bottom;
    background-size: 6px 6px;
    animation: vbfLoaderAnimation 1s infinite;
    -webkit-animation: vbfLoaderAnimation 1s infinite;
}

@keyframes vbfLoaderAnimation {
    to {
        transform: rotate(.5turn)
    }
}

@-webkit-keyframes vbfLoaderAnimation {
    to {
        transform: rotate(.5turn)
    }
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS CABECERA DINÁMICA
*   --------------------------------------------------------------------------------------------------------------
*/
.cabecera-personalizada {
    width: 90%;
    max-width: 90%;
    background-color: #f0f0f0;
    background-position: center right;
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
    margin: 50px 0;
    border-radius: 20px;
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS LISTADO DE FARMACIAS
*   --------------------------------------------------------------------------------------------------------------
*/
.vbf-activar-cookies {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 10px;
    font-size: .85em;
    line-height: normal;
    font-weight: 500;
}

.vbf-listado-linea-divisoria {
    width: 90%;
    display: flex;
    margin: 0 auto;
    margin-bottom: 30px;
    position: relative;
}

#vbf-result-text-total,
#vbf-aviso-farmacias {
    font-size: .85em;
    font-weight: 500;
    line-height: normal;
    margin-top: 10px;
}

.vbf-listado-linea-divisoria div {
    background: #fff;
    width: fit-content;
    border-radius: 20px;
    text-align: center;
    margin: 0 auto;
    z-index: 0;
    font-size: .85em;
    font-weight: 500;
    padding: 2px 20px;
    line-height: normal;
}

.vbf-listado-linea-divisoria::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background: #fff;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 20px;
}

.vbf-ocultar-scroll {
    overflow: hidden;
}

#vbf-listado-content {
    display: none;
    margin-top: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.vbf-navegacion-fecha-container {
    width: 90%;
    margin: 20px auto;
}

.vbf-navegacion-fecha-container > div:first-of-type {
    font-weight: 600;
    line-height: normal;
    font-size: 24px;
}

.vbf-navegacion-fecha {
    margin-top: 15px;
    font-weight: 500;
    line-height: normal;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vbf-seleccionar-poblacion,
.vbf-result-seleccionar-otra-poblacion {
    font-size: .95em;
    font-weight: 500;
    line-height: normal;
    height: 40px;
    background: #111;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    width: 220px;
}

#vbf-no-location {
    display: block;
    height: 100%;
    padding-bottom: 100px;
}

.vbf-got-location-inner-container {
    padding-bottom: 100px;
}

.vbf-no-location-inner,
.vbf-got-location-inner {
    height: fit-content;
    background: #fff;
    border-radius: 0 0 50px 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    z-index: 0;
    padding-bottom: 50px;
}

.vbf-no-location-inner-text {
    margin-top: 20px;
}

.vbf-no-location-inner-text,
.vbf-got-location-inner-text,
.vbf-no-location-inner-text-subtitle {
    width: 90%;
}

.vbf-vaya-text {
    font-weight: 600;
    line-height: normal;
    font-size: .95em;
    margin-bottom: 5px;
}

.vbf-no-location-inner-text > div {
    font-weight: 600;
    line-height: normal;
    font-size: 24px;
}

#vbf-no-result-text {
    font-weight: 500;
    line-height: normal;
    font-size: .85em;
}

.vbf-no-location-inner-text-subtitle > div {
    font-weight: 500;
    line-height: normal;
    font-size: .95em;
}

#vbf-got-location {
    height: 100%;
}

.vbf-got-location-listado {
    display: none;
    flex-direction: column;
    min-height: 100%;
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS ITEMS DEL LISTADO
*   --------------------------------------------------------------------------------------------------------------
*/
.vbf-item-listado {
    padding: 20px 15px 10px 15px;
    background: #fff;
    border-radius: 20px;
    width: 90%;
    margin: 0 auto;
    margin-bottom: 30px;
    box-sizing: border-box;
    line-height: normal;
    font-weight: 500;
    position: relative;
}

.vbf-il-fila1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vbf-il-nombre-container {
    display: flex;
    align-items: center;
    flex: 1;
    margin-right: 20px;
    min-width: 0;
}

.vbf-il-nombre-container i {
    line-height: normal;
    padding-right: 10px;
    color: #4196fd;
    height: 2lh;
    display: flex;
    align-items: center;
    font-size: 1.5em;
    line-height: 1em;
}

.vbf-il-nombre {
    height: 2lh;
    display: flex;
    align-items: center;
    min-width: 0;
    font-size: .85em;
}

.vbf-il-nombre > div {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.vbf-il-telefono {
    display: flex;
    align-items: center;
}

.vbf-il-telefono > span {
    font-size: .85em;
}

.vbf-il-telefono i {
    line-height: normal;
    margin-right: 5px;
}

.vbf-il-fila2 {
    font-size: .95em;
    font-weight: 700;
    margin: 10px 0;
}

.vbf-il-direccion {
    height: 2lh;
    display: flex;
    align-items: center;
}

.vbf-il-direccion > div {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.vbf-il-fila3 {
    font-size: .85em;
}

.vbf-il-nota-localizacion {
    height: 1lh;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.vbf-il-nota-localizacion > div {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.vbf-il-fila4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: .85em;
}

.vbf-il-cp {
    flex: 1;
    margin-right: 20px;
    height: 1lh;
    display: flex;
    align-items: center;
    min-width: 0;
}

.vbf-il-cp > div {
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.vbf-btn-como-llegar {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
    color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    opacity: .5;
    pointer-events: none;
}

.vbf-il-fila5 {
    font-size: .85em;
}

.vbf-il-estado {
    height: 2lh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 3px 15px;
    text-align: center;
}

.vbf-distancia-farmacia-tarjeta {
    color: #111;
    background: #ddd;
    border-radius: 25px;
    padding: 5px 10px;
    font-size: 14px;
    position: absolute;
    top: -10px;
    right: 20px;
    border-width: 3px 3px 0 3px;
    border-style: solid;
    border-color: #fff;
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS MODAL DE POBLACIONES
*   --------------------------------------------------------------------------------------------------------------
*/
.vbf-modal-poblacion-container {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 99;
}

.vbf-mp-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    display: none;
}

.vbf-mp-loading,
.vbf-mf-loading {
    display: none;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.vbf-modal-poblacion {
    width: 90%;
    height: 90%;
    background: #fff;
    border-radius: 20px;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
    position: relative;
    transform: scale(.8);
    transition: transform .3s ease;
}

.vbf-mp-close > i {
    font-size: 2em;
    color: #4196fd;
    line-height: normal;
}

.vbf-mp-titulo,
.vbf-mf-titulo {
    margin: 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.vbf-mp-titulo span,
.vbf-mf-titulo span {
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
}

.vbf-mp-search {
    margin: 0 20px 25px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.vbf-mp-inputsearch {
    width: 100%;
    outline: none;
    border: 1px solid #e9f6f8;
    background: #e9f6f8;
    border-left: 0;
    height: 40px;
    box-sizing: border-box;
    border-radius: 0 20px 20px 0;
}

.vbf-mp-search > i {
    width: 50px;
    border-radius: 20px 0 0 20px;
    border: 1px solid #e9f6f8;
    background: #e9f6f8;
    color: #666;
    border-right: 0;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: normal;
    box-sizing: border-box;
}

.vbf-mp-content {
    margin: 0 20px;
    height: calc(100% - 80px);
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.vbf-mp-content::-webkit-scrollbar {
    display: none;
}

.vbf-mp-content-outer {
    height: calc(100% - 80px);
}

.vbf-mp-content-item {
    border-top: 1px solid #f0f0f0;
    padding: 10px 0;
    color: #111;
    font-size: .85em;
    font-weight: 500;
    line-height: normal;
}

.vbf-mp-escribe,
.vbf-mp-sin-resultados {
    color: #959ea9;
    text-align: center;
    font-size: .85em;
    font-weight: 500;
    line-height: normal;
}

.vbf-mp-no-resultados {
    display: none;
}

.vbf-mp-content-item .vbf-mp-content-item-cp {
    color: #666;
    font-size: .75em;
    background: #f0f0f0;
    margin-right: 5px;
    padding: 2px 6px;
    border-radius: 20px;
}

.vbf-abrir-modal-poblacion i {
    line-height: normal;
    margin-left: 5px;
}

.vbf-abrir-modal-poblacion-abs {
    position: absolute;
    bottom: -20px;
}

.vbf-mp-micro-container {
    width: 50px;
    height: 40px;
    border: 1px solid #e9f6f8;
    background: #e9f6f8;
    border-left: 0;
    display: none;
    justify-content: center;
    align-items: center;
    line-height: normal;
    color: #4196fd;
    box-sizing: border-box;
    border-radius: 0 20px 20px 0;
}

.vbf-mp-micro-container i {
    line-height: normal;
}

.vbf-mp-micro-container svg {
    display: none;
    background: #111;
    padding: 3px;
    border-radius: 50%;
    box-sizing: border-box;
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS MODAL DATEPICKER
*   --------------------------------------------------------------------------------------------------------------
*/
#vbf-modal-datepicker {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 99;
}

.vbf-md-fecha {
    font-size: .85em;
    font-weight: 500;
    line-height: normal;
}

.vbf-md-fecha span,
#vbf-result-text-total span,
.vbf-mf-subtitulo-2 span {
    font-weight: 600;
}

.vbf-md-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    display: none;
}

.vbf-md-cambiar-btn-container {
    position: relative;
}

.vbf-md-cambiar-dropdown {
    position: absolute;
    background: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, .25);
    line-height: normal;
    font-weight: 500;
    border-radius: 5px;
    top: 40px;
    left: 0;
    width: 150px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all .2s linear;
}

.vbf-md-filter-dropdown {
    position: absolute;
    background: #fff;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, .25);
    line-height: normal;
    font-weight: 500;
    border-radius: 5px;
    top: 40px;
    right: 0;
    width: 200px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all .2s linear;
}

.vbf-md-cambiar-dropdown i {
    font-size: 1.1em;
    margin-left: 5px;
}

.vbf-md-filter-dropdown i {
    font-size: 1.1em;
    margin-left: 5px;
}

.vbf-md-cambiar-dropdown span,
.vbf-md-filter-dropdown span {
    font-size: .85em;
}

.vbf-md-cambiar-dropdown-active,
.vbf-md-filter-dropdown-active {
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
    z-index: 1;
}

.vbf-md-cambiar-dropdown::before,
.vbf-md-filter-dropdown::before {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 0;
    content: '';
    display: block;
}

.vbf-md-cambiar-dropdown::after {
    position: absolute;
    top: -7px;
    left: 30px;
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent; 
    border-bottom: 8px solid #fff;
    content: '';
    display: block;
    transition: all 200ms linear;
}

.vbf-md-filter-dropdown::after {
    position: absolute;
    top: -7px;
    right: 30px;
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent; 
    border-bottom: 8px solid #fff;
    content: '';
    display: block;
    transition: all 200ms linear;
}

.vbf-md-cambiar-dropdown > div,
.vbf-md-filter-dropdown > div {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vbf-md-dropdown-separator {
    padding: 0 !important;
    width: 100%;
    height: 1px;
    background: #f0f0f0;
}

#vbf-md-open-cambiar,
#vbf-md-open-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    padding: 5px 10px;
}

#vbf-md-open-cambiar > span,
#vbf-md-open-filter > span {
    font-size: .85em;
}

#vbf-md-open-cambiar i,
#vbf-md-open-filter i {
    margin-right: 10px;
}

.vbf-md-filter-btns {
    display: flex;
    align-items: center;
    position: relative;
}

.vbf-quitar-filtros,
.vbf-md-open-filter-cp,
.vbf-md-open-filter-municipio {
    opacity: .4;
    pointer-events: none;
}

.vbf-quitar-filtros-active,
.vbf-md-open-filter-cp-active,
.vbf-md-open-filter-municipio-active {
    opacity: 1;
    pointer-events: auto;
}

.vbf-md-hay-filtros {
    position: relative;
}

.vbf-md-hay-filtros::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #111;
    border-radius: 50%;
    right: 6px;
    top: -3px;
}

.vbf-md-inner {
    background: #fff;
    border-radius: 20px;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
    padding: 50px 0;
    position: relative;
    transform: scale(.8);
    transition: transform .3s ease;
}

.vbf-md-inner > .flatpickr-calendar {
    margin: 10px;
    box-shadow: none;
}

.vbf-md-inner > .flatpickr-calendar::before,
.vbf-md-inner > .flatpickr-calendar::after {
    display: none;
}

.vbf-md-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.vbf-md-close > i {
    font-size: 2em;
    color: #4196fd;
    line-height: normal;
}

.flatpickr-months {
    margin-bottom: 30px;
    position: relative;
}

.flatpickr-months::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 100%;
    height: 1px;
    background: #f0f0f0;
}

.flatpickr-months > span.flatpickr-prev-month {
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    padding-left: 10px;
    color: #4196fd;
    fill: #4196fd;
}

.flatpickr-months > span.flatpickr-next-month {
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    padding-right: 10px;
    color: #4196fd;
    fill: #4196fd;
}

.flatpickr-months .flatpickr-current-month {
    font-size: .95em;
    line-height: normal;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flatpickr-months .flatpickr-current-month > select {
    margin-right: 10px;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    stroke: #4196fd;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: #4196fd !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
    background: inherit !important;
}

.vbf-navegacion-fecha i {
    line-height: normal;
}

.flatpickr-months .flatpickr-current-month > select,
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month,
.flatpickr-current-month input.cur-year,
.flatpickr-rContainer {
    font-size: .85em !important;
    font-weight: 600 !important;
    line-height: normal !important;
}

.flatpickr-current-month input.cur-year {
    margin-bottom: 3px !important;
}

.flatpickr-day {
    font-weight: 500 !important;
}

.flatpickr-day.today {
    border-color: #ddd !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    background: #4196fd !important;
    border-color: #4196fd !important;
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS MODAL MAPA
*   --------------------------------------------------------------------------------------------------------------
*/
.vbf-global-overlay {
    position: fixed;
    width: 100%;
    max-width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    z-index: 100;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin: 0;
}

.vbf-global-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: .85em;
    line-height: normal;
    font-weight: 600;
}

.vbf-mapa-loader {
    height: 15px;
    aspect-ratio: 6;
    --c: #0000 64%, #fff 66% 98%, #0000 101%;
    background:
        radial-gradient(35% 146% at 50% 159%,var(--c)) 0 0,
        radial-gradient(35% 146% at 50% -59%,var(--c)) 25% 100%;
    background-size: calc(100%/3) 50%;
    background-repeat: repeat-x;
    clip-path: inset(0 100% 0 0);
    animation: vbfMapaLoader 1.5s infinite linear;
    -webkit-animation: vbfMapaLoader 1.5s infinite linear;
    margin-top: 10px;
}

@keyframes vbfMapaLoader {
    50% {
        clip-path: inset(0)
    }
    to {
        clip-path: inset(0 0 0 100%)
    }
}

@-webkit-keyframes vbfMapaLoader {
    50% {
        clip-path: inset(0)
    }
    to {
        clip-path: inset(0 0 0 100%)
    }
}

#vbf-mm-mapa-con-ruta,
#vbf-mm-mapa-sin-ruta {
    display: none;
    height: 100%;
    border-radius: 20px;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
}

#vbf-modal-mapa {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: #fff;
    padding: 20px;
    box-sizing: border-box;
    flex-direction: column;
    opacity: 0;
    transform: scale(.8);
    transition: opacity .3s ease, transform .3s ease;
    z-index: 100;
}

.vbf-mm-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    display: none;
}

.vbf-mm-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vbf-mm-inner-header {
    background: #4196fd;
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
}

#vbf-mapa-farmacia-con-ruta {
    height: 100%;
    width: 100%;
    border-radius: 0 0 20px 20px;
}

#vbf-mapa-farmacia-sin-ruta {
    height: 100%;
    width: 100%;
    border-radius: 20px;
}

.vbf-mm-ih-ubicacion {
    border: 1px solid #fff;
    border-radius: 20px;
    display: flex;
    padding: 0 5px;
}

.vbf-mm-ih-ubicacion > div:first-of-type {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 10px;
    flex-direction: column;
}

.vbf-mm-ih-ubicacion i {
    color: #fff;
    line-height: normal;
}

.vbf-mm-ih-ubicacion i.ph-map-pin-simple,
.vbf-mm-ih-ubicacion i.ph-caret-down {
    font-size: .5em;
}

.vbf-mm-ih-ubicacion i.ph-map-pin {
    font-size: .8em;
    margin-top: 2px;
}

.vbf-mm-ih-ubicacion > div:last-of-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    margin-right: 5px;
}

.vbf-mm-ih-u-origen,
.vbf-mm-ih-u-destino {
    color: #fff;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    line-height: normal;
    overflow: hidden;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    font-weight: 500;
}

.vbf-mm-ih-u-origen {
    font-size: .75em;
}

.vbf-mm-ih-u-destino {
    font-size: .85em;
}

.vbf-mm-ih-datos {
    margin: 10px 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vbf-mm-ih-datos > span {
    display: flex;
    align-items: center;
}

.vbf-mm-ih-datos-distancia,
.vbf-mm-ih-datos-tiempo {
    font-size: .85em;
    line-height: normal;
    font-weight: 500;
}

.vbf-mm-ih-datos i,
.vbf-mm-ih-error i {
    line-height: normal;
    margin-right: 5px;
}

.vbf-mm-ih-medios {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vbf-mm-ih-m-car,
.vbf-mm-ih-m-transit,
.vbf-mm-ih-m-walking,
.vbf-mm-ih-m-bicycling {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vbf-mm-ih-m-car i,
.vbf-mm-ih-m-transit i,
.vbf-mm-ih-m-walking i,
.vbf-mm-ih-m-bicycling i {
    line-height: normal;
    color: #fff;
}

.vbf-mm-ih-m-car {
    background: #fff;
}

.vbf-mm-ih-m-car i {
    color: #4196fd;
}

.vbf-mm-close > i {
    font-size: 2em;
    color: #4196fd;
    line-height: normal;
    display: table-row;
}

.vbf-mm-titulo-container {
    display: flex;
    align-items: center;
}

.vbf-mm-titulo {
    font-size: .95em;
    line-height: normal;
    font-weight: 600;
    margin-left: 10px;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
}

.vbf-mm-datos {
    margin: 20px 0;
}

.vbf-mm-datos > div {
    font-size: .85em;
    line-height: normal;
    font-weight: 500;
}

.vbf-mm-datos span {
    font-weight: 600;
}

.vbf-mm-telefono {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #f0f0f0;
}

.vbf-mm-ih-error {
    display: none;
    font-size: .85em;
    color: #111;
    line-height: normal;
    font-weight: 500;
    margin: 7px 0;
    background: #fff;
    border-radius: 20px;
    padding: 3px 10px;
}

.vbf-mm-ih-error > div {
    display: flex;
    align-items: center;
}

i.ph-user-circle {
    font-size: 20px;
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS MODAL SIN FARMACIAS
*   --------------------------------------------------------------------------------------------------------------
*/
#vbf-modal-sin-farmacias {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 99;
}

.vbf-msf-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    display: none;
}

.vbf-msf-inner {
    background: #fff;
    border-radius: 20px;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
    padding: 60px 20px;
    position: relative;
    transform: scale(.8);
    transition: transform .3s ease;
    font-size: .85em;
    font-weight: 500;
    line-height: normal;
    width: 90%;
    box-sizing: border-box;
}

.vbf-msf-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.vbf-msf-close > i {
    font-size: 2em;
    color: #4196fd;
    line-height: normal;
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS MODAL DETALLES
*   --------------------------------------------------------------------------------------------------------------
*/
#vbf-modal-detalles {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 99;
}

.vbf-mde-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    display: none;
}

.vbf-mde-inner {
    background: #fff;
    border-radius: 20px;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
    padding: 50px 10px;
    position: relative;
    transform: scale(.8);
    transition: transform .3s ease;
    font-weight: 500;
    line-height: normal;
    width: 90%;
    height: 90%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.vbf-mde-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.vbf-mde-close > i {
    font-size: 2em;
    color: #4196fd;
    line-height: normal;
}

.vbf-mde-estado {
    height: 2lh;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    padding: 3px 15px;
    text-align: center;
    font-size: .85em;
}

.vbf-mde-como-llegar-container {
    display: none;
    justify-content: flex-end;
    margin-bottom: 10px;
    font-size: .85em;
}

.vbf-mde-como-llegar {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
    color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    width: fit-content;
    opacity: .5;
    pointer-events: none;
}

.vbf-btn-como-llegar-cookies-act {
    opacity: 1;
    pointer-events: auto;
}

.vbf-mde-guardia-arr {
    margin-top: 10px;
}

.vbf-mde-guardia-arr:first-of-type {
    margin-top: 0;
}

.vbf-fecha-mde-lowercase {
    text-transform: lowercase;
}

.vbf-mde-guardia-container,
.vbf-mde-horario-continuo,
.vbf-mde-horario-title,
.vbf-mde-horario-container {
    display: none;
}

.vbf-mde-horario-container {
    align-items: center;
}

.vbf-mde-horario-guardia-container {
    display: flex;
    align-items: center;
}

.vbf-mde-telefono {
    display: none;
    align-items: center;
    margin-bottom: 15px;
}

.vbf-mde-telefono i {
    line-height: normal;
    margin-right: 5px;
}

.vbf-mde-telefono > span {
    font-size: .85em;
}

.vbf-mde-nombre {
    font-size: .95em;
    margin-bottom: 15px;
}

.vbf-mde-direccion-title,
.vbf-mde-horario-title,
.vbf-mde-guardia-servicio {
    font-size: .75em;
    font-weight: 400;
}

.vbf-mde-direccion {
    font-size: 1.1em;
    font-weight: 700;
    margin: 5px 0;
}

.vbf-mde-nota-loc {
    font-size: .85em;
}

.vbf-mde-cp-municipio {
    margin: 10px 0 25px 0;
    font-size: .85em;
}

.vbf-mde-horario-container {
    margin: 5px 0 25px 0;
    font-size: .85em;
}

.vbf-mde-horario-guardia-container {
    margin: 5px 0;
    font-size: .85em;
}

.vbf-mde-guardia-tipo {
    margin-top: 5px;
    font-size: .85em;
}

.vbf-mde-guardia-container {
    margin-bottom: 25px;
    background: #f0f0f0;
    padding: 25px 15px 10px 15px;
    border-radius: 10px;
    position: relative;
}

.vbf-modal-detalles-scroll {
    height: 100%;
    padding: 0 10px;
    overflow-y: scroll;
    position: relative;
    border-bottom: 1px solid #ddd;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.vbf-modal-detalles-static {
    margin-top: 25px;
    position: relative;
}

.vbf-mde-guardia-shield {
    position: absolute;
    top: -15px;
    left: 10px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #f0f0f0;
}

.vbf-mde-guardia-shield i {
    font-size: 1.2em;
    line-height: normal;
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS MODAL FILTROS
*   --------------------------------------------------------------------------------------------------------------
*/
#vbf-modal-filtros {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 99;
}

.vbf-mf-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    display: none;
}

.vbf-mf-inner {
    background: #fff;
    border-radius: 20px;
    box-shadow:
        2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
        6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
        12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
        22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
        41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
        100px 100px 80px rgba(0, 0, 0, 0.07);
    position: relative;
    transform: scale(.8);
    transition: transform .3s ease;
    font-weight: 500;
    line-height: normal;
    width: 90%;
    height: 90%;
    box-sizing: border-box;
}

.vbf-mf-close {
    position: absolute;
    top: 20px;
    right: 20px;
}

.vbf-mf-close > i {
    font-size: 2em;
    color: #4196fd;
    line-height: normal;
}

.vbf-mf-no-filtros {
    display: none;
    color: #959ea9;
    text-align: center;
    font-size: .85em;
    font-weight: 500;
    line-height: normal;
    margin: 0 20px;
}

.vbf-modal-filtros-content {
    height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
}

.vbf-mf-subtitulo-container {
    border-bottom: 1px solid #ddd;
}

.vbf-mf-subtitulo-1 {
    font-size: .95em;
    font-weight: 500;
    line-height: normal;
    background: #4196fd;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: #fff;
}

.vbf-mf-subtitulo-1 i {
    margin-right: 10px;
    font-size: 1.1em;
    line-height: normal;
}

.vbf-mf-subtitulo-2 {
    font-size: .95em;
    font-weight: 500;
    line-height: normal;
    padding: 0 20px;
    padding-bottom: 20px;
}

.vbf-mf-listado {
    display: flex;
    flex-direction: column;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
    margin-bottom: 15px;
}

.vbf-mf-listado-item {
    border-top: 1px solid #f0f0f0;
    color: #111;
    font-size: .85em;
    font-weight: 500;
    line-height: normal;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.vbf-mf-listado-item i {
    margin-left: 10px;
    font-size: 1.1em;
    line-height: normal;
}

.vbf-mf-listado-item:first-of-type {
    border-top: 0;
}

.vbf-mf-listado-item-active {
    background: #f0f0f0;
    pointer-events: none;
}

/*
*   --------------------------------------------------------------------------------------------------------------
*   ESTILOS PARA RESPONSIVE EN VISTA ORDENADOR
*   --------------------------------------------------------------------------------------------------------------
*/
@media (min-width: 480px) {
    .vbf-seleccionar-poblacion,
    .vbf-mp-close,
    .vbf-mp-content-item,
    #vbf-md-open-cambiar,
    #vbf-md-open-filter,
    #vbf-md-open-fecha,
    .vbf-abrir-modal-poblacion,
    .vbf-md-close,
    .vbf-il-nombre-container i,
    .vbf-btn-como-llegar,
    .vbf-mm-close,
    .vbf-mde-como-llegar,
    .vbf-mde-close,
    .vbf-msf-close,
    .vbf-mm-ih-m-car,
    .vbf-mm-ih-m-transit,
    .vbf-mm-ih-m-walking,
    .vbf-mm-ih-m-bicycling,
    .vbf-mf-close,
    .vbf-mf-listado-item,
    .vbf-md-open-filter-cp,
    .vbf-md-open-filter-municipio,
    .vbf-quitar-filtros {
        cursor: pointer;
    }

    .vbf-ocultar-scroll {
        overflow: visible;
    }
}

@media (min-width: 800px) {
    .vbf-modal-poblacion,
    .vbf-mde-inner,
    .vbf-msf-inner,
    .vbf-mf-inner {
        width: 400px;
        max-height: 600px;
    }

    #vbf-no-location {
        width: 750px;
        margin: 0 auto;
        background: none;
    }

    .vbf-got-location-inner,
    .vbf-mm-titulo-container,
    #vbf-mm-mapa-con-ruta,
    #vbf-mm-mapa-sin-ruta {
        width: 750px;
        margin: 0 auto;
    }

    .cabecera-personalizada {
        height: 250px;
    }

    .vbf-navegacion-fecha-container,
    .vbf-activar-cookies {
        width: 750px;
    }

    .vbf-listado-farmacias {
        width: 750px;
        margin: 0 auto;
    }

    .vbf-item-listado,
    .vbf-listado-linea-divisoria {
        width: 100%;
    }

    .vbf-mm-datos {
        width: 750px;
        margin: 20px auto;
    }

    .vbf-mm-ih-medios {
        justify-content: space-evenly;
    }
}