/************************* MAIN *********************************/

main {
  background: radial-gradient(rgb(255, 172, 100) 15%, white 70%);
}

.calculatorBorder {
  max-width: 310px;
  margin: 50px auto;

  border: 5px solid rgb(70 47 10);
  border-radius: 12px;
  background-color: rgb(70 47 10);

  border-style: outset; /* or inset, groove, ridge */

  /* background-color: white; */
}

/* Calculator Layout */
.calculator {
  max-width: 300px;
  margin: 6px auto;

  /* Calculater GRID LAYOUT */
  display: grid;
  /* GRID */
  grid-template-columns: repeat(30, 10px);
  grid-template-rows: repeat(22, 31px);
  justify-content: space-evenly;

  font-family: Menlo, monospace;
}

/* Labels - no HTML IDs - code attribute produces NULL */
label {
  color: rgb(240, 169, 59);
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  align-content: end;
}

/* Buttons - has HTML IDs  */
button {
  margin: 2px;

  font-size: 0.9rem;
  font-weight: bold;

  text-align: center;
  align-content: center;

  color: #d3d3d3;
  background-color: rgb(70 47 10);

  border: 2px solid rgb(70 47 10);
  border-radius: 6px;

  /* outset or inset, groove, ridge */
  border-style: outset;

  /* Place a pointer over each button */
  cursor: pointer;
}

.bright {
  font-size: 1.1rem;
  color: aliceblue;
}

/* Title of the calculator */
.calcName {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-style: italic;
  font-size: medium;
  padding-left: 8px;
  text-align: left;
  align-content: center;

  grid-column: 1 / 31;
  grid-row: 1;
}

/* Left side of the display */
.displayLeft {
  align-content: center;
  color: #333;
  font-size: 1rem;

  background-color: rgb(186, 195, 156);
}

/* Center of the main display  */
.display {
  grid-column: 1 / 31;
  grid-row: 2 / 7;
  text-align: right;
  align-content: end;

  color: #333;
  font-size: 1.1rem;
  padding-bottom: 1px;

  background-color: rgb(186, 195, 156);
}

/* Right side of the display */
.displayRight {
  background-color: rgb(186, 195, 156);
}

/* (1) Mode Display left side */
.modeDisplayLeft {
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 7px;

  border-top: 1px solid brown;
  border-left: 1px solid brown;
  border-top-left-radius: 8px;

  text-align: left;

  grid-column: 1 / 6;
  grid-row: 2;
}

/* (1) Mode Display center */
.modeDisplay {
  color: rgb(14, 74, 0);
  font-size: 0.9rem;
  margin-right: 5px;

  /* padding-bottom: 5px; */

  border-top: 1px solid brown;
  border-bottom: 3px double brown;

  text-align: left;
  grid-column: 4 / 30;
  grid-row: 2;
}

/* (1) Mode Display right side */
.modeDisplayRight {
  /* margin-top: 5px; */
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 10px;

  border-top: 1px solid brown;
  border-right: 1px solid brown;
  border-top-right-radius: 8px;

  grid-column: 29 / 31;
  grid-row: 2;
}

/* (2) Stack-T Display left side */
.stackTdisplayLeft {
  margin-left: 5px;
  margin-right: 5px;

  padding-left: 7px;

  border-left: 1px solid brown;

  text-align: left;
  grid-column: 1 / 6;
  grid-row: 3;
}

/* (2) Stack-T Display center */
.stackTdisplay {
  /* margin-left: 5px; */
  margin-right: 5px;

  /* padding: 0 10px; */

  border-bottom: 1px dotted brown;

  grid-column: 4 / 30;
  grid-row: 3;
}

/* (2) Stack-T Display right side */
.stackTdisplayRight {
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 10px;

  border-right: 1px solid brown;

  grid-column: 29 / 31;
  grid-row: 3;
}

/* (3) Stack-Z Display left side */
.stackZdisplayLeft {
  margin-left: 5px;
  margin-right: 5px;

  padding-left: 7px;

  border-left: 1px solid brown;

  text-align: left;
  grid-column: 1 / 6;
  grid-row: 4;
}

/* (3) Stack-Z Display center */
.stackZdisplay {
  /* margin-left: 5px; */
  margin-right: 5px;

  /* padding: 0 10px; */

  border-bottom: 1px dotted brown;

  grid-column: 4 / 30;
  grid-row: 4;
}

