tr.htmx-swapping td {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.clock-in-out-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-button);
  border: 2px solid var(--main-button);
  color: var(--main-button-font-colour);
  cursor: pointer;
  height:30px;
}

.clock-in-out-button svg {
  /* Additional styling for your SVG */
  margin-right: 5px; /* Adjust this value as needed */
}

.clock-in-out-button-text {
  /* Additional styling for your text */
  font-size: 14px;
  margin-left: 2px;
}

.clock-in-out-button:hover{
  background-color: var(--main-buttons-hover);
  border: 2px solid var(--main-buttons-hover);
}

.minibutton {
  display: inline;
  align-items: center;
  justify-content: center;
  background-color: var(--main-button);
  border: 2px solid var(--main-button);
  color: var(--main-button-font-colour);
  cursor: pointer;
  height:30px;
  margin-left: 4px;
}

.minibutton:hover{
  background-color: var(--main-buttons-hover);
  border: 2px solid var(--main-buttons-hover);
}

@media only screen and (max-width: 450px) {
  .clock-out-button{
    height: 18px;
    width: 50px;
    font-size: 8px;
    padding: 1px;
    margin: auto;
  }
  
  .clock-in-button{
    height: 18px;
    width: 50px;
    font-size: 8px;
    padding: 1px;
    margin: auto;
  }

  .toggle-theme-container {
    font-size: 9px;
  }

  .actionbutton {
    width: 98%;
  }
  
  .month-link-container{
    width: 90%;
    display: flex;
    box-sizing: border-box;
  }

  .previous-next-month{
    text-decoration: none;
    text-align: center;
    width: 30%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 2px solid var(--main-button);
    outline: none;
    padding:6px;
    display: inline;
    font-weight: bold;
    box-sizing: border-box;
  }

  .previous-next-month:hover{
    text-decoration: none;
    text-align: center;
    width: 30%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 2px solid var(--main-button);
    outline: none;
    padding:6px;
    display: inline;
    font-weight: bold;
    box-sizing: border-box;
  }

  .staff-holidays-actionbutton {
    width: 98%;
    margin: auto;
  }
  
  .deletebutton {
    width: 50%;
    display: block;
    padding-left: 5px;
    text-align: center;
  }

  .table-deletebutton {
    width: 35%;
    display: block;
    text-align: center;
    float: left;
  }
  
  .navbarwelcome{
    text-align: left;
    color: #dfdfdf;
    height: 40px;
    width: 98%;
    background-color: var(--n-div-main);
    border: 2px solid var(--n-div-main);
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }

  .textbox {
    width: 98%;
    margin: auto auto auto 5px;
  }
  
  .notes {
    width: 98%;
    box-sizing: border-box;
    background-color: var(--notes-input-bg);
    color: var(--notes-input-font);
    border: 1px solid var(--notes-input-border);
  }
  
  .date-input {
    width: 98%;
    margin: auto auto auto 5px;
    background-color: var(--inputbox);
    color: var(--inputbox-font-color);
  }
  
  .time-input {
    width: 98%;
    margin: auto auto auto 5px;
    background-color: var(--inputbox);
    color: var(--inputbox-font-color);
  }
  
  .selectbox {
    width: 98%;
    margin: auto auto auto 5px;
  }
  
  .file-button {
    display:block;
    width: 99%;
    box-sizing: border-box;
  }
  
  .file-button::before {
    width: 99%;
    display: block;
  }
  
  .logininputs {
    width: 98%;
    padding: 12px 20px;
    margin: 10px auto 10px auto;
    display: block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  .loginbutton {
    width: 98%;
    background-color: var(--action-button);
    color: var(--action-button-font-colour);
    padding: 12px 20px;
    margin: 0px auto 10px auto;
    border: 1px solid var(--action-button);
    cursor: pointer;
  }

  .loginbutton:hover {
    background-color: var(--action-button-hover);
  }

  .logoutbutton {
    width: 98%;
    background-color: var(--action-button);
    color: var(--action-button-font-colour);
    padding: 12px 20px;
    margin: 0px auto 10px auto;
    border: 1px solid var(--action-button);
    cursor: pointer;
  }

  .logoutbutton:hover {
    background-color: var(--action-button-hover);
  }
  .infobar-staff-holidays{
    color: var(--header-font-color);
    text-align: left !important;
  }

  .label-width-400{
    color: var(--header-font-color);
    text-align: left !important;
  }
  
  .menubutton {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .menubutton1 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton2 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton3 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton4 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .menubutton5 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .menubutton6 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  .menubutton7 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .menubutton8 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton9 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton10 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton11 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton12 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton13 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton14 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton15 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton16 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton17 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton1:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton2:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton3:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton4:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton5:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton6:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton7:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton8:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton9:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }
  
  .menubutton10:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton11:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton12:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton13:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton14:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton15:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton16:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton17:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

 
  /* Force table to not be like tables anymore */
  .holiday-allowance th, .holiday-allowance td, .holiday-allowance tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .holiday-allowance th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .holiday-allowance tr{ 
    margin: 0 0 1rem 0;
  }
  
  .holiday-allowance tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .holiday-allowance tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .holiday-allowance td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 55%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
   
  }
  
  .holiday-allowance td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .holiday-allowance td:nth-of-type(1)::before {
    content: "Edit:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-allowance td:nth-of-type(2)::before {
    content: "Employee Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-allowance td:nth-of-type(3)::before {
    content: "Allowance Year:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-allowance td:nth-of-type(4)::before {
    content: "Allowance Hours:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .holiday-allowance td:nth-of-type(5)::before {
    content: "Remaining Allowance for Year:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .holiday-allowance td:nth-of-type(6)::before {
    content: "Unpaid Hours Taken:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .holiday-allowance td:nth-of-type(7)::before {
    content: "Notes:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }


  .holiday-allowance{
    border-collapse: collapse;
    width: 90%;
    margin: auto;
  }

/*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .holiday-request-table th, .holiday-request-table td, .holiday-request-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .holiday-request-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .holiday-request-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .holiday-request-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .holiday-request-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .holiday-request-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .holiday-request-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .holiday-request-table td:nth-of-type(1)::before {
    content: "Start:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-request-table td:nth-of-type(2)::before {
    content: "End:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-request-table td:nth-of-type(3)::before {
    content: "Duration Hours:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-request-table td:nth-of-type(4)::before {
    content: "Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .holiday-request-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }
  .carddiv-mini{
    width: 85%;
    background-color: var(--cardiv-minis-background-color);
    margin: auto;
    padding-left:10px;
    padding-right:10px;
    padding-top: 5px;
    padding-bottom: 10px;
    min-height:15px;
  }


/*########################################################################################################## */

   /* Force table to not be like tables anymore */
  .manage-user-table th, .manage-user-table td, .manage-user-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .manage-user-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .manage-user-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .manage-user-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .manage-user-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .manage-user-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 55%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .manage-user-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .manage-user-table td:nth-of-type(1)::before {
    content: "Edit:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manage-user-table td:nth-of-type(2)::before {
    content: "User Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manage-user-table td:nth-of-type(3)::before {
    content: "Account Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manage-user-table td:nth-of-type(4)::before {
    content: "Department:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table td:nth-of-type(5)::before {
    content: "Permissions:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table td:nth-of-type(6)::before {
    content: "IntraSoft Access:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table td:nth-of-type(7)::before {
    content: "Holidays, Profile, Clock-In:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table td:nth-of-type(8)::before {
    content: "TOTP Enabled:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table td:nth-of-type(9)::before {
    content: "TOTP User Enrolled:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  

  .manage-user-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

/*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .manager-staff-holiday-table th, .manager-staff-holiday-table td, .manager-staff-holiday-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .manager-staff-holiday-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .manager-staff-holiday-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .manager-staff-holiday-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .manager-staff-holiday-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .manager-staff-holiday-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .manager-staff-holiday-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /* Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.*/
  
  .manager-staff-holiday-table td:nth-of-type(1)::before {
    content: "Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manager-staff-holiday-table td:nth-of-type(2)::before {
    content: "Start:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manager-staff-holiday-table td:nth-of-type(3)::before {
    content: "End:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manager-staff-holiday-table td:nth-of-type(4)::before {
    content: "Duration Hours:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manager-staff-holiday-table td:nth-of-type(5)::before {
    content: "Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manager-staff-holiday-table td:nth-of-type(6)::before {
    content: "Respond:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manager-staff-holiday-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

/*########################################################################################################## */


   /* Force table to not be like tables anymore */
   .log-table th, .log-table td, .log-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .log-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .log-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .log-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .log-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .log-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .log-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .log-table td:nth-of-type(1)::before {
    content: "Date:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .log-table td:nth-of-type(2)::before {
    content: "IP EndPoint:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .log-table td:nth-of-type(3)::before {
    content: "User Agent:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .log-table td:nth-of-type(4)::before {
    content: "Log String:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  .log-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

  /*########################################################################################################## */


   /* Force table to not be like tables anymore */
   .staff-prescence-table th, .staff-prescence-table td, .staff-prescence-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .staff-prescence-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .staff-prescence-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .staff-prescence-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .staff-prescence-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .staff-prescence-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .staff-prescence-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .staff-prescence-table td:nth-of-type(1)::before {
    content: "Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .staff-prescence-table td:nth-of-type(2)::before {
    content: "Location:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .staff-prescence-table td:nth-of-type(3)::before {
    content: "Clocked In:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .staff-prescence-table td:nth-of-type(4)::before {
    content: "Clocked Out:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .staff-prescence-table td:nth-of-type(5)::before {
    content: "Duration:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .staff-prescence-table td:nth-of-type(6)::before {
    content: "Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .staff-prescence-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }



 /*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .file-uploads-table th, .file-uploads-table td, .file-uploads-table tr{
    display: block;
  }

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

  .file-uploads-table tr{ 
    margin: 0 0 1rem 0;
  }

  .file-uploads-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }

  .file-uploads-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }

  .file-uploads-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }

  .file-uploads-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }

  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */

  .file-uploads-table td:nth-of-type(1)::before {
    content: "Type:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .file-uploads-table td:nth-of-type(2)::before {
    content: "Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .file-uploads-table td:nth-of-type(3)::before {
    content: "Date Created/Uploaded:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .file-uploads-table td:nth-of-type(3)::before {
    content: "Created By:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .file-uploads-table td:nth-of-type(3)::before {
    content: "";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  

  .file-uploads-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

  /*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .emergency-contact-table th, .emergency-contact-table td, .emergency-contact-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .emergency-contact-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .emergency-contact-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .emergency-contact-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .emergency-contact-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .emergency-contact-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .emergency-contact-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .emergency-contact-table td:nth-of-type(1)::before {
    content: "Primary Contact:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .emergency-contact-table td:nth-of-type(2)::before {
    content: "Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .emergency-contact-table td:nth-of-type(3)::before {
    content: "Relationship:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .emergency-contact-table td:nth-of-type(4)::before {
    content: "Address:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .emergency-contact-table td:nth-of-type(5)::before {
    content: "Home Tel:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .emergency-contact-table td:nth-of-type(6)::before {
    content: "Work Tel:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .emergency-contact-table td:nth-of-type(7)::before {
    content: "Mobile:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .emergency-contact-table td:nth-of-type(8)::before {
    content: "Work Mobile:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .emergency-contact-table td:nth-of-type(9)::before {
    content: "Delete:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .emergency-contact-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }
  .carddiv-mini{
    width: 85%;
    background-color: var(--cardiv-minis-background-color);
    margin: auto;
    padding-left:10px;
    padding-right:10px;
    padding-top: 5px;
    padding-bottom: 10px;
    min-height:15px;
  }

  /*########################################################################################################## */

   /* Force table to not be like tables anymore */
   .staff-emergency-profile-table th, .staff-emergency-profile-table td, .staff-emergency-profile-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .staff-emergency-profile-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .staff-emergency-profile-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .staff-emergency-profile-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .staff-emergency-profile-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .staff-emergency-profile-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 55%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .staff-emergency-profile-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .staff-emergency-profile-table td:nth-of-type(1)::before {
    content: "User Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .staff-emergency-profile-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }


  /*################################################################################################################*/

.emergency-profile-print-table tr {
  text-align: left;
  top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:5px;
  padding-bottom: 5px;
  background-color: var(--table-head);
  color: var(--table-head-font-colour);
}

.emergency-profile-print-table td {
  text-align: left;
  padding-top:5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--holiday-allowances-td-font-color);
}

.emergency-profile-print-table tr:nth-child(even) {
  background-color: var(--table-even-color);
}

.emergency-profile-print-table tr:nth-child(odd) {
  background-color: var(--table-odd-color);
}

.emergency-profile-print-table{
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}

/*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .works-order-search-table th, .works-order-search-table td, .works-order-search-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .works-order-search-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .works-order-search-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .works-order-search-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .works-order-search-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .works-order-search-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .works-order-search-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /* Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.*/
  
  .works-order-search-table td:nth-of-type(1)::before {
    content: "Job:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .works-order-search-table td:nth-of-type(2)::before {
    content: "Part Number:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .works-order-search-table td:nth-of-type(3)::before {
    content: "Part Desc:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .works-order-search-table td:nth-of-type(4)::before {
    content: "Due Date:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .works-order-search-table td:nth-of-type(5)::before {
    content: "Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .works-order-search-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

  /*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .order-search-table th, .order-search-table td, .order-search-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .order-search-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .order-search-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .order-search-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .order-search-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .order-search-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .order-search-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /* Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.*/
  
  .order-search-table td:nth-of-type(1)::before {
    content: "Order Num:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .order-search-table td:nth-of-type(2)::before {
    content: "Quote Number:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .order-search-table td:nth-of-type(3)::before {
    content: "Customer:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .order-search-table td:nth-of-type(4)::before {
    content: "Account:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .order-search-table td:nth-of-type(5)::before {
    content: "Reference:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .order-search-table td:nth-of-type(6)::before {
    content: "Required Date:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .order-search-table td:nth-of-type(7)::before {
    content: "Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .order-search-table td:nth-of-type(8)::before {
    content: "Entered By:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .order-search-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

/*########################################################################################################## */

}
/*###############################################################################################################
Small devices (portrait tablets and large phones, up to 900px) 
###############################################################################################################*/
@media only screen and (min-width:450px) and (max-width: 900px) {
  .actionbutton {
    width: 98%;
  }
  
  .month-link-container{
    width: 90%;
    display: flex;
    box-sizing: border-box;
  }

  .previous-next-month{
    text-decoration: none;
    text-align: center;
    width: 30%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 2px solid var(--main-button);
    outline: none;
    padding:6px;
    display: inline;
    font-weight: bold;
    box-sizing: border-box;
  }

  .previous-next-month:hover{
    text-decoration: none;
    text-align: center;
    width: 30%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 2px solid var(--main-button);
    outline: none;
    padding:6px;
    display: inline;
    font-weight: bold;
    box-sizing: border-box;
  }

  .staff-holidays-actionbutton {
    width: 98%;
    margin: auto;
  }
  
  .deletebutton {
    width: 50%;
    display: block;
    padding-left: 5px;
    text-align: center;
  }

  .table-deletebutton {
    width: 40%;
    display: block;
    text-align: center;
    float: left;
  }
  
  
  .navbarwelcome{
    text-align: left;
    color: #dfdfdf;
    height: 40px;
    width: 98%;
    background-color: var(--n-div-main);
    border: 2px solid var(--n-div-main);
    display: flex;
    flex-flow: row wrap;
    align-items: center;
  }

  .textbox {
    width: 98%;
    margin: auto auto auto 5px;
  }
  
  .notes {
    width: 98%;
    box-sizing: border-box;
    background-color: var(--notes-input-bg);
    color: var(--notes-input-font);
    border: 1px solid var(--notes-input-border);
  }
  
  .date-input {
    width: 98%;
    margin: auto auto auto 5px;
    background-color: var(--inputbox);
    color: var(--inputbox-font-color);
  }
  
  .time-input {
    width: 98%;
    margin: auto auto auto 5px;
    background-color: var(--inputbox);
    color: var(--inputbox-font-color);
  }
  
  .selectbox {
    width: 98%;
    margin: auto auto auto 5px;
  }
  
  .file-button {
    display:block;
    width: 99%;
    box-sizing: border-box;
  }
  
  .file-button::before {
    width: 99%;
    display: block;
  }
  
  .logininputs {
    width: 98%;
    padding: 12px 20px;
    margin: 10px auto 10px auto;
    display: block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }
  
  .loginbutton {
    width: 98%;
    background-color: var(--logbuttons-background-and-border-color);
    color: var(--logbuttons-font-color);
    padding: 12px 20px;
    margin: 0px auto 10px auto;
    border: 1px solid var(--logbuttons-background-and-border-color);
    cursor: pointer;
  }

  .logoutbutton {
    width: 98%;
    background-color: var(--logbuttons-background-and-border-color);
    color: var(--logbuttons-font-color);
    padding: 12px 20px;
    margin: 0px auto 10px auto;
    border: 1px solid var(--logbuttons-background-and-border-color);
    cursor: pointer;
  }

  .toggle-theme-container {
    font-size: 12px;
  }

  .infobar-staff-holidays{
    color: var(--header-font-color);
    text-align: left !important;
  }

  .label-width-400{
    color: var(--header-font-color);
    text-align: left !important;
  }

  .clock-out-button{
    background-color: var(--menubutton-background-and-border-color-2);
    color: #dfdfdf;
    border: 2px solid var(--menubutton-background-and-border-color-2);
  }
  
  .clock-in-button{
    background-color: var(--menubutton-background-and-border-color);
    color: #dfdfdf;
    border: 2px solid var(--menubutton-background-and-border-color);
  }
  
  .menubutton {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .menubutton1 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton2 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton3 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton4 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .menubutton5 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .menubutton6 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  .menubutton7 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .menubutton8 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton9 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton10 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton11 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton12 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton13 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton14 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton15 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton16 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton17 {
    width: 98%;
    line-height: 16px;
    font-size: 13px;
    background-color: var(--main-button);
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-block;
    padding:8px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }


  .menubutton:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton1:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton2:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton3:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton4:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton5:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton6:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton7:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton8:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton9:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }
  
  .menubutton10:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton11:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton12:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton13:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton14:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton15:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton16:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  .menubutton17:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover);
    padding-top:8px; 
    padding-bottom:8px;
  }

  /* Force table to not be like tables anymore */
  .holiday-allowance th, .holiday-allowance td, .holiday-allowance tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .holiday-allowance th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .holiday-allowance tr{ 
    margin: 0 0 1rem 0;
  }
  
  .holiday-allowance tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .holiday-allowance tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .holiday-allowance td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 55%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
   
  }
  
  .holiday-allowance td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .holiday-allowance td:nth-of-type(1)::before {
    content: "Edit:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-allowance td:nth-of-type(2)::before {
    content: "Employee Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-allowance td:nth-of-type(3)::before {
    content: "Allowance Year:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-allowance td:nth-of-type(4)::before {
    content: "Allowance Hours:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .holiday-allowance td:nth-of-type(5)::before {
    content: "Remaining Allowance for Year:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .holiday-allowance td:nth-of-type(6)::before {
    content: "Total Unpaid Hours:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .holiday-allowance td:nth-of-type(7)::before {
    content: "Notes:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }


  .holiday-allowance{
    border-collapse: collapse;
    width: 90%;
    margin: auto;
  }

/*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .holiday-request-table th, .holiday-request-table td, .holiday-request-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .holiday-request-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .holiday-request-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .holiday-request-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .holiday-request-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .holiday-request-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .holiday-request-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .holiday-request-table td:nth-of-type(1)::before {
    content: "Start:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-request-table td:nth-of-type(2)::before {
    content: "End:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-request-table td:nth-of-type(3)::before {
    content: "Duration Hours:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .holiday-request-table td:nth-of-type(5)::before {
    content: "Is Unpaid:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .holiday-request-table td:nth-of-type(6)::before {
    content: "Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .holiday-request-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }
  .carddiv-mini{
    width: 85%;
    background-color: var(--cardiv-minis-background-color);
    margin: auto;
    padding-left:10px;
    padding-right:10px;
    padding-top: 5px;
    padding-bottom: 10px;
    min-height:15px;
  }


/*########################################################################################################## */

   /* Force table to not be like tables anymore */
  .manage-user-table th, .manage-user-table td, .manage-user-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .manage-user-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .manage-user-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .manage-user-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .manage-user-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .manage-user-table td {
  /* Behave like a "row" */ 
    border: none;
    position: relative;
    padding-left: 55%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .manage-user-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .manage-user-table td:nth-of-type(1)::before {
    content: "Edit:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manage-user-table td:nth-of-type(2)::before {
    content: "User Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manage-user-table td:nth-of-type(3)::before {
    content: "Account Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manage-user-table td:nth-of-type(4)::before {
    content: "Department:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table td:nth-of-type(5)::before {
    content: "Permissions:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table td:nth-of-type(6)::before {
    content: "IntraSoft Access:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table td:nth-of-type(7)::before {
    content: "Holidays, profile, Clock-in:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table td:nth-of-type(8)::before {
    content: "TOTP Enabled:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table td:nth-of-type(9)::before {
    content: "TOTP User Enrolled:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manage-user-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

/*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .manager-staff-holiday-table th, .manager-staff-holiday-table td, .manager-staff-holiday-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .manager-staff-holiday-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .manager-staff-holiday-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .manager-staff-holiday-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .manager-staff-holiday-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .manager-staff-holiday-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .manager-staff-holiday-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /* Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.*/
  
  .manager-staff-holiday-table td:nth-of-type(1)::before {
    content: "Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manager-staff-holiday-table td:nth-of-type(2)::before {
    content: "Start:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manager-staff-holiday-table td:nth-of-type(3)::before {
    content: "End:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .manager-staff-holiday-table td:nth-of-type(4)::before {
    content: "Duration Hours:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manager-staff-holiday-table td:nth-of-type(5)::before {
    content: "Is Unpaid:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manager-staff-holiday-table td:nth-of-type(6)::before {
    content: "Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manager-staff-holiday-table td:nth-of-type(7)::before {
    content: "Respond:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .manager-staff-holiday-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

/*########################################################################################################## */


   /* Force table to not be like tables anymore */
   .log-table th, .log-table td, .log-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .log-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .log-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .log-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .log-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .log-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .log-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .log-table td:nth-of-type(1)::before {
    content: "Date:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .log-table td:nth-of-type(2)::before {
    content: "IP EndPoint:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .log-table td:nth-of-type(3)::before {
    content: "User Agent:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .log-table td:nth-of-type(4)::before {
    content: "Log String:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  .log-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

  /*########################################################################################################## */


   /* Force table to not be like tables anymore */
   .staff-prescence-table th, .staff-prescence-table td, .staff-prescence-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .staff-prescence-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .staff-prescence-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .staff-prescence-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .staff-prescence-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .staff-prescence-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .staff-prescence-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .staff-prescence-table td:nth-of-type(1)::before {
    content: "Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .staff-prescence-table td:nth-of-type(2)::before {
    content: "Loacation:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .staff-prescence-table td:nth-of-type(3)::before {
    content: "Clocked In:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .staff-prescence-table td:nth-of-type(4)::before {
    content: "Clocked Out:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .staff-prescence-table td:nth-of-type(5)::before {
    content: "Duration:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .staff-prescence-table td:nth-of-type(6)::before {
    content: "Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .staff-prescence-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

  /*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .file-uploads-table th, .file-uploads-table td, .file-uploads-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .file-uploads-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .file-uploads-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .file-uploads-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .file-uploads-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .file-uploads-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .file-uploads-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .file-uploads-table td:nth-of-type(1)::before {
    content: "Type:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .file-uploads-table td:nth-of-type(2)::before {
    content: "Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .file-uploads-table td:nth-of-type(3)::before {
    content: "Date Created/Uploaded:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .file-uploads-table td:nth-of-type(4)::before {
    content: "Created/Uploaded By:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .file-uploads-table td:nth-of-type(5)::before {
    content: "";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .file-uploads-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }
  .carddiv-mini{
    width: 85%;
    background-color: var(--cardiv-minis-background-color);
    margin: auto;
    padding-left:10px;
    padding-right:10px;
    padding-top: 5px;
    padding-bottom: 10px;
    min-height:15px;
  }

  /*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .emergency-contact-table th, .emergency-contact-table td, .emergency-contact-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .emergency-contact-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .emergency-contact-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .emergency-contact-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .emergency-contact-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .emergency-contact-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .emergency-contact-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .emergency-contact-table td:nth-of-type(1)::before {
    content: "Primary Contact:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .emergency-contact-table td:nth-of-type(2)::before {
    content: "Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .emergency-contact-table td:nth-of-type(3)::before {
    content: "Relationship:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .emergency-contact-table td:nth-of-type(4)::before {
    content: "Address:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .emergency-contact-table td:nth-of-type(5)::before {
    content: "Home Tel:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .emergency-contact-table td:nth-of-type(6)::before {
    content: "Work Tel:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .emergency-contact-table td:nth-of-type(7)::before {
    content: "Mobile:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .emergency-contact-table td:nth-of-type(8)::before {
    content: "Work Mobile:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .emergency-contact-table td:nth-of-type(9)::before {
    content: "Delete:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .emergency-contact-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }
  .carddiv-mini{
    width: 85%;
    background-color: var(--cardiv-minis-background-color);
    margin: auto;
    padding-left:10px;
    padding-right:10px;
    padding-top: 5px;
    padding-bottom: 10px;
    min-height:15px;
  }

  /*########################################################################################################## */

   /* Force table to not be like tables anymore */
   .staff-emergency-profile-table th, .staff-emergency-profile-table td, .staff-emergency-profile-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .staff-emergency-profile-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .staff-emergency-profile-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .staff-emergency-profile-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .staff-emergency-profile-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .staff-emergency-profile-table td {
  /* Behave like a "row" */ 
    border: none;
    position: relative;
    padding-left: 55%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .staff-emergency-profile-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /*
  Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
  */
  .staff-emergency-profile-table td:nth-of-type(1)::before {
    content: "User Name:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .staff-emergency-profile-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

  /*################################################################################################################*/

.emergency-profile-print-table tr {
  text-align: left;
  top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:5px;
  padding-bottom: 5px;
  background-color: var(--table-head);
  color: var(--table-head-font-colour);
}

.emergency-profile-print-table td {
  text-align: left;
  padding-top:5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--holiday-allowances-td-font-color);
}

.emergency-profile-print-table tr:nth-child(even) {
  background-color: var(--table-even-color);
}

.emergency-profile-print-table tr:nth-child(odd) {
  background-color: var(--table-odd-color);
}

.emergency-profile-print-table{
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}


/*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .works-order-search-table th, .works-order-search-table td, .works-order-search-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .works-order-search-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .works-order-search-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .works-order-search-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .works-order-search-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .works-order-search-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .works-order-search-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /* Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.*/
  
  .works-order-search-table td:nth-of-type(1)::before {
    content: "Job:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .works-order-search-table td:nth-of-type(2)::before {
    content: "Part Number:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .works-order-search-table td:nth-of-type(3)::before {
    content: "Part Desc:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .works-order-search-table td:nth-of-type(4)::before {
    content: "Due Date:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .works-order-search-table td:nth-of-type(5)::before {
    content: "Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .works-order-search-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }

  /*########################################################################################################## */

  /* Force table to not be like tables anymore */
  .order-search-table th, .order-search-table td, .order-search-table tr{
    display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  .order-search-table th {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  
  .order-search-table tr{ 
    margin: 0 0 1rem 0;
  }
  
  .order-search-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .order-search-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .order-search-table td {
  /* Behave like a "row" */
    border: none;
    position: relative;
    padding-left: 40%; 
    text-align: left;
    min-height: 15px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .order-search-table td::before {
  /* Now like a table header */
    position: absolute;
  /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    padding-right: 6px; 
    white-space: nowrap;
  }
  
  /* Label the data
  You could also use a data-* attribute and content for this. That way "bloats" the HTML, 
  this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.*/
  
  .order-search-table td:nth-of-type(1)::before {
    content: "Order Number:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .order-search-table td:nth-of-type(2)::before {
    content: "Quote Number:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .order-search-table td:nth-of-type(3)::before {
    content: "Customer:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }
  
  .order-search-table td:nth-of-type(4)::before {
    content: "Account:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .order-search-table td:nth-of-type(5)::before {
    content: "Reference:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .order-search-table td:nth-of-type(6)::before {
    content: "Required Date:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .order-search-table td:nth-of-type(7)::before {
    content: "Status:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .order-search-table td:nth-of-type(8)::before {
    content: "Entered By:";
    text-align: right;
    color: var(--holiday-allowances-resp-td-font-color);
  }

  .order-search-table{
    border-collapse: collapse;
    width: 95%;
    margin: auto;
  }
  /*########################################################################################################## */

}
  /* ###############################################################################################################
  Extra large devices (large laptops and desktops, 900px and up) THIS ONE
  ############################################################################################################### */

@media only screen and (min-width: 900px) {
  .logininputs {
    width: 30%;
    padding: 12px 20px;
    margin: auto auto 10px auto;
    display: block;
    border: 1px solid #ccc;
    box-sizing: border-box;
  }

  .loginbutton {
    width: 30%;
    background-color: var(--action-button);
    color: var(--action-button-font-colour);
    padding: 12px 20px;
    margin: auto auto 10px auto;
    border: 1px solid var(--action-button);
    cursor: pointer;
  }

  .loginbutton:hover {
    background-color: var(--action-button-hover);
  }
  
  .logoutbutton {
    width: 30%;
    background-color: var(--action-button);
    color: var(--action-button-font-colour);
    padding: 12px 20px;
    margin: 0px auto 10px auto;
    border: 1px solid var(--action-button);
    cursor: pointer;
  }

  .logoutbutton:hover {
    background-color: var(--action-button-hover);
  }

  .actionbutton {
    width: 35%;
  }
  
  .staff-holidays-actionbutton {
    width: 35%;
    margin: auto auto auto 103px;
  }

  .deletebutton {
    width: 35%;
    display: block;
    padding-left: 5px;
    text-align: center;
  }

  .table-deletebutton {
    width:90%;
    display: block;
    text-align: center;
    float: left;
  }
  
  .textbox {
    width: 35%;
    margin: auto auto auto 5px;
    background-color: var(--inputbox);
    color: var(--inputbox-font-color);
  }
  
  .notes {
    width: 35%;
    box-sizing: border-box;
    background-color: var(--notes-input-bg);
    color: var(--notes-input-font);
    border: 1px solid var(--notes-input-border);
  }
  
  .date-input {
    width: 35%;
    margin: auto auto auto 5px;
    background-color: var(--inputbox);
    color: var(--inputbox-font-color);
  }

  .time-input {
    width: 35%;
    margin: auto auto auto 5px;
    background-color: var(--inputbox);
    color: var(--inputbox-font-color);
  }
  
  .selectbox {
    width: 35%;
    margin: auto auto auto 5px;
  }
  
  .file-button {
    display:block;
    width: 35%;
    box-sizing: border-box;   
  }
  
  .file-button::before {
    content:"Choose File";
    text-align: center;
    width: 35%;
    display: block;
  }
  
  .clock-out-button{
    background-color: var(--menubutton-background-and-border-color-2);
    color: #dfdfdf;
    border: 2px solid var(--menubutton-background-and-border-color-2);
  }
  
  .clock-in-button{
    background-color: var(--menubutton-background-and-border-color);
    color: #dfdfdf;
    border: 2px solid var(--menubutton-background-and-border-color);
  }

  .menubutton {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-home-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton1 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-person-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton2 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-calendar-today-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton3 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-people-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .menubutton4 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-admin-panel-settings-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton5 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-manage-search-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton6 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-manage-accounts-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton7 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-person-add-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton8 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-date-range-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton9 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-event-available-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton10 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-perm-contact-calendar-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton11 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-manage-search-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton12 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/spys.gif);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton13 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-portal.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton14 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-intrasoft.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton15 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-files.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton16 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-upload.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }

  .menubutton17 {
    width:12%;
    height: 85px;
    font-size: 16px;
    background: var(--main-button) url(/public/images/twotone-new-folder.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
    color: var(--main-button-font-colour);
    border: 1px solid var(--main-button);
    margin: 10px auto 10px auto;
    text-decoration:none; 
    outline: none;
    display:inline-table;
    padding:6px;
    text-align: center;
    font-weight: bold;
    box-sizing: border-box;
  }
  .menubutton:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-home-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;

  } 

  .menubutton1:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-person-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton2:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-calendar-today-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton3:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-people-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton4:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-admin-panel-settings-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton5:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-manage-search-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton6:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-manage-accounts-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton7:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-person-add-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton8:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-date-range-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton9:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-event-available-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton10:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-perm-contact-calendar-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton11:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-manage-search-white.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton12:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/spys.gif);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }
  
  .menubutton13:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-portal.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }
  
  .menubutton14:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-intrasoft.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }
  
  .menubutton15:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-files.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton16:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-upload.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }

  .menubutton17:hover {
    border: 1px solid var(--main-buttons-hover);
    background: var(--main-buttons-hover) url(/public/images/twotone-new-folder.png);
    background-repeat: no-repeat;
    background-size: 23%;
    background-position: bottom;
  }
  .navbarwelcome{
    text-align: left;
    color: #dfdfdf;
    height: 40px;
    width: 100%;
    background-color:  var(--n-div-main);
    border: 1px solid var(--n-div-main);
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding-left: 5px;
  }

 /*################################################################################################################*/
 
  .holiday-allowance th {
    text-align: left;
    position: sticky;
    top: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top:5px;
    padding-bottom: 5px;
    background-color: var(--table-head);
    color: var(--table-head-font-colour);
  }

  .holiday-allowance td {
    text-align: left;
    padding-top:5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--holiday-allowances-td-font-color);
  }

  .holiday-allowance tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .holiday-allowance tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .holiday-allowance{
    border-collapse: collapse;
    width: 100%;
    margin: auto;
  }

/*######################################################################################*/

  .holiday-request-table th {
    text-align: left;
    position: sticky;
    top: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top:5px;
    padding-bottom: 5px;
    background-color: var(--table-head);
    color: var(--table-head-font-colour);
  }

  .holiday-request-table td {
    text-align: left;
    padding-top:5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--holiday-allowances-td-font-color);
  }

  .holiday-request-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .holiday-request-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .holiday-request-table{
    border-collapse: collapse;
    width: 100%;
    margin: auto;
  }

 /*################################################################################################################*/

  .manage-user-table th {
    text-align: left;
    position: sticky;
    top: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top:5px;
    padding-bottom: 5px;
    background-color: var(--table-head);
    color: var(--table-head-font-colour);
  }

  .manage-user-table td {
    text-align: left;
    padding-top:5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--holiday-allowances-td-font-color);
  }

  .manage-user-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .manage-user-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .manage-user-table{
    border-collapse: collapse;
    width: 100%;
    margin: auto;
  }

 /*################################################################################################################*/

  .manager-staff-holiday-table th {
    text-align: left;
    position: sticky;
    top: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top:5px;
    padding-bottom: 5px;
    background-color: var(--table-head);
    color: var(--table-head-font-colour);
  }

  .manager-staff-holiday-table td {
    text-align: left;
    padding-top:5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--holiday-allowances-td-font-color);
  }

  .manager-staff-holiday-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .manager-staff-holiday-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .manager-staff-holiday-table{
    border-collapse: collapse;
    width: 100%;
    margin: auto;
  }

  /*################################################################################################################*/

  .log-table th {
    text-align: left;
    position: sticky;
    top: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top:5px;
    padding-bottom: 5px;
    background-color: var(--table-head);
    color: var(--table-head-font-colour);
  }

  .log-table td {
    text-align: left;
    padding-top:5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--holiday-allowances-td-font-color);
  }

  .log-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }

  .log-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }

  .log-table{
    border-collapse: collapse;
    width: 100%;
    margin: auto;
  }

    /*################################################################################################################*/

  .staff-prescence-table th {
    text-align: left;
    position: sticky;
    top: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top:5px;
    padding-bottom: 5px;
    background-color: var(--table-head);
    color: var(--table-head-font-colour);
  }
  
  .staff-prescence-table td {
    text-align: left;
    padding-top:5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--holiday-allowances-td-font-color);
  }
  
  .staff-prescence-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }
  
  .staff-prescence-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }
  
  .staff-prescence-table{
    border-collapse: collapse;
    width: 100%;
    margin: auto;
  }

 /*################################################################################################################*/

 .file-uploads-table th {
  text-align: left;
  position: sticky;
  top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:5px;
  padding-bottom: 5px;
  background-color: var(--table-head);
  color: var(--table-head-font-colour);
  }

  .file-uploads-table td {
    text-align: left;
    padding-top:5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--holiday-allowances-td-font-color);
  }

  .file-uploads-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }

  .file-uploads-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }

  .file-uploads-table{
    border-collapse: collapse;
    width: 100%;
    margin: auto;
  }


