/* CSS Document */

/* form styles */
#trunk_request_form label {
    width: 9em;
}

#trunk_survey_form label {
    width: 25em;
}

/* calendar styles for form calendar */
/* .calendar {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    /*	font-size: .6em; * /
}

.calendar caption {
    margin: 0;
    padding: .3em 0;
    background: #A9E2F3;
    caption-side: top;
    text-align: center;
    color: #000;
}

.calendar th {
    border-bottom: 1px solid #ccc;
    font-weight: normal;
    background: #fff;
}

.calendar td {
    border: 1px solid #fff;
    padding: .1em .3em;
    width: 1em;
    text-align: center;
    font-size: .6em;
}

.calendar a {
    color: #000;
    text-decoration: none;
}

.calendar td.today {
    background: #ffc;
}

.calendar td.selected {
    border: 1px dotted #ff7800;
}

.calendar td.highlighted {
    background: #fc9;
}

.calendar td:hover,
.calendar td.today:hover,
.calendar td.selected:hover,
.calendar td.highlighted:hover {
    background: #cff;
    border: 1px solid #09f;
}

table.calendar td.pad {
    color: #999;
    background: #fff;
}

table.calendar td.pad:hover {
    background: none;
    border: 0;
}

.sunday,
.saturday {
    background: #f0f0f0;
}

#year {
    padding: 0;
    list-style: none;
    margin: 0;
}

#year:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#year li {
    float: left;
    padding: 0 .5em .5em 0;
    height: 167px;
}
*/
.year-calendar {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 20px;
}

.month table {
    width: 100%;
    border-collapse: collapse;
}

.month th,
.month td {
    text-align: center;
    border: 1px solid #ddd;
    height: 32px;
}

.month button {
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.blackout {
    color: #999;
    background: #eee;
    text-decoration: line-through;
}
/*
@media (max-width: 800px) {
    .year-calendar {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}
*/
@media (max-width: 1000px) {
    .year-calendar {
        grid-template-columns: 1fr;
    }
}