/* (3) Stack-Z Display right side */
.stackZdisplayRight {
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 10px;

  border-right: 1px solid brown;

  grid-column: 29 / 31;
  grid-row: 4;
}

/* (4) Stack-Y Display left side */
.stackYdisplayLeft {
  margin-left: 5px;
  margin-right: 5px;

  padding-left: 7px;

  border-left: 1px solid brown;

  text-align: left;
  grid-column: 1 / 6;
  grid-row: 5;
}

/* (4) Stack-Y Display center */
.stackYdisplay {
  /* margin-left: 5px; */
  margin-right: 5px;

  /* padding: 0 10px; */

  border-bottom: 1px dotted brown;

  grid-column: 4 / 30;
  grid-row: 5;
}

/* (4) Stack-Y Display right side */
.stackYdisplayRight {
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 10px;

  border-right: 1px solid brown;

  grid-column: 29 / 31;
  grid-row: 5;
}

/* (5) Stack-X Display left side */
.stackXdisplayLeft {
  margin-left: 5px;
  margin-right: 5px;

  padding-left: 7px;

  border-left: 1px solid brown;

  text-align: left;
  grid-column: 1 / 6;
  grid-row: 6;
}

/* (5) Stack-X Display center */
.stackXdisplay {
  /* margin-left: 5px; */
  margin-right: 5px;

  /* padding: 0 10px; */

  border-bottom: 1px dotted brown;

  grid-column: 4 / 30;
  grid-row: 6;
}

/* (5) Stack-X Display right side */
.stackXdisplayRight {
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 10px;

  border-right: 1px solid brown;

  grid-column: 29 / 31;
  grid-row: 6;
}

/* (6) Input Display left side */
.inputDisplayLeft {
  color: rgb(14, 74, 0);
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 7px;

  border-left: 1px solid brown;

  text-align: left;
  grid-column: 1 / 6;
  grid-row: 7;
}

/* (6) Input Display center */
.inputDisplay {
  color: rgb(14, 74, 0);
  text-align: left;

  /* margin-left: 5px; */
  margin-right: 5px;

  grid-column: 4 / 30;
  grid-row: 7;
}

/* (6) Input Display right side */
.inputDisplayRight {
  margin-left: 5px;
  margin-right: 5px;

  padding-left: 10px;
  border-right: 1px solid brown;

  grid-column: 29 / 31;
  grid-row: 7;
}

/* (7) Error Display left side */
.errorDisplayLeft {
  margin-left: 5px;
  margin-right: 5px;

  /* padding-left: 10px; */

  border-left: 1px solid brown;
  border-bottom: 1px solid brown;
  border-bottom-left-radius: 8px;

  text-align: left;
  grid-column: 1 / 6;
  grid-row: 8;
}

/* (7) Error Display center */
.errorDisplay {
  color: rgb(161, 0, 0);
  font-size: 0.9rem;
  margin-right: 5px;

  padding-right: 3px;
  padding-bottom: 3px;

  border-top: 3px double brown;
  border-bottom: 1px solid brown;

  grid-column: 4 / 30;
  grid-row: 8;
}

/* (7) Error Display right side */
.errorDisplayRight {
  margin-left: 5px;
  margin-right: 5px;

  padding-left: 10px;

  border-right: 1px solid brown;
  border-bottom: 1px solid brown;
  border-bottom-right-radius: 8px;

  grid-column: 29 / 31;
  grid-row: 8;
}

/* Row 9 */
.spaceRow9 {
  align-content: center;
  grid-column: 1 /31;
  grid-row: 9;
}

.spaceRow9 > hr {
  border: none;
  height: 2px;
  background-color: rgb(145 105 41);
}

/* Row 10 buttons */
.r1c1 {
  color: rgb(249, 161, 255);

  grid-column: 1 / 6;
  grid-row: 10;
}

.r1c2 {
  grid-column: 6 / 11;
  grid-row: 10;
}

.r1c3 {
  color: rgb(66, 255, 82);

  grid-column: 11 / 16;
  grid-row: 10;
}

.r1c4 {
  color: rgb(66, 255, 82);

  grid-column: 16 / 21;
  grid-row: 10;
}

.r1c5 {
  color: rgb(255, 244, 84);

  grid-column: 21 / 26;
  grid-row: 10;
}

.r1c6 {
  color: rgb(255, 128, 128);
  grid-column: 26 / 31;
  grid-row: 10;
}