/*################################################################################################################*/

  .files-uploaded-by-table th {
    text-align: left;
    position: sticky;
    top: 0;
    padding-left: 10px;
    padding-right: 10px;
    padding-top:5px;
    padding-bottom: 5px;
    background-color: var(--table-head);
    color: var(--table-head-font-colour);
  }

  .files-uploaded-by-table td {
    text-align: left;
    padding-top:5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--holiday-allowances-td-font-color);
  }

  .files-uploaded-by-table tr:nth-child(even) {
    background-color: var(--table-even-color);
  }

  .files-uploaded-by-table tr:nth-child(odd) {
    background-color: var(--table-odd-color);
  }

  .files-uploaded-by-table{
    border-collapse: collapse;
    width: 100%;
    margin: auto;
  }

/*################################################################################################################*/

.emergency-contact-table th {
  text-align: left;
  position: sticky;
  top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:5px;
  padding-bottom: 5px;
  background-color: var(--table-head);
  color: var(--table-head-font-colour);
}

.emergency-contact-table td {
  text-align: left;
  padding-top:5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--holiday-allowances-td-font-color);
}

.emergency-contact-table tr:nth-child(even) {
  background-color: var(--table-even-color);
}

.emergency-contact-table tr:nth-child(odd) {
  background-color: var(--table-odd-color);
}

