.topbar{height:var(--bar-height);position:relative;display:flex;justify-content:space-between;align-items:center}.topbar .city{font-weight:700;font-size:20px}.topbar .icon-btn{width:32px;margin:8px}.dotbar{height:var(--bar-height)}.dotbar,.dotbar .dots{display:flex;justify-content:center;align-items:center}.dotbar .dots .dot{height:6px;width:6px;background-color:var(--light-color);margin:0 4px;border-radius:3px;transition:background-color .2s,width .2s}.dotbar .dots .dot.cities{height:20px}.dotbar .dots .dot.cities,.dotbar .dots .dot.cities.active{width:20px;background-color:transparent}.dotbar .dots .dot.active{width:14px;background-color:var(--text-color)}.loader{perspective:120px}.loader .plane{width:1.5rem;height:1.5rem;background-color:var(--text-color);transform:rotate(0);-webkit-animation:flip 1s infinite;animation:flip 1s infinite;border-radius:.2rem}@-webkit-keyframes flip{50%{transform:rotateY(180deg)}to{transform:rotateY(180deg) rotateX(180deg)}}@keyframes flip{50%{transform:rotateY(180deg)}to{transform:rotateY(180deg) rotateX(180deg)}}.hourly .hours .hour{height:110px;width:3rem;background-color:var(--card-color);border:solid 2px var(--text-color);margin:.5rem;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-radius:.4rem;box-shadow:var(--light-shadow)}.hourly .hours .hour .rain{margin:0;font-size:.8rem;font-weight:700;color:#5fdaff}.hourly .hours .hour .icon{width:70%;margin:.2rem 0}.hourly .hours .hour .temp{font-size:1rem;font-weight:700;margin:.25rem 0}.hourly .hours .hour .time{font-size:.8rem;margin-bottom:.5rem}.hourly h3,.hourly p{margin:.5rem 1rem}.hourly p{font-weight:700;font-size:.8rem;color:var(--light-color)}.hourly .hours{display:flex;align-items:flex-end;overflow-y:scroll;padding:.5rem}.hourly .hours .spacer{width:.5rem;height:.5rem;flex:0 0 auto}.location .center{padding:1rem}.location header{margin:20px;font-weight:700}.location header .city{font-size:36px}.location header .country{font-size:20px;color:var(--light-color)}.location .principal{margin:3rem 1rem;display:flex;justify-content:center;align-items:center}.location .principal .icon{display:block;height:100px;width:100px;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.location .principal .infos{margin-left:10px}.location .principal .infos .temp{display:flex}.location .principal .infos .temp .value{font-size:48px;font-weight:700}.location .principal .infos .temp .unit{font-size:24px;font-weight:700;color:var(--light-color);margin-top:5px}.location .principal .infos .desc{font-size:24px;font-weight:700;max-width:150px}.location div.rain{width:100%}.location div.rain .icon{height:2rem}.location div.rain .name{font-size:1.2rem}.location div.rain .data .value{font-size:2rem}.location .constants{display:flex;justify-content:center;flex-wrap:wrap}.location .sun{margin-top:1rem;display:flex;justify-content:space-around}.location .constant,.location .rain{margin-bottom:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;width:33%}.location .constant .icon,.location .rain .icon{height:1.5rem}.location .constant .name,.location .rain .name{font-size:.8rem}.location .constant .data,.location .rain .data{margin-top:.5rem}.location .constant .data .value,.location .rain .data .value{font-size:1.2rem;font-weight:700}.location .constant .data .unit,.location .rain .data .unit{font-size:1rem;color:var(--light-color)}.location footer{margin-top:1rem}.location footer .update{margin:0 1rem;font-size:.8rem;color:var(--light-color)}.location-card{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;height:84px;border-radius:10px;background-color:var(--card-color);box-shadow:var(--light-shadow);display:flex;justify-content:space-between;align-items:center;margin:20px;padding:10px 20px}.location-card .loc{position:relative;font-weight:700;white-space:nowrap;overflow:hidden;margin-right:10px;flex-grow:1}.location-card .loc .city{font-size:24px;color:var(--text-color);line-height:110%}.location-card .loc .country{font-size:14px;color:var(--light-color)}.location-card .preview{display:flex;align-items:flex-end}.location-card .preview .temp{display:flex;align-items:flex-start}.location-card .preview .temp .value{font-weight:700;font-size:40px;color:var(--text-color);line-height:100%}.location-card .preview .temp .unit{font-size:18px;color:var(--light-color);line-height:120%}.location-card .preview .icon{height:48px;width:48px;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center;margin-left:10px}.location-card.sort{box-shadow:var(--dark-shadow)}.location-chooser{margin:0 20px;position:relative}.location-chooser .results{position:absolute;background-color:var(--card-color);box-shadow:var(--dark-shadow);margin:10px 0;width:100%;z-index:1;border-radius:5px;overflow:hidden}.location-chooser .results .place{padding:.8rem;white-space:nowrap;overflow:hidden}.location-chooser .results .place:hover{background-color:var(--light-color)}.location-chooser input[type=text]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--card-color);width:100%;border:solid 2px var(--text-color);border-radius:5px;color:var(--text-color);padding:10px;font-size:18px;line-height:100%;outline:none;box-shadow:var(--light-shadow);caption-side:top;transition:box-shadow .2s;-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}.location-chooser input[type=text]::-moz-placeholder{line-height:normal;color:var(--light-color)}.location-chooser input[type=text]:-ms-input-placeholder{line-height:normal;color:var(--light-color)}.location-chooser input[type=text]::placeholder{line-height:normal;color:var(--light-color)}.location-chooser input[type=text]:focus{box-shadow:var(--dark-shadow)}.locations{height:100%;overflow-y:scroll}.tabs{height:100%;width:100%;display:flex;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-x:scroll;overflow-y:none;scroll-behavior:smooth}.tabs::-webkit-scrollbar{display:none}.tabs .tab{height:100%;width:100%;flex:0 0 auto;scroll-snap-align:start;overflow-y:scroll}.drawer-container{z-index:10}.drawer-container .drawer-background{position:fixed;top:0;left:0;width:100vw;height:100vh}.drawer-container .drawer{z-index:1;position:fixed;background-color:var(--background-color);width:250px;height:100vh;transition:transform .2s,box-shadow .2s;overflow-y:scroll;overflow-x:hidden}#app{display:flex;flex-direction:column;height:100%;overflow:hidden}#app .app-bottom,#app .app-top{background:var(--background-color);flex:0 0 auto}#app .app-center{flex:1 0 auto;overflow-x:hidden;overflow-y:scroll;height:calc(100% - 2*var(--bar-height))}:root{--background-color:#f8fcff;--text-color:#303e4e;--light-color:#b3bbc1;--card-color:#fff;--light-shadow:0px 4px 10px rgba(205,221,233,0.5);--dark-shadow:0px 4px 20px #abb8c2;--bar-height:3rem}.btn{display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:.3rem;background-color:var(--text-color);color:var(--card-color);padding:.5rem .8rem;width:calc(100% - 2rem);margin:1rem;box-shadow:var(--light-shadow)}*{box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}html{height:100%}body{position:fixed;top:0;left:0;font-family:Poppins,sans-serif;outline:none;margin:0;background-color:var(--background-color);color:var(--text-color);overflow:hidden;font-size:18px}.center,body{height:100%;width:100%}.center{display:flex;justify-content:center;align-items:center}