.unistar-calendar
    font-size: 14px
    box-shadow: none
    border: none
    border-radius: 7px
    background: rgba(255, 255, 255, 0)

    .react-datepicker__month-container
        border-radius: 5px
        box-shadow: 0px 4px 16px 0 rgba(0, 0, 0, 0.36)

        .react-datepicker__header
            border-bottom: none
            background-color: transparent

            .react-datepicker__current-month
                border-bottom: none
                font-size: 14px
                font-weight: normal
                color: #ffffff
                line-height: 40px

                &:after
                    content: ""
                    border-bottom: 1px solid rgba(255, 255, 255, 0.3)
                    width: calc(100% - 36px)
                    height: 1px
                    display: block
                    position: absolute
                    left: 50%
                    transform: translateX(-50%)

            .react-datepicker__day-names
                line-height: 50px

                .react-datepicker__day-name
                    color: #52c8f9
                    padding: 5px

                    &:first-child, &:last-child
                        color: #ff5243

        .react-datepicker__month
            margin: 0 30px 20px 30px

            .react-datepicker__week
                .react-datepicker__day--disabled, .react-datepicker__month-text--disabled, .react-datepicker__quarter-text--disabled
                    color: #a7a7a7
                    cursor: not-allowed
                .react-datepicker__day
                    padding: 5px

.unistar-calendar
    button.react-datepicker__navigation--next, button.react-datepicker__navigation--previous
        top: 20px

    .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name
        color: #ffffff
        border-radius: 50%

    .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range, .react-datepicker__month-text--selected, .react-datepicker__month-text--in-selecting-range, .react-datepicker__month-text--in-range, .react-datepicker__quarter-text--selected, .react-datepicker__quarter-text--in-selecting-range, .react-datepicker__quarter-text--in-range
        background-color: #ff5243

    .react-datepicker__day:not(.react-datepicker__day--disabled):hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover
        background-color: #52c8f9

    .react-datepicker__day--disabled:hover
        cursor: pointer

// early
.react-datepicker-popper
    .early
        .react-datepicker__month-container
            background-color: rgba(#2d3b58, 0.85)

        .react-datepicker__triangle
            border-bottom-color: rgba(46, 62, 104, 0)

            &:before
                border-bottom-color: #2d3b58
                opacity: 0.85
                z-index: 10
                top: 0
                left: -25px

// night
.react-datepicker-popper
    .night
        .react-datepicker__month-container
            background-color: rgba(#2e3e68, 0.98)

        .react-datepicker__triangle
            border-bottom-color: rgba(46, 62, 104, 0)

            &:before
                border-bottom-color: #2e3e68
                opacity: 0.98
                z-index: 10
                top: 0
                left: -25px

.react-datepicker-popper[data-placement^="top"]
    .react-datepicker__triangle
        border-top-color: rgba(0, 0, 0, 0)

        &:before
            top: -8px
            border-top-color: #2d3b58



.input-affix-wrapper
    width: inherit
    position: relative
    display: inline-block

    &.prefix
        input
            padding-left: 30px

    &.suffix
        input
            padding-right: 30px

    .input-prefix
        position: absolute
        top: 50%
        transform: translateY(-50%)
        left: 12px
        font-size: 14px
        pointer-events: none

    .input-suffix
        display: flex
        align-items: center
        position: absolute
        top: 5px
        right: 12px
        line-height: 0
        pointer-events: none