.emergency-contact-table{
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}

/*################################################################################################################*/

.staff-emergency-profile-table th {
  text-align: left;
  position: sticky;
  top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:5px;
  padding-bottom: 5px;
  background-color: var(--table-head);
  color: var(--table-head-font-colour);
}

.staff-emergency-profile-table td {
  text-align: left;
  padding-top:5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--holiday-allowances-td-font-color);
}

.staff-emergency-profile-table tr:nth-child(even) {
  background-color: var(--table-even-color);
}

.staff-emergency-profile-table tr:nth-child(odd) {
  background-color: var(--table-odd-color);
}

.staff-emergency-profile-table{
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}

/*################################################################################################################*/

.emergency-profile-print-table tr {
  text-align: left;
  top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:5px;
  padding-bottom: 5px;
  background-color: var(--table-head);
  color: var(--table-head-font-colour);
}

.emergency-profile-print-table td {
  text-align: left;
  padding-top:5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--holiday-allowances-td-font-color);
}

.emergency-profile-print-table tr:nth-child(even) {
  background-color: var(--table-even-color);
}

.emergency-profile-print-table tr:nth-child(odd) {
  background-color: var(--table-odd-color);
}

.emergency-profile-print-table{
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}

/*################################################################################################################*/

.works-order-search-table th {
  text-align: left;
  position: sticky;
  top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:5px;
  padding-bottom: 5px;
  background-color: var(--table-head);
  color: var(--table-head-font-colour);
}

