/** Calendar **/

.calendar {
    --color-bg: var(--color-text-lighter);
    --color-fg: 402060;
    --color-border: #E0D0F0;
    --color-month-bg: #603090;
    --color-month-fg: var(--color-bg);
    --color-dayofwk-bg: var(--color-bg);
    --color-dayofwk-fg: var(--color-fg);
    --color-day-bg: #E0D0F0;
    --color-day-fg: var(--color-fg);
    --color-day-inact-bg: #F0F0F0;
    --color-day-inact-fg: #C0C0C0;
    --color-day-act-bg: #E0C0FF;
    --color-day-act-fg: var(--color-fg);
    --color-day-act-border: #C0A0E0;
    --color-info-bg: #FFE0C0;
    --color-info-fg: var(--color-text-darker);
    --color-info-border: #808080;
}

.calendar-legend,
.month {
	line-height: 100%;
}

.month {
    padding: 0.5em;
}

.month table
{
	height: 380px;
	width: 100%;
	border: 2px solid var(--color-border);
    border-collapse: separate;
    background: var(--color-bg)
}

.month th,
.month td
{
	padding: 2px;
	height: 1em;
    text-align: left;
    vertical-align: top;
}

.month thead th
{
	color: var(--color-month-fg);
	background: var(--color-month-bg);
	text-align: center;
	padding: 0.5em;
	font-size: var(--font-size-h3);
}

.month td.day_of_week
{
	text-align: center;
	width: 14.3%;
}

.calendar td.not_this_month
{
	color: var(--color-day-inact-fg);
	background: var(--color-day-inact-bg);
	height: auto;
}

.calendar td.this_month
{
	color: var(--color-day-fg);
	background: var(--color-day-bg);
	height: auto;
}

.calendar .date
{
	font-size: 8pt;
	margin-top: -2px;
	display: block;
}

.calendar td.this_month.date
{
	color: var(--color-day-fg);
}

.calendar td.this_month.today
{
	background: var(--color-day-act-bg);
}
.calendar td.this_month:hover
{
	background: var(--color-day-act-bg);
	border: 1px solid var(--color-day-act-border);
	padding: 1px;
}

.calendar .info
{
	display: none;
}

.calendar .code
{
    font-size: 8pt;
    display: block;
}

.calendar td.this_month .code
{
    text-decoration: none;
    font-weight: bold;
    margin-top: -2px;
}

.calendar td.not_this_month .code
{
    margin-top: -3px;
}

@media (min-width: 992px) {
    .calendar .info
    {
        display: none;
        position: absolute;
        color: var(--color-info-fg);
        border: 1px solid var(--color-info-border);
        background: var(--color-info-bg);
        width: 20em;
        padding: 0.5em;
        text-align: left;
        z-index: 1;
    }

    .calendar .info h3
    {
        margin: 0 0 0.5em 0;
        font-size: 10pt;
        font-weight: bold;
    }

    .calendar td .training:hover .info
    {
        display: block;
    }

    .calendar td.this_month .code
    {
        text-decoration: underline;
    }
}