.app{background-color:#f9f9f9;display:flex;justify-content:center;min-height:100vh}.app .calendar-box{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;text-align:center;align-items:center;justify-content:center}.app .calendar-box,.app .calendar-box .calendar-page{margin:20px;height:auto}:is(.app .calendar-box,.app .calendar-box .calendar-page) .calendar-svg{width:600px}.app .sidebar-box{position:sticky;top:0;height:100vh;width:600px;overflow-y:auto}@media(max-width:992px){.app{flex-direction:column-reverse}.app .calendar-box{margin:0 20px}.app .sidebar-box{position:unset;top:unset;width:100%;height:auto}}@media(max-width:768px){.app .calendar-box .calendar-page{margin:8px}.app .calendar-box .calendar-page .calendar-svg{width:100%}}.calendar-svg{box-shadow:0 0 12px #0000001a;border:1px solid #cccccc62}.sidebar{padding:24px;box-sizing:border-box}.sidebar h1{font-size:2em}.sidebar .form-group:not(:last-child){margin-bottom:15px}.sidebar label{display:block;font-weight:700;margin-bottom:4px}.sidebar input[type=date],.sidebar input[type=number],.sidebar select{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}.sidebar input[type=checkbox]{margin-right:8px}.sidebar .about{margin-top:20px;font-size:.9em;color:#666}.sidebar .about h3{font-size:1.2em;margin-bottom:8px}.sidebar button{display:inline-block;padding:10px 20px;font-size:1em;color:#fff;background-color:#007bff;border:none;border-radius:4px;cursor:pointer;text-align:center;text-decoration:none;transition:background-color .3s}.sidebar button:hover{background-color:#0056b3}.sidebar button:disabled{background-color:#ccc;cursor:not-allowed}.sidebar button:not(:last-child){margin-right:16px}:root{font-family:Work Sans,sans-serif;font-optical-sizing:auto;font-style:normal;line-height:1.5;font-weight:400;overflow-x:hidden}*{margin:0;padding:0;box-sizing:border-box}html{overflow-y:scroll}