.works-order-search-table td {
  text-align: left;
  padding-top:5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--holiday-allowances-td-font-color);
}

.works-order-search-table tr:nth-child(even) {
  background-color: var(--table-even-color);
}

.works-order-search-table tr:nth-child(odd) {
  background-color: var(--table-odd-color);
}

.works-order-search-table{
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}

/*################################################################################################################*/

.order-search-table th {
  text-align: left;
  position: sticky;
  top: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-top:5px;
  padding-bottom: 5px;
  background-color: var(--table-head);
  color: var(--table-head-font-colour);
}

.order-search-table td {
  text-align: left;
  padding-top:5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--holiday-allowances-td-font-color);
}

.order-search-table tr:nth-child(even) {
  background-color: var(--table-even-color);
}

.order-search-table tr:nth-child(odd) {
  background-color: var(--table-odd-color);
}

.order-search-table{
  border-collapse: collapse;
  width: 100%;
  margin: auto;
}

/*################################################################################################################*/


  .descfont{
    text-align: left;
  }

  .partfont{
    text-align: left;
  }

  .statusfont{
    text-align: left;
  }

  .orderfont{
    text-align: right;
  }

  .qtyfont{
    text-align: right;
  }

  .shipfont{
    text-align: right;
  } 
}
  
/*###############################################################################################################
  END OF TABLES
  ###############
  START OF FONTS
###############################################################################################################*/
  
