#calendar {
	position: fixed;
	top: 0.6rem;
	right: 0.6rem;
	padding: 1rem 2rem;
}

.calendar-opener {
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    color: var(--wt);
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 0.2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
} .calendar-opener:hover {
    background-color: var(--wt);
    color: var(--bk);
}

.calendar-close {
    display: block;
	margin: auto;
}

.add-date {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background-color: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
} .add-date:hover {
    text-decoration: underline;
}

.create-date-content {
    position: fixed;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    text-align: center;
    padding: 2rem;
}

.create-date-content h2 {
    margin: 0;
}

.create-date-content input {
    outline: none;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--bk);
    cursor: pointer;
    user-select: initial;
    margin: 1rem 0rem;
}

.create-controls button {
    width: 46%;
}

.create-controls .accept {
    float: left;
}

.create-controls .cancel {
    float: right;
}

.logout {
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    color: var(--wt);
    cursor: pointer
}