* {
    font-family: 'Courier New', Courier, monospace;
    box-sizing: border-box;

    --bodyBackground: #272932;
    --topMenuBackgound: #542344;
    --lightMenuBackground: #81366A;
    --contentContainerBackground: #F3F5F7;
    --lightText: rgb(164, 164, 164);
    --lighterText: #F3F5F7;
    --matteRed: #F05D5E;
    --matteGreen: #0F7173;
    --mint: #C7F2A7;
    --darkMint: #acef79;
    --lightMatteGreen: #17B2B5;
    --lightMatteRed: #F58F8F;
    --lightgrey: rgb(184, 184, 184);
    --lightergrey: rgb(227, 227, 227);
    --labelgrey: rgb(106, 106, 106);

    --standardRadius: 5px;
    --smallRadius: 3px;
}

body {
    background-color: var(--bodyBackground);
    display: flex;
    flex-direction: column;
}

input,
select {
    font-size: 1rem;
    height: 1.5rem;
}

select {
    text-align: center;
    padding: 0 0.5rem;
}

input[type="checkbox"] {
    vertical-align: middle;
}

textarea {
    width: 100%;
    height: 7rem;
}

a {
    text-decoration: none;
}

/* Top Menu */
nav {
    position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
    left: 0;
}

#topMenuContainer,
#settingsTitleBar {
    background-color: var(--topMenuBackgound);
    color: var(--lighterText);
    padding: 0.5rem 2rem;
    margin-bottom: 0.5rem;
    flex: 1 0 100%;
}

#topMenuButtonContainer {
    align-items: center;
    position: relative;
}

#syncIndicator {
    height: 0.7rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    position: relative;
    margin-left: 0.5rem;
    display: flex;
    justify-content: center;
}

#syncIndicator.synced {
    background-color: springgreen;
}

#syncIndicator.unsynced {
    background-color: red;
}

#syncIndicator.loggedOut {
    background-color: orange;
}

#syncIndicator:hover span {
    visibility: visible;
}

#topMenu {
    display: none;
    background-color: var(--lightMenuBackground);
    position: absolute;
    top: 2rem;
    right: 0rem;
    z-index: 1;
    padding: 1rem 1rem;
}

/* Content Containers */
main {
    margin-top: 50px;
}

#settingsSubjectsContainer,
#settingsTimetableContainer,
#deleteAccountContainer,
#timetableContainer,
#taskContainer {
    position: relative;
    background-color: var(--contentContainerBackground);
    padding: 2rem 2rem;
    margin-bottom: 0.5rem;
}

#settingsContainer {
    display: none;
    position: absolute;
    z-index: 2;
    background-color: var(--bodyBackground);
    top: 1rem;
    left: 2rem;
    right: 2rem;
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.16);
    border: solid 0.3rem var(--bodyBackground);
}

#settingsTimetableContainer {
    margin-bottom: 0;
    scrollbar-color: var(--lightgrey) var(--contentContainerBackground);
}

#timetableContainer {
    overflow-y: hidden;
    scrollbar-color: var(--lightgrey) var(--contentContainerBackground);
}

#isCurrentWeekDot {
    margin-left: 0.5rem;
    min-width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--matteGreen);
}

#accountSettingsContainer {
    position: relative;
}

/* dialogs */
dialog {
    background-color: var(--contentContainerBackground);
    min-width: 460px;
    max-width: 460px;
}

dialog::backdrop {
    backdrop-filter: blur(3px);
}

dialog .alertRing {
    width: 100%;
}

dialog input {
    width: 100%;
}

dialog .errorMessageDisplay {
    width: 100% !important;
    margin-top: 0.5rem;
    color: var(--matteRed);
    text-align: center;
    text-wrap: wrap;
}

.headline {
    background-color: var(--topMenuBackgound);
    margin: -1rem -1rem 0 -1rem;
    padding: 0.5rem 1rem;
}

/* tasks and timetable changes conflicts dialog */
#LessonChangesAndTasksToKeepDialog {
    top: 25%;
    width: fit-content;
    min-width: 700px;
}

.dialogBody {
    padding: 0 1.5rem 1rem;
}

#LessonChangesAndTasksToKeepDialog label {
    color: var(--labelgrey);
    font-weight: bold;
    display: block;
}

#LessonChangesAndTasksToKeepDialog table {
    width: 100%;
}

#LessonChangesAndTasksToKeepDialog .deleteItemButton {
    background-color: var(--lightMatteRed);
    color: var(--lighterText);
    font-size: 1rem;
}

