body {
  font-family: Arial, sans-serif;
  background-color: #0e0c0d;
  color: #333;
  max-width: 400px;
  margin:0px auto;
}
body.history-body {
  width:100%;
  max-width:unset;
  margin:0px;

}
body.history-body .p-button {
  padding:1rem;
}

h1 {
  text-align: center;
  color: #dcff00;
  font-size:25px;
}
h2 {
  text-align: center;
  color: #dcff00;
  font-size:20px;
  text-align: center;
  margin:0px;
}

/* p-head */
.p-head {
    background-color:#272727;
    padding:10px 15px;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.p-head img {
    width:30px;
    display:flex;
}
.p-head a {
    display:flex;  
}
.p-head a svg {
    width:20px;
    height:20px;
    color:#dcff00;
}

/* p-head */

/* p-content */
.p-content {
    padding:0rem 1rem;
}

/* p-content */

.status .num {
  background-color:#272727;
  display:flex;
  border-radius:10px;
  align-items: flex-end;
  flex-direction: column;
  padding:10px;
  color:#fff;
  font-size:12px;
  background-repeat: no-repeat;
}
.status .num.solar-panel {
    background-size:60px;
    background-position: 10px;
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' fill='%235e5e5e' enable-background='new 0 0 512 512' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m415.744 274.441c0-61.235-49.818-111.055-111.054-111.055-29.806 0-58.336 12.027-79.16 33.18l-33.902-40.418c-.95-1.133-2.353-1.787-3.831-1.787h-156.797c-1.943 0-3.71 1.126-4.531 2.887s-.548 3.838.7 5.326l213.479 254.508c.95 1.133 2.353 1.787 3.831 1.787h156.797c1.943 0 3.71-1.126 4.531-2.887s.548-3.838-.7-5.326l-37.5-44.708c30.244-20.769 48.137-54.555 48.137-91.507zm-185.297-56.453h-39.214l-44.981-53.627h39.214zm15.259 127.254-44.982-53.627h39.213l44.981 53.627zm47.602 10 44.981 53.627h-39.213l-44.981-53.627zm-144.849-63.627h39.214l44.981 53.627h-39.213zm38.109-63.627 44.982 53.627h-39.213l-44.981-53.627zm-47.601-10-44.982-53.627h39.214l44.981 53.627zm40.318 63.627h-39.214l-44.982-53.627h39.214zm73.705 10h39.214l44.982 53.627h-39.214zm-8.388-10-44.981-53.627h39.214l44.982 53.627zm-163.668-117.254 44.981 53.627h-39.213l-44.982-53.627zm120.895 190.881h39.214l44.982 53.627h-39.214zm149.512 53.627-44.981-53.627h39.214l44.982 53.627zm9.807-50.62-129.154-153.977c19.004-19.676 45.254-30.885 72.697-30.885 55.721 0 101.054 45.333 101.054 101.055-.001 33.944-16.595 64.955-44.597 83.807zm-61.458-219.844v-40.274c0-2.762 2.238-5 5-5s5 2.238 5 5v40.273c0 2.762-2.238 5-5 5s-5-2.237-5-4.999zm68.689 15.725 20.136-34.878c1.379-2.391 4.438-3.215 6.83-1.83 2.392 1.381 3.211 4.438 1.83 6.83l-20.136 34.878c-.926 1.604-2.606 2.501-4.335 2.501-.848 0-1.708-.216-2.495-.671-2.392-1.38-3.211-4.438-1.83-6.83zm49.792 54.792c-1.381-2.392-.562-5.449 1.83-6.83l34.878-20.137c2.392-1.385 5.45-.562 6.83 1.83 1.381 2.392.562 5.449-1.83 6.83l-34.878 20.137c-.787.455-1.647.671-2.495.671-1.729 0-3.409-.896-4.335-2.501zm67.829 65.519c0 2.762-2.238 5-5 5h-40.273c-2.762 0-5-2.238-5-5s2.238-5 5-5h40.273c2.762 0 5 2.238 5 5zm-24.291 90.654c-.926 1.604-2.606 2.501-4.335 2.501-.848 0-1.708-.216-2.495-.671l-34.878-20.137c-2.392-1.381-3.211-4.438-1.83-6.83 1.379-2.392 4.438-3.214 6.83-1.83l34.878 20.137c2.391 1.381 3.211 4.439 1.83 6.83zm-249.503-240.843c-1.381-2.392-.562-5.449 1.83-6.83 2.391-1.385 5.45-.563 6.83 1.83l20.137 34.878c1.381 2.392.562 5.449-1.83 6.83-.787.455-1.647.671-2.495.671-1.729 0-3.409-.896-4.335-2.501z'/%3E%3C/svg%3E");  
}
.status .num.pump {
    background-size:50px;
    background-position: 12px;
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' fill='%235e5e5e' enable-background='new 0 0 75 75' height='512' viewBox='0 0 75 75' width='512' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='m37.6 41.7c2.3 0 4.2-1.9 4.2-4.2s-1.9-4.2-4.2-4.2-4.2 1.9-4.2 4.2 1.9 4.2 4.2 4.2zm0-6.3c1.2 0 2.2 1 2.2 2.2s-1 2.2-2.2 2.2-2.2-1-2.2-2.2 1-2.2 2.2-2.2z'/%3E%3Cpath d='m26.7 11.6c.6 0 1-.4 1-1v-5.1c0-.6-.4-1-1-1h-17.7c-.6 0-1 .4-1 1v5.1c0 .6.4 1 1 1h2.3v25.9c0 14.5 11.7 26.2 26.2 26.2 4.8 0 9.2-1.3 13.1-3.5v3.2h-2.3c-.6 0-1 .4-1 1v5.1c0 .6.4 1 1 1h17.7c.6 0 1-.4 1-1v-5.1c0-.6-.4-1-1-1h-2.3v-25.9c0-14.5-11.7-26.2-26.2-26.2-4.6 0-9.1 1.2-13.1 3.5v-3.1h2.3zm38.3 53.8v3.1h-15.7v-3.1zm-3.3-2h-9.1v-4.4c4-2.9 7.2-6.8 9.1-11.5zm-24.2-50.1c13.2 0 24.2 10.7 24.2 24.2 0 13.4-10.9 24.2-24.2 24.2-13.4 0-24.2-10.9-24.2-24.2v-25.9h9.1v25.9c0 2 .5 4.5 1.5 6.5.3.6 1 .7 1.5.4l2.7-2c.7-.5 1.7-.4 2.2.4.5.7.4 1.7-.4 2.2l-2.6 2c-.5.4-.6 1.1-.1 1.5 3.5 3.3 8.1 4.6 12.4 4 .6-.1 1-.7.8-1.3l-1-3.2c-.3-.8.2-1.8 1-2 .9-.3 1.8.2 2 1l1 3.2c.2.6.9.9 1.4.6 4-2.2 6.8-6 7.7-10.5.1-.6-.4-1.2-1-1.2h-3.3c-.9 0-1.6-.7-1.6-1.6s.7-1.6 1.6-1.6h3.3c.6 0 1.1-.6 1-1.2-.8-4.5-3.6-8.3-7.7-10.5-.6-.3-1.2 0-1.4.6l-1 3.2c-.3.8-1.2 1.3-2 1-.9-.3-1.3-1.2-1-2l1-3.2c.2-.6-.2-1.2-.8-1.3-4.2-.6-8.9.7-12.4 4-.5.4-.4 1.2.1 1.5l2.7 2c.7.5.9 1.5.4 2.2s-1.5.9-2.2.4l-2.7-2c-.3-.2-.6-.3-1-.1v-13.4c3.8-2.5 8.3-3.8 13-3.8zm-6.4 15.1-1.7-1.2c2.4-1.9 5.4-2.9 8.6-2.8l-.6 2c-.6 1.9.4 3.9 2.3 4.5s3.9-.4 4.5-2.3l.6-2c2.6 1.7 4.5 4.3 5.3 7.3h-2.1c-2 0-3.6 1.6-3.6 3.6s1.6 3.6 3.6 3.6h2.1c-.8 3-2.7 5.6-5.3 7.3l-.6-1.9c-.6-1.9-2.6-2.9-4.6-2.3-1.9.6-2.9 2.7-2.3 4.6l.6 2c-3.2.1-6.2-.9-8.6-2.8l1.7-1.2c1.6-1.2 2-3.4.8-5s-3.4-2-5-.8l-1.6 1c-.5-1.4-.8-3-.8-4.5 0-1.6.3-3.1.8-4.5l1.7 1.2c1.6 1.2 3.9.8 5-.8 1.2-1.6.9-3.9-.8-5zm-21.1-18.8v-3.1h15.7v3.1c-9.3 0-6.5 0-15.7 0z'/%3E%3C/g%3E%3C/svg%3E");
}
.status .num.bojler {
    background-size:50px;
    background-position: 8px 15px;
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' fill='%235e5e5e' viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg' data-name='Layer 1'%3E%3Cpath d='m350.476 286.054h47a6.964 6.964 0 0 0 6.382 4.142h34.206a50.1 50.1 0 0 0 50.047-50.048v-31.031a6.987 6.987 0 0 0 -3.211-5.88v-97.522a16.23 16.23 0 0 0 -16.213-16.215h-20.823a16.231 16.231 0 0 0 -16.212 16.213v96.91a7 7 0 0 0 -4.391 6.492v12.234a8.007 8.007 0 0 1 -8 8h-15.324a6.991 6.991 0 0 0 -6.032 3.46h-47.429v-89.489c0-16.967-16.287-30-48.407-38.727-25.606-6.96-60.161-10.793-97.3-10.793-37.6 0-72.881 3.89-99.355 10.953-32.972 8.8-49.69 21.773-49.69 38.567v284.511a38.831 38.831 0 0 0 7 77.026h280.753a38.831 38.831 0 0 0 7-77.026v-66.279h46.065a6.989 6.989 0 0 0 6.031 3.46h15.327a8.007 8.007 0 0 1 8 8v12.233a7 7 0 0 0 4.391 6.493v96.91a16.232 16.232 0 0 0 16.209 16.209h20.821a16.23 16.23 0 0 0 16.212-16.212v-97.522a6.991 6.991 0 0 0 3.211-5.881v-31.032a50.1 50.1 0 0 0 -50.044-50.047h-34.2a6.966 6.966 0 0 0 -6.382 4.143h-45.642zm97.388-182.554h20.823a2.215 2.215 0 0 1 2.211 2.213v96.4h-25.246v-96.4a2.216 2.216 0 0 1 2.212-2.213zm-36.939 139.848h8.338a22.023 22.023 0 0 0 22-22v-5.234h32.848v24.031a36.089 36.089 0 0 1 -36.049 36.055h-27.194zm56.4 247.509h-20.825a2.216 2.216 0 0 1 -2.213-2.212v-96.4h25.246v96.4a2.215 2.215 0 0 1 -2.212 2.212zm-30.625-172.694a36.088 36.088 0 0 1 36.047 36.047v24.032h-32.847v-5.233a22.023 22.023 0 0 0 -22-22h-8.337l-.057-32.849zm-366.973 109.024v-238.406h266.749v238.406zm327.191-180.379-.043 25.246h-46.4v-25.246zm-327.191-103.488c0-9.25 14.324-18.377 39.3-25.04s59.861-10.48 95.746-10.48c35.932 0 69.182 3.659 93.626 10.3 24.2 6.577 38.079 15.768 38.079 25.217v31.461h-266.751zm298.584 322.7a24.863 24.863 0 0 1 -24.834 24.836h-280.751a24.835 24.835 0 1 1 0-49.67h280.751a24.862 24.862 0 0 1 24.834 24.835zm27.2-143.715.043 25.246h-45.078v-25.245zm-186.847-80.611a7 7 0 0 0 -11.125 0c-5.023 6.577-49.078 65.047-49.078 92.921a54.64 54.64 0 1 0 109.28 0c0-27.875-44.053-86.345-49.077-92.921zm-5.564 133.561a40.687 40.687 0 0 1 -40.641-40.641c0-17.216 25.663-56.239 40.641-76.923 14.977 20.684 40.639 59.707 40.639 76.923a40.686 40.686 0 0 1 -40.639 40.641zm-34.456-312.545c2.435-2.514 3.206-3.423 3.206-5.817s-.771-3.3-3.206-5.816c-2.848-2.939-7.153-7.381-7.153-15.56s4.3-12.621 7.153-15.559c2.435-2.513 3.206-3.422 3.206-5.815a7 7 0 0 1 14 0c0 8.179-4.305 12.621-7.154 15.559-2.434 2.513-3.2 3.421-3.2 5.815s.771 3.3 3.206 5.817c2.849 2.938 7.153 7.38 7.153 15.559s-4.305 12.621-7.153 15.559c-2.435 2.514-3.206 3.423-3.206 5.818a7 7 0 1 1 -14 0c-.005-8.18 4.304-12.622 7.148-15.56zm29.43 0c2.436-2.514 3.206-3.423 3.206-5.817s-.77-3.3-3.206-5.816c-2.847-2.939-7.152-7.381-7.152-15.56s4.305-12.621 7.152-15.559c2.436-2.513 3.206-3.422 3.206-5.815a7 7 0 0 1 14 0c0 8.179-4.3 12.621-7.153 15.559-2.435 2.513-3.205 3.421-3.205 5.815s.77 3.3 3.206 5.817c2.849 2.938 7.152 7.38 7.152 15.559s-4.3 12.621-7.152 15.559c-2.436 2.514-3.206 3.423-3.206 5.818a7 7 0 1 1 -14 0c0-8.18 4.305-12.622 7.152-15.56zm29.431 0c2.435-2.514 3.206-3.423 3.206-5.817s-.771-3.3-3.206-5.816c-2.848-2.939-7.152-7.381-7.152-15.56s4.3-12.621 7.152-15.559c2.435-2.513 3.206-3.422 3.206-5.815a7 7 0 0 1 14 0c0 8.179-4.305 12.621-7.153 15.559-2.435 2.513-3.2 3.421-3.2 5.815s.77 3.3 3.206 5.817c2.848 2.938 7.152 7.38 7.152 15.559s-4.305 12.621-7.152 15.559c-2.436 2.514-3.206 3.423-3.206 5.818a7 7 0 0 1 -14 0c-.005-8.18 4.299-12.622 7.147-15.56z'/%3E%3C/svg%3E");
}

.status .num.temp span {
  color: #dcff00;   
  font-size:30px; 
  font-weight:600;
}
.status .num.temp span label {
    font-size:12px;
}

.status .num.info span {
  font-size:30px;
  font-weight: 600;
  text-transform:uppercase;
}
.status .num.info.active span {
  color: #dcff00;  
}
.status .num.info.deactive span {
  color:#ffa100;
}
.p-anemometer {
    margin:20px 0px;
} 
.p-anemometer .wind {
    background-size:50px;
    background-position: 15px 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 368 368'%3E%3Cpath d='M296,48c-39.704,0-72,32.304-72,72c0,4.416,3.576,8,8,8s8-3.584,8-8c0-30.88,25.128-56,56-56s56,25.12,56,56 s-25.128,56-56,56H8c-4.416,0-8,3.584-8,8s3.584,8,8,8h288c39.704,0,72-32.304,72-72S335.704,48,296,48z' fill='%235e5e5e'/%3E%3Cpath d='M144,32c-30.88,0-56,25.12-56,56c0,4.416,3.584,8,8,8s8-3.584,8-8c0-22.056,17.944-40,40-40c22.056,0,40,17.944,40,40 c0,22.056-17.944,40-40,40H8c-4.416,0-8,3.584-8,8s3.584,8,8,8h136c30.88,0,56-25.12,56-56S174.88,32,144,32z' fill='%235e5e5e'/%3E%3Cpath d='M280,224H8c-4.416,0-8,3.584-8,8c0,4.416,3.584,8,8,8h272c22.056,0,40,17.944,40,40c0,22.056-17.944,40-40,40 c-22.056,0-40-17.944-40-40c0-4.416-3.576-8-8-8s-8,3.584-8,8c0,30.88,25.128,56,56,56s56-25.12,56-56S310.872,224,280,224z' fill='%235e5e5e'/%3E%3C/svg%3E");
}
.p-anemometer .gust {
    background-size:50px;
    background-position: 15px 15px;
    background-image: url("data:image/svg+xml,%3Csvg id='Glyph' height='50' viewBox='0 0 64 64' width='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m4 15.80676c0 3.98065 4.75494 7.2331 13.44641 9.24024-3.11243 1.11969-4.6878 2.60772-4.6878 4.43451 0 3.95666 7.96521 5.86206 15.42858 6.32739.8443.0365 3.48273.12665 3.98261.12665.92969 0 1.90253-.024 2.90417-.07483 6.06073.59582 8.50916 2.41583 8.50916 3.074 0 .946-4.24738 3.25818-12.1214 3.25818s-12.1214-2.31219-12.1214-3.25818a1.4737 1.4737 0 0 0 -2.94739 0c0 2.70081 3.33692 4.80579 8.99463 5.72779a3.11777 3.11777 0 0 0 -1.08795 2.29687c0 2.97424 4.52655 4.48529 9.04932 4.9516a3.98064 3.98064 0 0 0 -.55261 1.99945c0 3.04334 3.62854 5.42652 8.2597 5.42652a1.47367 1.47367 0 1 0 0-2.94733c-3.24286 0-5.31238-1.468-5.31238-2.47919 0-.64471.75794-1.371 1.939-1.86322a32.22279 32.22279 0 0 0 3.24573-.23987 1.47363 1.47363 0 1 0 -.38184-2.92242 30.25977 30.25977 0 0 1 -3.90393.24756c-6.101 0-9.23639-1.66748-9.40241-2.11939.08637-.2312 1.23383-1.2962 4.85572-1.88336 7.18512-.11322 14.43457-2.07239 14.43457-6.195 0-1.60321-1.12732-2.98382-3.28314-4.04211 5.38336-1.12921 8.32208-3.028 8.32208-5.41113a1.4737 1.4737 0 0 0 -2.94739-.001c-.06525.81647-5.321 3.50769-16.45227 3.50769-11.13611 0-16.39758-2.69122-16.46381-3.50482.03931-.44232 2.413-2.27094 9.50507-3.1239a91.12833 91.12833 0 0 0 10.38007.591c.0086 0 2.0119-.02014 2.02441-.02014 7.968-.28784 16.00708-2.59815 16.00708-7.11414 0-4.68585-8.91595-7.13818-17.72351-7.13818-5.25287 0-10.16034.84717-13.46466 2.32373a1.4747 1.4747 0 0 0 .0758 2.7229 1.45443 1.45443 0 0 0 1.12732-.03265c2.93781-1.31348 7.40778-2.06659 12.26154-2.06659 9.56067 0 14.77612 2.76794 14.77612 4.19079 0 1.50629-5.11468 3.879-13.11731 4.16773l-1.93707.01922c-17.76477 0-28.67346-4.77417-28.67346-8.19641s10.90872-8.19637 28.67349-8.19637c8.64832 0 16.80823 1.1983 22.38922 3.28894a1.47415 1.47415 0 0 0 1.03333-2.76129c-5.90052-2.20856-14.4375-3.475-23.42255-3.475-15.7135 0-31.62085 3.82809-31.62085 11.14376z' fill='%235e5e5e'/%3E%3C/svg%3E");
}
.p-anemometer .avg {
    background-size:50px;
    background-position: 15px 15px;
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' enable-background='new 0 0 48 48' height='50' viewBox='0 0 48 48' width='50' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath fill='%235e5e5e' d='m5.06 11.56c.33-.33 8.15-7.95 17.99.1 3.96 3.24 7.72 4.33 10.96 4.33 6.51 0 10.98-4.36 11.05-4.43.59-.59.59-1.54 0-2.12-.59-.59-1.54-.59-2.12 0-.33.33-8.15 7.95-17.99-.1-11.91-9.75-21.91 0-22.01.1-.59.59-.59 1.54 0 2.12.59.59 1.53.59 2.12 0z'/%3E%3Cpath fill='%235e5e5e' d='m5.06 20.56c.33-.33 8.15-7.95 17.99.1 3.96 3.24 7.72 4.33 10.96 4.33 6.51 0 10.98-4.36 11.05-4.43.59-.59.59-1.54 0-2.12-.59-.59-1.54-.59-2.12 0-.33.33-8.15 7.95-17.99-.1-11.91-9.75-21.91 0-22.01.1-.59.59-.59 1.54 0 2.12.59.59 1.53.59 2.12 0z'/%3E%3Cpath fill='%235e5e5e' d='m5.06 29.56c.33-.33 8.15-7.95 17.99.1 3.96 3.24 7.72 4.33 10.96 4.33 6.51 0 10.98-4.36 11.05-4.43.59-.59.59-1.54 0-2.12-.59-.59-1.54-.59-2.12 0-.33.33-8.15 7.95-17.99-.1-11.91-9.74-21.91 0-22.01.1-.59.59-.59 1.54 0 2.12.59.59 1.53.59 2.12 0z'/%3E%3Cpath fill='%235e5e5e' d='m5.06 38.56c.33-.33 8.15-7.95 17.99.1 3.96 3.24 7.72 4.33 10.96 4.33 6.51 0 10.98-4.36 11.05-4.43.59-.59.59-1.54 0-2.12-.59-.59-1.54-.59-2.12 0-.33.33-8.15 7.95-17.99-.1-11.91-9.74-21.91 0-22.01.1-.59.59-.59 1.54 0 2.12.59.59 1.53.59 2.12 0z'/%3E%3C/g%3E%3C/svg%3E");
}
.history,
.control {
  margin-top:30px;
  background-color:#272727;
  display:flex;
  border-radius:10px;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding:10px;
}
.control .button {
  display:flex;
}
.control label {
  display: flex;
  align-items: center;
  gap: 10px;
  color:#fff;
}
.control input {
  width:25px;
  height:25px;
  accent-color:#dcff00;
}
.control input[type="checkbox"]:disabled {
  accent-color: #999;
  background-color: #ccc;
}
.control .button svg {
  width:25px;
  height:25px;
}
.form {
  margin-top:30px;
  background-color:#272727;
  display:flex;
  padding:20px;
  border-radius:10px;
}
.form form {
  width:100%;
}
.p-anemometer a,
.p-calendar a,
.history a {
  background-color: #dcff00;
  color: #000;
  border-radius: 6px;
  text-decoration:none;
  padding: 0.6rem 1.2rem;
  width:100%;
  text-align:center;
  font-weight:600;
  font-size: 1rem;
}
.calendar {
  display:flex;
  justify-content: center;
  gap:10px;
  margin-bottom:20px;
}
.calendar input {
  background-color: #272727;
  padding: 0.4rem;
  border: 0px;
  border-radius: 5px;
  box-sizing: border-box;
  color: #fff;
  height: 40px;
  width:200px;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10h5v5H7z' opacity='.3'/><path d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zm0-13H5V6h14v1z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}
.calendar input::-webkit-calendar-picker-indicator {
  opacity: 0;
  z-index: 1;
  position: relative;
}
.calendar button {
  background-color: #dcff00;
  color: #000;
  border-radius: 6px;
  text-decoration: none;
  padding: 0.6rem 1.2rem;
  text-align: center;
  font-weight: 600;
  border:0px;
  cursor: pointer;
}
.loading-spinner {
    position:fixed;
    width:100%;
    height:100%;
    background-color:#0e0c0d;
    display:flex;
    justify-content: center;
    align-items: center;
    top:0px;
    left:0px;
}
.loading-spinner svg {
    width:80px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* button */
.p-anemometer .p-button,
.p-calendar .p-button {
    display:flex;
    margin-top: 20px;
    width: 100%;
}

.p-calendar .p-button a {
    background-color:#ffa100;
}
.p-anemometer .p-button a {
    background-color:#dcff00;
}
/* calendar */ 

.p-calendar {
    background-color: #272727;
    border-radius: 10px;
    margin-top: 30px;
    padding: 10px;
}
.p-calendar .list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);  
    gap: 12px; /
}
.p-calendar .list .box {
    background-color:#000;
    height:150px;
    border-radius:5px;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position:relative;
    overflow: hidden;
    -webkit-animation: scale-in-ver-bottom 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: scale-in-ver-bottom 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        
}
.p-calendar .list .box span {
    z-index: 1;
    position: relative;
    -webkit-animation: bounce-in-fwd 1.1s 2s both;
            animation: bounce-in-fwd 1.1s 2s both;
}
.p-calendar .list .box:after,
.p-calendar .list .box:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(var(--temp) * 1%);
    background-position: 0 0;
    background-repeat: repeat-x;
    background-size: cover;

}
.p-calendar .list .box:after {
    animation: moveWave 8s linear infinite alternate;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 211 211'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23ffa100; %7D %3C/style%3E%3C/defs%3E%3C!-- Generator: Adobe Illustrator 28.7.10, SVG Export Plug-In . SVG Version: 1.2.0 Build 236) --%3E%3Cg%3E%3Cg id='Layer_1'%3E%3Cg id='Layer_1-2' data-name='Layer_1'%3E%3Cpath id='wave2' class='cls-1' d='M438.5,19.4v223.1H-57.5V7.6c43.3,1.2,46,11.9,94.4,11.9s51.2-12,102.4-12,51.2,12,102.4,12,51.2-12,102.4-12,51,10.7,94.4,11.9Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");   
}
.p-calendar .list .box:before {
    animation: moveWave2 8s linear infinite alternate;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 211 211'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23e58800; %7D %3C/style%3E%3C/defs%3E%3C!-- Generator: Adobe Illustrator 28.7.10, SVG Export Plug-In . SVG Version: 1.2.0 Build 236) --%3E%3Cg%3E%3Cg id='Layer_1'%3E%3Cg id='Layer_1-2' data-name='Layer_1'%3E%3Cpath id='wave1' class='cls-1' d='M496,19.4v223.1H0V7.6c43.3,1.2,46,11.9,94.4,11.9s51.2-12,102.4-12,51.2,12,102.4,12,51.2-12,102.4-12,51,10.7,94.4,11.9Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}    
