style.css

body{
    /* background-color: darkturquoise; */
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    list-style: none;
    color: white;
}
main{
    width: 98%;
    margin: auto;
    display: grid;
    grid-template-columns:17% 55% 25%;
    grid-auto-rows: minmax(110vh, auto);
    grid-gap: 13px;
    background-color: #0000001A;
    /* background-color: black; */
}
main a{
    cursor: pointer;
    text-decoration: none;
    color: black;
}

section{
    width: 100%;

}
figure{
    margin-left: unset;
}
/* styling the header begins here */
.navi{
    width:100%;
}
.navi h3{
    font-size: 1em;
    letter-spacing: 0.02em;
    color: gray;
    font-weight: lighter;
    margin-left: 5%;
}
.head{
    width: 90%;
    margin: auto;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    /* padding: 2%;    */

}
.head h3{
    margin-left: 5%;
}
.head img{
    width: 18%;
    height: 5%;
    /* border: 1px solid black; */
    border-radius: 50%;

}
.set{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.pan{
    width: 100%;
    display: flex;
    /* justify-content: space-around; */
    align-items: center;

}
.pan p{
    color: #00000066;
    /* opacity: 0.7; */
    margin-left: 10%;
}
.set ul li{
  margin-top: 2%;
}
.board{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.bud{
    list-style:none;
    /* position: static; */
}
.bud span{
    width: 100%;
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    margin-top: 2%;
}
.dew{
   width: 18px;
   height: 18px;
   /* border: 1px solid black; */
}
.bud span li{
    margin-left: 5%;
}
.menu{
    position: relative;
    display: inline-block;
    /* flex-direction: column; */
}
.dropmenu{
  position: absolute;
  min-width: 150px;
  /* z-index: 1; */
  display: none;
  list-style: none;
}
 .menu:hover .dropmenu{
    display: block;
    min-width: 200px;
    position: relative;
}
.dropmenu li a{
    margin-left: 10%;
}
.dropmenu li:hover{
    background-color: lightgray;
    width: 100%;
    /* text-align: center; */
    border: 10px;
    padding: 2px;

}
.dropmenu li a{
    text-align: center;
    font-weight: bolder;
}



/* stylin the middle content begins here */
.analysis{
    width: 100%;
    /* height: auto; */
    display: flex;
    flex-direction: column;

}
/* styling of second header */
.anal{
    width: 100%;
    height: 70px;
    display: flex;
    /* justify-content: flex-start; */
    align-items: center;
    /* height: 10%; */
    /* background-color: aqua; */
}
.anal span{
  width:30%;
  display: flex;
}
.anal span:nth-child(4){
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    /* display: none; */
    margin-right: 2%;
}

.anal nav{
    display: flex;
    list-style: none;
    position: relative;
    left: -5vh;
    justify-content: flex-start;
}
.anal nav li{
    margin-left: 10%;
}
.dews{
    width: 15px;
    height: 15px;
    /* background-color: palevioletred; */
    margin-left: 5%;
    border: 1pxsolid black;
}
.search{
    width: 55%;
    height: 25px;
    border-radius: 10px;
    background-color: aliceblue;
}

/* ...............main box of analysis section */
.cards{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 23%);
    grid-auto-rows: minmax(120px, auto);
    grid-gap: 12px;
    border: none;
    margin-left: unset;
    /* padding: 5px; */

}
.day{
    width: 100%;
    /* border: 1px solid saddlebrown; */
    height: 5%;
    /* color: white; */
    font-size: 1.2em;
    letter-spacing: 0.05em;
    position: relative;
    /* top: 5%; */
}
.box{
    border: none;
    width: auto;
    height: auto;
    border-radius: 15px;
    color: black;
    padding: 0px 5px;

}
.box:nth-child(1){
    background-color: #e3f5ff;
}
.box:nth-child(2){
    background-color: #efecf6
}
.box:nth-child(3){
    background-color:#e3f5ff;
}
.box:nth-child(4){
    background-color: #efecf6;
}
.box h3{
    color: black;
    font-size: 1.2em;
    letter-spacing: 0.05em;
}
.box span{
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.box span h1{
    font-size: 1.7em;
}
.box span p{
    font-size: 12px;
    font-weight: 500;
}
   /* styling the chart and graphs */
.charts{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 22%);
    grid-auto-rows: minmax(250px, auto);
    grid-gap: 15px;
    /* margin-top: 5%; */
    /* border: 1px solid red; */

}
.chart{
    width: 100%;
    /* margin: auto; */
    background-color:#00000033;
    border-radius: 10px;

}
/* .chart a{
    /* color: white; */
/* } */
.chart1{
    width: 100%;
    grid-column: 1/4;
    position: relative;
    z-index: 0;
}
.list{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.list ul:nth-child(1){
    width: 60%;
    height: 10%;
    display: flex;
    list-style: none;

}
.list ul:nth-child(3){
    width: 40%;
    height: 10%;
    display: flex;
    list-style: none;
    /* border: 1px solid pink; */
}
.list ul li a.active{
    font-weight: 1000;
    opacity: unset;

}
.chart ul li{
    font-size: 0.65em;
    margin-left: 5%;

}
hr{
    width: 5%;
    height:  5%;
    rotate: 90deg;
}
.chart1{
    background-image: url(image/ChartScale.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 20%;
}
.chart1 img{
    margin: 5% 5%;
    width: 89%;
    height: 70%;
}
.line{
    position:relative;
    top: -50vh;
    z-index: 1;
    width: 200px;

}
.chart2 {
    width: 100%;
    grid-column: 4/5;
}
.chart2 h3{
    font-size: 1.2em;
    text-align: center;
}
.cht2{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* border: 1px solid blanchedalmond; */
}

.cht2 ul{
    /* width: 20%; */
    list-style: none;
    position: relative;
    right: 20%;
    bottom: 1.2vh;


}
.cht2 ul li{
    font-size: 0.8em;
     margin-top: 24%;

}
.frame{
    width: 80%;
    height: 80%;

}
.frame img{
    width:100%;
    /* text-align: center; */

}
.chart3{
    width: 100%;
    display: flex;
    justify-content: center;
    /* align-items: baseline; */
    grid-column: 1/3;
    background-image: url(image/ChartScale\ \(1\).png);
    background-repeat: no-repeat;
    background-size:contain;
    background-position: 20%;
}
.histo{
   width:50%;
   height: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: auto;
   /* border: 1px solid black; */
}
/* .histo div{
    width:8%;
    height: 50%;
    border: 1px solid black;
    position: relative;
    /* top: 20%; */
    /* margin-left: 10%; */
/* }
.histo div:nth-child(){
    height: ;
}
.histo div:nth-child(){
    height: ;
}
.histo div:nth-child(){
    height: ;
}
.histo div:nth-child(){
    height: ;
}
.histo div:nth-child(){
    height: ;
} */

.histo  img{
    width: 50px;
    height: 100%;
    margin-left: unset;
}
.chart4{
    grid-column: 3/5;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0px 5px;
    justify-content: space-around;
}
.cht4{
    width: 98%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* color: white; */
}
.cht4 h3{
    font-size:1.3em;
}
.cht4 img{
    width: 60%;
    height: 60%;
}
.cht4 ul{
    width: 40%;
    list-style: none;
    /* border: 1px solid white; */
    /* margin-left: 20px; */
}
.cht4 ul:nth-child(2){
    list-style-type: circle;
}
.cht4 ul li{
    font-size: 0.8em;
    margin-top: 15%;
    opacity: 0.7;
}
.cht4  .active{
    font-weight: bolder;
    opacity: 1;
    font-size: 0.7em;
    /* color: pink; */
}
.chart5{
    grid-column: 1/5;
    background-image: url(image/ChartScale\ \(1\).png);
    background-repeat: no-repeat;
    background-size:contain;
    background-position: 20% 10%;
    /* height: 20%; */
}
.chart5 h3{
    /* color: white; */
    margin-left: 5%;
}
.chart5 {
    width: 100%;
}






/* ..............styling for second screen... */
@media screen and (min-width:500px) and (max-width: 800px){
    main{
        /* height: 90vh; */
        grid-template-columns: repeat(2, 48%);
        margin: auto;
    }
    .navi{
        display: none;
    }
    .anal nav{
        display: none;
    }
    .side:hover .navi{
        display: block;
    }
}

/* ...................styling for small screen......... */
@media screen and (min-width:100px) and (max-width: 499px){
    main{
        width: 100%;
        /* height: 100vh; */
        grid-template-columns: repeat(1, 1fr);
    }
    .navi{
     display: none;
    }

}



    /*responsive styling for the second section ? */
 @media screen and (min-width:800px) and (max-width: 1024px){

   .cards{
    display: grid;
    grid-template-columns: repeat(2, 45%);
    grid-auto-rows: minmax(200px, auto);
    margin-left: 2%;
   }
   .analysis h3{
       top: unset;
   }

/* ..................responsive styling of charts begins here */
    .charts{
        display: grid;
    grid-template-columns: repeat(3, 30%);
    grid-auto-rows: minmax(300px, auto);
    }
    .chart1{
        grid-column: 1/3;
    }
    .chart2{
        grid-column: 3/4;
    }
    .cht2{
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        /* display: none; */
        /* border: 1px solid blanchedalmond; */
    }

    .cht2 ul{
        width: 20%;
        list-style: none;
        position: relative;
        /* bottom: unset;
        m   */


    }
    .cht2 ul li{
        font-size: 0.8em;
         margin-left: unset;
         position: relative;
         right: 2vh;
    }
    .frame{
        width: 70%;
        height: 70%;
        display: flex;
        flex-wrap: wrap;
        /* border: 1px solid burlywood; */
        text-align: center;
        margin-top: 15%;
    }
    .frame img{
        width:100%;
        text-align: center;

    }

    .chart3{
        grid-column: 1/2;
    }
    .chart4{
        grid-column: 2/4;
    }
    .chart5{
        grid-column: 1/4;
    }
 }

 @media screen and (min-width:100px) and (max-width: 800px){
     .main{
         /* width: 2000px; */
     }

    .cards{
        display: grid;
        grid-template-columns: repeat(1, 95%);
        grid-auto-rows: minmax(200px, auto);
        margin-left: 2%;
       }
       .analysis h3{
           position: relative;
           bottom: -2vh;
       }

    .charts{
        display: grid;
    grid-template-columns: repeat(1, 0.9fr);
    grid-auto-rows: minmax(150px, auto);
    margin-left: 4%;
    }
    .chart1{
        grid-column: unset
    }
    .chart2{
        grid-column:unset ;
    }
    .frame{
        width: 50%;
    }
    .chart3{
        grid-column: unset;
    }
    .chart4{
        grid-column: unset;
    }
    .chart5{
        grid-column: unset;
    }
 }







 /* .....................Notification styling.........? */
 .notificate{
    width: 100%;
    display: flex;
    flex-direction: column;
 }
 .notificate h3{
     margin-left: 5%;
     font-size: 1.2em;
     letter-spacing: 0.05em;
 }
 .notificate a, p, h3{
     color: black;
 }

 .notify{
     width: 100%;
     display: flex;
     flex-direction: column;
     /* justify-content: space-between; */
 }
 .note{
     width: 95%;
     margin: auto;
     display: flex;
     /* justify-content: space-between; */
     align-items: center;
     /* border: 1px solid sandybrown; */

 }
 .icon{
     width: 10%;
     height: 35%;
     border-radius: 10%;
     /* border: 1px solid wheat; */
     text-align: center;
 }
 .iconic{
    width: 10%;
    height: 38%;
    border-radius: 50%;
    /* border: 1px solid wheat; */
    text-align: center;
}
 .note span{
     margin-left: 5%;
 }

 span small{
     position: relative;
     top: -2vh;
     color: gray;
     opacity: 0.7;
     font-size: 12px;
 }

 .icons{
    width: 12%;
    height: 10%;
    border-radius: 50%;
    /* border: 1px solid wheat; */
    text-align: center;
}
 .contacts{
    margin-left: 5%;
}

/* responsive styling for notifications/ */

@media screen and (min-width:1440px) and (max-width: 2500px){
span small{
    position: relative;
    top: unset;
    color: gray;
    opacity: 0.9;
    font-size: 14px;
}
}