/* ============================================================
   BOLEPIX HOME1 C1R1
   Consulta mensal e calendário visual estável
   ============================================================ */

.bp-home-period-card-v178
.bp-home-period-head-v178 {

    align-items: flex-end !important;

    gap: 24px !important;
}


.bp-home-period-title-v178 {

    flex: 1 1 auto !important;

    min-width: 0 !important;
}


.bp-home-date-filter-v178 {

    display: flex !important;

    flex-direction: column !important;

    flex: 0 0 324px !important;

    width: 324px !important;

    min-width: 270px !important;

    max-width: 100% !important;

    gap: 6px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: visible !important;
}


.bp-home-date-filter-v178
> span {

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    font-weight: 700 !important;

    line-height: 18px !important;
}


.bp-home-date-box-v178 {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: 42px !important;

    min-height: 42px !important;

    max-height: 42px !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
}


.bp-home-date-display-v178 {

    appearance: none !important;

    -webkit-appearance: none !important;

    display: block !important;

    width: 100% !important;

    height: 42px !important;

    min-height: 42px !important;

    max-height: 42px !important;

    margin: 0 !important;

    padding:
      0
      48px
      0
      13px !important;

    box-sizing: border-box !important;

    border:
      1px solid
      #c9d8ec !important;

    border-radius:
      12px !important;

    background:
      #fff !important;

    color:
      #07152d !important;

    font-size:
      14px !important;

    font-weight:
      500 !important;

    line-height:
      40px !important;

    cursor:
      pointer !important;

    outline:
      none !important;

    overflow:
      hidden !important;

    text-overflow:
      ellipsis !important;

    white-space:
      nowrap !important;

    transform:
      none !important;

    translate:
      none !important;
}


.bp-home-date-display-v178:focus {

    border-color:
      #77a7ec !important;

    box-shadow:
      0 0 0 2px
      rgba(
        13,
        110,
        253,
        .10
      ) !important;
}


/*
 * Date nativo continua no DOM somente para abrir
 * o calendário do navegador.
 *
 * Ele nunca é desenhado na tela.
 */
.bp-home-date-native-v178 {

    position: absolute !important;

    top: 50% !important;

    right: 42px !important;

    width: 1px !important;

    min-width: 1px !important;

    max-width: 1px !important;

    height: 1px !important;

    min-height: 1px !important;

    max-height: 1px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;

    transform:
      translateY(-50%) !important;
}


.bp-home-calendar-btn-v178 {

    position: absolute !important;

    top: 50% !important;

    right: 7px !important;

    bottom: auto !important;

    left: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 30px !important;

    min-width: 30px !important;

    max-width: 30px !important;

    height: 30px !important;

    min-height: 30px !important;

    max-height: 30px !important;

    margin: 0 !important;

    padding: 5px !important;

    border: 0 !important;

    border-radius:
      8px !important;

    background:
      transparent !important;

    color:
      #0a2348 !important;

    cursor:
      pointer !important;

    box-sizing:
      border-box !important;

    transform:
      translateY(-50%) !important;

    translate:
      none !important;
}


.bp-home-calendar-btn-v178:hover {

    top: 50% !important;

    right: 7px !important;

    background:
      #edf5ff !important;

    transform:
      translateY(-50%) !important;

    translate:
      none !important;
}


.bp-home-calendar-btn-v178:active,
.bp-home-calendar-btn-v178:focus,
.bp-home-calendar-btn-v178:focus-visible {

    top: 50% !important;

    right: 7px !important;

    transform:
      translateY(-50%) !important;

    translate:
      none !important;

    outline:
      none !important;
}


.bp-home-calendar-btn-v178
svg {

    display: block !important;

    width: 19px !important;

    min-width: 19px !important;

    max-width: 19px !important;

    height: 19px !important;

    min-height: 19px !important;

    max-height: 19px !important;

    margin: 0 !important;

    padding: 0 !important;

    pointer-events: none !important;

    transform: none !important;

    translate: none !important;
}


.bp-home-period-caption-v178 {

    display: block !important;

    width: 100% !important;

    min-height: 17px !important;

    margin: 0 !important;

    padding: 0 !important;

    color:
      #53677f !important;

    font-size:
      12px !important;

    line-height:
      17px !important;

    white-space:
      normal !important;
}


@media (max-width: 800px) {

    .bp-home-period-card-v178
    .bp-home-period-head-v178 {

        flex-direction:
          column !important;

        align-items:
          stretch !important;

        gap:
          14px !important;
    }


    .bp-home-date-filter-v178 {

        flex:
          1 1 auto !important;

        width:
          100% !important;

        min-width:
          0 !important;
    }
}