.dashboardGraphMain {


    background: var(--color-background);





    margin: var(--size-padding);


    padding: var(--size-padding);


    border-radius: 0.6vmin;


    height: 592px;


    width: 100%;


    display: flex;


    flex-direction: column;


}


.dashboardGraphTop {


    display:flex;


    flex-direction:row;


    width:100%;


    justify-content:space-between


}








.dashboardGraphButton{


  display: inline-block;


  padding: 6px 10px;


  cursor: pointer;


  font-size: 11.5px;


  font-weight: 500;


  letter-spacing: 1.1px;


  text-transform: uppercase;


  color: rgba(17, 51, 83, 0.3);


  border-radius: 6px;


  border: 1px solid rgb(243, 245, 247);


  background: rgb(248 249 251);


  margin: 0px 5px;


  transition: 400ms ease padding;


  &:first-child {


    margin: 0px 5px 0px 0px;


  }


  &:last-child {


    margin: 0px 0px 0px 5px;


  }


  &.active{


    color: rgb(5,15,25) !important;


    padding: 6px 14px;


    border: 1px solid rgb(231 235 239);


    background: rgb(231 235 239);


  }


  &:hover{


    color: #2681eb;


  }


}


.dateButtons{


  position: relative;


  align-self: flex-start;


  display: flex;


  height: 100%;


  align-items: center;


  min-width: 198px;


  margin-left: 25px;


  margin-right: -5px;


  text-align: right;


  @media (max-width: 1000px) {


    margin-right: 0px;


  }


  @media (max-width: 650px) {


    display: none;


  }


}


.baseChangeName{


  font-weight: 500;


  font-size: 14.5px;


  color: #2c3753db;


}


.valueName{


  margin-top: 5px;


  line-height: 1.3;


  color: rgb(5, 15, 25);


  font-size: 25px;


  font-weight: 500;


}


.titleName{


  font-weight: 500;


  font-size: 13.5px;


  color: #2c3753db;


  letter-spacing: 0.27px;


}


#selectedDashboardGraph {


    color: var(--color-icon-square-selected);


    background:var(--color-background-selected);


    pointer-events: none;


    padding: calc(4px + 0.4vmin) calc(15px + 0.7vmin);


}


.dashboardGraphButton {


    /* UI Properties */


    background: var(--color-background-buton-dashboard) 0% 0% no-repeat ;


    border-radius: 0.6vmin;


    letter-spacing: 0.62px;


    color: var(--color-text-buton-dashboard);


    height: calc(15px + 0.4vmin);


    padding: calc(4px + 0.4vmin) calc(8px + 0.4vmin);


    display: flex;


    flex-direction: column;


    justify-content: center;


    align-items: center;


    cursor: pointer;


    margin: 0px 5px;


    font-size: var(--size-font-nine);


    transition: 0.5s all;


}


    .dashboardGraphButton:hover {


        background: var(--color-line-second);


    }


.dashboardGraphGraph {


    height: 500px;


}