#blackouts {
    /*width: 725px;*/
    margin: 20px auto 0 auto;
}

#title-container {
    color: rgb(47, 141, 190);
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
}

.property-title {
    font-size: 20px;
    margin-right: 10px;
    color: #6B7783;
}

.blk-field-descr {
    margin-top: 10px;
    font-size: 15px;
    line-height: 15px;
}

.blk-field {
    width: 20px;
    display: inline-block;
    height: 16px;
    background-color: transparent;
    color: #9ca3af;
    font-size: 12px;
    text-decoration: line-through;
    line-height: 16px;
}

#edit-blackouts-form {
    max-width: 400px;
    margin-bottom: 20px;
}

#calendarContainer {
    margin: 0;
}

#selection-info {
    margin-bottom: 1.3rem;
}

#selection-info span {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-right: 1.5rem;
}

#otherYears {
    margin-bottom: 16px;
}

#otherYears > span {
    color: #9ca3af;
}

#prevYearCal, #nextYearCal {
    font-weight: 500;
    color: #000;
    text-decoration: none;
}

#prevYearCal:hover, #nextYearCal:hover {
    text-decoration: underline;
}

table.month-table {
    width: 100%;
    background-color: #fff;
    border-collapse: separate;
    border-spacing: 2px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    table-layout: fixed;
    border-radius: 8px;
    overflow: hidden;
}

table.month-table td {
    height: 32px;
    width: 32px;
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    color: #374151;
    font-size: 13px;
}

table.month-table tr {
    height: 32px;
}

table.month-table td:not(.not-day) {
    cursor: pointer;
}

table.month-table td:not(.not-day):not(.blck-date):hover {
    background-color: #f5f5f5;
    border-radius: 4px;
}

table.year-table {
    background-color: #fff;
    border: none;
    border-collapse: separate;
    border-spacing: 12px;
}

table.year-table > tbody > tr > td {
    vertical-align: top;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.month-th {
    text-align: center;
    background-color: #647185;
    height: auto;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.025em;
    border: none;
    color: #fff;
    padding: 12px 0;
    text-shadow: none;
    border-radius: 0;
    box-shadow: none;
    background-image: none;
    vertical-align: middle;
}

.week-days-th {
    text-align: center;
    color: #9ca3af;
    height: auto;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 8px 0;
    vertical-align: middle;
    background-color: #fafafa;
}

.blck-old {
    background-color: #fafafa;
}

.blck-off {
    background: none;
}

.blck-icon {
    color: #cfcfd0;
    font-size: 20px;
}

.blck-icon-small {
    font-size: 15px;
}

.blck-date, .blck-date.blck-old {
    background-color: #e5e5e5;
    color: #525252;
    font-weight: 600;
    border-radius: 4px;
}

/* Frontend (customer-facing) blackout styling - strikethrough instead of background */
#blackouts .blck-date,
#blackouts .blck-date.blck-old {
    background-color: transparent;
    color: #d9dee4;
    font-weight: 400;
    text-decoration: line-through;
    border-radius: 0;
}

/* Frontend past days - same as unavailable */
#blackouts td.past-day {
    background-color: transparent;
    color: #d9dee4;
    font-weight: 400;
    text-decoration: line-through;
}

.blck-icon.has-booking {
    color: #629c6c;
}

.blck-date.blck-old.has-booking:not(.blck-off) {
    background-color: #dcfce7;
    color: #166534;
    font-weight: 600;
}

.blck-icon.has-block {
    color: #ef4444;
}

.blck-date.blck-old.has-block:not(.blck-off) {
    background-color: #fee2e2;
    color: #991b1b;
    font-weight: 600;
}

.blackouts-front-url {
    min-height: 75px;
    background: #FFF;
    padding: 7px;
    box-sizing: border-box;
}

label[for="front_url"] {
    font-weight: bold;
}