style.css

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{font-size: 13px;}
#container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    font-family: 'Roboto Slab', serif;
   
}


/*Menubar*/
#menubar {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    /* padding: 10px; */
    background-color: #fff; 

    color:#afafaf
}
.notification{
  display: none;
}
#sec1, #sec2, #sec3 {
    display: flex;
    padding: 10px;
    flex-direction: column;
   
}

.menuIcons {
    margin-right: 10px;
  cursor: pointer;
}

.menuIcons:nth-child(1) 
{
  background-color: #3e2edf;
  color: white;
  border-radius: 11px;
  padding: 7px;
}

.material-symbols-outlined {
   
    font-size: 24px;
}
.search { display: none;}
#menubar #sec1 img {
    max-width: 100%;
    height: auto;
    height: 2rem;
}
#menubar #sec1  {
  
   gap:2vh;
}
#menubar #sec3  {
   
    gap:2vh;
 }
 #menubar #sec2{
    gap:2vh;
    margin-bottom: 25vh;
    align-items: center;
 }



/* First Component  */
#comp-1{
  padding: 4vw;
    background-color: #fafafa;
    display: flex;
  flex-direction: column;
  
  gap: 2vh;

} 
#profile{
    display: flex;
    flex-direction: row;
    height: 10vh;
    align-items: center;
}
#welcome{
    display:flex;
    flex-direction: column;
}
#welcome #head{font-size: 2rem;
}
#profile img{
    height: 100%;
}
#profile #profileImg{
    height: 100%;
}
#today{
    display: flex;
    flex-direction: column;
    gap:1vh;
    border-radius: 8%;
    padding: 1vh;
}

.heading{
    font-weight: 501;
    font-size:1rem ;
}
#otherbalance{
    display: flex;
   flex-direction: column;
}

  .btn-primary {
    color: #fff;
    background-color: #4935ff;
    border-color: #3e2be9;
    border-radius: 9px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
  }
  .btn-primary:hover {
    color: #fff;
    background-color: #5b49ff;
    border-color: #4a37f0;
  }
  .btn-primary:active {
    color: #fff;
    background-color: #5b49ff;
    border-color: #4a37f0;
  }
  .dropdown{
    margin-top: 1vw;
  }
  #transaction{
      display: flex;
      flex-direction: column;
      
      padding: 1vh;
      gap: 0.7vh;
    margin-top: 2vh;
  }
  .transactionItem{
    font-family: Arial, Helvetica, sans-serif;
    font-size:.8rem ;
  }
  .transactiondetails{
    font-weight: 501;
  }
  .transactionItem .date
  {
      color: #9b9b9b;
     
      font-size: 1rem;
      font-weight: 500;
  }
  #recentTran{
    margin-bottom: 2vh;
  }
  #accbalance #amount{
      font-weight: bold;
      font-size: 1.5rem;
  }
  #otherbalance1{
    font-weight: bold;
    font-size: 1.1rem;
  }
  .balanceDetails{
      color: #9b9b9b;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: 500;
      font-size: 1rem;
  }
  hr{margin-top: 1rem;
    margin-bottom: 1rem;}



/* Second Component */
#comp-2{
  display: flex;
flex-direction: column;
justify-content: space-around;
margin-top: 5vw;

padding: 5vw;
}
.flex-column{
display: flex;
flex-direction: column;
}

#RetIncomeHeader
{
  color:#5745ff
}
#RetirementIncome{
 
  display: flex;
  flex-direction: column;
  gap: 5vh;
}
#startingYear{
  font-weight: bold;
}
#retIncome{
  display: flex;
  flex-direction: column;
}

 #retIncome1 .Income{
   font-weight: bold;
 }
 #retIncome2{
   display: flex;
   gap: 6vw;
 }
 #Incomes{
   display: flex;
   gap: 6vw;
   align-items: center;
 }
 #Incomes hr 
 {
   background-color:#7b6bff;
 }
 #retIncome2 .retIncome .Income{
  font-weight: bold;
}

/* charts */
#Contribution{
  display: flex;
  flex-direction: column;
}
#contributionTitle{font-weight: bold;}
#myChart{
  width: 20vw;
   height:12vw;
}

 select {
  -webkit-appearance:none;
  -moz-appearance:none;
  -ms-appearance:none;
  appearance:none;
  outline:0;
  box-shadow:none;
  border:0!important;
  background: #ffffff;
  background-image: none;

  padding: 0 .5em;
  
  cursor:pointer;
 }
.select{  display: flex;}
  .select::after{
    content: '\25BC';
    color:#7b7b7b;
  }
  