#LessonChangesAndTasksToKeepDialog .deleteItemButton:hover {
    background-color: var(--matteRed);
}

#lessonChangesConflictsContainer,
#taskConflictsContainer {
    padding: 1rem 0;
}

/* Time Table */

#weekBackwardButton,
#weekForwardButton,
#timetableBackwardButton,
#timetableForwardButton {
    border: none;
    background-color: var(--contentContainerBackground);
}

#weekBackwardButton:active,
#weekForwardButton:active {
    color: var(--matteRed);
}

#weekOverviewContainer,
#settingsWeekOverviewContainer {
    position: relative;
    left: 0;
    transition: all 0.3s ease-out;
    cursor: default;
    overflow-x: scroll;
    overflow-y: hidden;
}

.weekOverview,
.settingsWeekOverview {
    width: 100%;
    display: grid;
    grid-template-columns: 0.2fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 0.6fr 0.6fr;
    min-width: 900px;
}

.settingsWeekOverview {
    grid-template-columns: 0.2fr minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

#timeslots,
#settingsTimeslots {
    display: grid;
    grid-template-rows: 3rem 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    position: sticky;
    left: 0;
    background-color: var(--contentContainerBackground);
    border-right: solid 1px var(--lightgrey);
}

.timeslotLabel,
.weekdayLabel {
    padding: 0.5rem 1rem;
}

.timeslot,
.settingsTimeslot,
.timeslotLabel {
    min-width: 0;
    display: flex;
    border-top: solid 1px var(--lightgrey);
    height: 2.6rem;
    padding: 0.2rem;

}

.weekdayLabel {
    font-weight: bold;
    color: var(--labelgrey);
}

.smallDate {
    font-weight: normal;
    font-size: 0.8rem;
    color: var(--lightText);
}

.weekday,
.settingsWeekday {
    display: grid;
    border-left: solid 1px var(--lightgrey);
    grid-template-rows: 3rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
}

.weekday[data-weekday_number="1"],
.settingsWeekday[data-weekday_number="1"] {
    border-left: none;
}

.weekday.passed {
    background-color: var(--lightergrey);
}

.isTodayDot {
    display: none;
    margin-left: 0.5rem;
    height: 0.5rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-color: var(--matteGreen);
}

.lesson,
.settingsLesson {
    max-width: 100%;
    display: flex;
    flex-grow: 1;
    padding: 0.5rem 0.5rem;
    border-radius: var(--standardRadius);
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.16);
    color: var(--lighterText);
    text-align: center;
    transition: all 0.3s ease-out;
}

.lessonContentContainer {
    display: flex;
    justify-content: space-between;
}

.lessonHasTaskIndicator {
    visibility: hidden;
    height: 0.3rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    margin-right: -0.3rem;
}

.spacerBlock {
    width: 0.3rem;
    margin-right: 0.3rem;
}

.lessonClassSubjectField {
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lessonOptionsWrapper {
    position: absolute;
    z-index: 2;
    top: 1.6rem;
    left: 0;
    right: 0;
    margin: 0 0.5rem;
    display: flex;
    flex-direction: column;
    background-color: var(--lightergrey);
    padding: 1rem 1.5rem;
    border-radius: var(--standardRadius);
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.16);
}

.lessonOptionsWrapper.canceled button {
    color: var(--lightgrey);
    transition: all 0.3s ease-out;
}

.lessonOption {
    display: flex;
    padding: 0.25rem 0;
}

.lessonOption:first-child {
    margin-bottom: 0.25rem;
}

.lessonOption:hover {
    background-color: rgba(256, 256, 256, 0.1);
}

.lessonOption button {
    color: var(--lighterText);
    border: none;
    flex-grow: 1;
    background-color: transparent;
}

.lessonForm {
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    background-color: var(--lightergrey);
    border-radius: var(--standardRadius);
    box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.16);
    padding: 0.5rem 0.5rem;
}

.addLessonButtonWrapper {
    display: none;
    flex: 1 1 100%;
    background-color: var(--lightergrey);
    justify-content: center;
    align-items: center;
    text-align: right;
}

.addLessonButton {
    color: #0F7173;
}

.weekOverview:hover .addLessonButtonWrapper,
.settingsWeekOverview:hover .addLessonButtonWrapper {
    display: flex;
}

/* Task Container and Settings tables*/
#upcomingTasksContainer,
#inProgressTasksContainer {
    flex: 1 1 50%;
    max-width: 50%;
}

