*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}h2{text-align:center;margin-bottom:20px;margin-top:20px}.calendar{display:flex;flex-direction:column;width:100%;margin:0 auto;padding:15px;max-width:1340px}.wrap__month{display:flex}.months{display:grid;grid-template-columns:repeat(4,auto);grid-template-columns:repeat(auto-fit,minmax(304px,1fr));margin:0 auto;gap:30px;justify-content:center}.month{border:1px solid #ccc;padding:10px;border-radius:5px}h3{color:#333;font-size:20px;margin-bottom:10px}.weekday{width:auto;text-align:center;display:grid;border-left:1px solid #ddd;border-bottom:1px solid #ddd}.weekday div{width:40px;height:40px;padding:10px;background-color:#f5f5f5;border-top:1px solid #ddd}table{width:100%;border-collapse:collapse}td.day{width:40px;height:40px;padding:10px;text-align:center;border:1px solid #ddd;background-color:#fff}.day{position:relative}.day.active{background-color:#007bff;color:#fff}td.day:empty{visibility:hidden}.old-day:not(.empty){background-color:gray;color:#fff;border-color:#fff}.day.weekend.old-day{background-color:#7e4949;color:#fff}.day.weekend{background-color:#f8dada}.day.shortened__day:after{content:"*"}.day.current-day{background-color:#00f;color:#fff;border-color:#fff}.day:before{position:absolute;content:attr(data-title);left:50%;bottom:30px;display:block;margin-left:-100px;padding:5px;max-width:200px;visibility:hidden;font-size:.8em;color:#fff;text-align:center;background-color:#000000d9;border-radius:5px;opacity:0;margin-bottom:15px;transition:opacity .7s}.month tr .day:nth-of-type(5):before{left:-117%}.month tr .day:nth-of-type(1):before{left:118%}.month tr .day:nth-of-type(4):before{left:-18%}.day:hover:before{visibility:visible;opacity:1}.day:not([data-title]):before{display:none}.weather-popup{position:fixed;top:50%;left:50%;max-width:320px;width:100%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 8px #0003;z-index:1000}.showWeather{position:fixed;right:0;z-index:99}.showWeather,.weather-popup button{margin-top:10px;padding:8px 16px;background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.showWeather:hover,.weather-popup button:hover{background-color:#0056b3}.weather-container{background-color:#fff;border-radius:8px;padding:20px;text-align:left;max-width:300px;margin:0 auto}.weather-heading{font-size:1.5rem;font-weight:700;margin-bottom:10px}.weather-details{margin-bottom:10px}.weather-info{margin-bottom:5px}.weather-icon{display:block;margin:0 auto;max-width:50px}.progressContainer{width:300px;margin:auto;text-align:center}.title{font-size:24px;color:#333}.chartContainer{margin-top:20px;margin-bottom:10px}.percentageText{font-size:18px;color:#666}