main:not(#main) div#backScreen div#calendarBack {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: calc(100% - 60px);
    text-align: center;
    margin: auto;
}

main:not(#main) div#backScreen div#calendarBack button {
    margin: 0px auto 40px auto;
}

main:not(#main) div#backScreen div#calendar {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 40px auto 0px auto;
    gap: 10px;
    padding: 4px 42px;
    overflow: scroll;
}

main:not(#main) div#calendar div#header {
    text-align: center;
    margin: auto;
}

main:not(#main) div#calendar div#header > h2, main:not(#main) div#calendar div#header > h3 {
    margin: 0px auto;
}

main:not(#main) div#calendar div.row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

main:not(#main) div#calendar div.cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 30px;
    min-height: 36px;
    width: 6vw;
    height: 6vh;
    max-width: 60px;
    max-height: 60px;
    padding: 5px;
    box-shadow: 1px 1px 4px #AAAAAA;
}

main:not(#main) div#calendar div.cell:not(.sel.cellType_1):not(.sel.cellType_2):not(.block) {
    cursor: pointer;
}

@media screen and (max-width: 568px){
    main:not(#main) div#calendar div.cell {
        min-width: 20px;
        min-height: 30px;
        width: 4vw;
        height: 4vw;
    }
    
    main:not(#main) div#calendar div.cell p.booked {
        display: none;
    }
}

main:not(#main) div#calendar div.cell:not(.post):not(.pre):not(.cellType_1):not(.cellType_2):not(.block):not(.selected):hover {
    position: relative;
    top: 1px;
    left: 1px;
    box-shadow: inset 1px 1px 4px #AAAAAA;
    background: #2255AA18;
}

main:not(#main) div#calendar div.cell.selected:hover {
    position: relative;
    top: 1px;
    left: 1px;
    box-shadow: inset 1px 1px 6px 2px #FFFFFF42;
}

main:not(#main) div#calendar div.cell.sel {
    background: #FFFFFF22;
}

main:not(#main) div#calendar div.cell.pre p, main:not(#main) div#calendar div.cell.post p {
    color: #AAAAAA;
}

main:not(#main) div#calendar div.cell.now {
    background: #42AAFF22;
}

main:not(#main) div#calendar div.cell.selected {
    box-shadow: 1px 1px 6px #42AAFF42;
    background: #2255AA42;
}

main:not(#main) div#calendar div.cell.sel.cellType_1 {
    background: #FF420042;
    pointer-events: none;
}

main:not(#main) div#calendar div.cell.now.cellType_1 {
    background: #FFAA0042;
    pointer-events: none;
}

main:not(#main) div#calendar div.cell.pre.cellType_1, main:not(#main) div#calendar div.cell.post.cellType_1 {
    background: #86220042;
}

main:not(#main) div#calendar div.cell p {
    margin: auto;
}

main:not(#main) div#calendar div.cell p.weekDay {
    margin: auto;
    font-size: 0.68em;
}

main:not(#main) div#calendar div.cell p.price {
    margin: auto;
    font-size: 0.68em;
    display: none;
}

main:not(#main) div#calendar div.cell p.booked {
    margin: auto;
    font-size: 0.68em;
}

main:not(#main) div#calendar div.cell p.cellNr {
    margin: auto;
}

main:not(#main) div#calendar img#arrowLeft {
    position: absolute;
    top: 60%;
    left: 16px;
    cursor: pointer;
}

main:not(#main) div#calendar img#arrowRight {
    position: absolute;
    top: 60%;
    right: 16px;
    cursor: pointer;
}

main:not(#main) div#calendar img#arrowLeft:hover, main:not(#main) div#calendar img#arrowRight:hover {
    opacity: 0.5;
}

main:not(#main) div#calendar div.cell.pre:not(.cellType_1):not(.cellType_2):not(.block):hover, main:not(#main) div#calendar div.cell.post:not(.cellType_1):not(.cellType_2):not(.block):hover {
    position: relative;
    top: 1px;
    left: 1px;
    box-shadow: inset 1px 1px 4px #AAAAAA;
}

main:not(#main) div#calendar div.cell.cellType_1 p.price {
    display: none;
}