@keyframes moveWave {
  0% { background-position-x: 0; }
  100% { background-position-x: 200px; }
}
@keyframes moveWave2 {
  0% { background-position-x: 0; }
  100% { background-position-x: -200px; } 
}
@-webkit-keyframes scale-in-ver-bottom {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}
@-webkit-keyframes bounce-in-fwd {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-fwd {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(0.84);
            transform: scale(0.84);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


@keyframes scale-in-ver-bottom {
  0% {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}

.p-calendar .list .date {
    color:#fff;
    text-align:center;
    font-size:12px;
    padding-top:8px;
}

/* p-head */




form label {
  display: block;
  font-size:12px;
  display:flex;
  margin-bottom:3px;
  color:#fff;
}

form input[type="text"],
form input[type="password"],
form input[type="number"],
form input[type="time"] {
  width: 100%;
  padding: 0.4rem;
  margin-top: 0.3rem;
  border: 0px;
  border-radius: 5px;
  box-sizing: border-box;
  color:#fff;
  height: 40px;
  background-color: #0e0c0d;
}

form button {
  margin-top: 1.5rem;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  background-color:#dcff00;
  color:#000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight:600;
}

#manualControls {
  text-align: center;
}

#manual_mode {
  transform: scale(1.2);
  margin-right: 0.5rem;
}

#relay_on_btn,
#relay_off_btn {
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  display:flex;
  transition: background-color 0.3s ease;
}