#upcomingTasksTable,
#inProgressTasksTable,
#lessonChangesConflictsTable,
#taskConflictsTable {
    border-spacing: 0;
}

#upcomingTasksTable tbody tr:hover,
#inProgressTasksTable tbody tr:hover,
#lessonChangesConflictsTable tbody tr:hover,
#taskConflictsTable tbody tr:hover {
    background-color: var(--lightergrey);
}

#upcomingTasksTable tbody tr:hover+tr,
#inProgressTasksTable tbody tr:hover+tr {
    background-color: var(--lightergrey);
}

#upcomingTasksTable td,
#inProgressTasksTable td,
#upcomingTasksTable th,
#inProgressTasksTable th,
#lessonChangesConflictsTable td,
#taskConflictsTable td,
#lessonChangesConflictsTable th,
#taskConflictsTable th {
    min-width: 3.5rem;
    padding: 0.5rem 1rem;
    border-right: solid 1px var(--lightgrey);
    user-select: none;
    cursor: default;
}

#upcomingTasksTable .taskDone,
#upcomingTasksTable .taskDescription,
#inProgressTasksTable .taskDone,
#inProgressTasksTable .taskDescription {
    border-right: none;
}

.taskAdditionalInfo {
    min-width: 1rem !important;
    width: 1rem !important;
    padding: 0 0 0 0.25rem !important;
    border-right: none !important;
    border-left: 3px solid transparent !important;
}

.taskAdditionalInfo.overdue {
    border-left: solid 3px var(--matteRed) !important;
}

.taskClassName {
    padding-left: 0.5rem !important;
}

.taskSubject {
    max-width: 4rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.taskDescription {
    width: 100%;
    max-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.taskDone {
    padding-right: 0 !important;
    padding-left: 0.5rem !important;
}

.taskDone div {
    display: flex;
    gap: 0.5rem;
    justify-content: end;
    vertical-align: center;
}

.reoccuringTaskContainer {
    flex-wrap: wrap;
}

tr[data-new] {
    background-color: var(--lightergrey);
}

tr[data-new] td {
    border-color: var(--contentContainerBackground) !important;
}

tr[data-new] td.taskAdditionalInfo {
    border-color: var(--lightergrey) !important;
}

tr[data-new]:has(td[data-taskDescription]) td {
    border-top: solid 1px var(--contentContainerBackground);
}

/* Settings Container */
#settingsContainer label {
    display: block;
    font-weight: bold;
    color: var(--labelgrey);
}

#settingsMenu {
    display: flex;
    gap: 0.5rem;
}

#createSubjectContainer {
    flex: 1 1 50%;
}

#existingSubjectsContainer {
    flex: 1 1 50%;
}

#subjectsListContainer {
    flex-wrap: wrap;
}

#colourSelection {
    border: solid 3px var(--contentContainerBackground);
    flex-wrap: wrap;
}

#validFromPickerContainer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    height: 1.5rem;
    margin-right: 2rem;
}

.colorSelectionBox {
    box-sizing: content-box;
    width: 1.5rem;
    height: 1.5rem;
    border: solid 2px var(--contentContainerBackground);
    border-radius: 50%;
}

.colorSelectionBox:hover {
    border: solid 2px var(--lightMatteGreen);
}

.colorSelectionBox.selected {
    border: solid 2px var(--lightMatteGreen);
}

.subjectListItem {
    padding: 0.5rem 0.5rem;
    border-radius: var(--smallRadius);
    color: var(--lighterText);
    width: 150px;
}

#validFromPickerWrapper {
    display: none;
}

#validFromPickerAlertDisplay {
    display: none;
    color: var(--matteRed);
    top: 3rem;
}

#saveDiscardTimetableButtonContainer,
#saveDiscardTimetableChangesButtonContainer {
    display: none;
}

#approveAccountDeletionContainer {
    display: none;
}

#deletionErrorDisplay {
    display: none;
    color: var(--matteRed);
}

#versionDisplay {
    position: absolute;
    bottom: 0;
    right: 0;
    color: var(--lightgrey);
}

/* Buttons */
.confirmationButton,
.cancelButton {
    border: none;
    padding: 0.25rem 1rem;
    border-radius: var(--smallRadius);
    background-color: var(--lightMatteGreen);
    font-size: 1rem;
    color: var(--lighterText);
}

.cancelButton {
    background-color: var(--lightMatteRed);
}