@font-face {
  font-family:"Ubuntu";
  src: url('/public/fonts/Ubuntu-R.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
  
@font-face {
  font-family: "Ubuntu";
  src: url('/public/fonts/Ubuntu-B.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
  
.descfont{
  font-size: 12px;
}
.partfont{
  white-space: nowrap;
}
  
.statusfont{
  white-space: nowrap;;
}
  
.redtext{
  color: red;
  font-weight: bold;
}
  
.orangetext{
  color: orange;
  font-weight: bold;
}
  
.greentext{
  color: #21cf7a;
  font-weight: bold;
}
  
.linkorder {
  color: var(--hyperlinks);
  text-decoration: none;
}
  
.linkorder:hover {
  color: var(--hyperlinks);
  text-decoration: underline;
}

.infobar{
  color: var(--header-font-color);
}

.infobar-staff-holidays{
  color: var(--header-font-color);
  width: 100px;
  display: inline-block;
  text-align: right;
}

.label-width-400{
  color: var(--header-font-color);
  width: 400px;
  display: inline-block;
  text-align: right;
}

.emergency-profile-headers{
  font-weight: bold;
}
  
/* ###############################################################################################################
  END OF FONTS
  ##############
  START OF BODY
############################################################################################################### */
  
html,
body {
  background-color: var(--n-body-background-color);
  background-image: var(--body-background);
  font-family: "Ubuntu";
  font-size: 16px;
  line-height: 1.0;
  margin: 5px;
  width: 98%;
  margin: 0 auto;
}
  
/* light Theme */
.theme-light {
  --holiday-allowances-td-font-color: #000000 ;
  --holiday-allowances-resp-td-font-color: #dfdfdf;
  --table-odd-color: #ffffff;
  --table-even-color: #e2e8f0;
  --log-title-font-color:#dfdfdf;
  --header-font-color:#000000;
  --catagory-item-font-color: #21cf7a;
  --catagory-item-data-font-color: #dfdfdf;
  --trackinfotable-border-color: #222; 
  --scrollbar-track-background-color: #dfdfdf;
  --scrollbar-thumb-color: #32498d;
  --scrollbar-thumb-hover-color: #ed64a6;
  --box-background-and-border:#44475a;
  --file-text-color:#FFB86C;
  --n-body-background-color: #ffffff;
  --body-background:url(/public/images/body-bg.jpg);
  --n-div-main: #4971a1;
  --main-button: #2c5282;
  --main-buttons-hover : #3767a1d3;
  --main-button-font-colour : #dcdcdc;
  --action-button : #97266d;
  --action-button-hover: #ed64a6;
  --action-button-font-colour: #ffffff;
  --table-head: #2c5282;
  --table-head-font-colour: #dfdfdf;
  --hyperlinks: #00e;
  --inputbox: #ffffff;
  --inputbox-font-color: #000000;
  --notes-input-bg: #ffffff;
  --notes-input-border: #dddddd;
  --notes-input-font: #000000;
  --cal-list-border: #7eadd4a1;
  --cal-weekday-bg: #2c5282;
  --cal-li-hover: #80ffea42;
  --cal-event-desc: #000000;
  --file-btn-text-display: #000000;
} 

/* dark Theme */
.theme-dark {

  --holiday-allowances-td-font-color: #dfdfdf ;
  --holiday-allowances-resp-td-font-color: #dfdfdf;
  --table-odd-color: #52556b;
  --table-even-color: #44475a;
  --log-title-font-color:#dfdfdf;
  --header-font-color:#dfdfdf;
  --catagory-item-font-color: #21cf7a;
  --catagory-item-data-font-color: #dfdfdf;
  --trackinfotable-border-color: #222; 
  --scrollbar-track-background-color: #dfdfdf;
  --scrollbar-thumb-color: #6272a4;
  --scrollbar-thumb-hover-color: #bd93f9;
  --box-background-and-border:#44475a;
  --file-text-color:#FFB86C;
  --n-body-background-color: #282a36;
  --n-div-main: #383a59;
  --main-button: #9580ff;
  --main-buttons-hover : #9580ffa4;
  --main-button-font-colour : #0a0a0d;
  --action-button : #80ffeaa4;
  --action-button-hover: #80ffea36;
  --action-button-font-colour: #ffffff;
  --table-head: #383a59;
  --table-head-font-colour: #dfdfdf;
  --hyperlinks: #80ffea;
  --inputbox: #44475a;
  --inputbox-font-color: #dfdfdf;
  --notes-input-bg: #383a59;
  --notes-input-border: #9580ff;
  --notes-input-font: #dfdfdf;
  --cal-list-border: #cccccc;
  --cal-weekday-bg: #383a59;
  --cal-li-hover: #80ffea42;
  --cal-event-desc: #dfdfdf;
  --file-btn-text-display: #dfdfdf;
}
  
/* ###############################################################################################################
  END OF BODY
############################################################################################################### */



.File-color{
  color: var(--hyperlinks);
  text-decoration: none;
  }

.File-color:hover{
  color: var(--hyperlinks);
  text-decoration: underline;
}

/* width */
::-webkit-scrollbar {
  width: 15px;
}
  
/* Track */
::-webkit-scrollbar-track {
  background: var(--scrollbar-track-background-color);
  box-shadow: inset 0 0 5px grey;
}
  
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  min-height: 50px;
}
  
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover-color);
}
  
.toggle-theme-container {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
  
.toggle-theme-container button {
  padding: 10px 20px;
  border: 0;
  border-radius: 5px;
}
  
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 45px;
  height: 15px;
}
  
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
  
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
  
.slider:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 20px;
  left: 0px;
  bottom: 4px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  background: var(--main-button) ;
  background-repeat: no-repeat;
  background-position: center;
}
  
