/** code by webdevtrick ( https://webdevtrick.com ) **/
* {
  box-sizing: border-box;
}

body {
  font-family: 'open sans', sans-serif;
  color: #202020;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  overflow: hidden;
}
table td, table th {
  border-top: 1px solid #ECF0F1;
  padding: 10px;
}
table td {
  border-left: 1px solid #ECF0F1;
  border-right: 1px solid #ECF0F1;
}
table th {
 
  text-align: center;
  font-size:25px;
}
table tr:nth-of-type(even) td {
  background-color: #FFB2B3;
}
table .total th {
  background-color: white;
}
table .total td {
  text-align: right;
  font-weight: 700;
}

.responsive-toggle {
  display: none;
}

/* thead.normal, tbody.normal{
  display: block;
} */
thead.resp, tbody.resp{
  display: none;
}

table tr{
  display: table;
  width: 100%;
}

@media only screen and (max-width: 300px) {
  table tr th:not(:first-child) {
    width: 50%;
    font-size: 14px; 
  }
  table tr td:not(:first-child) {
    width: 50%;
    font-size: 14px;
  }
}


@media only screen and (max-width: 765px) {
  p {
    display: block;
    font-weight: bold;
  }

  table tr td:not(:first-child), table tr th:not(:first-child), table tr td:not(.total-budget) {
    display: none;
  }
  table tr:nth-of-type(even) td:first-child {
    background-color: #FFB2B3;
  }
  table tr:nth-of-type(odd) td:first-child {
    background-color: white;
  }
  table tr:nth-of-type(even) td:not(:first-child) {
    background-color: white;
  }
  table tr th:first-child {
    width: 100%;
    display: block;
  }
  table tr th:not(:first-child) {
    width: 40%;
    transition: transform 0.4s ease-out;
    transform: translateY(-9999px);
    position: relative;
    z-index: -1;
  }
  table tr td:not(:first-child) {
    transition: transform 0.4s ease-out;
    transform: translateY(-9999px);
    width: 60%;
    position: relative;
    z-index: -1;
  }
  table tr td:first-child {
    display: inline-block;
    cursor: pointer;
    
  }
  table tr.total th {
    width: 25%;
    display: inline-block;
  }
  table tr td.total-budget {
    display: inline-block;
    transform: translateY(0);
    width: 75%;
  }

  thead.normal, tbody.normal{
    display: none;
  }
  thead.resp, tbody.resp{
    display: block;
  }
}
/** code by webdevtrick ( https://webdevtrick.com ) **/
* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  color: #202020;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  overflow: hidden;
}
table td, table th {
  border-top: 1px solid #ECF0F1;
  padding: 10px;
}
table td {
  border-left: 1px solid #ECF0F1;
  border-right: 1px solid #ECF0F1;
  width: 50%;
}
table th {
  background-color: #ffda43;
}
table tr:nth-of-type(even) td {
  background-color: #e3e3e3;
}
table .total th {
  background-color: white;
}
table .total td {
  text-align: right;
  font-weight: 700;
}

.responsive-toggle {
  display: none;
}

@media only screen and (max-width: 300px) {
  table tr th:not(:first-child) {
    width: 50%;
    font-size: 14px;
  }
  table tr td:not(:first-child) {
    width: 50%;
    font-size: 14px;
  }
}


@media only screen and (max-width: 765px) {
  p {
    display: block;
    font-weight: bold;
  }

  table tr td:not(:first-child), table tr th:not(:first-child), table tr td:not(.total-budget) {
    display: none;
  }
  table tr:nth-of-type(even) td:first-child {
    background-color: #FFB2B3;
  }
  table tr:nth-of-type(odd) td:first-child {
    background-color: white;
  }
  table tr:nth-of-type(even) td:not(:first-child) {
    background-color: white;
  }
  table tr th:first-child {
    width: 100%;
    display: block;
  }
  table tr th:not(:first-child) {
    width: 100%;
    transition: transform 0.4s ease-out;
    transform: translateY(-9999px);
    position: relative;
    z-index: 100;
  }
  table tr td:not(:first-child) {
    transition: transform 0.4s ease-out;
    transform: translateY(-9999px);
    width: 100%;
    position: relative;
    z-index: 100;
  }
  table tr td:first-child {
    display: inline-block;
    cursor: pointer;
    width: 100%;
  }
  table tr.total th {
    width: 25%;
    display: inline-block;
  }
  table tr td.total-budget {
    display: inline-block;
    transform: translateY(0);
    width: 75%;
  }
}