.wm-app input[type=time].app-textbox,
.wm-app input[type=date].app-textbox {
    padding: 10px 25px 10px 15px!important;
}

.wm-app input[type="time"] {
    -webkit-appearance: none !important;
    line-height: 20px !important;
}

.wm-app input[type=date].app-textbox:before,
.wm-app input[type=time].app-textbox:before {
    font-family: mq-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    float: right;
    position: absolute;
    right: 10px;
    color: var(--icon-clr-main);
}

.wm-app input[type=date].app-textbox:before {
    content: "\f109";
    line-height: 28px;
}

.wm-app input[type=time].app-textbox:before {
    content: "\f112";
    line-height: 24px;
}

input[type="date" i]::-webkit-calendar-picker-indicator,
input[type="time" i]::-webkit-calendar-picker-indicator {
    background-image: none;
    position: absolute;
    right: 5px;
}

input::-webkit-datetime-edit {
    line-height: 24px;
}

@-moz-document url-prefix() {
    .wm-app input[type=time].app-textbox,
    .wm-app input[type=date].app-textbox {
        padding: 0!important;
    }
    .wm-app input[type=date].app-textbox:before,
    .wm-app input[type=time].app-textbox:before {
        content: none;
    }
    input[type="date" i]::-webkit-calendar-picker-indicator,
    input[type="time" i]::-webkit-calendar-picker-indicator {
        background-image: initial;
        position: static;
    }
    .wm-app input[type=time].app-textbox,
    .wm-app input[type=date].app-textbox {
        padding: 0 10px 0 15px!important;
    }
}


/* for date picker in forms */

.mq-page-form .display-input,
.mq-page-form .app-date .input-group-btn {
    display: none!important;
}

.wm-app .mq-page-form .app-date {
    width: 100%;
}

.mq-page-form .app-dateinput {
    opacity: 1!important;
    width: 100%;
}