input:checked + .slider {
  background-color: #effcf6;
}
  
input:focus + .slider {
  box-shadow: 0 0 1px #effcf6;
}
  
input:checked + .slider:before {
  -webkit-transform: translateX(24px);
  -ms-transform: translateX(24px);
  transform: translateX(24px);
  background: var(--main-button);
  background-repeat: no-repeat;
  background-position: center;
}
  
/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}
  
.slider.round:before {
  border-radius: 34px;
}

.carddiv-mini {
  width: 100%;
  background-color: #f7fafc;
  border: 1px solid #CCC;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 10px;
  min-height: 15px;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
}
  
.date-input {
  padding: 12px;
  margin: auto auto 10px auto;
  border: 1px solid var(--inputbox);
  outline: none;
  background-color: var(--inputbox);
  box-sizing: border-box;
  color: var(--inputbox-font-color);
}

.time-input {
  padding: 12px;
  margin: auto auto 10px auto;
  border: 1px solid var(--inputbox);
  outline: none;
  background-color: var(--inputbox);
  box-sizing: border-box;
  color: var(--inputbox-font-color);
}
 
.actionbutton {
  background-color: var(--action-button);
  color: var(--action-button-font-colour);
  padding: 12px;
  margin: auto;
  border: 1px solid var(--action-button);
  cursor: pointer;
  outline: none;
  text-decoration: none;
  box-sizing: border-box;
}

