/*------TimePicker--------------------*/

.ti_tx,
.mi_tx,
.mer_tx {
    width: 100%;
    text-align: center;
    margin: 10px 0;
}

.time,
.mins,
.meridian {
    width: 25%;
    float: left;
    margin: 0 10px;
}

.prev.action-next,
.next.action-prev {
    cursor: pointer;
    padding: 18px;
    width: 28%;
    margin: auto;
    border-radius: 5px;
}

.prev.action-prev {
    background: url(../img/Arrow_Down.png) no-repeat;
    background-position: center;
}

.next.action-next{
    background: url(../img/Arrrow_Up.png) no-repeat;
    background-position: center;
}

.prev.action-next {
    background: url(../img/Arrrow_Up.png) no-repeat;
    background-position: center;
}
.next.action-prev {
    background: url(../img/Arrow_Down.png) no-repeat;
    background-position: center;
}

.time_pick {
    position: relative;
}

.timepicker_wrap {
    padding: 10px;
    border-radius: 5px;
    z-index: 998;
    display: none;
    box-shadow: 2px 2px 5px 0 rgba(50,50,50,0.35);
    background: var(--color-neutral-0);
    border: 1px solid #ccc;
    float: left;
    position: absolute;
    top: 40px !important;
    background: white;
}

.arrow_top {
    position: absolute;
    top: -10px;
    left: 20px;
    width: 18px;
    height: 10px;
    z-index: 999;
}
input.timepicki-input {
    background: none repeat scroll 0 0 var(--color-neutral-4);
    float: none;
    margin: 0;
    text-align: center;
    width: 70% !important;
    border: 1px solid  var(--color-neutral-0);
    padding-left: 0px !important;
    padding-right:0px !important;
    height: 100%;
}
input.timepicki-input:focus-visible {
    outline: none;
}
a.reset_time {
    float: left;
    margin-top: 5px;
    color: #000;
}

.container-time-non-ss .timepicker_wrap {
    padding: 0 !important;
}
.container-time-non-ss .time-pick .timepicker_wrap .time,
.container-time-non-ss .time-pick .timepicker_wrap .mins,
.container-time-non-ss .time-pick .timepicker_wrap .meridian {
    margin: 0 5px;
}