jdp-container {
    -moz-animation: jdpOpenAnimation .3s cubic-bezier(.23,1,.32,1);
    -webkit-animation: jdpOpenAnimation .3s cubic-bezier(.23,1,.32,1);
    animation: jdpOpenAnimation .3s cubic-bezier(.23,1,.32,1);
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.24);
    direction: rtl;
    display: none;
    max-width: 307.875px;
    min-width: 307.875px;
    overflow: hidden;
    padding: .5rem 0;
    position: absolute;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media only screen and (max-width:481px) {
    jdp-container {
        left: 50% !important;
        max-width: 307.875px;
        min-width: 280px;
        transform: translateX(-50%) !important;
        width: 80%
    }
}

jdp-container, jdp-container *, jdp-container :after, jdp-container :before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

    jdp-container .jdp-icon-minus, jdp-container .jdp-icon-plus {
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        cursor: pointer;
        display: inline-block;
        flex: none;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        vertical-align: middle
    }

        jdp-container .jdp-icon-minus svg, jdp-container .jdp-icon-plus svg {
            height: 1.5rem;
            padding: .25rem;
            vertical-align: middle;
            width: 1.5rem
        }

        jdp-container .jdp-icon-minus.not-in-range, jdp-container .jdp-icon-plus.not-in-range {
            cursor: not-allowed
        }

            jdp-container .jdp-icon-minus.not-in-range svg, jdp-container .jdp-icon-plus.not-in-range svg {
                opacity: .3
            }

    jdp-container .jdp-months, jdp-container .jdp-years {
        fill: rgba(0,0,0,.9);
        color: rgba(0,0,0,.9);
        display: -webkit-inline-box;
        display: -webkit-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        font-size: 120%;
        margin: 0 2.5%
    }

    jdp-container .jdp-months {
        width: 50%
    }

    jdp-container .jdp-years {
        width: 40%
    }

    jdp-container .jdp-month, jdp-container .jdp-month input, jdp-container .jdp-month select, jdp-container .jdp-time, jdp-container .jdp-time input, jdp-container .jdp-time select, jdp-container .jdp-year, jdp-container .jdp-year input, jdp-container .jdp-year select {
        background: #fff;
        border: none;
        border-radius: 0;
        color: inherit;
        display: inline-block;
        font-family: inherit;
        font-size: inherit;
        font-weight: 300;
        height: auto;
        line-height: inherit;
        margin: 0;
        outline: none;
        padding: 0;
        text-align: center;
        vertical-align: initial;
        width: 100%
    }

        jdp-container .jdp-month:active, jdp-container .jdp-month:focus, jdp-container .jdp-month input:active, jdp-container .jdp-month input:focus, jdp-container .jdp-month select:active, jdp-container .jdp-month select:focus, jdp-container .jdp-time:active, jdp-container .jdp-time:focus, jdp-container .jdp-time input:active, jdp-container .jdp-time input:focus, jdp-container .jdp-time select:active, jdp-container .jdp-time select:focus, jdp-container .jdp-year:active, jdp-container .jdp-year:focus, jdp-container .jdp-year input:active, jdp-container .jdp-year input:focus, jdp-container .jdp-year select:active, jdp-container .jdp-year select:focus {
            outline: none
        }

        jdp-container .jdp-month input option, jdp-container .jdp-month option, jdp-container .jdp-month select option, jdp-container .jdp-time input option, jdp-container .jdp-time option, jdp-container .jdp-time select option, jdp-container .jdp-year input option, jdp-container .jdp-year option, jdp-container .jdp-year select option {
            font-size: 95%;
            min-height: 1.3rem;
            outline: none;
            padding: 0
        }

        jdp-container .jdp-month:hover, jdp-container .jdp-time:hover, jdp-container .jdp-year:hover {
            filter: brightness(.9)
        }

        jdp-container .jdp-month input, jdp-container .jdp-time input, jdp-container .jdp-year input {
            -webkit-appearance: none;
            -moz-appearance: textfield;
            cursor: text
        }

            jdp-container .jdp-month input::-webkit-inner-spin-button, jdp-container .jdp-month input::-webkit-outer-spin-button, jdp-container .jdp-time input::-webkit-inner-spin-button, jdp-container .jdp-time input::-webkit-outer-spin-button, jdp-container .jdp-year input::-webkit-inner-spin-button, jdp-container .jdp-year input::-webkit-outer-spin-button {
                -webkit-appearance: none
            }

        jdp-container .jdp-month select, jdp-container .jdp-time select, jdp-container .jdp-year select {
            -webkit-appearance: menulist;
            -moz-appearance: menulist;
            cursor: pointer;
            position: relative
        }

    jdp-container .jdp-days {
        -ms-flex-pack: justify;
        display: inline-block;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        justify-content: space-around;
        outline: 0;
        padding: .5rem 0 0;
        text-align: left;
        width: 100%
    }

    jdp-container .jdp-day, jdp-container .jdp-day-name {
        background: none;
        border: 1px solid transparent;
        color: rgba(0,0,0,.9);
        display: inline-block;
        flex-basis: 14.2857143%;
        font-weight: 400;
        height: 31px;
        justify-content: center;
        line-height: 31px;
        margin: 2px 0;
        position: relative;
        text-align: center;
        width: 14.2857143%
    }

        jdp-container .jdp-day-name.today, jdp-container .jdp-day.today {
            border-color: rgba(0,0,0,.3)
        }

        jdp-container .jdp-day-name.selected, jdp-container .jdp-day.selected {
            background-color: #569ff7 !important;
            color: #fff !important
        }

        jdp-container .jdp-day-name.holly-day, jdp-container .jdp-day-name.last-week, jdp-container .jdp-day.holly-day, jdp-container .jdp-day.last-week {
            color: #f44336
        }

        jdp-container .jdp-day.not-in-month {
            opacity: .4
        }

        jdp-container .jdp-day.disabled-day {
            cursor: not-allowed;
            opacity: .15
        }

        jdp-container .jdp-day:not(.disabled-day) {
            border-radius: 4px;
            cursor: pointer;
            transition: .1s linear
        }

            jdp-container .jdp-day:not(.disabled-day):hover {
                background: rgba(0,0,0,.1);
                transform: scale(1.15);
                z-index: 1
            }

    jdp-container .jdp-day-name {
        background-color: rgba(0,0,0,.1);
        border-radius: 0;
        cursor: default;
        font-size: 90%;
        font-weight: 900
    }

    jdp-container .jdp-footer {
        -ms-flex-pack: justify;
        display: inline-block;
        display: -ms-flexbox;
        display: flex;
        flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        justify-content: space-between;
        outline: 0;
        padding: .5rem .5rem 0;
        width: 100%
    }

    jdp-container .jdp-btn-close, jdp-container .jdp-btn-empty, jdp-container .jdp-btn-today {
        background: #569ff7;
        border-radius: 5px;
        color: #fff;
        cursor: pointer;
        display: inline-block;
        font-size: 90%;
        font-weight: 400;
        padding: .3em .6em;
        text-align: center
    }

        jdp-container .jdp-btn-close.disabled-btn, jdp-container .jdp-btn-empty.disabled-btn, jdp-container .jdp-btn-today.disabled-btn {
            cursor: not-allowed;
            opacity: .2
        }

@media only screen and (max-width:481px) {
    jdp-container .jdp-btn-empty {
        margin-left: auto;
        margin-right: 1em
    }
}

jdp-container .jdp-time-container {
    display: flex;
    padding: 0
}

    jdp-container .jdp-time-container .jdp-time {
        flex: auto;
        margin: 0 .5rem;
        position: relative
    }

        jdp-container .jdp-time-container .jdp-time select {
            background: rgba(0,0,0,.03);
            border-radius: 5px;
            padding: .5rem 1rem .5rem 7px
        }

        jdp-container .jdp-time-container .jdp-time:after {
            content: ":";
            font-size: 1.5rem;
            height: 100%;
            position: absolute;
            right: -.7rem;
            top: 50%;
            transform: translateY(-50%)
        }

        jdp-container .jdp-time-container .jdp-time:first-child:after {
            display: none
        }

@-webkit-keyframes jdpOpenAnimation {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes jdpOpenAnimation {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}