@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap);.viewport{display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;width:60%;z-index:1}.viewport .content{align-items:center;display:flex;justify-content:center;padding:40px 0;width:100%}.city-info,.temperature,.weather-info{padding:0 8px}.viewport .temperature>p{font-size:88px}.city-info .city-name{font-size:32px}.city-info .current-datetime{font-size:16px}.weather-info{align-items:center;display:flex;flex-direction:column;justify-content:center}.weather-info .weather-icon>img{display:block;width:38px}@media screen and (max-width:992px){.viewport{justify-content:center;width:100%}}@media screen and (max-width:500px){.viewport .temperature>p{font-size:64px}.city-info .city-name{font-size:24px}.city-info .current-datetime{font-size:14px}.weather-info .weather-icon>img{width:29px}}@media screen and (max-width:390px){.viewport .content{flex-direction:column;justify-content:space-around;margin-bottom:8px;padding:0}.viewport .temperature{text-align:center;width:100%}.city-info{margin:0;text-align:center}.weather-info{align-items:center;margin:0}}.control-panel{background-color:hsla(0,0%,43%,.3);display:flex;flex-direction:column;height:100%;overflow:hidden;width:40%;z-index:1}.control-panel>hr{margin:8px 40px 28px}.control-panel .location-control{display:flex;flex-direction:column;height:50%;width:100%}.control-panel .search-controller{display:flex;padding-left:40px;width:100%}.control-panel .search-controller>input{background-color:transparent;border:none;border-bottom:1px solid #ccc;display:block;flex-grow:1;margin-right:40px;min-width:0;outline:none;padding-top:20px}.control-panel .search-controller>input::-webkit-input-placeholder{color:#fff;font-size:16px;opacity:.7}.control-panel .search-controller>input:-ms-input-placeholder{color:#fff;font-size:16px;opacity:.7}.control-panel .search-controller>input::placeholder{color:#fff;font-size:16px;opacity:.7}.control-panel .btn{background-color:#aacde1;border:none;border-bottom-left-radius:4px;flex-shrink:0;height:60px;transition:all .2s ease-in;width:60px}.control-panel .btn:hover{border-bottom:4px solid #fff;cursor:pointer}.control-panel .fas.fa-search{color:#444;font-size:18px}.control-panel .list-cities{flex-grow:1;margin:28px 40px;overflow:hidden;overflow-y:auto;position:relative}.control-panel .list-cities::-webkit-scrollbar{background-color:transparent;width:8px}.list-cities::-webkit-scrollbar-track{background-color:transparent;border-radius:4px;box-shadow:inset 0 0 6px hsla(0,0%,43%,.3)}.list-cities::-webkit-scrollbar-thumb{background-color:hsla(0,0%,43%,.5);border-radius:4px}.list-cities::-webkit-scrollbar-thumb:hover{background-color:hsla(0,0%,43%,.9)}.control-panel .list-cities>ul{display:flex;flex-direction:column;width:100%}.control-panel .list-cities>ul:first-child{padding-top:0}.list-cities li:hover{cursor:pointer;font-size:18px;opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}.list-cities li,.weather-details li{display:block;padding:8px 0;transition:all .2s ease-in}.control-panel .weather-details{display:flex;flex-direction:column;flex-grow:1;justify-content:center;margin:0 40px 20px;overflow:hidden}.control-panel .weather-details ul{flex-grow:1;width:100%}.control-panel .weather-details__title{font-weight:700;margin-bottom:20px}.weather-details li{display:flex;justify-content:space-between}.op-7{opacity:.7}@media screen and (max-width:992px){.control-panel{height:auto;width:100%}.control-panel .location-control{height:200px}}@media screen and (max-width:310px){.weather-details li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}*{box-sizing:border-box;color:#fff;font-family:Roboto,sans-serif}*,ul{margin:0;padding:0}ul{list-style-type:none}.app{align-items:center;background-image:linear-gradient(180deg,#b1cde1,#72abd1);justify-content:center;min-height:100vh;width:100%}.app,.container{display:flex;overflow:hidden}.container{background-position:50%;background-repeat:no-repeat;background-size:cover;box-shadow:0 4px 8px 0 rgba(0,0,0,.3);height:75vh;position:relative;width:70%}.container:after{background-color:rgba(0,0,0,.1);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:0}@media screen and (max-width:992px){.container{flex-wrap:wrap;height:100vh}}@media screen and (max-width:768px){.container{width:100%}}@media screen and (max-width:500px){*{font-size:14px}}
/*# sourceMappingURL=main.d0b7ce51.css.map*/