div.datetime-container,
div.datetime-container * {
    box-sizing: border-box;
    font-family: arial, sans-serif;
}

.fix-float:after {
    clear: both;
    content: "";
    display: table;
}

div.datetime-container {
    background-color: #f4f4f4;
    border-radius: 5px 5px 0 0;
    margin: 5px 0;
    position: relative;
    text-align: center;
    user-select: none;
}

    div.datetime-container button.date,
    div.datetime-container button.time {
        appearance: none;
        -webkit-appearance: none;
        background-color: #f4f4f4;
        border: 0;
        border-radius: 5px 5px 0 0;
        cursor: pointer;
        outline: 0;
        padding: 0;
        text-transform: uppercase;
        width: 100%;
    }

    div.datetime-container button.w-50 {
        float: left;
        width: 50%;
    }

    div.datetime-container button.active {
        background-color: #f92e67;
        color: #000;
    }

    div.datetime-container button > span {
        display: inline-block;
        margin: 0 -2px;
    }

    div.datetime-container button span.week-day {
        font-size: 14px;
        text-align: right;
    }

    div.datetime-container button span.hours,
    div.datetime-container button span.month-day {
        font-size: 36px;
        text-align: center;
        width: 45px;
    }

    div.datetime-container button span.month-year {
        font-size: 16px;
        text-align: left;
    }

    div.datetime-container span.month-year span {
        font-size: 14px;
        font-weight: 700;
        position: relative;
        top: 2px;
    }

    div.datetime-container button span.minutes {
        font-size: 18px;
    }

div.picker {
    background-color: #fff;
    border-radius: 0 0 5px 5px;
  
    display: none;
    padding: 0 5px 10px;
    position: absolute;
    width: 100%;
    z-index: 2;
}

    div.picker table {
        border-collapse: collapse;
        color: #000;
        margin: 10px -8% ;
        width: 250%;
        background-color: white;
        
    }

        div.picker table a {
            color: #000;
            display: inline-block;
            height: 20px;
            line-height: 20px;
            text-decoration: none;
            width: 20px;
        }

        div.picker table th {
            font-size: 20px;
            font-weight: 400;
        }

            div.picker table th span.month {
                font-weight: 700;
            }

        div.picker table td,
        div.picker table th {
            border-bottom: 1px solid #ddd;
            padding: 10px 2px;
            text-align: center;
            vertical-align: middle;
            width: 14.285%;
        }

            div.picker table td.day-label {
                font-size: 14px;

                text-transform: uppercase;
            }

            div.picker table td.selectable {
                cursor: pointer;
            }

                div.picker table td.selectable:hover {
                    font-weight: 700;
                }

            div.picker table a.disabled,
            div.picker table td.disabled {
                color: #ccc;
            }

            div.picker table td.end-day,
            div.picker table td.start-day,
            div.picker table td.time-selected {
                background-repeat: no-repeat;
                font-weight: 700;
            }

            div.picker table td.start-day {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='%23FFF' d='m0 14 6-7-6-7'/%3E%3C/svg%3E");
                background-position: 0;
            }

            div.picker table td.end-day {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='%23FFF' d='M14 0 8 7l6 7'/%3E%3C/svg%3E");
                background-position: 100%;
            }

            div.picker table td.start-day.end-day {
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='%23FFF' d='m0 14 6-7-6-7'/%3E%3C/svg%3E"), url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath fill='%23FFF' d='M14 0 8 7l6 7'/%3E%3C/svg%3E");
                background-position: 0, 100%;
            }

            div.picker table td.active,
            div.picker table td.time-selected {
                background-color: #f92e67;
                color: #000;
            }

            div.picker table td.inactive {
                background-color: #0b6e38;
                color: #fff;
            }

            div.picker table td.range {
                background-color: #eee;
            }

            div.picker table td select {
                appearance: none;
                background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='15' height='15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.02 7.409v-3.98L7.752 7.854 2.485 3.43v3.978l5.267 4.426z'/%3E%3C/svg%3E");
                background-position: right 0.7em top 50%;
                background-repeat: no-repeat;
                background-size: 0.65em auto;
                border: 0;
                border-radius: 5px 5px 0 0;
                font-size: 18px;
                height: 40px;
                outline: none;
                padding: 0 5px;
                width: 60px;
            }

                div.picker table td select::-ms-expand {
                    display: none;
                }

    div.picker button.confirm {
        appearance: none;
        -webkit-appearance: none;
        background-color: #f4f4f4;
        border: 0;
        border-radius: 5px 5px 0 0;
        cursor: pointer;
        height: 40px;
        outline: 0;
        padding: 10px;
        text-transform: uppercase;
    }