.header{position:fixed;padding:0 48px;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;height:60px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.create-event-btn{padding:0 16px;color:#fff;box-shadow:0 5px 15px 0 #0b63f6;transition:.5s}.create-event-btn:hover{transform:translate(0, -3px);box-shadow:0 20px 40px 0 #0b63f6}.create-event-btn__icon{margin-right:8px}.navigation__today-btn{margin-left:32px;padding:0 16px;color:#fff;box-shadow:0 5px 15px 0 #0b63f6;transition:.5s}.navigation__today-btn:hover{transform:translate(0, -3px);box-shadow:0 20px 40px 0 #0b63f6}.navigation__nav-icon{font-size:16px;margin-left:20px}.navigation__displayed-month{margin-left:10px}
.calendar__header{position:fixed;padding-left:48px;top:60px;left:0;right:0;z-index:9;display:flex;height:100px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}.calendar__day-label{position:relative;padding:10px;flex:1;text-align:center}.day-label__day-name{margin-bottom:5px;font-size:14px}.day-label__day-number{font-size:18px;font-weight:bold}.day-label--today{display:flex;justify-content:center;align-items:center;color:#0b63f6}.day-label--today .day-label__day-number{margin:0 auto;display:flex;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;font-weight:bold;background-color:#0b63f6;color:#fff;border-radius:50%}
.event-container{position:relative;margin-bottom:50px}.event-container:hover .delete-event-btn{opacity:1;transform:translateX(-50%) translateY(0)}.event{position:relative;padding:8px;z-index:5;width:100%;background-color:#6495ed;border-radius:8px;color:#fff;cursor:pointer;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:gray transparent}.event::-webkit-scrollbar{width:5px}.event::-webkit-scrollbar-track{background:transparent}.event::-webkit-scrollbar-thumb{background-color:#cccccc45;border-radius:10px}.event::-webkit-scrollbar-thumb:hover{background-color:gray}.event__title{margin-bottom:8px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event__time{margin-bottom:4px;font-size:14px}.event__description{margin-top:4px;font-size:12px;color:#eee;word-wrap:break-word;overflow:hidden;text-overflow:ellipsis;white-space:normal}.event:hover{background-color:#0b63f6;z-index:20}.delete-event-btn{position:absolute;padding:10px 15px;left:50%;bottom:-45px;z-index:10;display:flex;align-items:center;font-size:14px;color:#000;border:none;border-radius:4px;background-color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transform:translateX(-50%) translateY(20px);transition:opacity .3s ease,transform .3s ease;cursor:pointer;opacity:0}.delete-event-btn:before{margin-right:10px;content:"🗑️";font-size:16px}.delete-event-btn:hover{background-color:#f0f0f0}
.red-line{position:absolute;z-index:10;height:2px;width:100%;background-color:red;transition:top .5s ease;pointer-events:none}.red-line::before{position:absolute;top:-7px;left:-10px;content:"";width:15px;height:15px;background-color:red;border-radius:50%}
.calendar__week-container{display:flex;width:100%;height:fit-content}.calendar__week{display:flex;flex:1}
.calendar__time-scale{position:relative;height:100%;width:48px}.time-slot{height:60px;width:48px;text-align:right}.time-slot__time{top:-12px;margin-right:4px;font-size:12px;opacity:.7}
.calendar{display:flex;flex-direction:column;height:100%}.calendar__header{display:flex;height:100px;padding-left:48px}.calendar__body{padding-top:160px;display:flex;overflow:hidden;min-height:1440px}.calendar__week-container{position:relative;display:flex;width:100%}.calendar__time-scale{height:100%;width:48px}.calendar__week{position:relative;display:flex;flex:1}.calendar__day{position:relative;flex:1;border-left:1px solid #eee}.calendar__time-slot{position:relative;height:60px;border-bottom:1px solid #eee}.calendar__day-label{flex:1}.day-label{display:flex;flex-direction:column;align-items:center;justify-content:space-around;height:100%;opacity:.6}.day-label__day-name{font-size:14px;text-transform:uppercase}.day-label__day-number{font-size:22px}
.modal{position:fixed;display:flex;justify-content:center;align-items:center}.modal__content{padding:16px;background:#fff;border:1px solid #eee;border-radius:8px}.overlay{position:fixed;top:0;left:0;z-index:10;width:100vw;height:100vh;background-color:#cccccc45}.create-event{display:flex;flex-direction:column}.create-event__close-btn{margin-left:auto;width:24px;height:24px;transform:rotate(45deg) scale(2);outline:none;border:none;border-radius:50%;background:transparent;cursor:pointer}.event-form{display:flex;flex-direction:column;cursor:pointer}.event-form__field{margin:8px;border:none}.event-form__field-title{border:none;border-bottom:1px solid #6495ed}.event-form__submit-btn{padding:8px 16px;margin:8px;margin-left:auto;color:#fff;background-color:#6495ed;border:none;border-radius:8px;cursor:pointer}
.button{height:40px;border-radius:8px;border:1px solid #f0f0f0;outline:none;cursor:pointer;font-size:16px;font-weight:500;background-color:#0b63f6}.icon-button{outline:none;border:none;cursor:pointer;background:transparent}.modal{position:fixed;display:flex;justify-content:center;align-items:center}.modal__content{padding:16px;background:#fff;border:1px solid #f0f0f0;border-radius:8px}.overlay{position:fixed;top:0;left:0;z-index:10;width:100vw;height:100vh;background-color:#cccccc45}.popup__content{position:absolute;padding:16px;background:#fff;border:1px solid #eee;border-radius:8px}.hidden{display:none}
*{box-sizing:border-box}body{font-family:"Roboto",sans-serif}