.confirmationButton:hover {
    background-color: var(--matteGreen);
}

.cancelButton:hover {
    background-color: var(--matteRed);
}

.menuButton {
    font-size: 1rem;
    padding: 0.5rem 2rem;
    color: var(--lighterText);
    border: none;
    background-color: transparent;
}

.taskDone button,
.discardNewLessonButton,
.saveNewLessonButton {
    border: none;
    padding: 0 1rem;
    border-radius: var(--smallRadius);
    background-color: var(--lightMatteGreen);
    font-size: 1rem;
    color: var(--lighterText);
}

.taskDone button:hover {
    background-color: var(--matteGreen);
}

#createSubjectButton,
#createNewTimetableButton,
#saveNewTimetableButton,
#discardNewTimetableButton,
#editTimetableButton,
#saveTimetableUpdatesButton,
#discardTimetableChangesButton {
    padding: 0.25rem 1rem;
    border: none;
    border-radius: var(--smallRadius);
    background-color: var(--lightMatteGreen);
    font-size: 1rem;
    color: var(--lighterText);
}

#discardNewTimetableButton,
#discardTimetableChangesButton {
    background-color: var(--lightMatteRed);
}

#createSubjectButton:hover,
#createNewTimetableButton:hover,
#saveNewTimetableButton:hover,
#editTimetableButton:hover,
#saveTimetableUpdatesButton:hover {
    background-color: var(--matteGreen);
}

#discardNewTimetableButton:hover,
#discardTimetableChangesButton:hover {
    background-color: var(--matteRed);
}

.lessonSelect,
.reoccuringIntervalSelect {
    appearance: none;
}

.lessonSelect option:first-child,
.reoccuringIntervalSelect option:first-child {
    text-align: center;
}

.reoccuringIntervalSelect[disabled] {
    background-color: var(--lightergrey);
}

.lessonOptionsButton,
.deleteItemButton,
.deleteLessonButton,
#closeSettingsButton,
#closeSettingsButtonResponsive,
#openMenuButton,
#openSettingsMenuButton,
#openTimetableSettingsButton,
#openAccountSettingsButton {
    color: var(--lightgrey);
    border: none;
    border-radius: var(--smallRadius);
    padding: 0 0.2em;
    background-color: transparent;
}

.lessonOptionsButton:hover,
.deleteItemButton:hover,
.deleteLessonButton:hover,
#closeSettingsButton:hover,
#timetableSettingsButton:hover,
#accountSettingsButton:hover,
#openMenuButton:hover,
#openSettingsMenuButton:hover,
#openTimetableSettingsButton:hover,
#openAccountSettingsButton:hover,
#closeSettingsButtonResponsive:hover,
.menuButton:hover {
    background-color: rgba(256, 256, 256, 0.1);
}

#logoutButton:hover {
    background-color: var(--matteRed);
}

#openMenuButton,
#openSettingsMenuButton,
#closeSettingsButton {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
}

#openTimetableSettingsButton,
#openAccountSettingsButton,
#closeSettingsButtonResponsive {
    font-size: 1rem;
    padding: 0 1rem;

}

#openTimetableSettingsButton.selected,
#openAccountSettingsButton.selected {
    background-color: rgba(256, 256, 256, 0.1);
}

.lessonOption.lessonPastMessage.responsive {
    display: block;
}

.lessonOption.lessonPastMessage.responsive {
    display: none;
}


.saveTaskButton,
.updateTaskButton,
.saveNewLessonButton {
    background-color: var(--lightMatteGreen);
    margin-right: 0.5rem;
}

.discardNewTaskButton,
.discardUpdateTaskButton,
.discardNewLessonButton {
    background-color: var(--lightMatteRed) !important;
}

.saveTaskButton:hover,
.updateTaskButton:hover,
.setTaskDoneButton:hover,
.saveNewLessonButton:hover {
    background-color: var(--matteGreen);
}

.discardNewTaskButton:hover,
.discardUpdateTaskButton:hover,
.discardNewLessonButton:hover {
    background-color: var(--matteRed) !important;
}

#taskContainer th,
#LessonChangesAndTasksToKeepDialog th {
    color: var(--lightgrey);
    text-align: left;
    padding: 0.5rem 1rem;
}

#openSettingsMenuButton,
#closeSettingsButtonResponsive {
    display: none;
}

/* header stylings */

h1,
h2,
h3 {
    margin: 0;
    color: var(--matteRed);
}

/* tooltips */

