.FPdatepicker .datepicker {
    width: -moz-min-content;
    width: min-content
}

    .FPdatepicker .datepicker:not(.active) {
        display: none
    }

.FPdatepicker .datepicker-dropdown {
    padding-top: 4px;
    position: absolute;
    z-index: 1000
}

    .FPdatepicker .datepicker-dropdown.datepicker-orient-top {
        padding-bottom: 4px;
        padding-top: 0
    }

.FPdatepicker .datepicker-picker {
    background-color: #fff;
    border-radius: .375rem;
    display: flex;
    flex-direction: column
}

.FPdatepicker .datepicker-dropdown .datepicker-picker {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)
}

.FPdatepicker .datepicker-main {
    flex: auto;
    padding: 2px
}

.FPdatepicker .datepicker-footer {
    background-color: #f8f9fa;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.1)
}



.FPdatepicker .datepicker-controls {
    display: flex
}

.FPdatepicker .datepicker-header {
    padding: 2px 2px 0
}

.FPdatepicker .datepicker-header .datepicker-controls {
    padding: 2px 2px 0
}

/* Header buttons: prev / month / next */
.FPdatepicker .datepicker-controls .button {
    background-color: #fff;
    border: 1px solid #f8f9fa;
    border-radius: .375rem;
    font-weight: 700;
    padding: .375rem .75rem;
    color: #000;
}

    /* Hover & focus */
    .FPdatepicker .datepicker-controls .button:hover:not(:disabled),
    .FPdatepicker .datepicker-controls .button:focus:not(:disabled) {
        background-color: #e2e6ea;
        border-color: #dbe0e5;
    }

    /* Active */
    .FPdatepicker .datepicker-controls .button:active:not(:disabled) {
        background-color: #dbe0e5;
        border-color: #d4dae0;
    }

    

/* Footer buttons (if enabled) */
.FPdatepicker .datepicker-footer .datepicker-controls .button {
    border-radius: .25rem;
    font-size: .875rem;
    margin: calc(.375rem - 1px) .375rem;
}


.FPdatepicker .datepicker-controls .view-switch {
    flex: auto
}

.FPdatepicker .datepicker-controls .next-button, .FPdatepicker .datepicker-controls .prev-button {
    flex: 0 0 14.2857142857%;
    padding-left: .375rem;
    padding-right: .375rem
}

    .FPdatepicker .datepicker-controls .next-button.disabled, .FPdatepicker .datepicker-controls .prev-button.disabled {
        visibility: hidden
    }

.FPdatepicker .datepicker-grid, .FPdatepicker .datepicker-view {
    display: flex
}

.FPdatepicker .datepicker-view {
    align-items: stretch;
    width: 15.75rem
}

.FPdatepicker .datepicker-grid {
    flex: auto;
    flex-wrap: wrap
}

.FPdatepicker .datepicker .days {
    display: flex;
    flex: auto;
    flex-direction: column
}

.FPdatepicker .datepicker .days-of-week {
    display: flex
}

.FPdatepicker .datepicker .week-numbers {
    display: flex;
    flex: 0 0 9.6774193548%;
    flex-direction: column
}

.FPdatepicker .datepicker .weeks {
    align-items: stretch;
    display: flex;
    flex: auto;
    flex-direction: column
}

