* {
  margin: 0;

  padding: 0;

  box-sizing: inherit;
}


main {
  width: 100%;
  height: 85vh;
  color: #444;

  display: flex;

  align-items: center;

  justify-content: space-around;

  text-align: center;
  margin-top: 10px;
}

.darulfatha {
  background-image: url('savings.jpg'); /* Path to your image */
  background-size: contain; /* Ensures the image covers the entire section */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
   /* Sets the section height to full viewport height */
  /*background-color: rgb(255, 255, 255);*/
  border-radius: 15px;

  /*background-image: url("resources/images/savings.jpg");

  background-position: center;

  background-size: auto;

  background-repeat: no-repeat;*/

  border: 5px solid rgb(47, 135, 218);


  padding: 0px;

  margin: 0px;

  margin-top: 0px;

  margin-bottom: 0px;

  font-family: Arial, Helvetica, sans-serif;
}

.titleBar {
  margin-top: 7px;

  width: 100%; /* Full-width */

  height: 80px;

  padding: 0px;

  /*border-bottom: 5px solid rgb(47, 135, 218);*/

  text-align: center;

  background-color: #fff; /* Dark-grey background */

  background-image: url("../images/zplogo.jpg");
  background-position: center;
  background-repeat: no-repeat;
}

input {
  width: 30%;
      padding: 10px 15px;
      border: 2px solid #ccc;
      border-radius: 25px;
      outline: none;
      font-size: 16px;
      transition: border-color 0.3s ease;

  /*background-color: #10c509;

  color: #000;

  text-align: center;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12pt;

  font-weight: bold;*/
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */

  color: #a7a1a1;

  opacity: 1; /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */

  color: #a7a1a1;
}

::-ms-input-placeholder {
  /* Microsoft Edge */

  color: #a7a1a1;
}

.txtUname {
  text-align: center;
  transition: border-color 0.3s ease;
  text-transform: uppercase;
}

.txtUname {
  text-align: center;
}

.txtPwd {
  text-align: center;
}

.txtMobile {
  text-align: center;
}

.txtMsg {
  text-align: center;
  color: red;
  background-color: whitesmoke;
  font-size: 8.25pt;
}

h1 {
  color: rgb(24, 45, 138);

  font-size: 14.25pt;

  font-family: "Arial";

  font-weight: bolder;

  text-decoration: underline;
}

h2 {
  color: rgb(58, 82, 189);

  margin-bottom: 0px;

  font-size: 10pt;

  font-family: "Arial";

  font-weight: lighter;
}

.cmdotp {
  display: none; /* Hide the button by default */
}

.btn {
  border: none;

  color: maroon;

  background-color: #e5f0ec;

  margin: 30px 30px;

  padding: 5px 20px;

  text-align: center;

  text-decoration: none;

  /*display: inline-block;*/

  font-size: 11pt;

  border: 1px solid maroon;

  border-radius: 8px;
}

.btn:hover {
  background-color: #4caf50; /* Green */

  color: white;

  font-style: italic;
}

/*...welcome...*/

.mainMenu {
  width: 100%;

  height: 100%;

  font-family: Arial, Helvetica, sans-serif;
}

#lo {
  position: absolute;

  top: 0px;

  right: 5px;

  color: red;

  cursor: pointer;
}

/*...job...*/

.JobInput {
  margin-top: 15px;

  background-color: #d49eec;

  color: #000;

  text-align: center;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12pt;

  font-weight: bold;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */

  color: #d3d3d3;

  opacity: 1; /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */

  color: #d3d3d3;
}

::-ms-input-placeholder {
  /* Microsoft Edge */

  color: #d3d3d3;
}

/*...reporting...*/

table,
tr,
td {
  text-align: center;

  padding: 5px;
}

#repTable td,
th {
  border: 1px solid whitesmoke;

  border-collapse: collapse;
}

table {
  color: #000;

  margin-left: auto;

  margin-right: auto; /*background-color: dodgerblue;*/

  width: 100%;
}

.pending {
  color: yellow;

  text-align: center;

  cursor: pointer;
}