/*! * Evo Calendar - Simple and Modern-looking Event Calendar Plugin * * Licensed under the MIT License * * Version: 1.0.0 * Author: Edlyn Villegas * Docs: https://edlynvillegas.github.com/evo-calendar * Repo: https://github.com/edlynvillegas/evo-calendar * Issues: https://github.com/edlynvillegas/evo-calendar/issues * */ *,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}html,body{padding:0;margin:0}body{font-family:'Source Sans Pro'}input:focus,textarea:focus,button:focus{outline:none}.evo-calendar{position:relative;background-color:#fbfbfb;color:#5a5a5a;width:100%;-webkit-box-shadow:0 10px 50px -20px #45ADA0;box-shadow:0 10px 50px -20px #45ADA0;margin:0 auto;overflow:hidden;z-index:1}.calendar-sidebar{position:absolute;margin-top:0;width:200px;height:100%;float:left;background-color:#45ADA0;color:#fff;z-index:1;-webkit-box-shadow:5px 0 18px -3px #45ADA0;box-shadow:5px 0 18px -3px #45ADA0;-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:70px;height:70px;bottom:0;right:1px;-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0);background-color:#45ADA0;padding:10px;cursor:pointer;-webkit-box-shadow:5px 0 18px -3px #45ADA0;box-shadow:5px 0 18px -3px #45ADA0}.calendar-sidebar>.calendar-year{padding:20px;text-align:center}.calendar-sidebar>.calendar-year>p{margin:0;font-size:30px;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:#B6F0BE}.calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:#23A455}.calendar-inner{position:relative;padding:50px 30px 70px 30px;float:left;width:100%;max-width:calc(100% - 600px);margin-left:200px;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)}.sidebar-hide .calendar-inner{max-width:calc(100% - 400px);margin-left:0}.event-hide .calendar-inner{max-width:calc(100% - 200px)}.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"]{text-align:center;text-transform:uppercase;font-weight:400;font-size:26px;color:#5a5a5a}tr.calendar-header .calendar-header-day{padding:10px;text-align:center;color:#5a5a5a}tr.calendar-body .calendar-day{padding:10px 0}tr.calendar-body .calendar-day .day{position:relative;padding:15px;height:60px;width:60px;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:#45ADA0}tr.calendar-body .calendar-day .day.calendar-today:hover{color:#fff;background-color:#23A455}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:400px;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: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:70px;height:70px;top:0;right:0;background-color:#45ADA0;padding:10px;cursor:pointer;-webkit-box-shadow:5px 0 18px -3px #45ADA0;box-shadow:5px 0 18px -3px #45ADA0;z-index:1}.event-list::after{content:"";clear:both;display:table}.event-container{display:block;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: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::before{content:'';position:absolute;top:0;left:29px;width:2px;height:calc(100% + 10px);background-color:#eaeaea;z-index:-1}.event-container:last-child>.event-icon::before{height:calc(50% + 10px)}.event-container:first-child>.event-icon::before{top:50%;height:calc(50% + 10px)}.event-container:only-child>.event-icon::before{opacity:0}.event-container>.event-icon>img{width:30px}.event-container>.event-info{display:inline-block;padding:13px 0}.event-container>.event-info>p{margin:0;font-size:26px;color:#5a5a5a}.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[class*="type-"]{width:10px;height:10px;border-radius:50%}.event-container>.event-icon>div.event-bullet-event,.event-container>.event-icon>div.event-bullet-holiday,.event-container>.event-icon>div.event-bullet-birthday{width:100%;height:100%;border-radius:50%}.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:#14b42b}.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:6px;display:block;background-color:#fff}button.icon-button>span.bars::before,button.icon-button>span.bars::after{content:'';position:absolute;width:100%;height:6px;display:block;background-color:#fff}button.icon-button>span.bars::before{top:-12px}button.icon-button>span.bars::after{bottom:-12px}button.icon-button>span.chevron-arrow-left{display:inline-block;border-right:6px solid #fff;border-bottom:6px solid #fff;width:33px;height:33px;-webkit-transform:rotate(-225deg);-ms-transform:rotate(-225deg);transform:rotate(-225deg)}button.icon-button>span.chevron-arrow-right{display:block;border-right:6px solid #fff;border-bottom:6px solid #fff;width:33px;height:33px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}@media only screen and (max-width:1280px){.calendar-inner{padding:50px 20px 70px 20px;max-width:calc(100% - 580px)}.sidebar-hide .calendar-inner{max-width:calc(100% - 380px)}tr.calendar-header .calendar-header-day,tr.calendar-body .calendar-day{padding:10px 5px}.calendar-events{width:380px;padding:70px 20px 60px 20px}}@media screen and (max-width:1024px){.calendar-sidebar{width:175px}.calendar-inner{padding:50px 10px 70px 10px;max-width:calc(100% - 475px);margin-left:175px}.sidebar-hide .calendar-inner{max-width:calc(100% - 300px)}.event-hide .calendar-inner{max-width:calc(100% - 175px)}.calendar-events{width:300px;padding:70px 10px 60px 10px}tr.calendar-body .calendar-day .day{padding:10px;height:45px;width:45px;font-size:16px}.event-indicator>.type-bullet>div[class*="type-"]{width:8px;height:8px;border-radius:50%}.calendar-sidebar>span#sidebarToggler,#eventListToggler{width:50px;height:50px}#eventListToggler,.event-hide #eventListToggler{right:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}button.icon-button>span.bars{height:4px}button.icon-button>span.bars::before,button.icon-button>span.bars::after{height:4px}button.icon-button>span.bars::before{top:-10px}button.icon-button>span.bars::after{bottom:-10px}button.icon-button>span.chevron-arrow-right{border-right-width:4px;border-bottom-width:4px;width:22px;height:22px}.event-container>.event-icon{padding:15px;width:50px;height:50px}.event-container>.event-icon::before{left:24px}.event-container>.event-info>p{font-size:18px}}@media screen and (max-width:991px){.calendar-sidebar{width:150px}.calendar-inner{padding:50px 10px 70px 10px;max-width:calc(100% - 425px);margin-left:150px}.sidebar-hide .calendar-inner{max-width:calc(100% - 275px)}.event-hide .calendar-inner{max-width:calc(100% - 150px)}.calendar-events{width:275px;padding:70px 10px 60px 10px}}@media screen and (max-width:768px){.calendar-sidebar{width:180px}.calendar-inner{padding:50px 10px 70px 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{width:48%;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);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}#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}}@media screen and (max-width:425px){.calendar-sidebar{width:100%}.sidebar-hide .calendar-sidebar{height:43px}.sidebar-hide .calendar-sidebar{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-box-shadow:none;box-shadow:none}.calendar-sidebar>.calendar-year{position:relative;padding:10px 20px;text-align:center;background-color:#45ADA0;-webkit-box-shadow:0 3px 8px -3px rgba(53,43,80,.65);box-shadow:0 3px 8px -3px rgba(53,43,80,.65)}.calendar-sidebar>.calendar-year>button.icon-button{width:14px;height:14px}.calendar-sidebar>.calendar-year>button.icon-button>span{border-right-width:3px;border-bottom-width:3px}.calendar-sidebar>.calendar-year>p{font-size:18px;margin:0 10px}.calendar-sidebar>.month-list{position:relative;width:100%;height:calc(100% - 43px);overflow-y:auto;background-color:#45ADA0;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);z-index:-1}.sidebar-hide .calendar-sidebar>.month-list{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.calendar-sidebar>.month-list>.calendar-months{position:absolute;top:0;left:0;width:100%;list-style-type:none;margin:0;padding:0;padding:10px}.calendar-sidebar>.month-list>.calendar-months::after{content:"";clear:both;display:table}.calendar-sidebar>.month-list>.calendar-months>li{padding:10px 20px;font-size:20px}.calendar-sidebar>span#sidebarToggler{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);top:0;bottom:unset;-webkit-box-shadow:none;box-shadow:none}.calendar-inner{margin-left:0;padding:53px 0 40px 0;float:unset}.calendar-inner::after{content:none;opacity:0}.sidebar-hide .calendar-inner,.event-hide .calendar-inner,.calendar-inner{max-width:100%}.calendar-sidebar>span#sidebarToggler,#eventListToggler{width:40px;height:40px}button.icon-button>span.chevron-arrow-right{border-right-width:4px;border-bottom-width:4px;width:18px;height:18px;-webkit-transform:translateX(-3px) rotate(-45deg);-ms-transform:translateX(-3px) rotate(-45deg);transform:translateX(-3px) rotate(-45deg)}button.icon-button>span.bars::before{top:-8px}button.icon-button>span.bars::after{bottom:-8px}tr.calendar-header .calendar-header-day{padding:0}tr.calendar-body .calendar-day{padding:8px 0}tr.calendar-body .calendar-day .day{padding:10px;width:40px;height:40px;font-size:16px}.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:1px}.event-indicator>.type-bullet>div[class*="type-"]{width:6px;height:6px}.event-indicator{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}tr.calendar-body .calendar-day .day.calendar-today .event-indicator,tr.calendar-body .calendar-day .day.calendar-active .event-indicator{-webkit-transform:translate(-50%,3px);-ms-transform:translate(-50%,3px);transform:translate(-50%,3px)}.calendar-events{position:relative;padding:20px 15px;width:100%;height:185px;-webkit-box-shadow:0 5px 18px -3px rgba(0,0,0,.15);box-shadow:0 5px 18px -3px rgba(0,0,0,.15);overflow-y:auto;z-index:0}.event-hide .calendar-events{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);padding:0 15px;height:0}.calendar-events>.event-header>p{font-size:20px}.calendar-events>.event-list{margin-top:10px}.event-container>.event-icon{width:45px;height:45px}.event-container>.event-icon::before{left:21px}.event-container:last-child>.event-icon::before{height:50%}.event-container>.event-info{padding:11px 0}.event-hide #eventListToggler,#eventListToggler{top:calc(100% - 185px);right:0;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%)}.event-hide #eventListToggler{top:100%}#eventListToggler button.icon-button>span.chevron-arrow-right{-webkit-transform:translate(1px,-3px) rotate(45deg);-ms-transform:translate(1px,-3px) rotate(45deg);transform:translate(1px,-3px) rotate(45deg)}}@media only screen and (max-width:375px){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;font-size:14px}} .midnight-blue{-webkit-box-shadow:0 10px 50px -20px rgba(19,31,51,.65);box-shadow:0 10px 50px -20px rgba(19,31,51,.65);border:2px solid #222831;color:#EEE}.midnight-blue .calendar-sidebar{background:#222831;border-right:2px solid #222831;-webkit-box-shadow:0 0 18px -3px rgba(0,0,0,.65);box-shadow:0 0 18px -3px rgba(0,0,0,.65)}.midnight-blue.sidebar-hide .calendar-sidebar{-webkit-box-shadow:none;box-shadow:none}.midnight-blue .calendar-sidebar>.month-list::-webkit-scrollbar-thumb:hover{background:#cee1ff}.midnight-blue .calendar-sidebar>.month-list>.calendar-months>li{text-transform:uppercase}.midnight-blue .calendar-sidebar>.month-list>.calendar-months>li:hover{background-color:rgba(255,255,255,.2)}.midnight-blue .calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:#00adb5;font-weight:600}.midnight-blue .calendar-sidebar>span#sidebarToggler,.midnight-blue #eventListToggler{background-color:#222831;-webkit-box-shadow:0 0 18px -3px rgba(0,0,0,.65);box-shadow:0 0 18px -3px rgba(0,0,0,.65)}.midnight-blue button.icon-button>span.bars{background-color:#00adb5}.midnight-blue button.icon-button>span.bars::before{background-color:#12cbd4}.midnight-blue button.icon-button>span.bars::after{background-color:#027e84}.midnight-blue .calendar-sidebar>.calendar-year>button.icon-button>span,.midnight-blue button.icon-button>span.chevron-arrow-right{display:block;border-right:6px solid #00adb5;border-bottom:6px solid #027e84}.midnight-blue .calendar-sidebar>.calendar-year>button.icon-button>span{border-width:4px}.midnight-blue .calendar-inner{background-color:#393e46;-webkit-box-shadow:5px 0 18px -3px rgba(0,0,0,.35);box-shadow:5px 0 18px -3px rgba(0,0,0,.35)}.midnight-blue .calendar-inner td{color:#fff}.midnight-blue th[colspan="7"]{position:relative;font-size:30px;color:#00adb5}.midnight-blue th[colspan="7"]::after{content:'';display:block;width:92%;height:1px;margin:0 auto;background:#027e84}.midnight-blue tr.calendar-body .calendar-day .day:hover{background-color:rgba(255,255,255,.12);color:#00f4ff}.midnight-blue tr.calendar-body .calendar-day .day.calendar-today{background:#00adb5}.midnight-blue tr.calendar-body .calendar-day .day{border-width:2px;border-radius:0;color:#fff}.midnight-blue tr.calendar-body .calendar-day .day.calendar-active,.midnight-blue tr.calendar-body .calendar-day .day.calendar-active:hover{border-color:#EEE;color:#EEE}.midnight-blue tr.calendar-body .calendar-day .day.calendar-today:hover{color:#EEE}.midnight-blue .calendar-events{background-color:#192435;padding:70px 20px 60px 20px}.midnight-blue .calendar-events::-webkit-scrollbar-thumb{background:#fff;border-radius:5px}.midnight-blue .calendar-events::-webkit-scrollbar-thumb:hover{background:#cee1ff}.midnight-blue .calendar-events p{color:#EEE}.midnight-blue .calendar-inner::after{background-color:rgba(25,36,53,.65)}.midnight-blue .event-container{border-radius:0}.midnight-blue .event-container:hover{background-color:#5d6979}.midnight-blue .event-container>.event-icon>[class*=event-bullet-]{border:2px solid transparent}.midnight-blue .event-container:hover>.event-icon>[class*=event-bullet-]{border-color:#fff}.midnight-blue .event-container>.event-icon>div.event-bullet-birthday,.midnight-blue .event-indicator>.type-bullet>div.type-birthday{background-color:#6c72bf}@media only screen and (max-width:768px){.midnight-blue .event-indicator{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.midnight-blue .calendar-events{-webkit-box-shadow:-5px 0 18px -3px rgba(0,0,0,.65);box-shadow:-5px 0 18px -3px rgba(0,0,0,.65)}.midnight-blue.event-hide .calendar-events{-webkit-box-shadow:none;box-shadow:none}}@media screen and (max-width:425px){.midnight-blue .calendar-sidebar{border-right:none}.midnight-blue .calendar-sidebar>.calendar-year{background-color:#222831;-webkit-box-shadow:0 3px 8px -3px rgba(0,0,0,.65);box-shadow:0 3px 8px -3px rgba(0,0,0,.65)}.midnight-blue .calendar-sidebar>.month-list{background-color:#192435}.midnight-blue #eventListToggler,.midnight-blue .calendar-sidebar>span#sidebarToggler{-webkit-box-shadow:none;box-shadow:none}.midnight-blue .calendar-inner{-webkit-box-shadow:5px 0 18px -3px rgba(0,0,0,.35);box-shadow:0 5px 18px -3px rgba(0,0,0,.65)}.midnight-blue tr.calendar-body .calendar-day .day.calendar-active,.midnight-blue tr.calendar-body .calendar-day .day.calendar-active:hover{border-width:1px}.midnight-blue tr.calendar-body .calendar-day .day.calendar-today .event-indicator{-webkit-transform:translate(-50%,3px);-ms-transform:translate(-50%,3px);transform:translate(-50%,3px)}.midnight-blue tr.calendar-body .calendar-day .day.calendar-active .event-indicator{-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.midnight-blue .event-indicator{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}.midnight-blue .calendar-events{padding:20px 15px}.midnight-blue.event-hide .calendar-events{padding:0 15px}}