@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);

body {
margin: 0;
font-family: "Roboto", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: 400;
text-rendering: optimizeLegibility;
height: auto;
}

div.table-title {
display: block;
margin: auto;
max-width: 600px;
padding:5px;
width: 100%;
}

.table-fill {
background: white;
border-radius:3px;
border-collapse:collapse;
height: auto;
margin: auto;
padding:5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}

th {
color:#D5DDE5;
background:#1b1e24;
border-bottom:4px solid #9ea7af;
border-right: 1px solid #343a45;
font-size:18px;
font-weight: 100;
padding:10px;
text-align:left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
vertical-align:middle;
} 

 th:first-child {
border-top-left-radius:3px;
}

th:last-child {
border-top-right-radius:3px;
border-right:none;
}

tr {
border-top: 1px solid #C1C3D1;
border-bottom: 1px solid #C1C3D1;
/* color:#666B85; */
color:#030303;
font-size:12px;
font-weight:normal;
text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}

 /* tr:hover td {            /* hover is conflicting with row span--- need to work here
background:#4E5066;
color:#FFFFFF;
border-top: 1px solid #22262e;
}  */

/* tr:nth-child(odd):hover td {
background:#4E5066;
} */


tr:first-child {
border-top:none;
}

tr:last-child {
border-bottom:none;
}

tr:nth-child(odd) td {
background:#EBEBEB;
}

tr:last-child td:first-child {
border-bottom-left-radius:3px;
}

tr:last-child td:last-child {
border-bottom-right-radius:3px;
}

td {
background:#FFFFFF;
padding:8px 4px 8px 4px;
text-align:left;
vertical-align:middle;
font-weight:300;
font-size:12px;
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
border-right: 1px solid #C1C3D1;
}

td:last-child {
border-right: 0px;
}

th.text-left {
text-align: left;
}

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

th.text-right {
text-align: right;
}

td.text-left {
text-align: left;
}

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

td.text-right {
text-align: right;
}

/*---------------------------------*/

.section{
    top: 60px;
    min-height: 93vh;
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(123, 125, 136, 1.0);
    background: -webkit-linear-gradient(top, rgba(123, 125, 136, 1.0), rgba(38, 41, 51, 1.0));
    background: -moz-linear-gradient(top, rgba(123, 125, 136, 1.0), rgba(38, 41, 51, 1.0));
    background: linear-gradient(to bottom, rgba(123, 125, 136, 1.0), rgba(38, 41, 51, 1.0));
}

/* .text-block {
    border: 1px black;
    width: 100%;
} */

.boxes {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid black; 
    border-radius: 15px;
    height: 27vw;
    padding: 3vw 5vw;
}

.fetch{
    width: 50%;
    height: 40px;
}
#fetch{
    display: flex;
    flex-direction: column;
}

.subtitle {
    /* clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%); */
    width: 100%;
    height: 8vw;
    /* text-align: center; */
    /* background-color: rgb(238, 235, 235); */
    /* color: rgb(0, 17, 5); */
    border: 1px solid #060606;
    /* border-radius: 15px; */
    /* position: relative; */
    /* left: 50%; */
    /* transform: translateX(-50%); */
    /* margin: 0vw 0 4vw 0; */
    font-size: 4vw;
    padding: 8px;
    box-sizing: border-box;
}
.box {
    width: 25vw;
    height: 25vw;
    /* border: 1px solid black; */
    background-color: #EBEBEB;
    border-radius: 15px ;
    padding: 0;
}
.box-num {
    font-size: 12vw;
    height: 80%;
    color: rgba(14, 15, 14, 0.801);
    text-align: center;

    }
.box-text{
    width: auto;
    font-size: 14px;
    text-align: center;
    background-color: red;
    color: #dedede;
    border: 3px solid red;
    border-radius: 15px;
    height: 20%;
   }