#Comparing-to-peers{
  display: flex;
  flex-direction: column;
  gap: 2vh;
  margin-top: 2vh;
}
#Comparing-to-peers #head {
  font-weight: bold;
}
#content{
  display: flex;

}
#progress{
  display: flex;
  justify-content: space-around;
}
#performance{
  display: flex;
  flex-direction: row;
}
.box{
  width: 35%;
  
  height: 69%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #fff;
  /* box-shadow: 0 30px 60px rgba(0,0,0,.2); */
}
.box .percent {
  position: relative;
  top: -15px;
  width: 85%;
  height: 56%;

}
.box .percent svg {
  /* position: relative; */
  width: 6em;
 
}
.mobile_hr{display: none; }
.box .percent svg circle{
  /* position: relative; */
  /* width: 150px;  */
  /* height: 150px; */
  fill: none;
  stroke-width: 6;
  stroke: #000;
  transform: translate(5px,5px);
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
}
.box .percent svg circle:nth-child(1){
  stroke-dashoffset: 0;
  stroke: #d3f7ee;
  stroke-width: 5;
}
.box .percent svg#i circle:nth-child(2){
  stroke-dashoffset: 296;
  stroke: #22d6aa;
  stroke-width: 9;
}
.box .percent svg#ii circle:nth-child(2){
  stroke-dashoffset: 266;
  stroke: #22d6aa;
  stroke-width: 9;
}
.box .percent svg#iii circle:nth-child(2){
  stroke-dashoffset: 333;
  stroke: #22d6aa;
  stroke-width: 9;
}
.box .percent .number {
  position: absolute;
  /* width: 150px;
  height: 150px; */
  top: 40%;
left: 31%;
  color: #383838;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-size: 1.5rem;
}

.box .percent .number h2{
  font-size: 1.5rem;
}

.box .percent .number h2 span{
  font-size: 1.5 rem;
  position: absolute;
  top: -25%;

}

.box .text {
 font-size: 1rem;  color:#999;
 margin-bottom: 0;
}



/* Component 3*/
#comp-3{
display: flex;
flex-direction: column;

padding: 2vw 4vw 3vw 1vw;
gap: 3vh;
}

#retirementStrategy_i{
  display:flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 1vw;
}

#retirementStrategy{
  display:flex;
  flex-direction: column;
align-items: center;
gap:2vw;
background-color: #fafafa;
border-radius: 20px;
padding: 1.5rem;

}
.emp_detail {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.rangeInput{
  display: flex;
  justify-content: space-around;
}

/* 
@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    
  */
    /* -webkit-appearance: none; */
   
  
/*   
  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    -webkit-appearance: none;
    color: #13bba4;
    margin-top: -1px;
  }
  */
  /* input[type='range']::-webkit-slider-thumb {
    width: 10px;
    -webkit-appearance: none;
    height: 10px;
    cursor: ew-resize;
    border: none;
    background: #ffffff;
    box-shadow: -80px 0 0 80px #616161;
  } 
 */

/** FF*/
input[type="range"]::-moz-range-progress {
background-color: #6898f2; 
}
input[type="range"]::-moz-range-track {  
background-color: #e7e7e7;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #73a4ff;  
}
input[type="range"]::-ms-fill-upper {  
  background-color: #d0d0d0; 
}

#Update {
  color:#eae7ff;
  background-color: #3e2be9;
  border-radius: 8px;
  border: none;
  padding: 10px;
}
.docs{
  color:#4935ff
}

#housingadvance{
  display: flex;
  flex-direction: column;
  padding: 0 2rem;
  border-left: 2px solid #3e2be9;
  gap:0.3rem
}
#housingadvance p{
  margin: 0;
}



/*mobile view*/
@media only screen and (max-width: 600px) {
  #container {
   
    flex-direction: column;
    height: auto;
    align-items: center;
    margin-bottom: 9vh;
   
  }
  #content{
    flex-direction: column;
  }
  .search{display:inline;}
 #sec1 , #sec3 {
     display: none;
 } 
   
#menubar #sec2 {
position: fixed;
flex-direction: row;
bottom: 0;
margin-bottom: 0;
background-color: white;
width:100%;
z-index: 1;
justify-content: space-around;
}
.box {width: 21%;}
.box .percent {
  width: 6rem;
  height: 6rem;
  }
  .box .percent svg {
    height: 100%;
    }
    .box .percent .number {
      top: 33%;
left: 27%;
      }
  #content {
    gap:2vh
  }
  .mobile_hr{
    display: inline ;
  }
  #comp-1 {
    background-color: #ffffff;
    }
    #otherbalance {flex-direction: row;}
    #dropdownMenuButton{
      width:90%;
    }
    .notification{display: inline;
    position: fixed;
    top: 3vh;
    right:10vw;
  }
  #Incomes {
    flex-direction: column;
    align-items: unset;
    }
    #today{padding: 3vh;
      background-color: #fafafa;
      width: 96%;}
}

.select label {
  margin-bottom: 0;
}