/* Calendar - date-picker */ .pika-year { display: flex; flex-wrap: wrap; gap: 1rem; } .pika-header { width: 100%; display: flex; align-items: center; justify-content: center; gap: .25rem; } .pika-month { flex-grow: 1; min-width: 20%; font-size: 1.25rem; line-height: 2; } .calendar-loading { opacity: 0.5; pointer-events: none; } #x-calendar { font-size: 20px; min-height: 160px; transition: opacity .3s ease; } #x-calendar button { border-radius: 0; } .pika-table { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; } .pika-title { text-align: center; color: var(--accent-color, #900); padding: 0; display: flex; justify-content: space-between; align-items: center; } #x-calendar .pika-title { margin-bottom: 8px; } .pika-month-title { width: 100%; font-weight: bold; text-align: center !important; } .pika-day+.pika-day, .pika-weekday+.pika-weekday { border-left: 1px solid #d7bc89; } .pika-table>div:nth-child(7n + 6), .pika-table>div:nth-child(7n + 7), .pika-table>a:nth-child(7n + 6), .pika-table>a:nth-child(7n + 7) { color: #c00; } .pika-table>*:nth-child(7n + 1) { border-left: 0; } .pika-weekday { color: #999; color: var(--grey); line-height: 1.5; } .pika-weekday abbr { text-decoration: none; } .pika-day { position: relative; color: #3a3a3a; background-color: transparent; display: block; border-top: 1px solid #d7bc89; text-decoration: none; } span.pika-day { color: #999; } @media (hover: hover) { .pika-day:hover { text-decoration: none; } } .is-outside-current-month { color: #d7bc89 !important; } #x-calendar .post, #x-calendar .calendar-fast { background-color: #f4daa9; } #x-calendar .calendar-parent { background-color: #b565ff59 !important; } #x-calendar .high, #x-calendar .calendar-holiday, #x-calendar .great12 { background-color: #fb6e6e; } #x-calendar .pika-day.easter { font-weight: bold; background-color: #f00; color: var(--secondary-bg, #fff) !important; box-shadow: 0 0 14px #ffbf00 inset, 0 0 18px var(--secondary-bg, #fff)b00; z-index: 1; } @media (hover: hover) { .pika-day:hover { background-color: #fcdd76; } } .is-today:after { display: block; content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; outline: 3px ridge #32cd32 !important; z-index: 2; } .pika-select-wrap { position: relative; } .pika-select-label { font-weight: 700; cursor: pointer; z-index: 4; } .pika-select { position: absolute; top: 100%; height: auto; max-height: 0px; overflow: hidden; display: block; z-index: 3; padding: 0 4px; appearance: none; -webkit-appearance: none; font-size: inherit; color: inherit; font-weight: 700; cursor: pointer; background: var(--secondary-bg, #fff); border: none; border-radius: 4px; transition: max-height .5s ease; } .pika-select-wrap.active .pika-select { max-height: 500px; } .pika-select-option { text-align: center; } @media (hover: hover) { .pika-select-option:hover { color: #c00; } } .pika-prev, .pika-next { border: 0; overflow: hidden; display: inline-block; padding: 0; margin: 0 8px; background: transparent; color: inherit; } .pika-prev:before, .pika-next:before { font-family: FontAwesome; display: inline-block; overflow: hidden; width: 100%; height: 100%; } .pika-prev:before { content: '\f137'; } .pika-next:before { content: '\f138' } .pika-prev { order: -1; } .pika-header { margin: .5rem auto; } .pika-header :is(input, button, a, select) { border-radius: 5px; padding: 0 5px; line-height: 26px; line-height: calc( var(--font-base-size, 19px) * 1.37 ); min-width: 26px; height: auto; margin: 0; cursor: pointer; } .pika-header :is(button, a) { background: transparent; color: var(--primary-color) !important; border: 0; text-decoration: none; } .pika-header :is(input, select) { border: 2px solid; font-size: inherit; line-height: 22.25px; line-height: calc( var(--font-base-size, 19px) * 1.171 ); border-color: var(--primary-color); text-align: center; } .pika-header select { appearance: none; -webkit-appearance: none; padding-right: 16px; } .pika-header .select-wrap { position: relative; } .pika-header .select-wrap:after { font-family: FontAwesome; content: '\f107'; position: absolute; right: 5px; top: 18%; pointer-events: none; } @media (min-width:921px) { #x-calendar { font-size: 16px; } .pika-month { font-size: 1rem; line-height: 1.6; } }