body.dark{--calendar-moon: #b9b9ba;--calendar-text: #fff;--calendar-range: #2d9cdb;--calendar-range-selected: #2674a1;--calendar-icon: #fff;--calendar-arrow: #d9d9d9;--calendar-arrow-active: #494a4d}body.light{--calendar-moon: #fff;--calendar-text: #000;--calendar-range: #fff;--calendar-range-selected: #b9b9ba;--calendar-icon: #fff;--calendar-arrow: #d9d9d9;--calendar-arrow-active: #2674a120;--calendar-arrow-hover: #454649}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto,sans-serif;font-optical-sizing:auto;font-style:normal;font-size:12px;color:#2d3748}.calendar{position:relative;width:100%;min-width:240px;max-width:560px;margin:0 auto;border-radius:6px;box-shadow:0 2px 10px #0000001a}.calendar__background{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:url(/alpaca_calendar/images/alpaca@1.5x.png) no-repeat center/cover;z-index:1;border-radius:inherit}.calendar__overlay{width:100%;height:100%;background-color:#131417e6;border-radius:inherit}.calendar__content{position:relative;z-index:2;color:#fff;border-radius:inherit;width:100%;min-width:240px;max-width:560px}.calendar__header{display:flex;justify-content:space-between;text-align:center;align-items:center;padding:8px;margin-bottom:8px}.calendar__btn{background:none;color:#fff;border:none;cursor:pointer;font-size:0}@media (hover: hover) and (pointer: fine){.calendar__btn:hover{background:#2674a120;border-radius:8px}}.calendar__btn svg{fill:var(--calendar-arrow)}.calendar__btn--prev svg{transform:rotate(180deg)}.calendar__title{display:flex;align-items:flex-start;justify-content:center;gap:8px}.calendar__month{font-size:12px;text-transform:uppercase;font-weight:400}.calendar__days{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;width:100%;min-width:240px;max-width:560px;margin:0;overflow:hidden;padding-bottom:8px;row-gap:8px}.calendar__day{width:14.2857142857%;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transform:translateZ(0)}.calendar__day.calendar__day--in-range{position:relative}.calendar__day.calendar__day--in-range span{position:relative;cursor:pointer;color:var(--calendar-text);background:var(--calendar-range);background-size:cover;background-repeat:no-repeat;background-position:center;z-index:1;overflow:hidden}.calendar__day.calendar__day--range-start span,.calendar__day.calendar__day--range-end span{background-color:transparent!important;width:36px;height:36px;z-index:2;color:var(--calendar-text);box-shadow:none;position:relative}@media (max-width: 240px){.calendar__day.calendar__day--range-start span,.calendar__day.calendar__day--range-end span{width:24px;height:24px}}.calendar__day.calendar__day--range-start span{position:relative;z-index:2}.calendar__day.calendar__day--range-start span:before{content:"";position:absolute;z-index:1;right:-23px;top:0;bottom:0;width:2em;transform:translateZ(0);height:calc(100% + 0px);background:var(--calendar-range)}@media (max-width: 304px){.calendar__day.calendar__day--range-start span:before{right:-16px;width:1.5em}}.calendar__day.calendar__day--range-end span{position:relative;z-index:2}.calendar__day.calendar__day--range-end span:before{content:"";position:absolute;z-index:1;left:-23px;top:0;bottom:0;width:2em;transform:translateZ(0);height:calc(100% + 0px);background:var(--calendar-range)}@media (max-width: 390px){.calendar__day.calendar__day--range-end span:before{left:-11px;width:1em}}@media (max-width: 304px){.calendar__day.calendar__day--range-end span:before{left:-9px;width:.8em}}@media (max-width: 300px){.calendar__day.calendar__day--range-end span:before{left:-5px;width:.6em}}@media (max-width: 240px){.calendar__day.calendar__day--range-end span:before{left:-6px}}.calendar__day.calendar__day--selected span{background-size:contain;background-repeat:no-repeat;background-position:center;color:var(--calendar-text)}.calendar__day span{display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:100%;font-size:12px;position:relative;z-index:3;gap:0;height:36px}@media (max-width: 240px){.calendar__day span{height:24px}}.calendar__day--range-start span,.calendar__day--range-end span{position:relative;background-size:cover;background-repeat:no-repeat;background-position:center}.calendar__day--other-month{color:#fff5}@media (hover: hover) and (pointer: fine){body.light .calendar__btn--next:hover,body.light .calendar__btn--prev:hover{background:var(--calendar-arrow-hover)}}*{box-sizing:border-box}.calendar{background:var(--calendar-bg);color:var(--calendar-text)}.calendar__btn--theme{background:none;border:none;cursor:pointer;color:var(--calendar-moon);font-size:0;display:flex;align-items:center;justify-content:center;transition:color .2s}.calendar__btn svg,.calendar__icon svg{fill:var(--calendar-icon);transition:fill .2s}.calendar__btn--active svg,.calendar__icon--active svg{fill:var(--calendar-icon-active)}