body {
  font: 400 15px Lato, sans-serif;
  line-height: 1.8;
  color: #001A23;
  margin: 0;
  padding: 0;
  width: 100vw;
  box-sizing: border-box;
}

h5{
  font-size: 1.3em;
}

h2{
  font-size: 2em;
}


.sec{
  box-sizing: border-box;
  display: flex;
  min-height: 100vh;
  height: auto;
  width: 100vw;
  background-color: #B3EFB2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: scroll;
  padding-bottom: 120px;
  margin-bottom:10px;
}
.my_h2{
  background-color: #001A23;
  color: #E8F1F2;
  width: 100%;
  padding: 5px;
  align-self: center;
  text-align: center;
}

.myform{
  display: flex;
  width: 300px;
  flex-direction: column;
  padding: 20px;
  background-color: #ffffff;
  margin: 10px;
  box-shadow: #001a236b 3px 4px 5px;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}


.my_input{
  width: 90%;
  padding: 10px;
  border: none;
  background-color: #e8f1f200;
  border-bottom: 1px #001a238f solid;
  margin-bottom: 10px;
  margin-top: -5px;
}

.my_btn{
  padding: 10px 15px;
  margin: 10px;
  background-color: #001A23;
  color: #E8F1F2;
  border: none;
  border-radius: 50px;
  width: 150px;
  align-self: flex-end;

}

.error_alert{
  color: #ff1818;
}
.success_alert{
  color: #00952f;
}


.my_footer{
  position: fixed;
  display: flex;
  bottom: 0;
  left:0;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  background-color: #001A23;
  color: #ffffff;
  width: 100%;
  padding: 5px;
  overflow: hidden;
}


.my_header{
  position: fixed;
  display: flex;
  top: 0;
  left:0;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #001A23;
  color: #ffffff;
  width: 100%;
  padding: 5px;
  overflow: hidden;
  z-index: 999;
}

.my_dark_link{

  color: #E8F1F2;
  text-decoration: none;
  margin: 0 10px;

}

.my_dark_link:hover{
  color: #41fd7c;
}


.my_link{
  color: #167c31;
  text-decoration: none;
}
.my_link:hover{
  color: #014112;
}

.my_table{
    width: 100% ;
    margin: 10px;
}

.my_charts{
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 100%;
  margin: 20px;
}


.my_data_stats{

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  padding-left: 10px;
  padding-right: 10px;
}

.my_data_card{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #E8F1F2;
  height: 150px;
  min-width: 150px;
  width: 150px;
  box-shadow: #001a2358 3px 4px 5px;
  border-radius: 8px;
  margin: 10px;
}

.my_icon{
  font-size: 20px;
  padding-right: 10px;
}

.my_footer_row{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 8px;

}


.footer_btn{
  background-color: #167c31;
  padding: 5px 8px;
}


.del_btn{
  background-color: #ff4c4c;
}




/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .my_data_card{
    width: 100%;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
 
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}

#myTable{
    padding:10px;
}