/* Row 11 labels */
.r2c1 {
  grid-column: 1 / 6;
  grid-row: 11;
}

.r2c2 {
  grid-column: 6 / 11;
  grid-row: 11;
}

.r2c3 {
  grid-column: 11 / 16;
  grid-row: 11;
}

.r2c4 {
  grid-column: 16 / 21;
  grid-row: 11;
}

.r2c5 {
  grid-column: 21 / 26;
  grid-row: 11;
}

.r2c6 {
  grid-column: 26 / 31;
  grid-row: 11;
}

/* Row 12 buttons */
.r3c1 {
  background-color: rgb(240, 169, 59);
  grid-column: 1 / 6;
  grid-row: 12;
}

.r3c2 {
  font-size: 0.7rem;

  grid-column: 6 / 11;
  grid-row: 12;
}

.r3c3 {
  grid-column: 11 / 16;
  grid-row: 12;
}

.r3c4 {
  grid-column: 16 / 21;
  grid-row: 12;
}

.r3c5 {
  grid-column: 21 / 26;
  grid-row: 12;
}

.r3c6 {
  grid-column: 26 / 31;
  grid-row: 12;
}

/* Row 13 labels */
.r4c1 {
  grid-column: 1 / 6;
  grid-row: 13;
}

.r4c2 {
  grid-column: 6 / 11;
  grid-row: 13;
}

.r4c3 {
  grid-column: 11 / 16;
  grid-row: 13;
}

.r4c4 {
  grid-column: 16 / 21;
  grid-row: 13;
}

.r4c5 {
  grid-column: 21 / 26;
  grid-row: 13;
}

.r4c6 {
  grid-column: 26 / 31;
  grid-row: 13;
}

/* Row 14 buttons */
.r5c1 {
  grid-column: 1 / 6;
  grid-row: 14;
}

.r5c2 {
  /* font-size: 0.7rem; */

  grid-column: 6 / 11;
  grid-row: 14;
}

.r5c3 {
  grid-column: 11 / 16;
  grid-row: 14;
}

.r5c4 {
  grid-column: 16 / 21;
  grid-row: 14;
}

.r5c5 {
  grid-column: 21 / 26;
  grid-row: 14;
}

.r5c6 {
  grid-column: 26 / 31;
  grid-row: 14;
}

/* Row 15 labels */
.r6c1 {
  grid-column: 1 / 6;
  grid-row: 15;
}

.r6c2 {
  grid-column: 6 / 11;
  grid-row: 15;
}

.r6c3 {
  font-size: 0.9rem;
  grid-column: 11 / 16;
  grid-row: 15;
}

.r6c4 {
  /* alignment issue */
  padding-left: 8px;
  grid-column: 16 / 20;
  grid-row: 15;
}

.r6c5 {
  grid-column: 21 / 26;
  grid-row: 15;
}

.r6c6 {
  grid-column: 26 / 31;
  grid-row: 15;
}

/* Row 16 buttons */
.r7c1 {
  grid-column: 1 / 6;
  grid-row: 16;
}

.r7c2 {
  grid-column: 6 / 11;
  grid-row: 16;
}

.r7c3 {
  color: rgb(79, 206, 249);

  grid-column: 11 / 16;
  grid-row: 16;
}

.r7c4 {
  color: rgb(79, 206, 249);

  grid-column: 16 / 21;
  grid-row: 16;
}

.r7c5 {
  color: rgb(79, 206, 249);

  grid-column: 21 / 26;
  grid-row: 16;
}

.r7c6 {
  font-size: 1.1rem;
  color: rgb(79, 206, 249);

  grid-column: 26 / 31;
  grid-row: 16;
}

/* .circle {
   font-size: 1.1rem;
 } */

/* Row 17 Space */
.spaceRow18 {
  align-content: center;
  grid-column: 1 / 31;
  grid-row: 17;
}

.spaceRow18 > hr {
  border: none;
  height: 2px;
  background-color: rgb(145 105 41);
}

/* Row 18 buttons */
.r8c1 {
  font-size: 1.1rem;
  color: rgb(79, 206, 249);

  grid-column: 1 / 7;
  grid-row: 18;
}

.r8c2 {
  color: rgb(79, 206, 249);

  grid-column: 7 / 13;
  grid-row: 18;
}

.r8c3 {
  font-size: 1rem;
  color: rgb(79, 206, 249);

  grid-column: 13 / 19;
  grid-row: 18;
}

