*,*:after,*:before{box-sizing:border-box}body{margin:0;background-color:#b3e5ff;color:#023;font-family:sans-serif}.show-all-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.6rem;border:1px solid hsl(200,100%,10%);border-radius:.25rem;cursor:pointer;background-color:transparent;transition:background-color .3s ease;flex:1 1 71px;max-width:71px;font-size:.7rem}.show-all-card:hover{background-color:#c2e0f0}.day-card.selected,.show-all-card.selected{background-color:#4390b6}.toggle-switch-container{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:1.2rem}.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#c2e0f0;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#046;transition:.4s}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.switch-label-left,.switch-label-right{font-weight:400;transition:font-weight .4s ease}.unit-toggle-checkbox:checked~.switch-label-right{font-weight:700}.unit-toggle-checkbox:not(:checked)~.switch-label-left{font-weight:700}.blurred{filter:blur(3px);overflow:hidden}.header{display:flex;align-items:center}.header-left{display:flex;flex-direction:column;width:50%;align-items:center;justify-content:center;margin:.5rem;padding:1.5rem .5rem .5rem;border-right:2px solid hsl(200,100%,10%)}.search-icon-btn svg path{fill:#046}.search-icon-btn{background:none;border:none;cursor:pointer;padding:0}.search-icon-btn svg{width:25px;height:25px}.search-flex-container{display:flex;align-items:center;position:relative;margin-top:.25rem}.search-box{width:0;overflow:hidden;transition:width .3s ease-in-out,margin-left .3s ease-in-out;display:block;white-space:nowrap;cursor:pointer}.search-results-list li:hover{background-color:#c2e0f0;cursor:pointer}.search-box.open{width:200px;margin-left:.5rem;overflow:visible}.search-icon-btn.move-left{transform:translate(-2rem);transition:transform .3s ease-in-out}#citySearchInput{width:100%;padding:8px;box-sizing:border-box;border:2px solid hsl(200,100%,20%);border-radius:4px;background-color:#99cce6;font-family:sans-serif;color:#046;outline:none;font-size:1rem}.search-results-list{position:absolute;top:calc(100% + 5px);left:30px;background-color:#fff;border-radius:5px;box-shadow:0 2px 10px #0003;padding:10px;min-width:320px;max-width:800px;max-height:400px;overflow-y:auto;z-index:99;display:none;list-style-type:none;background-color:#99cce6}.search-box:not(.open) .search-results-list{display:none}.header-city{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;font-size:1.25rem;font-weight:500;text-align:right;line-height:1.2}.header-city span:last-child{font-size:.75em;font-weight:300;color:#555}.weather-and-temp-group{display:flex;align-items:center}.weather-icon{width:40px;height:40px;object-fit:contain}.weather-icon.large{width:80px;height:80px}.header-current-temp{font-size:2rem;margin-left:1rem}.header-right{display:grid;width:50%;justify-content:space-around;gap:.5rem;grid-template-columns:repeat(3,auto);grid-template-rows:repeat(2,auto)}.info-group{display:flex;flex-direction:column;align-items:center}.label{text-transform:uppercase;font-weight:700;font-size:.6rem;color:#046}.value-sub-info{font-weight:lighter;font-size:.75rem}.day-section{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:1rem}.day-card{flex:1 1 71px;display:flex;flex-direction:column;align-items:center;border:1px solid hsl(200,100%,10%);border-radius:.25rem;padding:.6rem;text-align:center;max-width:71px;cursor:pointer}.day-card-day{font-size:.75rem;color:#046;margin-top:.5rem}.hour-section{width:100%;text-align:center;border-spacing:0}.hour-row{background-color:#99cce6}.hour-row:nth-child(2n){background-color:#85c2e0}.hour-row>td{padding:.25rem .5rem}.modal-container{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:none;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:#fff;padding:20px 40px;border-radius:8px;box-shadow:0 4px 6px #0000001a;text-align:center;position:relative;max-width:90%}.close-btn{position:absolute;top:10px;right:15px;background:none;border:none;font-size:1.5rem;cursor:pointer;color:#555}.modal-container.show{display:flex}@media (max-width: 768px){.header{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem 0}.header-left{width:100%;display:flex;flex-direction:column;align-items:center;border-bottom:2px solid hsl(200,100%,10%);border-right:none;padding:1rem}.search-flex-container{display:flex;align-items:center;position:relative;margin-top:.25rem}.search-icon-btn{background:none;border:none;cursor:pointer;padding:0}.search-icon-btn svg path{fill:#046}.search-box{width:0;overflow:hidden;transition:width .3s ease-in-out,margin-left .3s ease-in-out;white-space:nowrap}.search-box.open{width:150px;margin-left:.5rem;overflow:visible}.search-icon-btn.move-left{transform:translate(-1.5rem);transition:transform .3s ease-in-out}#citySearchInput{width:100%;padding:8px;border:2px solid hsl(200,100%,20%);border-radius:4px;background-color:#99cce6;font-family:sans-serif;color:#046;outline:none;font-size:1rem}#citySearchInput:focus{border-color:#fff;box-shadow:0 0 5px #ffffff80}.search-results-list{position:absolute;top:calc(100% + 5px);left:50%;transform:translate(-50%);border-radius:5px;box-shadow:0 2px 10px #0003;padding:10px;min-width:320px;max-width:768px;max-height:400px;overflow-y:auto;z-index:99;display:none;list-style-type:none;background-color:#99cce6}.search-results-list li:hover{background-color:#c2e0f0;cursor:pointer}.weather-and-temp-group{display:flex;align-items:center;margin-bottom:.5rem}.header-city{white-space:nowrap;text-overflow:ellipsis;font-size:1rem;text-align:center}.header-right{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;padding:1rem}.day-section{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:1rem}.day-card{flex:1 1 71px;display:flex;flex-direction:column;align-items:center;border:1px solid hsl(200,100%,10%);border-radius:.25rem;padding:.6rem;text-align:center;max-width:71px}.hour-section{width:100%;overflow-x:auto}.hour-section table{width:100%;min-width:500px;border-collapse:collapse}.hour-row>td{padding:.25rem .5rem;border:1px solid hsl(200,100%,10%)}}