.tooltip {
    position: relative;
    margin-left: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1rem;
    height: 1.5rem;
    border-radius: var(--standardRadius);
    background-color: var(--lightergrey);
    text-align: center;
}

.tooltipTextLeft,
.tooltipTextRight,
.tooltipTextBottom {
    visibility: hidden;
    position: absolute;
    right: calc(100% + 15px);
    z-index: 4;
    min-width: 250px;
    padding: 1rem;
    border-radius: var(--standardRadius);
    background-color: var(--lightergrey);
    color: black;
    font-weight: normal;
}

.tooltipTextRight {
    visibility: hidden;
    position: absolute;
    left: calc(100% + 15px);
}

#syncIndicator span {
    top: -10px;
}

.tooltip:hover {
    background-color: var(--lightgrey);
}

.tooltip:hover .tooltipTextLeft,
.tooltip:hover .tooltipTextRight,
.tooltip:hover .tooltipTextBottom {
    visibility: visible;
}

.tooltip .tooltipTextLeft::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent var(--lightergrey);
}

.tooltip .tooltipTextRight::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent var(--lightergrey) transparent transparent;
}

#syncIndicator span::after {
    content: " ";
    position: absolute;
    top: 15px;
    left: 100%;
    margin-top: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent var(--lightergrey);
}

.tooltip.error {
    background-color: var(--lightMatteRed);
    color: var(--lighterText);
}

.tooltip.error:hover {
    background-color: var(--matteRed);
}

#subjectsInfoTooltip,
#timetableInfoTooltip {
    position: absolute;
    top: 2rem;
    right: 2rem;
}

#validFromPickerAlertTooltip {
    position: absolute;
    right: 100%;
    display: none;
}

#noSubjectsAlertTooltip {
    display: none;
}

/* generic classes */

.flex {
    display: flex;
}

.wrap {
    flex-wrap: wrap;
}

.column {
    flex-direction: column;
}

.spaceBetween {
    justify-content: space-between;
}

.justifyStart {
    justify-content: start;
}

.justifyCenter {
    justify-content: center;
}

.justifyEnd {
    justify-content: end;
}

.alignCenter {
    align-items: center;
}

.alignEnd {
    align-items: end;
}

.halfGap {
    gap: 0.5rem;
}

.gap {
    gap: 1rem;
}

.doubleGap {
    gap: 2rem;
}

.marginTop {
    margin-top: 1rem;
}

.marginBottom {
    margin-bottom: 1rem;
}

.subjectColorOne {
    background-color: var(--matteGreen);
}

.subjectColorTwo {
    background-color: var(--topMenuBackgound);
}

.subjectColorThree {
    background-color: var(--matteRed);
}

.subjectColorFour {
    background-color: var(--bodyBackground);
}

.subjectColorFive {
    background-color: var(--mint);
    color: black;
}

.subjectColorFive.light.lessonOptionsWrapper .lessonOption button {
    color: black;
}

.subjectColorOne .lessonHasTaskIndicator,
.subjectColorTwo .lessonHasTaskIndicator,
.subjectColorThree .lessonHasTaskIndicator,
.subjectColorFour .lessonHasTaskIndicator {
    background-color: var(--lightergrey);
}

.subjectColorFive .lessonHasTaskIndicator,
.appointement .lessonHasTaskIndicator {
    background-color: var(--labelgrey);
}

.subjectColorOne.light {
    background-color: var(--lightMatteGreen);
}

.subjectColorTwo.light {
    background-color: var(--lightMenuBackground);
}

.subjectColorThree.light {
    background-color: var(--lightMatteRed);
}

.subjectColorFour.light {
    background-color: var(--bodyBackground);
}

.subjectColorFive.light {
    background-color: var(--darkMint);
}

.blankWeekTable {
    background-color: var(--contentContainerBackground);
    transition: all 0.3s ease-out;
}

.undefined,
.appointement {
    border: solid 1px var(--bodyBackground);
    color: var(--bodyBackground);
}

.appointement.light.lessonOptionsWrapper .lessonOption button {
    color: var(--bodyBackground);
}

.appointement.canceled {
    border-color: var(--lightgrey)
}

.canceled {
    background-color: var(--lightergrey);
    color: var(--lightgrey);
}

.validationError {
    border-style: solid;
    border-width: 3px;
    border-radius: var(--smallRadius);
    animation-name: redFlash;
    animation-duration: 0.3s;
}

