.main {
  margin: 20px;
  border-radius: 5px;
}

.sidebar {
 float: right;
 width: 290px;
 margin-right: 20px;
}

.head {
  font-weight: bold;
}

.subhead {
 font-weight: bold;
 text-align: center;
}

/*===================================Charts==============================*/

.headchart {
  margin-left: 5px;
  padding-top: 2px;
}

.chart {
  background-color: lightgrey;
  border-radius: 5px;
}

/*==================================Sub-Heading======================*/

.detail {
  margin-right: 310px;
  padding: 10px;
  background-color: lightgrey;
  border-radius: 5px;
}

.detailsmall{
  display: none;
}

/*====================================Tables============================*/

.tables {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
  margin-right: 310px;
  margin-top: 20px;
  margin-bottom: 20px
}

.table {
  padding: 10px;
  background-color: lightgrey;
  border-radius: 5px;
  text-align: center;
}

.table table{
  margin: auto;
  border-collapse: collapse;
}

.table table th{
  border: 1px solid black;
  padding: 2px;

}

.table table td{
  border: 1px solid black;
  padding: 2px;
}

.rowtitle{
  text-align: left;
}

.decline{
  background-color: red;
}

.increase{
  background-color: green;
}

/*=================================Calculator=============================*/

.calculator {
  margin: 20px 0px;
  background-color: lightgrey;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
}

.calc{
  display: inline-block;
  text-align: left;
}

.calcinput {
  width: 100px;
}

.calculatorsmall {
  display: none;
}

/*===================================iFrame===============================*/

.data {
  background-color: lightgrey;
  border-radius: 5px;
}

.dataframe {
  margin: 2% 2%;
  min-width: 96%;
  height: 500px;
}

/* ==================================Responsive=========================== */

@media (max-width: 1150px){
  .tables {
    grid-template-columns: 1fr;
  }
  .data{
    display:none;
  }
}

@media (max-width: 1000px){
  body {
    font-size: 12px;
  }
}


@media (max-width: 750px){
  .sidebar {
   float: none;
   width: 90%;
   margin: auto;
  }
  .detail {
    margin-right: auto;
  }
  .tables {
    margin-right: auto;
  }
  .calculator{
    display: none;
  }
  .calculatorsmall{
    display: block;
  }
  .detail{
    display: none;
  }
  .detailsmall{
    display: block;
    margin: 20px;
  }
}

@media (max-width: 450px){
  body {
    font-size: 10px;
  }
}