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

main:not(#main) div#backBox div#calendarBack button {
    margin: 0px auto 0px auto;
    font-size: 1.2em;
    border-width: 2px;
}

main:not(#main) div#backBox div#calendarBack a {
    width: auto;
    margin: 16px auto 0px auto;
}

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

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;
}

div#form_back {
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    display: none;
    z-index: 20;
    background-color: #FFFFFF68;
}

div#form_box {
    position: relative;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
    z-index: 20;
    border-radius: 15px;
    border: 1px solid #000000;
    background-color: #FFFFFF;
    box-shadow: 2px 2px 6px #000000;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

div#form_box h2 {
    margin: 0px;
}

div#form_box p {
    margin: 0px 0px 10px 0px;
}

div#form_box > div {
    position: relative;
    display: flex;
    max-width: 100%;
    gap: 10px;
    margin: auto;
}

div#form_box > div.form_inputBack div.form_inputGroupBox {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

div#form_box > div.form_inputBack div.form_inputGroupBox > div.form_input:first-child {
    min-width: calc(100% - 168px);
}

div#form_box > div.form_inputBack div.form_inputGroup {
    display: flex;
    flex-direction: row;
    text-align: left;
    width: fit-content;
}

div#form_box > div.form_inputBack div.form_inputGroupBox > div.form_input:last-of-type input {
    width: 66px;
}

div#form_box > div.form_inputBack div.form_input {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    text-align: left;
}

div#form_box div:first-of-type {
    flex-direction: column;
}

div#form_box div button {
    height: auto;
}

div#form_box div.numberTools {
    position: relative;
    height: 40px;
    width: 80px;
    display: flex;
    flex-direction: row;
}

div#form_box div.numberTools > div {
    display: flex;
    cursor: pointer;
    height: 44px;
    width: 39px;
    border: 1px solid #000000;
}

div#form_box div.numberTools > div:not(.block):hover {
    margin: -1px -1px 1px 1px;
    background-color: #AAAAAA;
}

div#form_box div.numberTools > div > img {
    position: relative;
    margin: auto;
    pointer-events: none;
    user-select: none; 
}

div#form_box div.numberTools > div.block {
    opacity: 0.5;
    pointer-events: none;
}

div#form_box p#form_error {
    display: none;
    margin-top: 10px;
    margin-bottom: 0px;
}

input {
    position: relative;
    border: 1px solid #000000;
    outline: none;
    padding: 15px 5px 0px 5px;
    box-shadow: inset 1px 1px 4px #868686;
    height: 29px;
    border-radius: 0px;
    font-size: 0.86em;
}

input#form_adults {
    font-size: 1.0em;
    text-align: center;
}

div#form_box label {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 0.80em;
    z-index: 2;
}

textarea {
    position: relative;
    resize: none;
    border: 1px solid #000000;
    outline: none;
    padding: 20px 5px 5px 5px;
    box-shadow: inset 1px 1px 4px #868686;
    margin-bottom: 10px;
    font-size: 0.86em;
}

div#checkOutput {
    height: fit-content;
    margin-top: 10px;
    margin-bottom: auto;
}

div#checkOutput h2 {
    margin-top: 0px;
    margin-bottom: 0px;
}

div#checkOutput p {
    margin: 0px;
}

div#calendarBack > p {
    margin-top: 0px;
    margin-bottom: 5px;
}