/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.renditerechner table.table1 {
   margin-right:0px;
   margin-left:auto;
}

.renditerechner .desc {
   background-color:#fcff9a;
   float:left;
   border:1px solid #ccc;
   padding:10px;
   max-width:250px;
   font-size:0.75rem;
}

 .renditerechner tr {
     border-bottom: 1px solid #25A2B6;
 }

 .renditerechner td {
    padding:10px;
 }
 .renditerechner table.table1 {
    margin-bottom:25px;
 }
 .renditerechner table.table2, .renditerechner table.table3 {
    text-align:center;
 }
 .renditerechner table.table1 td:not(.head){
    text-align:right;
 }
 .renditerechner input {
    max-width: 75px;
    text-align: right;

    background-color:#fcff9a;
    font-weight:500;
    border:1px solid #cccccc;
    padding-left:5px;
    padding-right:5px;


 }
 .renditerechner table.table2 input {
    max-width:30px;
 }

 .renditerechner h4 {
    margin-top:75px;
 }
 .renditerechner td.head {
    font-weight:500;
 }

 .renditerechner td.green {
   color:#fff;
   background-color: #80ac75;
 }
 .renditerechner td.semigreen {
   background-color: rgba(128, 172, 117, 0.4);
 }
 .renditerechner td.nogreen {
   background-color: rgba(128, 172, 117, 0.15);
 }



 .renditerechner td:not(.head).green {


   font-family: 'Sofia Pro Semibold', sans-serif;
 }

 @media (max-width: 940px) {
   .renditerechner {
      font-size: 1rem;
   }
   .renditerechner table.table2 td.head, .renditerechner table.table3 td.head {
      text-align:left;
   }
   table.table2 tbody, table.table2 td,  table.table2 tr,
   table.table3 tbody, table.table3 td,  table.table3 tr {
      display:block;
      margin:0px;
   }
   table.table2 tbody,
   table.table3 tbody {
      display:flex;
      border:0px solid transparent;
   }
   table.table2 tr,
   table.table3 tr, {
      border: 0px solid transparent;
   }
   table.table2 tr:nth-of-type(1),
   table.table3 tr:nth-of-type(1)  {
      width:50%;
   }
   table.table2 tr:nth-of-type(2),
   table.table3 tr:nth-of-type(2) {
      width:25%;
   }
   table.table2 tr:nth-of-type(3),
   table.table3 tr:nth-of-type(3) {
      width:25%;
   }
   table.table2 td,
   table.table3 td {
      height:72px;

     border-bottom: 1px solid #25A2B6;
   }
 }
 @media (max-width:870px) {
   table.table2 td,
   table.table3 td {
      height:105px;
   }
 }
 @media (max-width:552px) {
   table.table2 td,
   table.table3 td  {
      height:135px;
   }
 }
 @media (max-width:395px) {
   .renditerechner {
      font-size: 0.75rem;
   }
 }