.r8c4 {
  font-size: 1.3rem;
  color: rgb(240, 169, 59);

  grid-column: 19 / 25;
  grid-row: 18;
}

.r8c5 {
  font-size: 1.3rem;
  color: rgb(240, 169, 59);

  grid-column: 25 / 31;
  grid-row: 18;
}

/* .r8c6 {
   grid-column: 7;
   grid-row: 17;
 } */

/* Row 19 buttons */
.r9c1 {
  font-size: 1.1rem;
  color: rgb(79, 206, 249);

  grid-column: 1 / 7;
  grid-row: 19;
}

.r9c2 {
  font-size: 1.3rem;

  grid-column: 7 / 13;
  grid-row: 19;
}

.r9c3 {
  font-size: 1.3rem;

  grid-column: 13 / 19;
  grid-row: 19;
}

.r9c4 {
  font-size: 1.3rem;

  grid-column: 19 / 25;
  grid-row: 19;
}

.r9c5 {
  font-size: 1.3rem;
  color: rgb(240, 169, 59);

  grid-column: 25 / 31;
  grid-row: 19;
}

/* .r9c6 {
   grid-column: 7;
  grid-row: 19;
 } */

/* Row 20 buttons */
.rac1 {
  color: rgb(79, 206, 249);

  grid-column: 1 / 7;
  grid-row: 20;
}

.rac2 {
  font-size: 1.3rem;

  grid-column: 7 / 13;
  grid-row: 20;
}

.rac3 {
  font-size: 1.3rem;

  grid-column: 13 / 19;
  grid-row: 20;
}

.rac4 {
  font-size: 1.3rem;

  grid-column: 19 / 25;
  grid-row: 20;
}

.rac5 {
  font-size: 1.3rem;
  color: rgb(240, 169, 59);

  grid-column: 25 / 31;
  grid-row: 20;
}

/* .rac6 {
   grid-column: 7;
  grid-row: 20;
 } */

/* Row 21 buttons */
.rbc1 {
  grid-column: 1 / 7;
  grid-row: 21;
}

.rbc2 {
  font-size: 1.3rem;

  grid-column: 7 / 13;
  grid-row: 21;
}

.rbc3 {
  font-size: 1.3rem;

  grid-column: 13 / 19;
  grid-row: 21;
}

.rbc4 {
  font-size: 1.3rem;

  grid-column: 19 / 25;
  grid-row: 21;
}

.rbc5 {
  font-size: 1rem;
  color: rgb(79, 206, 249);

  grid-column: 25 / 31;
  grid-row: 21 / 23;
}

/* .rbc6 {
   grid-column: 7;
  grid-row: 21;
 } */

/* Row 22 buttons */
.rcc1 {
  grid-column: 1 / 7;
  grid-row: 22;
}

.rcc2 {
  font-size: 1.3rem;

  grid-column: 7 / 19;
  grid-row: 22;
}

.rcc3 {
  font-size: 1.3rem;

  grid-column: 19 / 25;
  grid-row: 22;
}

/* .rcc4 {
   grid-column: 13;
  grid-row: 22;
 } */

/* .rcc5 {
   grid-column: 7;
  grid-row: 22;
 } */

/* .rcc6 {
   grid-column: 6;
  grid-row: 22;
 } */

/******************* Dialog Modal *******************/