.FPdatepicker .datepicker span {
    -webkit-touch-callout: none;
    align-items: center;
    border-radius: .375rem;
    cursor: default;
    display: flex;
    justify-content: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.FPdatepicker .datepicker .dow {
    font-size: .9375rem;
    font-weight: 700;
    height: 1.5rem
}

.FPdatepicker .datepicker .week {
    color: #dee2e6;
    flex: auto;
    font-size: .875rem
}

.FPdatepicker .datepicker .days .dow, .datepicker-cell {
    flex-basis: 14.2857142857%
}

.FPdatepicker .datepicker-cell {
    height: 2.25rem
}

    .FPdatepicker .datepicker-cell:not(.day) {
        flex-basis: 25%;
        height: 4.5rem
    }

    .FPdatepicker .datepicker-cell:not(.disabled):hover {
        background-color: #f9f9f9;
        cursor: pointer
    }

    .FPdatepicker .datepicker-cell.focused:not(.selected) {
        background-color: #e2e6ea
    }

    .FPdatepicker .datepicker-cell.selected, .datepicker-cell.selected:hover {
        background-color: #0d6efd;
        color: #fff;
        font-weight: 600
    }

    .FPdatepicker .datepicker-cell.disabled {
        color: rgba(33,37,41,.5)
    }

    .FPdatepicker .datepicker-cell.next:not(.disabled), .datepicker-cell.prev:not(.disabled) {
        color: #6c757d
    }

    .FPdatepicker .datepicker-cell.next.selected, .datepicker-cell.prev.selected {
        color: #e6e6e6
    }

    .FPdatepicker .datepicker-cell.highlighted:not(.selected):not(.range):not(.today) {
        background-color: #f8f9fa;
        border-radius: 0
    }

        .FPdatepicker .datepicker-cell.highlighted:not(.selected):not(.range):not(.today):not(.disabled):hover {
            background-color: #f1f3f5
        }

        .FPdatepicker .datepicker-cell.highlighted:not(.selected):not(.range):not(.today).focused {
            background-color: #e2e6ea
        }

    .FPdatepicker .datepicker-cell.today:not(.selected) {
        background-color: #20c997
    }

        .FPdatepicker .datepicker-cell.today:not(.selected):not(.disabled) {
            color: #fff
        }

    .FPdatepicker .datepicker-cell.today.focused:not(.selected) {
        background-color: #1fc493
    }

    .FPdatepicker .datepicker-cell.range-end:not(.selected), .datepicker-cell.range-start:not(.selected) {
        background-color: #6c757d;
        color: #fff
    }

    .FPdatepicker .datepicker-cell.range-end.focused:not(.selected), .datepicker-cell.range-start.focused:not(.selected) {
        background-color: #69727a
    }

    .FPdatepicker .datepicker-cell.range-start:not(.range-end) {
        border-radius: .375rem 0 0 .375rem
    }

    .FPdatepicker .datepicker-cell.range-end:not(.range-start) {
        border-radius: 0 .375rem .375rem 0
    }

    .FPdatepicker .datepicker-cell.range {
        background-color: #e9ecef;
        border-radius: 0
    }

        .FPdatepicker .datepicker-cell.range:not(.disabled):not(.focused):not(.today):hover {
            background-color: #e2e6ea
        }

        .FPdatepicker .datepicker-cell.range.disabled {
            color: #ced4db
        }

        .FPdatepicker .datepicker-cell.range.focused {
            background-color: #dbe0e5
        }

.FPdatepicker .datepicker-input.in-edit {
    border-color: #73acfe
}

    .FPdatepicker .datepicker-input.in-edit:active, .datepicker-input.in-edit:focus {
        box-shadow: 0 0 .25em .25em rgba(115,172,254,.2)
    }


/* ===== BLUE HEADER FOR DATEPICKER ===== */
.FPdatepicker .datepicker-header,
.FPdatepicker .datepicker-controls,
.FPdatepicker .datepicker-title {
    background-color: #0d4ea6; /* UBI blue */
    color: #ffffff;
}

/* Month text */
.FPdatepicker .datepicker-title {
    font-weight: 600;
}

/* Header buttons (prev / next) */
.FPdatepicker .datepicker-controls .button {
    background-color: transparent;
    border: none;
    color: #ffffff;
}

    /* Hover effect on arrows */
    .FPdatepicker .datepicker-controls .button:hover:not(:disabled) {
        background-color: rgba(255,255,255,0.15);
        color: #ffffff;
    }

    /* Disabled arrows */
    .FPdatepicker .datepicker-controls .button:disabled {
        color: rgba(255,255,255,0.5);
    }

/* Week day labels */
.FPdatepicker .datepicker .dow {
    color: #0d4ea6;
    font-weight: 600;
}

.input-group-text {    
    color: red !important;
    border: 1px solid #000 !important;
    border-radius: 0 !important;
}