@media screen and (max-width: 480px) {
    .chart-portfolio{
      width: 100%;
      height: 80% !important;
    }
    .nav-portfolio{
      float: right;
      text-align: center;
      width:100%;
      border:none
    }
    .div-light>span.active{
      border-radius: 5px;
      background-color: #2F80ED;
      color: white;
      padding-top: 2%;
      padding-bottom: 2%;
    }
    .div-light{
      padding: 1%;
      border:1px solid #D7D6D6;
      border-radius: 5px;
      background-color: white;
      font-size: small;
      display: inline;
    }
    .div-light>span{
      background-color: white;
      padding-left: 5%;
      padding-right: 5%;
    }
    .text-left-portfolio{
      margin-left: 4%;
      text-align: center;
    }
    .text-left-portfolio>label{
      font-size: large;
      display: block;
      margin-top:5%;
    }
    .text-left-portfolio>span{
      font-size: small;
      color: #2DC471;
      display: block;
      margin-top:5%;
    }
    .phone-layout{
      width: 98%!important;
      margin-left: 7px!important;
    }
    .phone-detail{
      width: 95%!important;
     
    }
    .span-in-lable{
      display: block;
      margin-left: 9%;
      margin-top: 2%;
    }
    .none-display-phone{
      display: none!important;

    }
    .main-content{
      margin-top:5%;
      width:65%;
      height: 10%
    }
    .div-text-content{
      width: 45%;
      display:inline
    }
    .img-item{
      margin-bottom:-4%
    }
    .text-content{
      margin-left: 1%
    }
    .green-text{
      color: #2DC471
    }
    .red-text{
      color:#FF5A5A
    }
    .small-light-text{
      color:rgb(119, 116, 116) ;
      font-size: smaller
    }
    .div-number-content{
      float: right
    }
    .number-content{
      margin-top: -20%
    }
    .span-green{
      display: block;
      float: right;
      color:#2DC471
    }
    .span-red{
      margin-top: 8%;
      float: right;
      display: block;
      color:#FF5A5A
    }
    .img-row{
      margin-left: 10px;
    }
    .hr-data{
      width: 99%;
      margin-top: 3%;
     display: block;
     border: 0; 
     border-top: 1px solid #ccc;
     margin-left: 1em 0; 
     padding: 0
    }
    .tab-portfolio{
      margin-top: 12%;
      text-align: center;
    }
    .left-tab{
      width: 100%;
    }
    .left-tab-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      border-radius: 0 0 10px 10px;
      width: 85%;
      background: #ffffff;
      border-radius: 0;
      margin-top: 0.5rem;
    }
    
    .left-tab-content .navigation {
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
      justify-content: space-evenly;
      -webkit-box-align: center;
      -ms-flex-align: center;
      margin-right: -40%;
    }
    
    .left-tab-content .navigation .nav {
      padding: 10px 8px;
      color: #2c2c2c;
      padding-left: 3%;
    }
    
    .left-tab-content .navigation .nav .nav-link {
      background: none;
      outline: none;
      border: none;
      font-size: small;
    }
    
    .left-tab-content .navigation .active {
      text-align: center;
      font-weight: bold;
      width: 50%!important;
      border-radius: 3px;
      border-top: 4px solid transparent;
      border-right: 4px solid transparent;
      border-bottom: 4px solid #2f80ed;
      border-left: 4px solid transparent;
      font-size: small;
    }
    
    .left-tab-content .navigation .active .nav-link {
      color: #2f80ed;
    }
    .left-tab-content {
      width: 75%;
      background: #ffffff;
      border-radius: 0;
      margin-top: 0;
    }
    .left-tab-content .navigation {
      width: 100%;
    }
    .left-tab-content .navigation .nav {
      margin: 0;
      width: 100%;
      max-width: 168px;
    }
    .left-tab>span{
      margin-left: 5%;
    }
    .left-tab>span.active{
      color: #2F80ED!important; 
    }
    .right-tab{
      display: block;
      width: 100%;
      position: fixed;
      bottom: 0;
      margin-left: 0%;
      width: 100%;
      padding:5%;
      background-color: #f3f3f3;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
    }
    .right-tab>div{
      display: inline;
      width: 40%;
      margin-left: 8%;
     
    }
    .right-tab>div>button{
      margin-left: 3%;
      padding-top: 2%;
      padding-bottom: 2%;
      padding-left: 10%;
      padding-right: 10%;
      font-size: smaller;
      border-color: transparent;
      border-radius: 8px;
      size: initial;
    }
    .deposit-color{
      color:white;
      background-color: #2F80ED;
    }
    .row-table-portfolio>hr{
      margin-bottom: 5%!important;
    }
    .table-portfolio{
      width: 90%;
      position: absolute;
      margin-top: 8% !important;
      margin-left: 6%;
      padding-bottom: 20% !important;
    }
    .tab-portfolio.row-table-portfolio.div-text-content>hr{
      margin-top: 12% !important;
    }
    .column-table-portfolio>span{
      font-size: smaller;
    }
    .progress-bar-orange{
      margin-left: 1%;
      display: block!important;
      margin-top: 8%!important;
      padding-bottom: 3%!important;
    }
    .progress-bar-orange>span{
      margin-top: 2%;
      position: absolute;
      width: 80%;
      height: 10px;
      background: #faf8f8;
      border-radius: 30px;
    }
    .progress-bar-orange>span>span{
      position: absolute;
      width: 55%;
      height: 10px;
      background:rgb(255, 100, 33);
      opacity: 0.5;
      border-radius: 30px;
    }
    


    .progress-bar-purple{
      margin-left: 1%;
      display: block!important;
      margin-top: 8%!important;
      padding-bottom: 3%!important;
    }
    .progress-bar-purple>span{
      margin-top: 2%;
      position: absolute;
      width: 80%;
      height: 10px;
      background: #faf8f8;
      border-radius: 30px;
    }
    .progress-bar-purple>span>span{
      position: absolute;
      width: 55%;
      height: 10px;
      background:#102b9b;
      opacity: 0.5;
      border-radius: 30px;
    }


    .progress-bar-green{
      margin-left: 1%;
      display: block!important;
      margin-top: 8%!important;
      padding-bottom: 3%!important;
    }
    .progress-bar-green>span{
      margin-top: 2%;
      position: absolute;
      width: 80%;
      height: 10px;
      background: #faf8f8;
      border-radius: 30px;
    }
    .progress-bar-green>span>span{
      position: absolute;
      width: 55%;
      height: 10px;
      background: #26A17B;
      opacity: 0.5;
      border-radius: 30px;
    }

    
    .progress-bar-pink{
      margin-left: 1%;
      display: block!important;
      margin-top: 8%!important;
      padding-bottom: 3%!important;
    }
    .progress-bar-pink>span{
      margin-top: 2%;
      position: absolute;
      width: 80%;
      height: 10px;
      background: #faf8f8;
      border-radius: 30px;
    }
    .progress-bar-pink>span>span{
      position: absolute;
      width: 55%;
      height: 10px;
      background: #E71081;
      opacity: 0.5;
      border-radius: 30px;
    }
    .row-number-portfolio{
      margin-left: 44%;
    }
    .percent-progress-bar{
      font-size: small;
      margin-left: 90%!important;
      margin-top: -2% !important;
      padding-bottom: 3%;
    }
    .price-table-portfolio{
      
      display: block;
      font-size: smaller;
      margin-left: 10%;
      margin-top: 2%;
      color: #777E90;
    }
    .amount-table-portfolio{
      position: absolute;
      font-size: medium;
      margin-left: 76%;
      margin-top: -12%;
    }
    .value-table-portfolio{
      position: absolute;
      font-size: smaller;
      margin-left: 76%;
      margin-top: -4%;
      color: #777E90;
    }
    
}
@media not screen and (max-width: 480px) {
  .chart-portfolio{
    width: 80%;
    margin-left: 14%;
    margin-top: 2%;
  }
  .text-left-portfolio{
    margin-left: 16%;
    margin-top: 2%;
  }
  .text-left-portfolio>label{
    font-size: medium;
  }
  .text-left-portfolio>span{
    font-size: smaller;
    color: #2DC471;
    display: inline;
  }
  .hr-portfolio{
    display: none;
  }
  .nav-portfolio{
    float: right;
    margin-right: 7%;
    width:18%;
    /* border:1px solid #D7D6D6; */
    border:none
  }
  .div-light{
    padding: 1%;
    border:1px solid #D7D6D6;
    border-radius: 5px;
    background-color: white;
    font-size: small;
    display: inline;
  }
  .div-light>span{
    background-color: white;
    padding-left: 5%;
    padding-right: 5%;
  }
  @media screen and (max-width: 1024px){
    .div-light>span{
      background-color: white;
      padding-left: 4%;
      padding-right: 4%;
    } 
    .price-table-portfolio{
      font-size: smaller;
      margin-left: 5%!important;
      color: #777E90;
    }
    .amount-table-portfolio{
      position: absolute;
      font-size: smaller;
      margin-left: 20%!important;
    }
    .value-table-portfolio{
     
      font-size: smaller;
      margin-left: 32%!important;
    }
  }
  @media screen and (max-width: 768px){
    .chart-portfolio{
      width: 95%;
      margin-left: 2%;
    }
    .text-left-portfolio{
      margin-right: 0%;
      margin-left: 4%;
    }
    .nav-portfolio{
      margin-right: 2%;
    }
    .div-light>span{
      background-color: white;
      padding-left: 2%;
      padding-right: 2%;
    }
    .tab-portfolio{
      margin-top: 12%;
      margin-bottom: 15%;
    }
    .left-tab{
      float: left;
      width: 70%;
      display: inline;
    }
    .table-portfolio{
      margin-top: 12%;
      margin-left: 2%;
    }
    .column-table-portfolio{
      margin-top: 4%;
    }
    .column-table-portfolio>span{
      font-size: smaller;
    }
    .row-number-portfolio{
      margin-left: 44%!important;
    }
    .percent-progress-bar{
      font-size: small;
    }
    .price-table-portfolio{
      font-size: smaller;
      margin-left: 7%!important;
      color: #777E90;
    }
    .amount-table-portfolio{
      position: absolute;
      font-size: smaller;
      margin-left: 25%!important;
    }
    .value-table-portfolio{
     
      font-size: smaller;
      margin-left: 39%!important;
    }

  }



  .div-light>span.active{
    border-radius: 5px;
    background-color: #2F80ED;
    color: white;
    padding-top: 2%;
    padding-bottom: 2%;
  }
  .tab-portfolio{
    margin-top: 4%;
  }
  .left-tab{
    float: left;
    width: 50%;
    display: inline;
  }
  .left-tab-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 0 0 10px 10px;
    width: 85%;
    background: #ffffff;
    border-radius: 0;
    margin-top: 0.5rem;
  }
  
  .left-tab-content .navigation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  
  .left-tab-content .navigation .nav {
    margin: -15px 20px 0 20px;
    padding: 10px 8px;
    line-height: 28px;
    color: #2c2c2c;
  }
  
  .left-tab-content .navigation .nav .nav-link {
    background: none;
    outline: none;
    border: none;
    font-size: small;
  }
  
  .left-tab-content .navigation .active {
    text-align: center;
    font-weight: bold;
    border-radius: 3px;
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid #2f80ed;
    border-left: 4px solid transparent;
    font-size: small;
  }
  
  .left-tab-content .navigation .active .nav-link {
    color: #2f80ed;
  }
  .left-tab-content {
    width: 75%;
    background: #ffffff;
    border-radius: 0;
    margin-top: 0;
  }
  .left-tab-content .navigation {
    width: 100%;
  }
  .left-tab-content .navigation .nav {
    margin: 0;
    width: 100%;
    max-width: 168px;
  }
  .left-tab>span{
    margin-left: 5%;
  }
  .left-tab>span.active{
    color: #2F80ED!important;
    
  }
  .right-tab{
    float: right;
    width: 30%;
    margin-right: 0px;
    margin-top: 1%;
  }
  .right-tab>div{
    display: inline;
  }
  .right-tab>div>button{
    margin-left: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    padding-left: 10%;
    padding-right: 10%;
    font-size: smaller;
    border-radius: 5px;
    border-color: transparent;
    size: initial;
  }
  .deposit-color{
    color:white;
    background-color: #2F80ED;
  }
  .none-display-desktop{
    display: none;
  }
  .main-content{
    margin-top:4%;
    width:65%;
    height: 10%
  }
  .div-text-content{
    width: 45%;
    display:inline
  }
  .img-item{
    margin-bottom:-1%
  }
  .text-content{
    margin-left: 1%
  }
  .green-text{
    color: #2DC471
  }
  .red-text{
    color:#FF5A5A
  }
  .small-light-text{
    color:rgb(119, 116, 116) ;
    font-size: smaller
  }
  .div-number-content{
    float: right
  }
  .number-content{
    margin-top: -12%
  }
  .span-green{
    display: block;
    float: right;
    color:#2DC471
  }
  .span-red{
    margin-top: 8%;
    float: right;
    display: block;
    color:#FF5A5A
  }
  .img-row{
    margin-left: 10px
  }
  .hr-data{
    width: 99%;
    margin-top: 3%;
   display: block;
   border: 0; 
   border-top: 1px solid #ccc;
   margin-left: 1em 0; 
   padding: 0
  }
  .row-table-portfolio{
    margin-top:1%;
  }
  .row-table-portfolio>hr{
    margin-top: 1%;
  }
  .table-portfolio{
    margin-top: 12%;
    margin-left: 2%;
  }
  .column-table-portfolio{
    margin-top: 4%;
  }
  .column-table-portfolio>span{
    font-size: smaller;
  }
  .progress-bar-orange{
    margin-left: 18%;
  }
  .progress-bar-orange>span{

    position: absolute;
    width: 19%;
    height: 10px;
    background: #faf8f8;
    border-radius: 30px;
  }
  .progress-bar-orange>span>span{
    position: absolute;
    width: 55%;
    height: 10px;
    background:rgb(255, 100, 33);
    opacity: 0.5;
    border-radius: 30px;
  }
  .progress-bar-purple{
    margin-left: 18%;
  }
  .progress-bar-purple>span{

    position: absolute;
    width: 19%;
    height: 10px;
    background: #faf8f8;
    border-radius: 30px;
  }
  .progress-bar-purple>span>span{
    position: absolute;
    width: 25%;
    height: 10px;
    background:#102b9b;
    opacity: 0.5;
    border-radius: 30px;
  }
  .progress-bar-green{
    margin-left: 18%;
  }
  .progress-bar-green>span{

    position: absolute;
    width: 19%;
    height: 10px;
    background: #faf8f8;
    border-radius: 30px;
  }
  .progress-bar-green>span>span{
    position: absolute;
    width: 18%;
    height: 10px;
    background: #26A17B;
    opacity: 0.5;
    border-radius: 30px;
  }
  .progress-bar-pink{
    margin-left: 18%;
  }
  .progress-bar-pink>span{

    position: absolute;
    width: 19%;
    height: 10px;
    background: #faf8f8;
    border-radius: 30px;
  }
  .progress-bar-pink>span>span{
    position: absolute;
    width: 25%;
    height: 10px;
    background: #E71081;
    opacity: 0.5;
    border-radius: 30px;
  }
  .row-number-portfolio{
    margin-left: 44%;
  }
  .percent-progress-bar{
    font-size: small;
  }
  .price-table-portfolio{
    position: absolute;
    font-size: smaller;
    margin-left: 4%;
    color: #777E90;
  }
  .amount-table-portfolio{
    position: absolute;
    font-size: smaller;
    margin-left: 18%;
  }
  .value-table-portfolio{
    position: absolute;
    font-size: smaller;
    margin-left: 28%;
  }

}