#relay_on_btn {
  background-color:#dcff00;
  color: #000;
}
#relay_off_btn {
  background-color: #ffa100;
  color:#000;
}
#relay_on_btn:disabled,
#relay_off_btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media screen and (max-width: 480px) {


  form input,
  form button {
    font-size: 1rem;
  }

  .chart-container {
    overflow-x: scroll;
    width: 350px;
  }
}


*,
*::before,
*::after {
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
[class*="z-col-"] {
    width:100%;
    float:left;
    word-wrap:break-word;
}
body {
    font-size:1rem;
    line-height:1.5;
}
.z-button a {
    outline:none;
    cursor:pointer;
    line-height:1.5;
    user-select:none;
    white-space:nowrap;
    font-family:inherit;
    display:inline-block;
    text-decoration:none;
    vertical-align:middle;
    border:1px solid transparent;
    
    -ms-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
}
.z-button a:hover {
    text-decoration:none;
    border:1px solid transparent;
}
.z-static   {
    position:static !important;
}
.z-relative {
    position:relative !important;
}
.z-absolute {
    position:absolute !important;
}
.z-fixed {
    position:fixed !important;
}
.z-sticky {
    position:sticky !important;
    position:-webkit-sticky !important;
}
.z-fixed-top {
    top:0;
    left:0;
    right:0;
    z-index:1030;
    position:fixed;
}
.z-fixed-bottom {
    left:0;
    right:0;
    bottom:0;
    z-index:1030;
    position:fixed;
}
.z-container {
    width:1170px;
    margin:0px auto;
    padding-right:15px;
    padding-left:15px;
    --z-container:1170px;
}
.z-container img {
    height:auto;
    max-width:100%;
}
.z-container-fluid {
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-right:15px;
    padding-left:15px;
    
    --z-container: 100%;
}
.z-row {
    flex-wrap:wrap;
    display:-ms-flexbox;
    display:flex;
    
    -ms-flex-wrap:wrap;
}
.z-col {
    --z-col-1:8.33%;
    --z-col-2:16.66%;
    --z-col-3:25%; 
    --z-col-4:33.33%;
    --z-col-5:41.66%;
    --z-col-6:50%;
    --z-col-7:58.33%;
    --z-col-8:66.66%;
    --z-col-9:75%; 
    --z-col-10:83.33%;
    --z-col-11:91.66%;
    --z-col-12:100%; 
}
.z-col-1  {width:8.33%;}
.z-col-2  {width:16.66%;}
.z-col-3  {width:25%;}
.z-col-4  {width:33.33%;}
.z-col-5  {width:41.66%;}
.z-col-6  {width:50%;}
.z-col-7  {width:58.33%;}
.z-col-8  {width:66.66%;}
.z-col-9  {width:75%;}
.z-col-10 {width:83.33%;}
.z-col-11 {width:91.66%;}
.z-col-12 {width:100%;}
.z-flex         {display:flex !important;}
.z-none         {display:none !important;}
.z-block        {display:block !important;}
.z-table        {display:table !important;}
.z-inline       {display:inline !important;}
.z-inline-block {display:inline-block !important;}
@media (min-width: 576px) {
    .z-container {width:540px;--z-container:540px;}
    
    .z-col-sm-2  {width:16.66%;}
    .z-col-sm-3  {width:25%;}
    .z-col-sm-1  {width:8.33%;}
    .z-col-sm-4  {width:33.33%;}
    .z-col-sm-5  {width:41.66%;}
    .z-col-sm-6  {width:50%;}
    .z-col-sm-7  {width:58.33%;}
    .z-col-sm-8  {width:66.66%;}
    .z-col-sm-9  {width:75%;}
    .z-col-sm-10 {width:83.33%;}
    .z-col-sm-11 {width:91.66%;}
    .z-col-sm-12 {width:100%;}
    .z-sm-flex         {display:flex !important;}
    .z-sm-none         {display:none !important;}
    .z-sm-block        {display:block !important;}
    .z-sm-table        {display:table !important;}
    .z-sm-inline       {display:inline !important;}
    .z-sm-inline-block {display:inline-block !important;}
}
@media (min-width: 768px) {
    .z-container {width:720px;--z-container:720px;}
    
    .z-col-md-1  {width:8.33%;}
    .z-col-md-2  {width:16.66%;}
    .z-col-md-3  {width:25%;}
    .z-col-md-4  {width:33.33%;}
    .z-col-md-5  {width:41.66%;}
    .z-col-md-6  {width:50%;}
    .z-col-md-7  {width:58.33%;}
    .z-col-md-8  {width:66.66%;}
    .z-col-md-9  {width:75%;}
    .z-col-md-10 {width:83.33%;}
    .z-col-md-11 {width:91.66%;}
    .z-col-md-12 {width:100%;}
    .z-md-flex         {display:flex !important;}
    .z-md-none         {display:none !important;}
    .z-md-block        {display:block !important;}
    .z-md-table        {display:table !important;}
    .z-md-inline       {display:inline !important;}
    .z-md-inline-block {display:inline-block !important;}
}
@media (min-width: 992px) {
    .z-container {width:960px;--z-container:960px;}
    
    .z-col-lg-1  {width:8.33%;}
    .z-col-lg-2  {width:16.66%;}
    .z-col-lg-3  {width:25%;}
    .z-col-lg-4  {width:33.33%;}
    .z-col-lg-5  {width:41.66%;}
    .z-col-lg-6  {width:50%;}
    .z-col-lg-7  {width:58.33%;}
    .z-col-lg-8  {width:66.66%;}
    .z-col-lg-9  {width:75%;}
    .z-col-lg-10 {width:83.33%;}
    .z-col-lg-11 {width:91.66%;}
    .z-col-lg-12 {width:100%;}
    .z-lg-flex         {display:flex !important;}
    .z-lg-none         {display:none !important;}
    .z-lg-block        {display:block !important;}
    .z-lg-table        {display:table !important;}
    .z-lg-inline       {display:inline !important;}
    .z-lg-inline-block {display:inline-block !important;}
}
@media (min-width: 1200px) {
    .z-container {width:1140px;--z-container:1140px;}
    .z-col-lx-1  {width:8.33%;}
    .z-col-lx-2  {width:16.66%;}
    .z-col-lx-3  {width:25%;}
    .z-col-lx-4  {width:33.33%;}
    .z-col-lx-5  {width:41.66%;}
    .z-col-lx-6  {width:50%;}
    .z-col-lx-7  {width:58.33%;}
    .z-col-lx-8  {width:66.66%;}
    .z-col-lx-9  {width:75%;}
    .z-col-lx-10 {width:83.33%;}
    .z-col-lx-11 {width:91.66%;}
    .z-col-lx-12 {width:100%;}
    .z-lx-flex         {display:flex !important;}
    .z-lx-none         {display:none !important;}
    .z-lx-block        {display:block !important;}
    .z-lx-table        {display:table !important;}
    .z-lx-inline       {display:inline !important;}
    .z-lx-inline-block {display:inline-block !important;}
}
@media (min-width: 1400px) {
    .z-container {width:1340px;--z-container:1340px;}
    .z-col-lxx-1  {width:8.33%;}
    .z-col-lxx-2  {width:16.66%;}
    .z-col-lxx-3  {width:25%;}
    .z-col-lxx-4  {width:33.33%;}
    .z-col-lxx-5  {width:41.66%;}
    .z-col-lxx-6  {width:50%;}
    .z-col-lxx-7  {width:58.33%;}
    .z-col-lxx-8  {width:66.66%;}
    .z-col-lxx-9  {width:75%;}
    .z-col-lxx-10 {width:83.33%;}
    .z-col-lxx-11 {width:91.66%;}
    .z-col-lxx-12 {width:100%;}
    .z-lxx-flex         {display:flex !important;}
    .z-lxx-none         {display:none !important;}
    .z-lxx-block        {display:block !important;}
    .z-lxx-table        {display:table !important;}
    .z-lxx-inline       {display:inline !important;}
    .z-lxx-inline-block {display:inline-block !important;}
}
@media (max-width: 576px) {
    .z-container { width:100%; }
}




:root {
    --bs-rows:1;
    --bs-columns:12;
    --bs-gap:1rem;
    --bs-size:300px;
}

.g-grid {
    display: grid;
    grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
    grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
    gap: var(--bs-gap, 1.5rem);
}
.g-grid-px {
    display: grid;
    gap: var(--bs-gap, 1.5rem);         
}

.g-col-1  { grid-column: auto/span 1; }
.g-col-2  { grid-column: auto/span 2; }
.g-col-3  { grid-column: auto/span 3; }
.g-col-4  { grid-column: auto/span 4; }
.g-col-5  { grid-column: auto/span 5; }
.g-col-6  { grid-column: auto/span 6; }
.g-col-7  { grid-column: auto/span 7; }
.g-col-8  { grid-column: auto/span 8; }
.g-col-9  { grid-column: auto/span 9; }
.g-col-10 { grid-column: auto/span 10; }
.g-col-11 { grid-column: auto/span 11; }
.g-col-12 { grid-column: auto/span 12; }


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .z-grid-px {
        grid-template-columns: repeat(auto-fit, minmax(var(--bs-size), 1fr));
    }

    .g-col-sm-1  { grid-column: auto/span 1; }
    .g-col-sm-2  { grid-column: auto/span 2; }
    .g-col-sm-3  { grid-column: auto/span 3; }
    .g-col-sm-4  { grid-column: auto/span 4; }
    .g-col-sm-5  { grid-column: auto/span 5; }
    .g-col-sm-6  { grid-column: auto/span 6; }
    .g-col-sm-7  { grid-column: auto/span 7; }
    .g-col-sm-8  { grid-column: auto/span 8; }
    .g-col-sm-9  { grid-column: auto/span 9; }
    .g-col-sm-10 { grid-column: auto/span 10; }
    .g-col-sm-11 { grid-column: auto/span 11; }
    .g-col-sm-12 { grid-column: auto/span 12; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .g-col-md-1  { grid-column: auto/span 1; }
    .g-col-md-2  { grid-column: auto/span 2; }
    .g-col-md-3  { grid-column: auto/span 3; }
    .g-col-md-4  { grid-column: auto/span 4; }
    .g-col-md-5  { grid-column: auto/span 5; }
    .g-col-md-6  { grid-column: auto/span 6; }
    .g-col-md-7  { grid-column: auto/span 7; }
    .g-col-md-8  { grid-column: auto/span 8; }
    .g-col-md-9  { grid-column: auto/span 9; }
    .g-col-md-10 { grid-column: auto/span 10; }
    .g-col-md-11 { grid-column: auto/span 11; }
    .g-col-md-12 { grid-column: auto/span 12; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .g-col-lg-1  { grid-column: auto/span 1; }
    .g-col-lg-2  { grid-column: auto/span 2; }
    .g-col-lg-3  { grid-column: auto/span 3; }
    .g-col-lg-4  { grid-column: auto/span 4; }
    .g-col-lg-5  { grid-column: auto/span 5; }
    .g-col-lg-6  { grid-column: auto/span 6; }
    .g-col-lg-7  { grid-column: auto/span 7; }
    .g-col-lg-8  { grid-column: auto/span 8; }
    .g-col-lg-9  { grid-column: auto/span 9; }
    .g-col-lg-10 { grid-column: auto/span 10; }
    .g-col-lg-11 { grid-column: auto/span 11; }
    .g-col-lg-12 { grid-column: auto/span 12; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .g-col-lx-1  { grid-column: auto/span 1; }
    .g-col-lx-2  { grid-column: auto/span 2; }
    .g-col-lx-3  { grid-column: auto/span 3; }
    .g-col-lx-4  { grid-column: auto/span 4; }
    .g-col-lx-5  { grid-column: auto/span 5; }
    .g-col-lx-6  { grid-column: auto/span 6; }
    .g-col-lx-7  { grid-column: auto/span 7; }
    .g-col-lx-8  { grid-column: auto/span 8; }
    .g-col-lx-9  { grid-column: auto/span 9; }
    .g-col-lx-10 { grid-column: auto/span 10; }
    .g-col-lx-11 { grid-column: auto/span 11; }
    .g-col-lx-12 { grid-column: auto/span 12; }
}
/* Extra large devices (large desktops, 1400px and up) */
@media (min-width: 1400px) {
    .g-col-lxx-1  { grid-column: auto/span 1; }
    .g-col-lxx-2  { grid-column: auto/span 2; }
    .g-col-lxx-3  { grid-column: auto/span 3; }
    .g-col-lxx-4  { grid-column: auto/span 4; }
    .g-col-lxx-5  { grid-column: auto/span 5; }
    .g-col-lxx-6  { grid-column: auto/span 6; }
    .g-col-lxx-7  { grid-column: auto/span 7; }
    .g-col-lxx-8  { grid-column: auto/span 8; }
    .g-col-lxx-9  { grid-column: auto/span 9; }
    .g-col-lxx-10 { grid-column: auto/span 10; }
    .g-col-lxx-11 { grid-column: auto/span 11; }
    .g-col-lxx-12 { grid-column: auto/span 12; }
}