/* Google Fonts - Poppins */
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
 }
 #container_form {
   height: 100vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: white;
   column-gap: 30px;
 }

 #container_graphs {
   height: 100vh;
   width: 100%;
   /* display: flex; */
   align-items: center;
   justify-content: center;
   background-color: white;
   column-gap: 30px;
   display: none;
 }

 .form {
   position: absolute;
   max-width: 430px;
   width: 100%;
   padding: 30px;
   border-radius: 6px;
   background: #fff;
 }
 .form.signup {
   opacity: 0;
   pointer-events: none;
 }
 .forms.show-signup .form.signup {
   opacity: 1;
   pointer-events: auto;
 }
 .forms.show-signup .form.login {
   opacity: 0;
   pointer-events: none;
 }
 header {
   font-size: 28px;
   font-weight: 600;
   color: #232836;
   text-align: center;
 }
 form {
   margin-top: 30px;
 }
 .form .field {
   position: relative;
   height: 50px;
   width: 100%;
   margin-top: 20px;
   border-radius: 6px;
 }
 .field input,
 .field button {
   height: 100%;
   width: 100%;
   border: none;
   font-size: 16px;
   font-weight: 400;
   border-radius: 6px;
 }
 .field input {
   outline: none;
   padding: 0 15px;
   border: 1px solid#CACACA;
 }
 .field input:focus {
   border-bottom-width: 2px;
 }
 .eye-icon {
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
   font-size: 18px;
   color: #8b8b8b;
   cursor: pointer;
   padding: 5px;
 }
 .field button {
   color: #fff;
   background-color: #0171d3;
   transition: all 0.3s ease;
   cursor: pointer;
 }
 .field button:hover {
   background-color: #016dcb;
 }

 

 .form a {
   color: #0171d3;
   text-decoration: none;
 }
 .form-content a:hover {
   text-decoration: underline;
 }

 @media screen and (max-width: 400px) {
   .form {
     padding: 20px 10px;
   }
 }

 #map {
   /* width: 100vW; */
   height: 500px;
   padding: 0;
   margin: 0;
   /* margin-top: 20px; */
 }

 .address {
   cursor: pointer;
   border: 3px solid #1c6ea4;
   border-radius: 9px;
   padding: 5px;
   margin: 4px;
   margin-bottom: 8px;
 }

 .address:hover {
   background-color: #92a4a2;
 }

 #chartdiv1 {
   width: 350px;
   height: 350px;
   display: inline-flex;
 }

 #chartdiv2 {
   width: 350px;
   height: 350px;
   display: inline-flex;
 }

 #chartdiv3 {
   width: 350px;
   height: 350px;
   display: inline-flex;
 }

 #chartdiv4 {
   width: 100%;
   height: 500px;
   max-width: 100%;
 }

 #chartdiv5 {
   width: 100%;
   height: 500px;
   max-width: 100%;
 }

 #chartdiv6 {
   width: 100%;
   height: 500px;
   max-width: 100%;
 }