style.css

.arrange-horizontally>* {
  display: inline-block;
  text-align: center;
}

.table-borders {
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  float: left;
}

.head-padding {
  padding-left: 5px;
  padding-right: 5px;
}

.crossout1{
  text-decoration: line-through;
}
.crossout0{
  text-decoration: none;
}

.text-center {
  text-align: center;
}

.input-clickable {
  border: none;
  display: inline;
  font-family: inherit;
  font-size: inherit;
}

/* Style the header with a grey background and some padding */

.header {
  overflow: hidden;
  /*background-color: #f1f1f1;*/
  padding: 0px 0px;
}

/* Style the header links */

.bg-alpha {
  background-color: rgba(0, 0, 0, 0);
}

.header a,
button {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 15px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */

.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/

.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */

.header-right {
  float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

.rTable {
  display: block;
  width: 100%;
}

.rTableHeading,
.rTableBody,
.rTableFoot,
.rTableRow {
  clear: both;
}

.rTableHead,
.rTableFoot {
  background-color: #DDD;
  font-weight: bold;
}

.rTableCell,
.rTableHead {
  border: 0px solid #999999;
  float: left;
  height: 17px;
  /*overflow: scroll;*/
  /*word-wrap: break-word; dont work*/
  padding: 3px 1.8%;
  width: 28%;
}

.rTable:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.bg-black {
  background-color: #242424
}

.button {
  font: bold 11px Arial;
  text-decoration: none;
  color: #333333;
  padding: 15px 6px 15px 6px;
  border: 1px solid #AF504C;
  /* Green */
}

.sky-blue {
  background-color: #AED6F1;
}

.orange {
  background-color: #DC7633;
}

.green {
  background-color: #00dd00;
}

.yellow {
  color: #ffd100
}

.sky-blue_txt {
  color: #AED6F1;
}

.employees-color {
  background-color: #e0f0f8;
}

.employers-color {
  background-color: #e8fada;
}

.main-bg {
  background-color: #eeeeee;
}

.text-color {
  color: #000;
}

.header-color {
  color: #000;
}

.bold_center {
  text-align: center;
  font-weight: bold;
}

.checkbox {
  width: 10px;
}

.header-1 {
  width: 100px;
  /*100px;*/
}

.input-search {
  width: 110px;
}

.header-1-long {
  width: 130px;
  /*100px;*/
}

.header-2 {
  width: 300px;
  /*200px;*/
}

.header-3 {
  width: 80px;
  /*80px;*/
}

.header-4 {
  width: 35px;
  /*35px;*/
}
.header-4_for_input {
  width: 70px;
  /*35px;*/
}
.header-4_for_input_long {
  width: 80px;
  /*35px;*/
}

.right {
  float: right;
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

/* Modal Content */

.modal-content-employee {
  background-color: #a6c2fe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
}

.modal-content-employer {
  background-color: #cee4bc;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
}