.middle-text{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.button {
    border-left: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    margin-bottom: 20px; 
    box-shadow: 3px 5px rgba(22, 45, 15, .1);
    padding: 20px;

}
button {
    width: 28vw;
    height: 10vw;
    font-size: 3vw;
    border-radius: 15px;
    border: 0;
    box-shadow: 0 3px rgb(0, 0, 0);

}
button:hover {
    background-color: #ff0000;
    color: white;
}
button:active {
    background-color: #ff0000;
    transform: translateY(3px);
    box-shadow: 0 0px rgb(0, 0, 0);
    color: white;
    font-weight: bold;
  }

  button:visited {
    background-color: #ff0000;
    transform: translateY(3px);
    box-shadow: 0 0px rgb(0, 0, 0);
    color: white;
  }

/* 
.

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

 */



.buttons{
    border-radius: 15px;
    height: 15vw;
    padding: 6vw 5vw 4vw 5vw;
    justify-content: space-between;
    display: flex;
}
.request{
    border-radius: 15px;
    height: 85vw;
    padding: 3vw 5vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.datepicker{
    width: 36vw;
    height: 7vw;
    font-size: 4vw;
    border-radius: 20px;
    align-self: flex-end;
    padding: 0 15px 0 15px;
    border: 0;
    }
.div-datepicker{
    width: 100%;
    justify-content: space-between;
    display: flex;
}
textarea {
    height: 35vw;
    border-radius: 15px;
    border: 0;
    padding: 15px;
    font-size: 4vw;
    resize: vertical;
    margin: 20px 0 20px 0;
}

select{
    width: 50%;
    height: 2em;
    font-size: 1em;


}

.table {
    border: 1px solid black;
    background-color: lightgrey;
    height: 100%;
    border-bottom: 25px;
}
.heading{
    margin: 9vw 6vw 4vw 6vw;
}
.monthselector{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid black;
    border-radius: 15px;
    height: 10vw;
    padding: 3vw 5vw;
}
.fetchdata{
    width: 51vw;
    height: 9vw;
    padding: 0 15px;
    font-size: x-large;
    border-radius: 10px;
}
.leave-text{
    margin-top: 15px 0 15px 0;
}
.summery-text{
    font-weight: bold;
    color: black;
    text-align: right;
    padding: 2.5vw;
}
.summery-hours{
    font-weight: bold;
    color: black;
    text-align: center;

}
/* ---------------Leave Section---------------- */
.leave-cell-dates {
    display: flex;
    /* width: 100%; */
    background-color: black;
    border-radius: 15px 15px 0 0;
    color: white;
    text-align: center;
    /* font-size: 3vw; */
    height: 10vw;
}

.leave-status {
    margin: 20px;
    background-color: slategray;
    border-radius: 15px;
    text-align: right;
    font-size: 3vw;
}
.leave-cell-date {
    width: 50%;
}
.leave-approve-rows {
    display: flex;
    width: 100%;
    height: 7vw;
}
.leave-approve-cells {
    border: 1px solid black;
    width: 34%;
    text-align: center;
}
.leave-approve-bottom {
    display: flex;
    width: 100%;
    /* background-color: green; */
    color: white;
    font-size: 4vw;
    padding: 0;
    text-align: center;
    border-radius: 15px;
    /* margin-top: 20px; */
    height: 12vw;
}
.leave-days {
    width: 30%;
    background-color: black;
    border-radius: 15px;
}
.leave-status-div {
    width: 70%;
}
.leave-approve-text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}
.leave-approve-table {
    margin: 20px;
    border: 1px solid black;
}

p.leave-request-text {
    padding-right: 20px;
    margin-top: 20px;
}

.subheading {
    border: 1px solid black;
    margin: 0 20px;
    text-align: center;
    border-radius: 15px 15px 0 0;
    padding: 12px;
}
p.subheading-text {
    margin: 0;
    font-size: 4vw;
}
.bottom-button {
    width: 100%;
}
button.bottom-submit {
    width: -webkit-fill-available;
    margin: 20px;
    font-size: 4vw;
}
button.cancel {
    height: 6vw;
    margin: 10px 20px;
}
p.leave-cell-text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0px;
    margin-bottom: 0px;
}
.leave-submit {
    height: 15vw;
    font-size: 5vw;
    border-radius: 15px;
    margin-bottom: 8vw;
    width: 100%;
}
/* -----------------------Salary Account Profile---------------------- */

.info-row {
    display: flex;
    margin : 5px 0;
}

.info-column {
    width: 50%;
    border: 1px solid black;
    padding : 10px;

}
.selector {
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid black;
    border-radius: 15px;
}


.popheading {
    /* border: 1px solid black; */
    margin: 0 20px;
    text-align: center;
    border-radius: 15px 15px 0 0;
    padding: 12px;
}