.staff-holidays-actionbutton {
  background-color: var(--action-button);
  color: var(--action-button-font-colour);
  padding: 12px;
  border: 1px solid var(--action-button);
  cursor: pointer;
  outline: none;
  text-decoration: none;
  box-sizing: border-box;
}
  
.file-button {
  color: var(--file-btn-text-display);  
  display:inline-block;
  white-space: pre;
}

.file-button:hover::before{
  background-color: var(--main-buttons-hover);
  border-color: var(--main-button-font-colour);
}

.file-button::-webkit-file-upload-button {
  visibility: hidden;  
}
  
.file-button::before {
  content:"Choose File";
  text-align: center;
  color: var(--main-button-font-colour);
  padding: 12px;
  margin: auto;
  display: inline-block;
  background: var(--main-button);
  border: 1px solid var(--main-button);
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}
    
.actionbutton:hover {
  background-color: var(--action-button-hover);
  border: 1px solid var(--action-button-hover);
}

.staff-holidays-actionbutton:hover {
  background-color: var(--action-button-hover);
  border: 1px solid var(--action-button-hover);
}
  
.deletebutton {
  background-color: var(--main-button);
  color: var(--main-button-font-colour);
  padding: 12px;
  margin: 10px auto;
  border: 1px solid var(--main-button);
  cursor: pointer;
  outline: none;
  text-decoration: none;
  box-sizing: border-box;
}
  