@keyframes redFlash {
    0% {
        border-color: var(--matteRed);
    }

    50% {
        border-color: var(--matteRed);
    }

    100% {
        border-color: var(--contentContainerBackground);
    }

}

.alertRing {
    width: fit-content;
    border: solid 3px rgba(0, 0, 0, 0);
}

/* responsiveness */

.responsive {
    display: none;
}

@media screen and (max-width: 1350px) {
    .lessonOption.lessonPastMessage {
        display: none;
    }

    .lessonOption.lessonPastMessage.responsive {
        display: block;
    }
}

@media screen and (max-width: 1100px) {

    .lessonHasTaskIndicator {
        margin-right: 0.25rem;
    }

    .spacerBlock {
        display: none;
    }

    .lessonOptionsWrapper {
        padding: 1rem 0.5rem;
    }
}

@media screen and (max-width: 1000px) {

    #taskContainer {
        flex-direction: column;
    }

    #upcomingTasksContainer,
    #inProgressTasksContainer {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 850px) {
    #settingsContainer {
        left: 0;
        right: 0;

    }
}

@media screen and (max-width: 620px) {

    #topMenuContainer,
    #settingsTitleBar {
        padding: 0.5rem 0.5rem;
    }

    #timetableContainer,
    #taskContainer,
    #settingsSubjectsContainer,
    #settingsTimetableContainer {
        padding: 1.5rem 0.5rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    #calendarWeekContainer {
        flex-direction: column;
        justify-content: end;
    }

    #weekSwitcher {
        min-width: 220px;
        justify-content: space-between;
    }

    .timeslot,
    .settingsTimeslot,
    .timeslotLabel {
        min-width: 0;
        display: flex;
        border-top: solid 1px var(--lightgrey);
        height: 2.4rem;
        padding: 0.2rem;

    }

    .lessonContentContainer {
        height: 1rem;
    }

    .lessonForm {
        flex-direction: column;
        align-items: end;
    }

    dialog {
        min-width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100%;
        margin: 0;
    }

    /* make the task tables wrap */
    table {
        display: block;
        width: 100%;
        /* font-size: 1.2rem; */
    }

    table>* {
        display: block;
    }

    tbody {
        display: block;
    }

    thead {
        display: none;
    }

    tr {
        position: relative;
        display: block;
        margin-bottom: 2rem;
    }

    td {
        display: block;
        border-left: solid 1px var(--lightgrey) !important;
    }

    .taskClassName {
        padding: 0.5rem 1rem !important;
    }

    #upcomingTasksTable td,
    #inProgressTasksTable td {
        border: none;
    }

    .taskDescription {
        min-width: 100%;
        max-width: 100%;
        padding-bottom: 1rem;
    }

    .responsiveButtonsTr {
        justify-content: end;
    }

    td::before {
        display: block;
        content: attr(data-heading);
        font-weight: bold;
        color: var(--lightgrey);
    }

    .taskAdditionalInfo.overdue~td:not(:last-child) {
        border-left: solid 3px var(--matteRed) !important;
        padding-left: 1rem !important;
    }

    .taskDone {
        position: absolute;
        border-left: none !important;
        border-right: none !important;
        padding-right: 0.5rem !important;
        right: 0;
        top: 0;
        max-width: 125px;
    }

    /* responsive settings */
    #settingsSubjectsContainer {
        flex-direction: column-reverse;
    }

    #openSettingsMenuButton,
    #closeSettingsButtonResponsive {
        display: block;
    }

    #settingsMenu {
        display: none;
        position: absolute;
        top: 2rem;
        right: 0rem;
        z-index: 2;
        flex-direction: column;
        gap: 0;
        background-color: var(--lightMenuBackground);
        padding: 1rem 1rem;
    }

    #openTimetableSettingsButton,
    #openAccountSettingsButton,
    #closeSettingsButtonResponsive {
        font-size: 1rem;
        padding: 0.5rem 2rem;
        color: var(--lighterText);
        border: none;
        background-color: transparent;
    }

    #closeSettingsButton {
        display: none;
    }

    #createSubjectContainer {
        justify-content: space-between;
    }

    #timetableDatePickerContainer {
        flex-direction: column;
        align-items: start;
    }

    #subjectsInfoTooltip,
    #timetableInfoTooltip {
        position: absolute;
        top: 1rem;
        right: 0.5rem;
    }

    #validFromPickerContainer {
        width: 100%;
    }

    /* generic classes */
    .wrap {
        justify-content: end;
    }
}