* {
  padding: 0;
  margin: 0;
  font-family: 'Roboto Condensed', sans-serif;
}

body {
  background-color: #343A4F;
}


ul, li {
  list-style: none;
}

/*
p, a, h1, h2, h3, h4, h5 {
  font-family: 'Roboto Condensed', sans-serif;
}*/
.container {
  padding: 10px;
  margin-top: 20px;
  /*border-radius: 5px !important;*/
}

#loginpage{
  width: 100%;
  margin: auto;
  text-align: center;

}

#sicknotediv {
  margin: 0 0 0 15px;
  padding: 0;
  display: inline;
}

.encashcs {
  font-size: 22px;
  font-weight: bold;
}

.whtspc {
  white-space: pre;
}
.detsencash {
  color: #e0272f;
}

.inputstyles {
  margin-bottom: 10px;
}

.dutydivs {
  border: 1px #000 solid;
  background-color: #EEEEDD;
  padding: 10px;
}

.extdivs {
  border: 1px #000 solid;
  background-color: #83adb5;
  padding: 10px;
}

.formformat {
  font-size: 20px;
}

.formformat input{
  margin-left: 0.5em;
}

.inputformat {
  margin-bottom: 15px;
}

.diffleave {
  border: 1px dotted;
  padding: 10px;
  margin: 5px;
}

h4 {
  color: #4512FF;
}

h5 {
  color: #FF0011;
}

.logo {
   width:90%;
   height:45%;
}

textarea
{
  width:100%;
}

.textwrapper
{
  border:1px solid #999999;
  margin:5px 0;
  padding:3px;
}

.dutylist li{
  margin-left: 15px;
}

.card {
  padding: 20px;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.hodtb tr:nth-of-type(odd) {
  background: #eee;
}

.hodtb th {
  background: #333;
  color: white;
  font-weight: bold;
}

.hodtb td,th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}


.linkclass {
  margin: 0 10px 0 5px;
}

.logout {
  width: 6em;
}

.loggedout {

}

.formatcontainer {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #927f7f;
  padding: 10px;
}

.formatcontainertriple {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  background-color: #31698a;
  grid-gap: 1em;
  padding: 20px;
}

.headerdetails {
  background-color: #fccdd3;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 10px;
  font-size: 20px;
  text-align: center;
  word-wrap: break-word;
}

.attention {
  color: #FF0000;
}

.staffdetails {
  background-color: #CECECE;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 10px;
  font-size: 20px;
  text-align: center;
  word-wrap: break-word;
}

.requestdetailsday {
  background-color: #c9c9ff;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 10px;
  font-size: 20px;
  text-align: center;
  word-wrap: break-word;
}

.requestdetailssal {
  background-color: #bfb5b2;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 10px;
  font-size: 20px;
  text-align: center;
  word-wrap: break-word;
}

.requestdetailsmat {
  background-color: #ff93ac;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 10px;
  font-size: 20px;
  text-align: center;
  word-wrap: break-word;
}

.requestdetailspat {
  background-color: #8eb572;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 10px;
  font-size: 20px;
  text-align: center;
  word-wrap: break-word;
}

.requestdetailssick {
  background-color: #a3c1ad;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 10px;
  font-size: 20px;
  text-align: center;
  word-wrap: break-word;
}

.requestdetailstime {
  background-color: #83adb5;
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 10px;
  font-size: 20px;
  text-align: center;
  word-wrap: break-word;
}

@media only screen and (min-width: 600px) {
  body {
    background-color: #28E0D8;
  }
  .logo {
    width:40%;
    height:20%;
  }

  .flex-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}

