*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}
html,body{padding:0;margin:0}
input:focus,textarea:focus,button:focus{outline:none}
.evo-calendar{position:relative;background-color:#fbfbfb;color:#5a5a5a;width:100%;min-height:495px;-webkit-box-shadow:0 10px 50px -20px #8773c1;box-shadow:0 10px 50px -20px #8773c1;margin:0 auto;overflow:hidden;z-index:1}
.calendar-sidebar{position:absolute;margin-top:0;width:180px;height:100%;float:left;background-color:#8773c1;color:#fff;z-index:1;-webkit-box-shadow:5px 0 18px -3px #8773c1;box-shadow:5px 0 18px -3px #8773c1;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);z-index:2}
.sidebar-hide .calendar-sidebar{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-box-shadow:none;box-shadow:none}
.calendar-sidebar>span#sidebarToggler{position:absolute;width:40px;height:40px;top:0;right:0;-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0);background-color:#8773c1;padding:3% 4%;cursor:pointer;-webkit-box-shadow:5px 0 18px -3px #8773c1;box-shadow:5px 0 18px -3px #8773c1}
.calendar-sidebar>.calendar-year{padding:20px;text-align:center}
.calendar-sidebar>.calendar-year>p{margin:0;font-size:28px;display:inline-block}
.calendar-sidebar>.calendar-year>button.icon-button{display:inline-block;width:20px;height:20px;overflow:visible}
.calendar-sidebar>.calendar-year>button.icon-button>span{border-right:4px solid #fff;border-bottom:4px solid #fff;width:100%;height:100%}
.calendar-sidebar>.calendar-year>img[year-val="prev"]{float:left}
.calendar-sidebar>.calendar-year>img[year-val="next"]{float:right}
.calendar-sidebar>.month-list::-webkit-scrollbar{width:5px;height:5px}
.calendar-sidebar>.month-list::-webkit-scrollbar-track{background:transparent}
.calendar-sidebar>.month-list::-webkit-scrollbar-thumb{background:#fff;border-radius:5px}
.calendar-sidebar>.month-list::-webkit-scrollbar-thumb:hover{background:#d6c8ff}
.calendar-sidebar>.month-list>.calendar-months{list-style-type:none;margin:0;padding:0}
.calendar-sidebar>.month-list>.calendar-months>li{padding:7px 30px;cursor:pointer;font-size:16px}
.calendar-sidebar>.month-list>.calendar-months>li:hover{background-color:#a692e0}
.calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:#755eb5}
.calendar-sidebar > .month-list > .calendar-months > li > p{margin:0}
.calendar-sidebar > .month-list > .calendar-months > li:has(p){margin:0;margin-bottom:4px;}
.calendar-inner{position:relative;padding:55px 30px;float:left;width:100%;max-width:calc(100% - 180px);margin-left:180px;background-color:#fff;-webkit-box-shadow:5px 0 18px -3px rgba(0,0,0,.15);box-shadow:5px 0 18px -3px rgba(0,0,0,.15);-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;z-index:1}
.calendar-inner::after{content:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(83,74,109,.5)}
.evo-calendar:not(.event-hide) .calendar-inner::after{content:'';opacity:1;}
.sidebar-hide .calendar-inner{max-width:100%;margin-left:0}
.event-hide.sidebar-hide .calendar-inner{max-width:100%}
.calendar-inner .calendar-table{border-collapse:collapse;font-size:20px;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
th[colspan="7"]{position:relative;text-align:center;text-transform:uppercase;font-weight:600;font-size:20px;color:#8773c1;padding-bottom:5px;}
th[colspan="7"]::after{content:'';position:absolute;bottom:-3px;left:50%;width:50px;height:5px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:rgba(135,115,193,.15)}
th[colspan="7"] div{display:flex;flex-direction:row;justify-content:center;align-items:center;align-self:center;}
th[colspan="7"] div p{flex:none;width:40%;padding:0;margin:0;}
th[colspan="7"] div .icon-button{width:fit-content;}
th[colspan="7"] div .icon-button .chevron-arrow-left,
th[colspan="7"] div .icon-button .chevron-arrow-right{border-right:4px solid #8773c1;border-bottom:4px solid #8773c1;width:16px;height:16px;}
tr.calendar-header .calendar-header-day{padding:10px;text-align:center;color:#5a5a5a;font-size:16px;}
tr.calendar-body .calendar-day{padding:10px 0}
tr.calendar-body .calendar-day .day{position:relative;padding:5px;height:50px;width:50px;line-height:40px;font-size:18px;margin:0 auto;border-radius:50%;text-align:center;color:#5a5a5a;border:1px solid transparent;-webkit-transition:all .3s ease,-webkit-transform .5s ease;transition:all .3s ease,-webkit-transform .5s ease;-o-transition:all .3s ease,transform .5s ease;transition:all .3s ease,transform .5s ease;transition:all .3s ease,transform .5s ease,-webkit-transform .5s ease;cursor:pointer}
tr.calendar-body .calendar-day .day:hover{background-color:#dadada}
tr.calendar-body .calendar-day .day:active{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}
tr.calendar-body .calendar-day .day.calendar-active,tr.calendar-body .calendar-day .day.calendar-active:hover{color:#5a5a5a;border-color:rgba(0,0,0,.5)}
tr.calendar-body .calendar-day .day.calendar-today{color:#fff;background-color:#8773c1}
tr.calendar-body .calendar-day .day.calendar-today:hover{color:#fff;background-color:#755eb5}
tr.calendar-body .calendar-day .day[disabled]{pointer-events:none;cursor:not-allowed;background-color:transparent;color:#b9b9b9}
.calendar-events{position:absolute;top:0;right:0;width:48%;height:100%;padding:70px 30px 60px 30px;background-color:#fbfbfb;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;overflow-y:auto;z-index:1;}
.event-hide .calendar-events{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-box-shadow:none;box-shadow:none;z-index:0;}
.calendar-events::-webkit-scrollbar{width:5px;height:5px}
.calendar-events::-webkit-scrollbar-track{background:transparent}
.calendar-events::-webkit-scrollbar-thumb{background:#8e899c;border-radius:5px}
.calendar-events::-webkit-scrollbar-thumb:hover{background:#6c6875}
.calendar-events>.event-header>p{font-size:30px;font-weight:600;color:#5a5a5a}
#eventListToggler{position:absolute;width:40px;height:40px;top:0;right:48%;background-color:#8773c1;padding:10px;cursor:pointer;-webkit-box-shadow:5px 0 18px -3px #8773c1;box-shadow:5px 0 18px -3px #8773c1;z-index:1}
.event-hide #eventListToggler{right:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
.event-list::after{content:"";clear:both;display:table}
.event-list>.event-empty{padding:15px 10px;background-color:rgba(135,115,193,.15);border:1px solid #8773c1}
.event-list>.event-empty>p{margin:0;color:#755eb5}
.event-container{position:relative;display:flex;width:100%;border-radius:10px;margin-bottom:10px;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;cursor:pointer;float:left}
.event-container::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%;transform:translate(29px,30px);background-color:#eaeaea;z-index:-1}
.event-container:last-child.event-container::before{height:30px;transform:translate(29px,0)}
.event-container:only-child.event-container::before{height:0;opacity:0}
.event-container:hover{background-color:#fff;-webkit-box-shadow:0 3px 12px -4px rgba(0,0,0,.65);box-shadow:0 3px 12px -4px rgba(0,0,0,.65)}
.event-container>.event-icon{position:relative;padding:20px;width:60px;height:60px;float:left}
.event-container>.event-icon>img{width:30px}
.event-container>.event-info{align-self:center;width:calc(100% - 60px);display:inline-block;padding:10px 10px 10px 0}
.event-container>.event-info>p{margin:0;color:#5a5a5a}
.event-container>.event-info>p.event-title{position:relative;font-size:22px;font-weight:600}
.event-container>.event-info>p.event-title>span{position:absolute;top:50%;right:0;font-size:12px;font-weight:400;color:#755eb5;border:1px solid #755eb5;border-radius:3px;background-color:rgb(237 234 246);padding:3px 6px;transform:translateY(-50%)}
.event-container>.event-info>p.event-desc{font-size:14px;margin-top:5px}
.event-indicator{position:absolute;width:-moz-max-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;top:100%;left:50%;-webkit-transform:translate(-50%,calc(-100% + -5px));-ms-transform:translate(-50%,calc(-100% + -5px));transform:translate(-50%,calc(-100% + -5px))}
.event-indicator>.type-bullet{float:left;padding:2px}
.event-indicator>.type-bullet>div{width:10px;height:10px;border-radius:50%}
.event-container>.event-icon>div{width:100%;height:100%;border-radius:50%}
.event-container>.event-icon>div[class^="event-bullet-"],.event-indicator>.type-bullet>div[class^="type-"]{background-color:#8773c1}
.event-container>.event-icon>div.event-bullet-event,.event-indicator>.type-bullet>div.type-event{background-color:#ff7575}
.event-container>.event-icon>div.event-bullet-holiday,.event-indicator>.type-bullet>div.type-holiday{background-color:#ffc107}
.event-container>.event-icon>div.event-bullet-birthday,.event-indicator>.type-bullet>div.type-birthday{background-color:#3ca8ff}
button.icon-button{border:none;background-color:transparent;width:100%;height:100%;padding:0;cursor:pointer}
button.icon-button>span.bars{position:relative;width:100%;height:4px;display:block;background-color:#fff}
button.icon-button>span.bars::before,button.icon-button>span.bars::after{content:'';position:absolute;width:100%;height:4px;display:block;background-color:#fff}
button.icon-button>span.bars::before{top:-8px}
button.icon-button>span.bars::after{bottom:-8px}
button.icon-button>span.chevron-arrow-left{display:inline-block;border-right:6px solid #fff;border-bottom:6px solid #fff;width:18px;height:18px;-webkit-transform:rotate(-225deg);-ms-transform:rotate(-225deg);transform:rotate(-225deg)}
button.icon-button>span.chevron-arrow-right{display:block;border-right:4px solid #fff;border-bottom:4px solid #fff;width:16px;height:16px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}
@media screen and (max-width:1024px){
.calendar-sidebar{width:175px}
.calendar-inner{margin-left:175px;padding:67px 30px;}
.sidebar-hide .calendar-inner{max-width:100%;}
.event-hide .calendar-inner{max-width:calc(100% - 175px)}
tr.calendar-body .calendar-day .day{height:45px;width:45px;font-size:16px;line-height:34px;}
.event-hide #eventListToggler{right:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
.calendar-sidebar>.calendar-year{padding:10px 20px;}
.event-container::before{transform:translate(24px,25px)}
.event-container:last-child.event-container::before{height:25px;transform:translate(24px,0)}
.event-container>.event-icon{padding:15px;width:50px;height:50px}
.event-container>.event-icon::before{left:24px}
.event-container>.event-info{width:calc(100% - 50px)}
.event-container>.event-info>p{font-size:18px}
.calendar-events>.event-header>p{font-size:26px;}
}
@media screen and (max-width:991px){
.calendar-sidebar{width:150px}
.calendar-inner{padding:65px 10px 70px 10px;margin-left:150px;max-width:calc(100% - 150px);}
.sidebar-hide .calendar-inner{max-width:100%}
.event-hide .calendar-inner{max-width:calc(100% - 150px)}
th[colspan="7"] div p{width:60%;}
}
@media screen and (max-width:768px){
.calendar-sidebar{width:180px}
.calendar-inner{padding:50px 10px 40px 10px;max-width:100%;margin-left:0}
.sidebar-hide .calendar-inner,.event-hide .calendar-inner{max-width:100%}
.calendar-inner::after{content:'';opacity:1}
.sidebar-hide.event-hide .calendar-inner::after{content:none;opacity:0}
.event-indicator{-webkit-transform:translate(-50%,calc(-100% + -3px));-ms-transform:translate(-50%,calc(-100% + -3px));transform:translate(-50%,calc(-100% + -3px))}
.event-indicator>.type-bullet{padding:0 1px 3px 1px}
.calendar-events{padding:70px 20px 60px 20px;-webkit-box-shadow:-5px 0 18px -3px rgba(135,115,193,.5);box-shadow:-5px 0 18px -3px rgba(135,115,193,.5);}
.event-hide .calendar-events{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-box-shadow:none;box-shadow:none}
#eventListToggler{right:48%;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}
.event-hide #eventListToggler{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}
.calendar-events>.event-list{margin-top:20px}
.calendar-sidebar>.calendar-year>button.icon-button{width:16px;height:16px}
.calendar-sidebar>.calendar-year>button.icon-button>span{border-right-width:2px;border-bottom-width:2px}
.calendar-sidebar>.calendar-year>p{font-size:22px}
.calendar-sidebar>.month-list>.calendar-months>li{padding:6px 26px}
.calendar-events>.event-header>p{margin:0;font-size:24px;}
.event-container>.event-info>p.event-title{font-size:20px}
.event-container>.event-info>p.event-desc{font-size:12px}
.evo-calendar .event-list .slot-container{padding:6px 10px;}
.event-list>.event-empty{font-size:14px;}
}
@media screen and (max-width: 768px) and (min-width:426px) {
.event-container>.event-info>p.event-title{font-size:18px}
}
@media screen and (max-width:460px){
.calendar-events{width:70%;}
#eventListToggler{right:70%}
.evo-calendar .calendar-table .calendar-header td.--weekend:after, .evo-calendar .bdSlot.bdDisabled.--weekend:not(.bdPast):after{content:"\2026";color:#ff8d79;}
}
@media screen and (max-width:375px){
.evo-calendar{min-height: 490px}
.calendar-inner{padding: 70px 10px 90px 10px;}
th[colspan="7"] {
font-size:20px;
padding-bottom: 5px
}
tr.calendar-header .calendar-header-day {
font-size: 16px
}
tr.calendar-body .calendar-day .day {
padding: 5px;
width: 30px;
height: 30px;
line-height: 20px;
font-size: 14px
}
.evo-calendar .event-list .slot-container{padding: 6px 8px;margin: 3px;font-size: 14px;}
}