.page{display:flex;flex-direction:row;justify-content:center;align-items:center;height:100%;width:100%}.card{flex-basis:40%;display:flex;justify-content:center;align-items:center;flex-direction:column;border-radius:1rem;background-color:#f4f8fc;border:0px solid red;padding:12px 7px 7px;width:100%}.content{text-align:center}#verificationCode .card{gap:15px}.boxes{display:flex;flex-direction:row;width:100%;gap:10px;height:40px;border:0px solid red}.boxes>.box{flex:1;height:100%;border-radius:7px}.boxes>.box input{width:100%;height:100%;border-radius:7px;border:1px solid black}#verificationCode .boxes>.box input{text-align:center;line-height:100px}.error{font-size:.8rem;color:#000;text-align:center;color:red;padding-left:1rem;padding-right:1rem;border:0px solid red}.title{padding-top:7px;font-size:1.5rem;font-weight:700;border:0px solid red}.form{display:flex;flex-direction:column;gap:2rem;width:80%;padding:1rem;border:0px solid red}.form-group label{font-size:1rem}.form-group input:not([type=radio]),.form-group select{border:1px solid black;width:100%;border-radius:.5rem;padding:.15rem .15rem .15rem .5rem}.form-group .options{display:flex;flex-direction:row;justify-content:flex-start;border:0px solid red;width:100%;gap:clamp(12px,16px,20px)}.form-group .options span{display:flex;flex-direction:row;gap:clamp(2px,4px,6px)}.form-group select{padding:.15rem}#workflow{width:100%;height:100%}#workflow #title{display:flex;justify-content:center;font-size:1.5rem;padding-top:1rem;text-decoration-thickness:2px;text-decoration:underline;color:#0f172a}#workflow #links{padding:1.2rem;font-size:1rem}#workflow #links span{font-weight:700}#header{width:100%;border:0px solid red}#header ul{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:1rem;height:100%;padding-bottom:.5rem;padding-left:.5rem;border:0px solid red}#header ul li{height:100%;border:0px solid black;font-size:clamp(6px,2vw,16px);padding:.5rem;display:flex;justify-content:center;align-items:center;background-color:#9fc2fb;border-radius:.3rem}#header ul li a{text-decoration:none;color:#000;font-weight:600}#dashboard{overflow:auto;height:100vh;display:flex;flex-direction:column;width:100vw}#dashboard #status{display:flex;flex-direction:column;margin:5% 7.5%;min-width:1000px;min-height:200px}#dashboard #status>div:first-child{border-top-left-radius:15px;border-top-right-radius:15px;background-color:#6e7bda}#dashboard #status>div:not(:first-child){margin-bottom:15px}#dashboard #status>div:first-child>div{color:#fff}#dashboard #status>div{display:flex;flex:1;flex-direction:row;border:1px solid #D6DAE1;overflow:hidden}#dashboard #status>div div{flex:1;display:flex;justify-content:center;align-items:center;border-right:1px solid #D6DAE1}#dashboard #status>div div:last-child{border-right:none}#dashboard #status>div:nth-child(2){background:#2c7be514}#dashboard #status>div:nth-child(3){background:#28a74514}#dashboard #status>div:nth-child(4){background:#ffc10714}#dashboard #datasets{display:flex;flex-direction:column;margin-top:5%;margin-left:7.5%;margin-right:7.5%;min-width:1000px}#dashboard #datasets #stations{display:flex;flex-direction:row;flex:1;top:0;border-top-left-radius:15px;border-top-right-radius:15px;background-color:#6e7bda}#dashboard #datasets #stations>div{padding-top:10px;padding-bottom:10px;color:#fff}#dashboard #datasets #stations>:first-child{flex:2;text-align:center;min-width:150px}#dashboard #datasets #stations>:not(:first-child){flex:1;text-align:center;min-width:75px}#dashboard #datasets>div{display:flex;flex-direction:row;border:1px solid #D6DAE1;flex:1}#dashboard #datasets>div:not(:first-child){margin-bottom:15px}#dashboard #datasets>div:not(:first-child)>:first-child{display:flex;flex:2;flex-direction:row;height:150px;align-items:stretch;min-width:150px}#dashboard #datasets>div:not(:first-child)>:first-child>:first-child{border-right:1px solid #D6DAE1}#dashboard #datasets>div:not(:first-child)>div:not(:last-child){border:1px solid #D6DAE1}#dashboard #datasets>div:nth-child(2){background:#2c7be514}#dashboard #datasets>div:nth-child(3){background:#28a74514}#dashboard #datasets>div:nth-child(4){background:#ffc10714}#dashboard #datasets>div:not(:first-child)>div:not(:first-child)>div:last-child{position:relative;text-decoration:underline;text-decoration-color:#d6dae1;text-underline-offset:4px;text-decoration-thickness:2px}#dashboard #datasets>div:not(:first-child)>div:not(:first-child)>div:last-child div{position:absolute;left:50%;bottom:100%;width:300px;height:200px;transform:translate(-40%);border:2px solid #D6DAE1;background:#fff;z-index:999}#dashboard #datasets>div:not(:first-child)>div:not(:first-child)>div:last-child div img{width:100%;height:100%;object-fit:contain}#dashboard #datasets>div:not(:first-child)>:not(:first-child){display:flex;flex-direction:column;justify-content:space-evenly;border:0px solid red;text-align:center;flex:1;min-width:75px}#dashboard #datasets>div:not(:first-child)>:not(:first-child)>div{height:100%;display:flex;align-items:center;justify-content:center}#dashboard #datasets>div:not(:first-child)>div:not(:first-child)>div:not(:first-child){border-top:1px solid #D6DAE1}#dashboard #datasets>div:not(:first-child)>:first-child>:first-child{flex:.6;display:flex;text-align:center;flex-direction:column;justify-content:space-around}#dashboard #datasets>div:not(:first-child)>div:last-child{border-bottom-right-radius:15px;border-top-right-radius:15px}#dashboard #datasets>div:not(:first-child)>:first-child>:last-child{flex:1.4;display:flex;text-align:center;flex-direction:column;justify-content:space-evenly}#main{display:grid;grid-template-columns:1.5fr 1fr 1fr;grid-template-rows:1fr 5fr 2.9fr 2fr .5fr;grid-template-areas:"station updatedAt currentWeather" "graph stats predictions" "graph stationMessage stationMessage" "weather weather readings" "footer footer footer";gap:5px 7px;width:100%;height:100%;overflow-y:scroll;border:0px solid red;padding-top:15px;padding-bottom:15px}#main>div{border-radius:15px;background-color:#fefefe;box-shadow:0 4px 12px #0f172a14;scrollbar-width:thin;scrollbar-color:#888888 #f1f1f1}#main>div::-webkit-scrollbar{width:5px;display:block!important}#currentWeather{grid-area:currentWeather;display:grid;height:100%;grid-template-columns:1fr 5fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"currentWeatherImage title" "currentWeatherImage temperature" "currentWeatherImage description";column-gap:2px;padding-left:5%}#currentWeather #image{grid-area:currentWeatherImage;height:100%}#currentWeather #description{grid-area:description;color:#5d6570;font-weight:600;font-size:.85rem;border:0px solid red;display:flex;align-items:flex-start}#station{grid-area:station;border:1px solid white;display:grid;height:100%;grid-template-columns:1fr 5fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:"stationImage title" "stationImage name" "stationImage id";column-gap:2px;padding-left:5%}#station #title{grid-area:title;color:#5d6570;font-weight:600;font-size:.85rem;border:0px solid red;display:flex;align-items:flex-end}#station #id{grid-area:id;color:#5d6570;font-weight:600;font-size:.85rem;border:0px solid red;display:flex;align-items:flex-start}#station #name{grid-area:name;font-weight:700;font-size:1rem;border:0px solid red;text-decoration:underline}#station #image{grid-area:stationImage;border:0px solid red;height:100%;display:flex;justify-content:center;align-items:center}#updatedAt{grid-area:updatedAt;border:1px solid white;display:grid;grid-template-areas:"updatedAtImage title" "updatedAtImage ago" "updatedAtImage time";grid-template-columns:1fr 5fr;grid-template-rows:1fr 1fr 1fr;height:100%;column-gap:2px;padding-left:5%}#updatedAt #image{grid-area:updatedAtImage;border:0px solid red;display:flex;justify-content:center;align-items:center}#updatedAt #title{grid-area:title;color:#5d6570;font-weight:600;font-size:.85rem;border:0px solid red;display:flex;align-items:flex-end}#updatedAt #ago{grid-area:ago;font-weight:700;font-size:1rem;border:0px solid red}#updatedAt #time{grid-area:time;color:#5d6570;font-weight:600;font-size:.85rem;border:0px solid red;display:flex;align-items:flex-start}#currentWeather{grid-area:currentWeather;border:1px solid white;display:grid;grid-template-areas:"currentWeatherImage title" "currentWeatherImage temperature" "currentWeatherImage message";grid-template-columns:1fr 5fr;grid-template-rows:1fr 1fr 1fr;height:100%;column-gap:2px;padding-left:5%;border:0px solid red}#currentWeather #image{grid-area:currentWeatherImage;border:0px solid red;display:flex;justify-content:center;align-items:center}#currentWeather #title{grid-area:title;color:#5d6570;font-weight:600;font-size:.85rem;border:0px solid red;display:flex;align-items:flex-end}#currentWeather #temperature{grid-area:temperature;font-weight:700;font-size:1rem;border:0px solid red}#currentWeather #message{grid-area:message;color:#5d6570;font-weight:600;font-size:.85rem;border:0px solid red;display:flex;align-items:flex-start}.graph{grid-area:graph;border:0px solid red;display:flex;flex-direction:column;justify-content:flex-start}.graph .title{color:#000;font-weight:600;padding-left:5%;display:flex;border:0px solid black;font-size:1rem}.graph .title div:nth-child(2){align-self:center}.graph .forecast{border:0px solid blue;flex:1;display:flex;flex-direction:column;border:0px solid red}.graph .forecast .tabs{display:flex;flex-direction:row;gap:.5rem;border:0px solid blue;padding-left:2rem;padding-top:.5rem;padding-bottom:.5rem}.graph .forecast .tabs span{border:0px solid black;height:100%;font-size:clamp(6px,2vw,16px);padding:.5rem;display:flex;justify-content:center;align-items:center;background-color:#9fc2fb;border-radius:.3rem}.graph .forecast .tabs span:hover{background-color:#7fa9dd}.graph .forecast .image{border:0px solid blue;flex:1}.graph .forecast .image{max-width:100%;height:auto}#stationMessage{grid-area:stationMessage;border:0px solid red;display:flex;flex-direction:column;background-color:#9fc2fb;height:100%}#stationMessage #title{font-weight:600;color:#000;border:0px solid red;display:flex;align-items:center;border-radius:15px 15px 0 0;padding-left:2%;background-color:#9fc2fb;padding-top:1%;flex:.5}#stationMessage #message{padding-left:2%;padding-top:1%;padding-bottom:1%;border:0px solid red;border-radius:0 0 15px 15px;background-color:#9fc2fb;flex:2}#stats{grid-area:stats;border:0px solid black;height:100%;display:flex;flex-direction:column}#stats #title{display:flex;padding-left:5%;color:#000;font-weight:600}#stats #stastics{flex:1}#stats #title div:nth-child(2){align-self:center}#stats #stastics ul{display:flex;flex-direction:column;justify-content:space-evenly;align-items:flex-start;height:100%;margin-left:1.7rem}#stats #stastics ul li{width:100%;display:flex;flex-direction:row;gap:.2rem}#stats #stastics ul li span:nth-child(1){color:#5d6570;font-weight:600;font-size:1rem}div#predictions{grid-area:predictions;border:0px solid red;height:100%;display:flex;flex-direction:column;padding-right:10px}#predictions #title{display:flex;flex-direction:row;padding-left:5%;color:#000;font-weight:600}#title div:nth-child(2){align-self:center}#predictions #predict{border:0px solid red;flex:1;height:100%}#predictions #predict ul{display:flex;flex-direction:column;height:100%;border:0px solid red;justify-content:space-evenly;margin-left:1rem}#predictions #predict ul li{display:flex;flex-direction:row;justify-content:space-evenly;gap:10px}#predictions #predict ul li:first-child{display:flex;flex-direction:row;justify-content:space-evenly;margin-bottom:4px}#predictions #predict ul li:first-child span:last-child{text-align:center}#predictions #predict ul li:not(:first-child) span:nth-child(1){color:#5d6570;font-weight:600;font-size:1rem}#predictions #predict ul li:not(:first-child) span:last-child progress{height:3px}progress::-webkit-progress-bar{background-color:#9fc2fb}progress::-webkit-progress-value{background-color:#9fc2fb}#predictions #predict ul li span:last-child span{color:#5d6570;font-weight:600;font-size:.7rem}#weather{grid-area:weather;border:0px solid red;display:flex;flex-direction:column;justify-content:space-evenly}#weather #title{display:flex;flex-direction:row;padding-left:3%;gap:3px}#weather #title div:nth-child(2){align-self:center;color:#000;font-weight:600}#weather #details{display:flex;flex-direction:row;justify-content:space-evenly}#weather #details div{display:flex;flex-direction:column;justify-content:space-evenly;border:0px solid red}#weather #details div span{margin:auto}#weather #details div span:nth-child(1){color:#5d6570;font-weight:600;font-size:1rem}#readings{grid-area:readings;border:0px solid red}#readings #title{display:flex;flex-direction:row;padding-left:3%;gap:3px}#readings #title div:nth-child(2){align-self:center;color:#000;font-weight:600}#readings #details ul{display:flex;flex-direction:column;justify-content:space-evenly;border:0px solid red}#readings #details ul li{border:0px solid red;display:flex;flex-direction:row;justify-content:space-evenly}#footer{grid-area:footer;border:0px solid red;width:100%;display:flex;justify-content:center;align-items:center;color:#5d6570;font-weight:600;font-size:.9rem}:root{--primary:#1B67D1;--primary-dark:#0E53B7;--secondary:#4FA3E3;--light-blue:#EDF5FC;--text:#1F2E46;--white:#FFFFFF;--border:#D9E5F1;--shadow: 0 12px 30px rgba(0,0,0,.12);--transition: .3s ease;--radius: 18px}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;background:#f4f8fc;color:var(--text);overflow-x:none}a{text-decoration:none}ul{list-style:none}.home{height:100%;display:flex;flex-direction:column;border:0px solid red}header{position:sticky;top:0;width:100%;z-index:1001;flex:1;border:1px solid red}.navbar{height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:20px;border:0px solid red;background:#fff;box-shadow:0 5px 18px #0000001f}@media(max-width:700px){.navbar{display:flex;flex-direction:column;justify-content:space-evenly;height:100%}}.home>*{border:0px solid red}.navbar>*{border:0px solid green}.nav-links{display:flex;flex-direction:row;gap:clamp(1px,20px,24px);padding-right:clamp(1px,20px,24px);padding-bottom:clamp(2px,2vh,9px)}.nav-links li:not(:last-child){display:flex;flex-direction:column;justify-content:center}.nav-links li:last-child{padding:7px;background:linear-gradient(135deg,#2e7bff,#0b59d7);font-size:clamp(18px,18px,18px);border-radius:18px;padding-right:clamp(8px,12px,12px)}i{padding-right:10px;padding-left:10px;color:#fff}.nav-links li:last-child a{color:#fff}.nav-links li a{position:relative;color:#23426e;font-size:clamp(12px,14px,16px);font-weight:600;transition:var(--transition)}.nav-links a:hover,.nav-links a:active,.nav-links a.active{color:var(--primary)}.nav-links a.active:after{content:"";position:absolute;bottom:-10px;left:0;width:100%;height:3px;border-radius:10px;background:var(--primary)}.banner{border-bottom:0px solid black;max-height:auto}.methodology>*:not(.title){font-size:clamp(13px,14px,18px)}.methodology span{font-size:clamp(19px,22px,25px);font-weight:700;width:100%}.methodology a{text-decoration:underline;color:#2e7bff}.methodology table,.methdology th,.methodology td{border:1px solid black;border-collapse:collapse}.methdology th,.methodology td{padding:2px 10px;text-align:center}.methodology ul{list-style-type:disc;padding-left:25px}.methodology,.map-stations{scrollbar-width:thin;scrollbar-color:#888 #f1f1f1}.methodology::-webkit-scrollbar,.map-stations::-webkit-scrollbar{width:14px}.methodology{display:flex;flex-direction:column;gap:5px;background-color:#f4f8fc;border:0px solid red;overflow-y:scroll;flex:5;padding:15px 15px 30px}.methodology .images{display:flex;flex-direction:row;justify-content:space-evenly;padding:20px 0 17px}.map-stations{display:flex;width:100%;flex-direction:row;border-bottom:0px solid red;padding:15px 15px 30px;flex:5;overflow-y:scroll;height:100%;gap:15px;background-color:#f4f8fc}.map-stations button{cursor:pointer}.map-stations:has(ul){display:flex;flex-direction:column;overflow-y:scroll}.map-stations:has(ul) ul{list-style-type:disc;padding-left:clamp(15px,17px,19px)}#map{border:0px solid green;flex:2.5;height:100%;margin:0 auto;border-radius:12px}.chatbot{display:flex;flex-direction:column;gap:clamp(10px,12px,12px);height:100%;padding:clamp(6px,2vh,10px);border:1px solid green;flex:1.5;justify-content:stretch;box-shadow:0 4px 12px #0000000d;border-radius:12px;background-color:#f4f8fc;border:0px solid red}.chatbot .name{flex:1;display:flex;align-items:center;border:0px solid red}.chatbot .name i{color:#1b67d1}.chatbot .screen{flex:7;border:0px solid black;display:flex;flex-direction:column;background-color:#fff;overflow:scroll;min-height:0;overflow-y:auto}.chatbot .screen .messages{flex:0 0 80%;display:flex;flex-direction:column;gap:clamp(8px,9px,10px);padding:clamp(12px,14px,16px) clamp(12px,14px,16px) clamp(12px,14px,16px) clamp(12px,14px,16px)}.loader{width:15px;aspect-ratio:2/1;border-radius:50%;animation:l5 1s infinite linear alternate;padding:5px;margin-left:clamp(25px,25px,25px)}@keyframes l5{0%{box-shadow:20px 0 #2468d3,-20px 0 #b8cef1;background:#2468d3}33%{box-shadow:20px 0 #2468d3,-20px 0 #b8cef1;background:#b8cef1}66%{box-shadow:20px 0 #b8cef1,-20px 0 #2468d3;background:#b8cef1}to{box-shadow:20px 0 #b8cef1,-20px 0 #2468d3;background:#2468d3}}.chatbot .screen .input{flex:0 0 20%;border-top:4px solid #F4F8FC}.chatbot .screen .messages>div{color:#fff;font-size:clamp(12px,14px,16px);border-radius:clamp(8px,10px,12px);padding-left:clamp(6px,8px,10px);background-color:#1b67d1}.chatbot .screen .messages>div[class=assistant-message]{background-color:#eaf2fc;color:#16324f}.chatbot .screen .input input{width:100%;height:100%;overflow:hidden;font-size:clamp(12px,14px,16px);padding-left:clamp(6px,8px,10px)}.chatbot .screen .input input:focus{outline:0px solid black}.station{display:flex;flex-direction:column;gap:clamp(10px,12px,12px);height:100%;padding:clamp(6px,2vh,10px);border:0px solid green;flex:1.5;overflow:scroll;justify-content:stretch;background-color:#fff;box-shadow:0 4px 12px #0000000d;border-radius:12px}.name{font-weight:700;font-size:clamp(16px,16px,20px);flex-grow:1;border:0px solid red}.description{font-style:normal;flex-grow:2;font-size:clamp(13px,14px,19px);border:0px solid red}.description>span{font-size:clamp(12px,16px,18px)}.links{flex-grow:2;display:flex;flex-direction:column;gap:clamp(8px,13px,16px)}.links .page-links{flex-grow:1;display:flex;flex-direction:row;gap:clamp(7px,10px,13px)}.links .jump-links{flex-grow:1;display:flex;flex-direction:row}.links>div[class$=links]>div{border:0px solid red;text-align:center;display:flex;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,#2e7bff,#0c5bd8);color:#fff;font-weight:650;font-size:17px;box-shadow:0 12px 25px #1b67d140;width:100%}.links .page-links div{width:50%}.links>div[class$=links]>div a{font-size:clamp(8px,13px,16px)}footer{flex:.65;padding:15px 40px;background:linear-gradient(to right,#123b72,#0e4f95);color:#fff;display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;gap:clamp(5px,5vw,40px);overflow-y:hidden}.footer-right{display:flex;flex-direction:row;gap:5px;font-size:clamp(14px,15px,16px)}p{font-size:clamp(12px,13px,14px)}