@media only screen and (max-width: 800px), (min-device-width: 800px) and (max-device-width: 900px)  {

  	/* Force table to not be like tables anymore */
  	.mobileres table {
    	display: block;
  	}

    .mobileres thead {
    	display: block;
  	}

    .mobileres tbody {
    	display: block;
  	}

    .mobileres th {
    	display: block;
  	}

    .mobileres td {
    	display: block;
  	}

    .mobileres tr  {
    	display: block;
  	}

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

  	.mobileres tr {
      border: 1px solid #ccc;
      margin-bottom: 20px;
     }

  	.mobileres td {
  		/* Behave  like a "row" */
  		border: none;
  		border-bottom: 1px solid #eee;
  		position: relative;
  		padding-left: 5%;

  	}

    .mobileres td:before {
    		/* Now like a table header */
    		position: relative;
    		/* Top/left values mimic padding */
    		top: 0px;
    		left: 6px;
    		width: 45%;
    		padding-right: 1em;
    		white-space: nowrap;
    	}

    .mobileres td:nth-of-type(1):before { content: "Date:"; font-weight: bold; color: #0000FF;}
    .mobileres td:nth-of-type(2):before { content: "Leave Number:"; font-weight: bold; color: #0000FF;}
    .mobileres td:nth-of-type(3):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .mobileres td:nth-of-type(4):before { content: "Days Requested:"; font-weight: bold; color: #0000FF;}
    .mobileres td:nth-of-type(5):before { content: "Duties To:"; font-weight: bold; color: #0000FF;}
    .mobileres td:nth-of-type(6):before { content: "Duties:"; font-weight: bold; color: #0000FF;}
    .mobileres td:nth-of-type(7):before { content: "State:"; font-weight: bold; color: #0000FF;}

    .dutieshod td:nth-of-type(1):before { content: "Date:"; font-weight: bold; color: #0000FF;}
    .dutieshod td:nth-of-type(2):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .dutieshod td:nth-of-type(3):before { content: "Type of Leave:"; font-weight: bold; color: #0000FF;}
    .dutieshod td:nth-of-type(4):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .dutieshod td:nth-of-type(5):before { content: "Days Requested:"; font-weight: bold; color: #0000FF;}
    .dutieshod td:nth-of-type(6):before { content: "Duties To:"; font-weight: bold; color: #0000FF;}
    .dutieshod td:nth-of-type(7):before { content: "Duties:"; font-weight: bold; color: #0000FF;}
    .dutieshod td:nth-of-type(8):before { content: "State:"; font-weight: bold; color: #0000FF;}

    .dutiestimehod td:nth-of-type(1):before { content: "Date:"; font-weight: bold; color: #0000FF;}
    .dutiestimehod td:nth-of-type(2):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .dutiestimehod td:nth-of-type(3):before { content: "Type of Leave:"; font-weight: bold; color: #0000FF;}
    .dutiestimehod td:nth-of-type(4):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .dutiestimehod td:nth-of-type(5):before { content: "Hours Out:"; font-weight: bold; color: #0000FF;}
    .dutiestimehod td:nth-of-type(6):before { content: "Duties To:"; font-weight: bold; color: #0000FF;}
    .dutiestimehod td:nth-of-type(7):before { content: "Duties:"; font-weight: bold; color: #0000FF;}
    .dutiestimehod td:nth-of-type(8):before { content: "State:"; font-weight: bold; color: #0000FF;}

    .dutiesmaternityhod td:nth-of-type(1):before { content: "Date:"; font-weight: bold; color: #0000FF;}
    .dutiesmaternityhod td:nth-of-type(2):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .dutiesmaternityhod td:nth-of-type(3):before { content: "Type of Leave:"; font-weight: bold; color: #0000FF;}
    .dutiesmaternityhod td:nth-of-type(4):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .dutiesmaternityhod td:nth-of-type(5):before { content: "Start Date:"; font-weight: bold; color: #0000FF;}
    .dutiesmaternityhod td:nth-of-type(6):before { content: "Return Date:"; font-weight: bold; color: #0000FF;}
    .dutiesmaternityhod td:nth-of-type(7):before { content: "Duties To:"; font-weight: bold; color: #0000FF;}
    .dutiesmaternityhod td:nth-of-type(8):before { content: "Duties:"; font-weight: bold; color: #0000FF;}
    .dutiesmaternityhod td:nth-of-type(9):before { content: "State:"; font-weight: bold; color: #0000FF;}

    .approvetd td:nth-of-type(1):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .approvetd td:nth-of-type(2):before { content: "Leave Type:"; font-weight: bold; color: #0000FF;}
    .approvetd td:nth-of-type(3):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .approvetd td:nth-of-type(4):before { content: "Payroll Number:"; font-weight: bold; color: #0000FF;}
    .approvetd td:nth-of-type(5):before { content: "Days Applied:"; font-weight: bold; color: #0000FF;}
    .approvetd td:nth-of-type(6):before { content: "Start Date:"; font-weight: bold; color: #0000FF;}
    .approvetd td:nth-of-type(7):before { content: "Return Date:"; font-weight: bold; color: #0000FF;}
    .approvetd td:nth-of-type(8):before { content: "Duties Allocation:"; font-weight: bold; color: #0000FF;}
    .approvetd td:nth-of-type(9):before { content: "Reason:"; font-weight: bold; color: #0000FF;}

    .timeapprovetd td:nth-of-type(1):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .timeapprovetd td:nth-of-type(2):before { content: "Leave Type:"; font-weight: bold; color: #0000FF;}
    .timeapprovetd td:nth-of-type(3):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .timeapprovetd td:nth-of-type(4):before { content: "Payroll Number:"; font-weight: bold; color: #0000FF;}
    .timeapprovetd td:nth-of-type(5):before { content: "Hours Out:"; font-weight: bold; color: #0000FF;}
    .timeapprovetd td:nth-of-type(6):before { content: "Departure Time:"; font-weight: bold; color: #0000FF;}
    .timeapprovetd td:nth-of-type(7):before { content: "Return Time:"; font-weight: bold; color: #0000FF;}
    .timeapprovetd td:nth-of-type(8):before { content: "Duties Allocation:"; font-weight: bold; color: #0000FF;}
    .timeapprovetd td:nth-of-type(9):before { content: "Reason:"; font-weight: bold; color: #0000FF;}

    .mertapprovetd td:nth-of-type(1):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .mertapprovetd td:nth-of-type(2):before { content: "Leave Type:"; font-weight: bold; color: #0000FF;}
    .mertapprovetd td:nth-of-type(3):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .mertapprovetd td:nth-of-type(4):before { content: "Payroll Number:"; font-weight: bold; color: #0000FF;}
    .mertapprovetd td:nth-of-type(5):before { content: "Start Date:"; font-weight: bold; color: #0000FF;}
    .mertapprovetd td:nth-of-type(6):before { content: "Days Off:"; font-weight: bold; color: #0000FF;}
    .mertapprovetd td:nth-of-type(7):before { content: "Return Date:"; font-weight: bold; color: #0000FF;}
    .mertapprovetd td:nth-of-type(8):before { content: "Duties Allocation:"; font-weight: bold; color: #0000FF;}
    .mertapprovetd td:nth-of-type(9):before { content: "Reason:"; font-weight: bold; color: #0000FF;}

    .deniedtd td:nth-of-type(1):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .deniedtd td:nth-of-type(2):before { content: "Leave Type:"; font-weight: bold; color: #0000FF;}
    .deniedtd td:nth-of-type(3):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .deniedtd td:nth-of-type(4):before { content: "Payroll Number:"; font-weight: bold; color: #0000FF;}
    .deniedtd td:nth-of-type(5):before { content: "Days Applied:"; font-weight: bold; color: #0000FF;}
    .deniedtd td:nth-of-type(6):before { content: "Start Date:"; font-weight: bold; color: #0000FF;}
    .deniedtd td:nth-of-type(7):before { content: "Return Date:"; font-weight: bold; color: #0000FF;}
    .deniedtd td:nth-of-type(8):before { content: "Duties Allocation:"; font-weight: bold; color: #0000FF;}
    .deniedtd td:nth-of-type(9):before { content: "Reason:"; font-weight: bold; color: #0000FF;}

    .timedeniedtd td:nth-of-type(1):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .timedeniedtd td:nth-of-type(2):before { content: "Leave Type:"; font-weight: bold; color: #0000FF;}
    .timedeniedtd td:nth-of-type(3):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .timedeniedtd td:nth-of-type(4):before { content: "Payroll Number:"; font-weight: bold; color: #0000FF;}
    .timedeniedtd td:nth-of-type(5):before { content: "Hours Out:"; font-weight: bold; color: #0000FF;}
    .timedeniedtd td:nth-of-type(6):before { content: "Departure Time:"; font-weight: bold; color: #0000FF;}
    .timedeniedtd td:nth-of-type(7):before { content: "Return Time:"; font-weight: bold; color: #0000FF;}
    .timedeniedtd td:nth-of-type(8):before { content: "Duties Allocation:"; font-weight: bold; color: #0000FF;}
    .timedeniedtd td:nth-of-type(9):before { content: "Reason:"; font-weight: bold; color: #0000FF;}

    .mertdeniedtd td:nth-of-type(1):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .mertdeniedtd td:nth-of-type(2):before { content: "Leave Type:"; font-weight: bold; color: #0000FF;}
    .mertdeniedtd td:nth-of-type(3):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .mertdeniedtd td:nth-of-type(4):before { content: "Payroll Number:"; font-weight: bold; color: #0000FF;}
    .mertdeniedtd td:nth-of-type(5):before { content: "Start Date:"; font-weight: bold; color: #0000FF;}
    .mertdeniedtd td:nth-of-type(6):before { content: "Days Off:"; font-weight: bold; color: #0000FF;}
    .mertdeniedtd td:nth-of-type(7):before { content: "Return Date:"; font-weight: bold; color: #0000FF;}
    .mertdeniedtd td:nth-of-type(8):before { content: "Duties Allocation:"; font-weight: bold; color: #0000FF;}
    .mertdeniedtd td:nth-of-type(9):before { content: "Reason:"; font-weight: bold; color: #0000FF;}

    .requesttd td:nth-of-type(1):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .requesttd td:nth-of-type(2):before { content: "Type of Leave:"; font-weight: bold; color: #0000FF;}
    .requesttd td:nth-of-type(3):before { content: "Duration of Leave:"; font-weight: bold; color: #0000FF;}
    .requesttd td:nth-of-type(4):before { content: "Leave Request Date:"; font-weight: bold; color: #0000FF;}
    .requesttd td:nth-of-type(5):before { content: "Start of Leave:"; font-weight: bold; color: #0000FF;}
    .requesttd td:nth-of-type(6):before { content: "Return from Leave:"; font-weight: bold; color: #0000FF;}
    .requesttd td:nth-of-type(7):before { content: "Reason:"; font-weight: bold; color: #0000FF;}
    .requesttd td:nth-of-type(8):before { content: "State of Leave:"; font-weight: bold; color: #0000FF;}
    .requesttd td:nth-of-type(9):before { content: "Leave Request Progress:"; font-weight: bold; color: #0000FF;}

    .historytd td:nth-of-type(1):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .historytd td:nth-of-type(2):before { content: "Type of Leave:"; font-weight: bold; color: #0000FF;}
    .historytd td:nth-of-type(3):before { content: "Duration of Leave:"; font-weight: bold; color: #0000FF;}
    .historytd td:nth-of-type(4):before { content: "Leave Request Date:"; font-weight: bold; color: #0000FF;}
    .historytd td:nth-of-type(5):before { content: "Reason for Leave:"; font-weight: bold; color: #0000FF;}
    .historytd td:nth-of-type(6):before { content: "Availlable Days After Leave:"; font-weight: bold; color: #0000FF;}

    .noofleavetd td:nth-of-type(1):before { content: "Staff ID:"; font-weight: bold; color: #0000FF;}
    .noofleavetd td:nth-of-type(2):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .noofleavetd td:nth-of-type(3):before { content: "Payroll Number:"; font-weight: bold; color: #0000FF;}
    .noofleavetd td:nth-of-type(4):before { content: "No of Leave Days Availlable:"; font-weight: bold; color: #0000FF;}
    .noofleavetd td:nth-of-type(5):before { content: "No of Sick Days Availlable:"; font-weight: bold; color: #0000FF;}

    .rangeleaveinfo  td:nth-of-type(1):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .rangeleaveinfo td:nth-of-type(2):before { content: "Type of Leave:"; font-weight: bold; color: #0000FF;}
    .rangeleaveinfo td:nth-of-type(3):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .rangeleaveinfo td:nth-of-type(4):before { content: "Payroll Number:"; font-weight: bold; color: #0000FF;}
    .rangeleaveinfo td:nth-of-type(5):before { content: "Days Requested"; font-weight: bold; color: #0000FF;}
    .rangeleaveinfo td:nth-of-type(6):before { content: "Leave Start Date:"; font-weight: bold; color: #0000FF;}
    .rangeleaveinfo td:nth-of-type(7):before { content: "Leave Return Date:"; font-weight: bold; color: #0000FF;}
    .rangeleaveinfo td:nth-of-type(8):before { content: "Duties Allocation:"; font-weight: bold; color: #0000FF;}
    .rangeleaveinfo td:nth-of-type(9):before { content: "Leave Reason:"; font-weight: bold; color: #0000FF;}

    .cancelledleaveinfo td:nth-of-type(1):before { content: "Leave ID Number:"; font-weight: bold; color: #0000FF;}
    .cancelledleaveinfo td:nth-of-type(2):before { content: "Type of Leave:"; font-weight: bold; color: #0000FF;}
    .cancelledleaveinfo td:nth-of-type(3):before { content: "Name:"; font-weight: bold; color: #0000FF;}
    .cancelledleaveinfo td:nth-of-type(4):before { content: "Payroll Number:"; font-weight: bold; color: #0000FF;}
    .cancelledleaveinfo td:nth-of-type(5):before { content: "Request Date"; font-weight: bold; color: #0000FF;}
    .cancelledleaveinfo td:nth-of-type(6):before { content: "Reason:"; font-weight: bold; color: #0000FF;}
}