/* components */

@media (prefers-color-scheme: dark) {
    body {
        color: #fff;
        background-color: #1A202C;
        transition: color 1s ease, background-color 1s ease;
    }
    nav {
        background-color: #26a69a;
    }
    .card {
        background-color: #2D3748;
    }
    .btn {
        background-color: #ee6f73;
    }
    .divider {
        opacity: 0.2;
    }
    .sidenav {
        background-color: #2d2d31;
    }
    .sidenav li a:not(.subheader) {
        color: #89b2f5;
    }
    .sidenav li a:not(.subheader):hover {
        background-color: #3b4043;
    }
    .sidenav li a.subheader {
        color: #9aa0a6;
    }
    .sidenav li a .material-icons {
        color: #9aa0a6;
    }
    .collection {
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .collection .collection-item {
        background-color: rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .input-field input,
    .input-field textarea {
        color: #efefef;
    }
    .collapsible {
        border: none;
    }
    .collapsible>li>div {
        background-color: #2d2d31;
        border: none;
    }
    .collapsible-body {
        padding: 1em !important;
    }
    .modal a.modal-close {
        color: white !important;
    }
}


/* stepper */

@media (prefers-color-scheme: dark) {
    ul.steppers .step.active .step-title::before,
    ul.steppers .step.done .step-title::before {
        background: #388e3c !important;
    }
}


/* date and time picker */

@media (prefers-color-scheme: dark) {
    .timepicker-digital-display,
    .datepicker-date-display {
        background: #1b5e20;
    }
    .timepicker-analog-display,
    .datepicker-calendar-container {
        background: #151515;
    }
    .timepicker-canvas .timepicker-svg * {
        fill: #2e7d32 !important;
        stroke: #2e7d32;
    }
    .datepicker-table .is-today.is-selected .datepicker-day-button {
        background: #2e7d32;
    }
    .timepicker-plate {
        background: #282828;
    }
    .timepicker-plate .timepicker-tick {
        color: #FFF;
    }
    .month-next>svg,
    .month-prev>svg {
        fill: #FFF !important;
    }
    .modal-content,
    .modal-footer {
        background-color: #282828 !important;
    }
    .modal-footer>a {
        color: white !important;
    }
    .login-page {
        background-color: black;
    }
}


/* custom */

#map {
    background: black;
}


/* history */

.details>div:nth-child(n-1) {
    border-color: white !important;
}