/*--- INLINE FORM STARTS ---*/
.search-form-inline {  
  /*width: 37%;
  margin: 0 auto; --if you want to center this form add these lines and add width: 100% for mobile devices  */
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  /*background: #F1F1F1;*/
  padding: 2px 15px;
}

.search-form-inline label {
  margin: 0px 0px 0px 0;
}

.search-form-inline input, select {
  font-family: inherit;
  font-size: inherit;
  vertical-align: middle;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.search-form-inline button {
  font-family: inherit;
  font-size: inherit;
  padding: 10px 20px;  
  border: 1px solid #ddd;
  color: white;
  cursor: pointer;
  opacity: 1.0;
}

.search-form-inline button:hover {
  opacity: 0.8;
}

@media (max-width: 992px) {
  .search-form-inline input, select {
    margin: 0px 0;
  }
  
  .search-form-inline {
    flex-direction: column;
    align-items: stretch;
  }
}
/*--- INLINE FORM ENDS ---*/


/*--- TABLE WITH SEARCH STARTS ---*/
.search-input {
  /*background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;*/
  font-family: inherit;
  font-size: inherit;
  padding: 12px 20px;
  border: 1px solid #ddd;
  width: 100%;
  margin: 0 auto;
}

/* .search-table is identical to .result-table except for it hides headers @media. 
Uncomment borders if you want to see right border on mobiles. */

.search-table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  font-size: inherit;
  /*border: 1px solid #ddd;*/  
}

.search-table th, td {
  text-align: left;
  padding: 5px;
  /*border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;*/
  border: 1px solid #ddd;
  vertical-align: middle;
  overflow: hidden;
}

.search-table tr {
  border-bottom: 1px solid #ddd;
}

.search-table tr:nth-child(even) {
  background: #f2f2f2;
}

#all_bookings_table tr.header, #all_bookings_table tr:hover {
  background-color: #FFFF99; /*#f1f1f1*/
}

#wages_table tr.header, #wages_table tr:hover {
  background-color: #FFFF99; /*#f1f1f1*/
}

#user_wage_table tr.header, #user_wage_table tr:hover {
  background-color: #FFFF99; /*#f1f1f1*/
}

#invoices_table tr.header, #invoices_table tr:hover {
  background-color: #FFFF99; /*#f1f1f1*/
}

#payments_table tr.header, #payments_table tr:hover {
  background-color: #FFFF99; /*#f1f1f1*/
}

.split1, .split2{
  display: none;
}

.not-found{
  width: 90%;
  margin: 0 auto;
  padding: 20px;
  text-align: center;   
  background: #FFFF99;
}

@media only screen and (max-width: 1200px){
  .search-table table, thead, tbody, th, td, tr {
    display: block;
    /*if you need another table behave like a table again, 
    put display:inline-block or display:table in its styles,
    see example in to-do.css*/
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  .search-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  } 

  .united{
    display: none;
  }

  .split1, .split2{
    display: inline-block;
    border: none;                  /*if you want borders around every cell, remove border:none; but then all the cells must be same height!*/  
    border-top: 1px solid #ddd; 
    vertical-align: top;       
  }

  .split1{
    width: 25%;
  }

  .split2{
    width: 75%;
  }

}

@media only screen and (max-width: 600px){
  .split1{
    width: 35%;
  }

  .split2{
    width: 65%;
  } 
}

@media only screen and (max-width: 280px){
  .split1{
    width: 45%;
  }

  .split2{
    width: 55%;
  }

  .search-table {
    font-size: 8px;
  }
 
}

/*--- TABLE WITH SEARCH ENDS ---*/

/* --- TABLE WITH CALCULATIONS STARTS --- */  
.sum-cells{
  border: 0; 
  border-right: 1px solid #ddd;  
}

.p5px-trbl{
  padding: 5px;
}

/* --- TABLE WITH CALCULATIONS ENDS --- */