.deletebutton:hover {
  background-color: var(--main-buttons-hover);
  border: 1px solid var(--main-buttons-hover);
  color: var(--main-button-font-colour);
}

.table-deletebutton {
  background-color: var(--main-button);
  color: var(--main-button-font-colour);
  padding: 2px;
  margin: 5px auto;
  border: 1px solid var(--main-button);
  cursor: pointer;
  outline: none;
  text-decoration: none;
  box-sizing: border-box;
}
  
.table-deletebutton:hover {
  background-color: var(--main-buttons-hover);
  border: 1px solid var(--main-buttons-hover);
  color: var(--main-button-font-colour);
}
  
.textbox {
  padding: 12px;
  margin: auto auto 10px auto;
  border: 1px solid var(--inputbox);
  outline: none;
  background-color: var(--inputbox);
  box-sizing: border-box;
  color: var(--inputbox-font-color);
}
  
.selectbox {
  padding: 12px;
  margin: auto;
  border: 1px solid var(--inputbox);
  outline: none;
  background-color: var(--inputbox);
  box-sizing: border-box;
  color: var(--inputbox-font-color);
}

.logincontainer{
  margin: 0 auto;
  padding-top: 100px;
  text-align: center;
}
  
.logoutcontainer{
  margin: 0 auto;
  padding-top: 100px;
  text-align: center;
}

  
.clock-out-button{
  background-color: var(--main-button);
  color: var(--main-button-font-colour);
  border: 2px solid var(--main-button);
  cursor: pointer;
}

.clock-in-button{
  background-color: var(--main-button);
  color: var(--main-button-font-colour);
  border: 2px solid var(--main-button);
  cursor: pointer;
}

.clock-in-button:hover{
  background-color: var(--main-buttons-hover);
  border: 2px solid var(--main-buttons-hover);
}

.clock-out-button:hover{
  background-color: var(--main-buttons-hover);
  border: 2px solid var(--main-buttons-hover);
}

/*########################################################################################################## */

.checkbox-container {
  color: var(--header-font-color) ;
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  text-decoration: none;
  width: fit-content;
  padding-top: 8px;
}
    
/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
    
/* Create a custom checkbox */ 
.checkbox-checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: white;
  border: 1px solid grey;
}
    
/* On mouse-over, add a grey background color */ 
.checkbox-checkmark:hover {
    background-color: #9580ffa4;
}
    
/* When the checkbox is checked, add a pink background */
.checkbox-container input:checked~.checkbox-checkmark {
    background-color: #9580ff;
}
  
/* Create the checkmark/indicator (hidden when not checked) */
.checkbox-checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
    
/* Show the checkmark when checked */
.checkbox-container input:checked~.checkbox-checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkbox-checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*##############################################################################################*/

#calendar {
	width: 100%;	
}

#calendar a {
	text-decoration: none;
}

#calendar ul {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

#calendar li {
	display: block;
	float: left;
	width:14.31%;
	padding: 5px;
	box-sizing:border-box;
	border: 1px solid var(--cal-list-border);
	margin-right: -1px;
	margin-bottom: -1px;
}

#calendar ul.weekdays {
	height: 40px;
	background: var(--cal-weekday-bg);
  color: #dfdfdf;
}

#calendar ul.weekdays li {
	text-align: center;
	text-transform: uppercase;
	line-height: 20px;
	border: none !important;
	padding: 10px 6px;
	color: #dfdfdf;
	font-size: 13px;
}

#calendar .days li {
	height: 180px;
  min-height: 180px;
  overflow: auto;
}

#calendar .days li:hover {
  background-color: var(--cal-li-hover);
}

#calendar .date {
	text-align: center;
	margin-bottom: 5px;
	padding: 4px;
	background: #333;
	color: #fff;
	width: 20px;
	border-radius: 50%;
	float: right;
}

#calendar .event {
	clear: both;
	display: block;
	font-size: 13px;
	border-radius: 4px;
	padding: 5px;
	margin-top: 40px;
	margin-bottom: 5px;
	line-height: 14px;
	background: #e4f2f2;
	border: 1px solid #b5dbdc;
	color: #009aaf;
	text-decoration: none;
}

#calendar .event-desc {
	color: var(--cal-event-desc);
	margin: 3px 0 7px 0;
	text-decoration: none;	
}

#calendar .other-month {
	background-color: var(--table-odd-color);
	color: #dfdfdf;
}

.previous-next-month{
  text-decoration: none;
  text-align: center;
  min-width: 120px;
  line-height: 16px;
  font-size: 13px;
  background-color: var(--main-button);
  color: var(--main-button-font-colour);
  border: 2px solid var(--main-button);
  outline: none;
  padding:6px;
  display: inline;
  font-weight: bold;
  box-sizing: border-box;
}

.previous-next-month:hover{
  text-decoration: none;
  text-align: center;
  min-width: 120px;
  line-height: 16px;
  font-size: 13px;
  background-color: var(--main-button);
  color: var(--main-button-font-colour);
  border: 2px solid var(--main-button);
  outline: none;
  padding:6px;
  display: inline;
  font-weight: bold;
  box-sizing: border-box;
}

.push-right {
  margin-left: auto;
}

.month-link-container{
  display: flex;
  box-sizing: border-box;
  width: 100%;
}

/* ============================
				Mobile Responsiveness
   ============================*/
   

@media(max-width: 900px) {

	#calendar .weekdays, #calendar .other-month {
		display: none;
	}

	#calendar li {
		height: auto !important;
		border: 1px solid #ededed;
		width: 98%;
		padding: 10px;
		margin-bottom: -1px;
    background-color: var(--table-odd-color);
	}

	#calendar .date {
		float: none;
	}

}