:root {
    color-scheme: light dark;

    --color-background: light-dark(#FEFEFE, #222);

    --color-text: light-dark(#222, #cacaca);
    --color-text-grey: light-dark(#332833, #CECECE);
    --color-text-link: light-dark(#10104c, #afafff);


    --color-mhda-red: light-dark(#ab1d05, #ab1d05);
    --color-mhda-red-text: light-dark(#f5f5f5, #f5f5f5);
    --color-mhda-blue: light-dark(#10104c, #3434aa);

    --red-border: light-dark(#ab1d05, #6e1406);

    --blue-border: light-dark(#10104c, #53538c);
    --blue-border-hover: light-dark(#282871, #35356e);

    --quick-calendar-lines: light-dark(#faf6f6, #2c2828);
    --quick-calendar-selected: light-dark(#A6D1FF4D, #A6D1FF4D);
    --quick-calendar-today: light-dark(#B98A914D, #B98A914D);
    --quick-calendar-hover: light-dark(#B3AEAE80, #A6D1FF4D);
    --quick-calendar-week: light-dark(#10104c, #89afd8);

    --color-service-title-bg: #ab1d05;
    --color-service-title-text: #fff;
    --color-service-slot-bg: light-dark(#f5f5f5, #363636);
    --color-service-slot-button-bg: light-dark(#58588b, #9090d1);
    --color-service-vehicle-bg: light-dark(#FFFCDD, #817b3e);
    --color-service-guest-bg: light-dark(#E9FFE5, #395133);

}


body {
    margin: 0;
    padding: 0;
    font-family: 'Source Code Pro', 'Helvetica', 'Arial', sans-serif;
    overflow: hidden;
    background-color: var(--color-background);
}


body, #app {
    background-color: var(--color-background);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

body.scroll {
    overflow-y: scroll;
}

a {
    text-decoration: none;
}

a.header-link {
    text-transform: uppercase;
    font-size: 15px;
    color: #ab1d05;
}

a.mhda-logo {
    display: block;
    background: url('/img/logos/MHDAlogo2024.png') left top no-repeat;
    background-size: contain;
    height: 50px;
    width: 100%;
    margin: 0;
}


a.goto-link {
    color: var(--color-text-link);
    cursor: pointer;

}

a.goto-link > div {
    border: solid 1px transparent;
}

a.goto-link:hover > div {
    border: solid 1px;
    border-color: var(--blue-border-hover);
}

.envelope {
    margin: 30px auto 100px auto;
    max-width: 1000px;
    padding: 10px 10px 5px 5px;


}

.envelope .justify {
    text-align: justify;
}

.footer p {
    font-size: 12px
}

.footer h3 {
    font-size: 14px
}

li {
    padding-bottom: 5px;
}

#app {
    overflow: auto;
}

.modal {
    background-color: var(--color-background);
    border: 2px solid var(--blue-border);
    border-radius: 3px;
    padding: 5px 10px 10px 10px;
}

.quick-calendar {
    border-collapse: collapse;
}

.quick-calendar td {
    width: 12.5%;
    padding: 3px;
    border: 1px solid var(--quick-calendar-lines);
}

.quick-calendar td.week {
    color: var(--quick-calendar-week);;
    cursor: pointer;
    font-size: 0.6rem;
}

.quick-calendar td.title {
    font-size: 0.7rem;
}

.quick-calendar td.selected {
    background-color: var(--quick-calendar-selected);
}

.quick-calendar td.today {
    background-color: var(--quick-calendar-today);
}

.quick-calendar td.day,
.quick-calendar td.set-today {
    cursor: pointer;
}

.quick-calendar td.set-today:hover,
.quick-calendar td.day:hover,
.quick-calendar td.switch:hover,
.quick-calendar td.year:hover,
.quick-calendar td.week:hover,
.quick-calendar td.month:hover {
    background-color: var(--quick-calendar-hover);
}


.MuiTableCell-sizeMedium {
    padding: 0.2rem !important;
}


.service-shift {
    font-size: 0.8rem;
    padding: 2px;
    border-width: 1px 0 0 1px;
}
.service-slot {
    display: flex;
    flex-direction: row;
    font-size: 0.7rem;
    color: var(--color-text);
    background-color: var(--color-service-slot-bg);
    min-height: 26px;
    width: 100%;
    margin: -1px 0 0 -1px;
}
.service-auth {
    flex-basis: 20%;
    padding: 5px 5px 2px 7px;
    border-right: 0.8px solid var(--red-border);
}
.service-person {
    padding: 5px 5px 2px 7px;
    flex-basis: 80%;
}

.service-vehicle {
    margin: -1px 0 0 -1px;
    background-color: var(--color-service-vehicle-bg);
    padding: 5px 5px 2px 7px;
    flex-basis: 80%;
}
.service-guest {
    margin: -1px 0 0 -1px;
    background-color: var(--color-service-guest-bg);
    padding: 5px 5px 2px 7px;
    flex-basis: 80%;
}

@keyframes fade {
    from {
        opacity: 1.0;
    }
    25% {
        opacity: 0.3;
    }
    75% {
        opacity: 0.3;
    }
    to {
        opacity: 1.0;
    }
}

.blink {
    animation: fade 1600ms infinite;
}

.ProseMirror {
    padding: 5px !important;
}


@media (prefers-color-scheme: dark) {
    a.mhda-logo {
        background: url('/img/logos/MHDAlogo2024_dark.png') left top no-repeat;
        background-size: contain;
    }
}