/* Style the dialog and its backdrop using the ::backdrop pseudo-element. */
dialog {
  padding: 20px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  width: 80%; /* Adjust as needed for larger size */
  max-width: 400px; /* Max width for responsiveness */
  height: auto;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  background-color: azure;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/******************* International System of Units(SI) *******************/

div.mainConstants {
  padding: 0;
}

div.mainConstants h2 {
  padding-bottom: 10px;
  font-size: 1.1rem;
  text-align: center;
}

div.mainConstants h3 {
  padding-bottom: 10px;
  font-size: 0.9rem;
  text-align: center;
}

div.mainConstants p {
  padding-bottom: 5px;
  font-size: 0.8rem;
  text-align: justify;
}

div.mainConstants p.source {
  color: #828282;
  font-style: italic;
  padding-bottom: 5px;
  font-size: 0.7rem;
  text-align: justify;
}

table {
  margin-left: auto;
  margin-right: auto;
}

table.tableUnits {
  border: 2px solid #555;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.tableUnits thead {
  background-color: rgb(71, 127, 251);
  font-size: 0.8rem;
  color: #e3edf7;
  font-weight: 900;
  border: 2px solid #bbb;
}

table.tableUnits tbody {
  background-color: rgb(243, 243, 255);
  font-size: 0.7rem;
  color: #e3edf7;
  font-weight: 900;
  border: 2px solid #c0c3ff;
}

table.tableUnits th {
  padding: 5px;
  border: 1px solid #c0c3ff;
  text-align: center;
}

table.tableUnits td.alignLeft {
  text-align: left;
}

table.tableUnits td {
  border: 1px solid #bbb;
  padding: 2px 24px 0;
  text-align: left;
  align-items: center;
  vertical-align: middle;
  color: #555;
  font-weight: 500;
  /* border-bottom: 1px solid rgba(168, 168, 168, 1); */
}

/*******************  Special Modal Buttons *******************/

button.topright {
  margin-top: 1px;
  background-color: yellow;
  color: rgb(255, 0, 0);
  border: 1px solid rgb(255, 0, 0);
  padding: 4px; /* Adjust for a more square shape */
  font-size: 1rem;
  border-radius: 4px; /* Removes default rounded corners */

  width: 30px;
  height: 30px;
  position: absolute; /* Position relative to .modal-content */
  top: 24px;
  right: 2px;
  cursor: pointer;
}

button.topright:hover,
button.topright:focus {
  margin-top: 0;
  background-color: rgb(158, 14, 14);
  color: white;
}

.constantBtn {
  background-color: rgb(204, 236, 255);
  color: black;
  border: 2px solid black;
  padding: 4px; /* Adjust for a more square shape */
  font-size: 1rem;
  border-radius: 4px; /* Removes default rounded corners */

  width: 30px;
  height: 30px;
  cursor: pointer;
}

.constantBtn:hover,
.constantBtn:focus {
  background-color: rgb(158, 14, 14);
  color: white;
}

hr {
  margin: 20px;
}

button.bottomLeft {
  margin-left: 16px;
  background-color: yellow;
  color: rgb(255, 0, 0);
  border: 1px solid rgb(255, 0, 0);
  padding: 4px; /* Adjust for a more square shape */
  font-size: 1rem;
  border-radius: 4px; /* Removes default rounded corners */

  width: 90px;
  height: 30px;
  cursor: pointer;
}

button.bottomLeft:hover,
button.bottomLeft:focus {
  margin-left: 16px;
  background-color: rgb(158, 14, 14);
  color: white;
}

/*******************  The SI base units definitions *******************/

dl.unitsDefinitions {
  text-align: justify;
  font-size: 0.9rem;
  line-height: 1.1rem;
  font-weight: 200;
  color: #555;
}

dl.unitsDefinitions > dt {
  padding-top: 10px;
  font-size: 0.9rem;
  font-weight: 900;
  color: #555;
  border-bottom: 1px solid rgba(168, 168, 168, 1);
}

dl.unitsDefinitions > dd {
  font-size: 0.8rem;
  text-align: justify;
  line-height: 1.1rem;
}

/* Physical Constants */

dl.physicalConstants {
  text-align: justify;
  font-size: 0.9rem;
  line-height: 1.1rem;
  font-weight: 200;
  color: #555;
}

dl.physicalConstants > dt {
  padding-top: 12px;
  font-size: 0.9rem;
  font-weight: 900;
  color: #555;
  /* border-bottom: 1px solid rgba(168, 168, 168,1.00); */
}

dl.physicalConstants > dd {
  padding-left: 15px;
  font-size: 0.8rem;
  text-align: justify;
  line-height: 1.1rem;
}

.atomicMassUnit,
.electricConstant,
.magneticConstant,
.electronMass,
.protonMass,
.inverseFineStructureConstant,
.eletronVolt,
.magneticFluxQuantun,
.rydbergConstant {
  width: 40px;
  height: 30px;
}

.avogadro,
.rydbergFrequency {
  width: 50px;
  height: 30px;
}

.protonElectronMassRatio {
  width: 70px;
  height: 30px;
}

/*******************  Periodic Table of the Elements *******************/

div.mainChemTable {
  padding: 0;
}

div.mainChemTable h2 {
  padding-bottom: 10px;
  font-size: 1.1rem;
  text-align: center;
}

div.mainChemTable h3 {
  padding-bottom: 10px;
  font-size: 0.9rem;
  text-align: center;
}

div.mainChemTable p {
  padding-bottom: 5px;
  font-size: 0.8rem;
  text-align: justify;
}

div.mainChemTable p.source {
  color: #828282;
  font-style: italic;
  padding-bottom: 5px;
  font-size: 0.7rem;
  text-align: justify;
}

div.periodicTable {
  margin-left: auto;
  margin-right: auto;
}

/* table {
  margin-left: auto;
  margin-right: auto;
} */

table.periodicTable {
  border: 2px solid #555;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* table.periodicTable thead {
  background-color: rgb(71, 127, 251);
  font-size: 0.8rem;
  color: #e3edf7;
  font-weight: 900;
  border: 2px solid #bbb;
} */

table.periodicTable tbody {
  background-color: rgb(243, 243, 255);
  font-size: 0.7rem;
  color: #e3edf7;
  font-weight: 900;
  border: 2px solid #c0c3ff;
}

table.periodicTable th {
  padding: 5px;
  border: 1px solid #c0c3ff;
  text-align: center;
}

table.periodicTable td.alignLeft {
  text-align: left;
}

table.periodicTable td {
  border: 1px solid #bbb;
  padding: 2px 24px 0;
  text-align: left;
  align-items: center;
  vertical-align: middle;
  color: #555;
  font-weight: 500;
  /* border-bottom: 1px solid rgba(168, 168, 168, 1); */
}

.AtomicWeight span {
  color: rgb(158, 14, 14);
}

.AtomicWeight {
  width: 346px;
  height: 30px;
}

/*******************  Special Functions *******************/

dl.specialFunctions {
  text-align: justify;
  font-size: 0.9rem;
  line-height: 1.1rem;
  font-weight: 200;
  color: #555;
}

dl.specialFunctions > dt {
  padding-top: 10px;
  font-size: 1rem;
  font-weight: 900;
  color: #555;
  /* border-bottom: 1px solid rgba(168, 168, 168,1.00); */
}

dl.specialFunctions > dd {
  padding-left: 15px;
  font-size: 0.9rem;
  text-align: justify;
  line-height: 1.3rem;
}

figure.linearEquation {
  width: 100%;
  text-align: center;
}

figure.linearEquation > img {
  margin: 3%;
  /* margin-left: 20%; */
  width: 600px;
  height: auto;
  border: 2px solid rgb(161, 161, 161);
}

table.waterPrperties {
  margin: 2%;
  border: 2px solid #555;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.waterPrperties thead {
  background-color: rgb(71, 127, 251);
  font-size: 16px;
  color: #e3edf7;
  font-weight: 900;
  border-bottom: 2px solid #999;
}

table.waterPrperties th {
  padding: 5px;
  border: 1px solid #bbb;
  text-align: center;
}

table.waterPrperties td.alignLeft {
  text-align: left;
}

table.waterPrperties td {
  border: 1px solid #bbb;
  padding: 2px 24px 0;
  text-align: left;
  align-items: center;
  vertical-align: middle;
  color: #555;
  font-weight: 500;
  border-bottom: 1px solid rgba(168, 168, 168, 1);
}

/******************* Media Queries Breakpoints *******************/
/* Media queries can be placed in both global CSS files and within  */
/* component-specific or "endpoint" CSS files, depending on the project's  */
/* organization and desired modularity. */

/* Styles for screens less than 576px (e.g., smartphones) */
@media screen and (width < 576px) {
  header {
    display: block;
  }
  .header {
    height: 0;
  }

  .csLogo {
    height: 100px;
  }

  .navigation {
    height: 20px;
    text-align: center;
  }

  .nav-top {
    height: 0;
  }

  .nav-bottom {
    word-spacing: 6px;
  }

  .nav-bottom a {
    font-size: 0.96rem;
  }

  .rights img {
    width: 200px;
    height: auto;
  }
}

/* Styles for screens wider than 576px -  768px (e.g., tablets) */
@media screen and (width >= 576px) and (width < 768px) {
  header {
    display: block;
  }

  .header {
    height: 0;
  }

  .csLogo {
    height: 100px;
    text-align: left;
  }

  .navigation {
    height: 20px;
    text-align: center;
  }

  .nav-top {
    height: 0;
  }

  .nav-bottom {
    word-spacing: 6px;
  }

  .rights img {
    width: 250px;
    height: auto;
  }
}