table {

  border-collapse: collapse;

}



.goldRechnerTabelle {

  font-family: Roboto;

  font-size: 16px;

  display: flex !important;

  flex-wrap: nowrap !important;

  justify-content: space-evenly !important;

}



/* Ensure both tables have equal widths and fit within the viewport */

.doppelSpalte {

  width: 100% !important;

  max-width: 100vw; /* Maximum width should not exceed the viewport width */

  display: flex;

  flex-direction: row; /* Stack the tables vertically by default */

  justify-content: space-evenly !important;



}



/* Ensure the tables use the available viewport width */

.goldRechnerTabelle table {

  width: 100% !important;

  max-width: 98% !important; /* Prevent the tables from exceeding the viewport width */

  box-sizing: border-box; /* Ensure padding and borders are included in the width */

  overflow-x: auto; /* Allow horizontal scrolling if content overflows */



}



/* Adjust fields for smaller screens */

.goldRechnerTabelle .inputFields, .uniqueSum, .preise {

  width: 20% !important; /* Equalize the widths of input fields and sum columns */

}



.tableHeading {

  white-space: nowrap;

}



.tableHeadingGold {

  background-color: #E1BE60;

  text-align: left;

  padding-left: 10px !important;

  padding-top: 10px !important;

  padding-bottom: 10px !important;

  font-size: 18px;

}



.tableHeadingRowGold {

  background-color: #e1be60;

}



.tableHeadingRowSilber {

  background-color: silver;

}



.tableHeadingSilber {

  background-color: silver;

  text-align: left;

  padding-left: 10px !important;

  padding-top: 10px !important;

  padding-bottom: 10px !important;

  font-size: 18px;

}



.tableHeadingRowZahngold {

  background-color: #ead9b5;

}



.tableHeadingZahngold {

  background-color: #ead9b5;

  text-align: left;

  padding-left: 10px !important;

  padding-top: 10px !important;

  padding-bottom: 10px !important;

  font-size: 18px;

}



.tableHeadingRowVersilbert {

  background-color: silver;

}



.tableHeadingVersilbert {

  background-color: silver;

  text-align: left;

  padding-left: 10px !important;

  padding-top: 10px !important;

  padding-bottom: 10px !important;

  font-size: 18px;

}



.tableHeadingRowZinn {

  background-color: #e0e5e4;

}



.tableHeadingZinn {

  background-color: #e0e5e4;

  text-align: left;

  padding-left: 10px !important;

  padding-top: 10px !important;

  padding-bottom: 10px !important;

  font-size: 18px;

}



.tableHeadingRowSonstige {

  background-color: silver;

}



.tableHeadingSonstige {

  background-color: silver;

  text-align: left;

  padding-left: 10px !important;

  padding-top: 10px !important;

  padding-bottom: 10px !important;

  font-size: 18px;

}



.tableHeadingRowPlatin {

  background-color: #899695;

}



.tableHeadingPlatin {

  background-color: #899695;

  text-align: left;

  padding-left: 10px !important;

  padding-top: 10px !important;

  padding-bottom: 10px !important;

  font-size: 18px;

}



.tableHeadingRowPalladium {

  background-color: #b3b3b3;

}



.tableHeadingPalladium {

  background-color: #b3b3b3;

  text-align: left;

  padding-left: 10px !important;

  padding-top: 10px !important;

  padding-bottom: 10px !important;

  font-size: 18px;

}





.goldRechnerTabelle th {  vertical-align: middle !important;

  }

.goldRechnerTabelle tr:nth-child(even) {

  background-color: #e0e0e0 !important;

}



.goldRechnerTabelle tr {

  font-size: 14px;

}



.goldRechnerTabelle td {

  padding-top: 5px !important;

  padding-bottom: 5px !important;

  border-left-style: solid !important;

  border-left-width: 1px !important;

  border-color: #f8f8f8 !important;

  vertical-align: middle !important;

}



.goldRechnerTabelle .inputFields {

  white-space: nowrap;

  text-align: center;

  width: 100px;

  vertical-align: middle !important;

}



.goldRechnerTabelle .uniqueSum {

  padding-left: 5px;

  padding-right: 5px;

  width: 75px !important;

  text-align: center;

}



/* For mobile devices */

@media only screen and (max-width: 767px) {

  

  .goldRechnerTabelle {

    flex-wrap: wrap !important;

    justify-content: center !important;

    margin: 0 auto;

  }



  .doppelSpalte {

    width: 100% !important;

    max-width: 100vw !important;

    display: flex;

    flex-direction: column; /* Stack the tables vertically on mobile */

  }



  /* Make the table responsive for mobile */

  .goldRechnerTabelle table {

    width: 100% !important;

    max-width: 100vw !important; /* Limit table width to viewport */

    box-sizing: border-box;

    overflow-x: auto; /* Scroll if content overflows */

    justify-content: center !important;

    margin: 0 auto;

  }



  .goldRechnerTabelle th, .goldRechnerTabelle td {

    padding: 5px !important; /* Reduce padding to prevent overflow */

  }

}





@media only screen and (max-width: 1024px) and (min-width: 768px) {

  .goldRechnerTabelle .inputFields {

    width: 75px !important;

  }

  .goldRechnerTabelle {

    flex-wrap: wrap !important;

  }



  

  .goldRechnerTabelle table {

    width: 100% !important; /* Allow some space between the two tables */

    max-width: 75% !important; /* Ensure they don't exceed this width */

    justify-content: center !important;

    margin: 0 auto;

  }

  .doppelSpalte {

    justify-content: space-between;  }

}





.goldRechnerTabelle input {

  text-align: center;

  height: 25px;

  background-color: #f8f8f8 !important;

  border-color: #e0e0e0 !important;

}



.preise {

  white-space: nowrap;

  text-align: center;

  vertical-align: middle;

}



.nameDesc {

  vertical-align: middle;

  font-weight: 450;

}



.goldRechnerTabelle .preiseKomplett {

  text-align: left !important;
  font-size: 18px;

}



.goldRechnerTabelle #datumId {

  text-align: left !important;
  font-size: 16px;

}