/**** styles per la pagina html ****/

html {
  background-color: DimGrey;
}

.container {
  max-width: 1400;
  padding: 0;
  margin:  auto;
  background-color: #F0F0F0;
  /* font-size: 14px; */
}

h1 {
  font-size: 18px;
  text-align: center;
  color: DarkSlateGrey;
}

p, li {
  color: DarkSlateGrey;
}


#my_form {
  margin: 0;
}

#my_plot {
    margin-bottom: 20px;
    margin: auto;
  }

#my_table {
    display:block;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    max-height: 220px;
    /*max-height: 98%; */
    overflow:auto;
    }

.footer {
  text-align: center;
  text-decoration: italic;
  font-size: 12px;
  color: DarkSlateGrey;
  margin: auto;
}


/**** styles per la select ****/
.select-box {
  cursor: pointer;
  position : relative;
  max-width: 23em;
  margin: auto;
  width: 100%;
}

.select,
.label {
  color: DarkSlateGrey;
  display: block;
  text-align: center;
}

.select {
  width: 100%;
  position: absolute;
  top: 0;
  padding: 5px 0;
  opacity: 0;
  background: none transparent;
  border: none;
}

.label {
  display: inline-block;
  padding: 5px 10px;
  cursor: pointer;
  text-align: center;
}

.open .label::after {
   content: "▲";
   font-size: 14px;
}
.label::after {
  content: "▼";
  font-size: 14px;
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px 15px;
  border-left: 5px solid #fff;
}

/**** styles per il plot ****/
svg {
  border: none;
}

.rect {
  fill: rgba(0,0,0,0);
  stroke-width: 0;
  opacity: 0;
}

.grid line {
  stroke: LightGrey;
  stroke-width: 0.3;
}

.axis line {
  stroke: LightGrey;
  stroke-width: 0.3;
}

.axis path {
  stroke: rgba(0,0,0,0);
}

.grid path {
    stroke: rgba(0,0,0,0);
}

.axis text{
  fill: DarkSlateGrey;
}

.axis-label {
  font-size: 0.8em;
  text-anchor: middle;
  fill: DarkSlateGrey;
}

.mytitle {
  text-anchor: middle;
  font-size: 18px;
  text-decoration: normal;
  fill: DarkSlateGrey;
}

.DOT {
    opacity: 0.7;
}

.LBL {
  font-size: 0.6em;
}

.AVG, .AVGLabel {
  fill: DarkRed;
}

.CPF, .CPFLabel {
  fill: #4d0099;
}

.ETF, .ETFLabel, .Azioni, .AzioniLabel {
  fill: DarkSlateGrey;
}

.MARKET, .MARKETLabel {
  fill: Red;
}

.EF_higher {
  fill: none;
  stroke: Navy;
  opacity: 0.7;
  stroke-width: 1.5;
}

.EF_lower {
  fill: none;
  stroke: Grey;
  opacity: 0.7;
  stroke-width: 1;
}

/**** styles per il tooltip ****/

#tooltip_text {
  font-size: 10px;
  font-weight: 300;
  text-anchor: start;
  fill: DarkSlateGrey;
}


.tooltip_background {
  fill: LightGrey;
  rx: 6;
  ry: 6;
  opacity: 0.75;

  /*heigth: 4em;*/
}

#tooltip_title {
    font-weight: 600;
}

#tooltip_l1, #tooltip_l2, #tooltip_l3 {
      font-weight: 300;
    }


/*** Styles for table  **/

#my_table thead td { position: sticky; top: -1; z-index: 1; }


table {
    table-layout: fixed;
    width: 99%;
    border-collapse: collapse;
    border: none;
    word-break: break-all;
    font-size: 11px;
    margin: auto;
}

tbody {
    height: 180px
/*    overflow-y: scroll; */
    display: block;
  }


thead td {

  border: 1px solid LightGrey;
  height: : 30px;
  font-weight: 600;
  color: DarkSlateGrey;
  padding: 5px;
  background-color: LightGrey;

}

tbody td {
  border: 1px solid LightGrey;
  height: : 25px;
  font-weight: 300;
  color: DarkSlateGrey;
  padding: 5px;
  background-color: #F0F0F0;

}


.trh>:nth-child(1) {
    width: 4.5%;
    font-weight: 600;
}
.trh>:nth-child(2) {
    width: 15%
}

.trh>:nth-child(5) {
    width: 10%
}

.trh>:nth-child(8) {
    width: 4%
}

.trn>:nth-child(6), .trn>:nth-child(n+8) {
  text-align:right;
}



.trhE>:nth-child(1) {
    width: 4.5%;
    font-weight: 600;
}
.trhE>:nth-child(2) {
    width: 20%
}

.trhE>:nth-child(3) {
    width: 17%
}

.trhE>:nth-child(6) {
    width: 4%
}

.trhE>:nth-child(14) {
    width: 6%
}


.trnE>:nth-child(4), .trnE>:nth-child(n+6) {
  text-align:right;
}