input,
textarea,
select,
.form-control {
    background: var(--mantis-surface-alt) !important;
    color: #f3f4f6 !important;
    border: 1px solid var(--mantis-border-light) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    background: #2a2a2a !important;
    color: #ffffff !important;
    border-color: var(--mantis-primary) !important;
    outline: none !important;
}

::placeholder {
    color: #9ca3af !important;
}

label {
    color: #d1d5db !important;
}

/* =========================================================
   DATE / TIME PICKER ICON
   ========================================================= */

i.datetimepicker,
.fa.datetimepicker {
    color: var(--mantis-primary) !important;
    cursor: pointer;
}

/* Hover */
i.datetimepicker:hover,
.fa.datetimepicker:hover {
    color: #64b5f6 !important;
}

/* =========================================================
   BOOTSTRAP DATETIME PICKER
   ========================================================= */

/* Main popup */
.bootstrap-datetimepicker-widget {
    background: var(--mantis-surface) !important;
    color: var(--mantis-text) !important;
    border: 1px solid var(--mantis-border-light) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45) !important;
}

/* Tables inside picker */
.bootstrap-datetimepicker-widget table {
    background: var(--mantis-surface) !important;
    color: var(--mantis-text) !important;
}

/* Header / days / time values */
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td {
    background: transparent !important;
    color: var(--mantis-text) !important;
    border: none !important;
}

/* =========================================================
   CALENDAR DAYS
   ========================================================= */

.bootstrap-datetimepicker-widget table td.day {
    background: transparent !important;
    color: var(--mantis-text) !important;
}

/* Days from previous / next month */
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: var(--mantis-text-secondary) !important;
}

/* Day hover */
.bootstrap-datetimepicker-widget table td.day:hover {
    background: var(--mantis-surface-hover) !important;
    color: #ffffff !important;
}

/* Selected day */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--mantis-primary) !important;
    color: #ffffff !important;
}

/* Today marker */
.bootstrap-datetimepicker-widget table td.today:before {
    border-bottom-color: var(--mantis-primary) !important;
}

/* =========================================================
   HEADER CONTROLS
   Month / previous / next
   ========================================================= */

.bootstrap-datetimepicker-widget table thead tr:first-child th {
    background: transparent !important;
    color: var(--mantis-text) !important;
}

.bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: var(--mantis-surface-hover) !important;
    color: #ffffff !important;
}

/* Previous / next arrows */
.bootstrap-datetimepicker-widget .prev,
.bootstrap-datetimepicker-widget .next,
.bootstrap-datetimepicker-widget .picker-switch {
    color: var(--mantis-text) !important;
}

/* =========================================================
   MONTH / YEAR SELECTOR
   ========================================================= */

.bootstrap-datetimepicker-widget .month,
.bootstrap-datetimepicker-widget .year,
.bootstrap-datetimepicker-widget .decade {
    background: transparent !important;
    color: var(--mantis-text) !important;
}

.bootstrap-datetimepicker-widget .month:hover,
.bootstrap-datetimepicker-widget .year:hover,
.bootstrap-datetimepicker-widget .decade:hover {
    background: var(--mantis-surface-hover) !important;
    color: #ffffff !important;
}

.bootstrap-datetimepicker-widget .month.active,
.bootstrap-datetimepicker-widget .year.active,
.bootstrap-datetimepicker-widget .decade.active {
    background: var(--mantis-primary) !important;
    color: #ffffff !important;
}

/* =========================================================
   TIME PICKER
   ========================================================= */

/* Hour / minute values */
.bootstrap-datetimepicker-widget .timepicker-hour,
.bootstrap-datetimepicker-widget .timepicker-minute,
.bootstrap-datetimepicker-widget .timepicker-second {
    background: transparent !important;
    color: var(--mantis-text) !important;
}

/* Clickable hour/minute values */
.bootstrap-datetimepicker-widget .timepicker-hour:hover,
.bootstrap-datetimepicker-widget .timepicker-minute:hover,
.bootstrap-datetimepicker-widget .timepicker-second:hover {
    background: var(--mantis-surface-hover) !important;
    color: #ffffff !important;
}

/* =========================================================
   TIME UP / DOWN BUTTONS
   ========================================================= */

.bootstrap-datetimepicker-widget a[data-action] {
    background: transparent !important;
    color: var(--mantis-primary) !important;
    border: none !important;
}

/* The large arrow boxes */
.bootstrap-datetimepicker-widget a[data-action] span,
.bootstrap-datetimepicker-widget td span {
    background: var(--mantis-surface-alt) !important;
    color: var(--mantis-text) !important;
    border: none !important;
}

/* Hover - fixes the pale/white blocks */
.bootstrap-datetimepicker-widget a[data-action]:hover,
.bootstrap-datetimepicker-widget a[data-action]:hover span,
.bootstrap-datetimepicker-widget td span:hover {
    background: var(--mantis-primary) !important;
    color: #ffffff !important;
}

/* Arrow icons */
.bootstrap-datetimepicker-widget .glyphicon,
.bootstrap-datetimepicker-widget .fa {
    color: inherit !important;
}

/* =========================================================
   CALENDAR / CLOCK SWITCH BUTTON
   Bottom button on popup
   ========================================================= */

.bootstrap-datetimepicker-widget .picker-switch a,
.bootstrap-datetimepicker-widget a[data-action="togglePicker"] {
    background: transparent !important;
    color: var(--mantis-primary) !important;
    border: none !important;
}

/* Fix white hover at bottom */
.bootstrap-datetimepicker-widget .picker-switch a:hover,
.bootstrap-datetimepicker-widget a[data-action="togglePicker"]:hover {
    background: var(--mantis-primary) !important;
    color: #ffffff !important;
}

/* If the icon is wrapped in a span */
.bootstrap-datetimepicker-widget .picker-switch a:hover span,
.bootstrap-datetimepicker-widget a[data-action="togglePicker"]:hover span {
    background: transparent !important;
    color: #ffffff !important;
}