*,::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 #f3f3a5;    box-shadow: 0 10px 50px -20px #f3f3a5;    margin: 0 auto;    overflow: hidden;    z-index: 1}.calendar-sidebar {    position: absolute;    margin-top: 0;    width: 200px;    height: 100%;    float: left;    background-color: #f3f3a5;    color: #fff;    z-index: 1;    -webkit-box-shadow: 5px 0 18px -3px #f3f3a5;    box-shadow: 5px 0 18px -3px #f3f3a5;    -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: #f3f3a5;    padding: 10px 8px;    cursor: pointer;    -webkit-box-shadow: 5px 0 18px -3px #f3f3a5;    box-shadow: 5px 0 18px -3px #f3f3a5}.calendar-sidebar>.calendar-year {    padding: 10px 20px;    text-align: center}.calendar-sidebar>.calendar-year>p {    margin: 0;    font-size: 30px;    display: inline-block;    color: #000;}.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-inner {    position: relative;    padding: 40px 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);    height: 500px;}.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: 30px;    color: #000}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: rgb(243 243 165)}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: #f3f3a5}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: 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: 40px;    height: 40px;    top: 0;    right: 0;    background-color: #f3f3a5;    padding: 10px;    cursor: pointer;    -webkit-box-shadow: 5px 0 18px -3px #f3f3a5;    box-shadow: 5px 0 18px -3px #f3f3a5;    z-index: 1}.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 #f3f3a5}.event-list>.event-empty>p {    margin: 0;    color: #755eb5}.event-container {    position: relative;    display: flex;    width: 95%;    border-radius: 0px;    margin-bottom: 10px;    -webkit-transition: all .3s ease;    -o-transition: all .3s ease;    transition: all .3s ease;    cursor: pointer;    float: left;    padding: 10px;}.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: 10px;    width: 30px;    height: 30px;    float: left;}.event-container>.event-icon>img {    width: 30px}.event-container>.event-info {    align-self: center;    width: calc(100% - 60px);    display: inline-block;    padding-bottom: 10px;}.event-container>.event-info>p {    margin: 0;    color: #5a5a5a}.event-container>.event-info>p.event-title {    position: relative;    font-size: 18px;    font-weight: 600;    padding: 0;}.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: #f3f3a5}.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:1280px) {    .event-title {    padding: 10% 0 3% 1%;    margin-left: 3rem;}    .calendar-inner {        padding: 50px 20px 0px 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: 27px 5px 0    }    .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 {        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: 5px    }    button.icon-button>span.bars::before,    button.icon-button>span.bars::after {        height: 5px    }    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: 5px;        border-bottom-width: 5px;        width: 20px;        height: 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    }}@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%;        height: 500px;    }    .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    }    .event-container>.event-info>p.event-title {        font-size: 20px    }    .event-container>.event-info>p.event-desc {        font-size: 12px    }}@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: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: #f3f3a5;        -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: #f3f3a5;        -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    }    th[colspan="7"]::after {        bottom: 0    }    .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,    button.icon-button>span.bars::before,    button.icon-button>span.bars::after {        height: 4px    }    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 {        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    }    .event-list>.event-empty {        padding: 10px    }    .event-container::before {        transform: translate(21.5px, 25px)    }    .event-container:last-child.event-container::before {        height: 22.5px;        transform: translate(21.5px, 0)    }    .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 {        width: calc(100% - 45px)    }    .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 {        position: relative;        display: inline-block;        -webkit-transform: translate(0, -3px) rotate(45deg);        -ms-transform: translate(0, -3px) rotate(45deg);        transform: translate(0, -3px) rotate(45deg)    }}@media 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    }}