body
{
background-color:#ecedf0;
color: #4e4e4e;
font-family:arial;
padding: 0px !important;
margin: 0px !important;
font-size: 14px;
line-height: 1.42857143;
}
.container
{
    display: flex;
    gap: 15px;
}
.attendanceRightSection{
    width: -webkit-fill-available;
    display: grid;
    grid-auto-rows: max-content;
    gap: 20px;
    padding: 15px 0;
    padding-right: 15px;
}
#loginDiv
{
margin-left:-200px;
margin-top:-222px;
top:50%;
left:50%;
position:absolute;
}
.logoImg
{
margin-bottom:20px;
margin-left:20px;
}
.form-login
{
position: absolute;
width: 400px;
z-index: 15;;
border-radius: 5px; /* border: 1px solid; */
background: white;
}

.LoginHead
{
position: absolute;
width: 400px; /* height: 80px; */
background: #f3f3f3;
text-align: center;
color: rgb(84, 84, 84);
vertical-align: middle;
line-height: 70px;
font-size: 23px;
font-style: bold; /* top: 1px; */
left: 0px;
border-radius: 5px 5px 0px 0px;
border-bottom: 1px solid #ccc;
}
.username input
{
width: 300px;
padding: 15px;
font-size: 15px;
border: 1px solid #ccc;
background: #fff;
color: #7c7c7c;
margin-bottom: 15px;

}
.loginInfo
{
position: relative;
margin-top: 73px;
top: 0px;
left: 0px;
padding: 30px;
}

.password input
{
padding: 15px;
font-size: 15px;
border: 1px solid #ccc;
background: #fff;
color: #7c7c7c;
margin-bottom:15px;
width:300px;
}

.loginBtn input
{
width: 156px;
padding: 10px;
font-size: 15px;
float: left;
}

.marginRight
{
margin-right: 20px;
}
.btnSystem
{
background: #248DC3;
color: #FFF;
font-weight: 500;
border: 0;
}
.btnSystem:hover
{
background: #1983BA;
cursor: pointer;
}
.btnSystemRed
{
background: #cf0b19;
color: #FFF;
font-weight: 500;
border:0;
}
.btnSystemRed:hover
{
background: #DF1B29;
cursor: pointer;
}

.header
{
    position: fixed;
    z-index: 99999;
    right: 5px;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.visuLogo img{height: 25px;display: block;margin: auto;}
.visuLogo {text-align:center;padding: 20px 0;line-height: 1;background: rgba(0,0,0,0.3);}
#btnAddEmp {
width:100% !important;
}
.logOut {
    background-size: 100%;
    background-image: url(../images/Logout.png);
    background-repeat: no-repeat;
    background-color: inherit;
    background-position: center;
    width: 80px;
    height: 91px;
    border: 0px;
    transform: scale(0.3);
    cursor:pointer;
}
.logOut:hover
{
}
#sideBar
{
    background-color: #403f44;
    height: calc(100vh);
    /* display: grid; */
    min-width: 270px;
    /* gap: 15px; */
}

.sideBarUl
{
    list-style-type: none;
    padding: 0px;
    margin: 0;
}
.sideBarUl li {
    border-bottom: 2px solid #282828;
    position: relative;
    color:#9d9d9d;
}
.sideBarUl li:hover {
    color: #fff;
}
.sideBarUl > li > i {
    font-size: 14px;
    position: absolute;
    top: 15px;
    left: 15px;
}
#imgHR
{
    height: 100px;
    border-radius: 50%;
}
.sideBarBtns
{
    background-color: inherit;
    border: 0 none;
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: #9d9d9d;
    padding: 15px 10px;
    font-size: 14px;
    padding-left: 40px;
}
.sideBarBtns:hover {
    background-color: #2d2c2f;
    color: #fff;
}
.sideBarBtnsActive
{
background-color: #7f8fa6;
border: 0 none;
cursor: pointer;
height: 40px;
text-align: left;
width: 220px;
color:#fff;
padding-left: 22px;
}
.userPic
{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 10px 0px;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid #bdbdbd;
}
.leftMenus {
    height: calc(100vh - 236px);
    overflow: auto;
}
.logoText
{
color: #fff;
font-size: 22px;
margin-left: 20px;
float:left;
padding-top:3px;
}
.leaveInfoBox {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 1px;
float: left;
text-align: center;
width: 100%;
}
.rightPanel
{
    padding: 20px;
    background: #fff;
    height: calc(100vh - 157px);
    overflow: auto;
}

.leavesInfo
{
    background-color: #fff;
    border-radius: 0px;
    width: 35%;
    float: left;
    box-shadow: 0 0 16px rgb(0 0 0 / 5%);
    text-align: center;
}
.panelBody{
       font-size: 80px;
    font-weight: 600;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.leavesDetails{
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
}
.panelFooterGreen, .panelFooterRed, .panelFooterBlue, .panelFooterPur
{
    border-radius: 0px 0px 3px 3px;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    padding: 20px 15px;
}
.panelFooterGreen, .panelFooterRed, .panelFooterBlue
{
background-color: #5cb85c;
}
.panelBodyP
{
color:#8075c4;
}
.panelBodyR{
color: #f0433d;
}
.panelBodyB{
color: #4cb1cf;
}
.panelFooterBlue
{
background-color: #4cb1cf;
}
.panelBodyBlue{
color: #4cb1cf;
}
.panelFooterPur
{
background-color:#8075c4;
}
.panelFooterRed
{
background-color: #f0433d;
}
.breadcrumbs {
    background: #fff;
    color: #192a56;
    padding: 15px;
    font-size: 25px;
    font-weight: 600;
}

.textBox
{
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
color: #555;
display: inline-block;
font-size: 15px;
height: 15px;
padding: 6px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
width: 100%;
}
.textBoxForms 
{
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
color: #555;
display: inline-block;
font-size: 15px;
height: 28px;
padding: 4px 12px;
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
margin-bottom: 10px;
margin-top: 3px;
font-family:Arial;
border-radius: 0.25rem;
}
.labelTextbox div {
    display:grid;
}
.dropDownListBox
{
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    color: #555;
    display: inline-block;
    font-size: 15px;
    height: 36px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 25%;
    margin-bottom: 10px;
    margin-top: 3px;
    font-family: Arial;
    padding: 8px;
}
.empName
{display:block;width:100%;margin-top: 10px;}
.empDesig
{
    color: #ffeaa7;
    font-size: 15px;
    font-weight: 500;
}
.btnSubmit {
background-color: #5cb85c;
border:0px;
color: #fff;
border-radius: 0px;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-bottom: 0;
padding: 10px 20px;
text-align: center;
vertical-align: middle;

}
.btnSubmit:hover {
background-color: #449d44;
border-color: #398439;
color: #fff;
}
.btnClear {
border:0px;
border-radius: 0px;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-bottom: 0;
padding: 10px 20px;
text-align: center;
vertical-align: middle;
background-color: #e67e22;
color: #fff;
}
.btnClear:hover 
{
background-color: #d35400;
border-color: #d35400;
color: #fff;
}
.sidebarHr
{
background-color:#7f8fa6;
height:1px;
margin-bottom: 10px;
margin-top: 10px;
display:block
}
.allTabelGrid {
    display: grid;
    gap: 2em;
        padding-top: 15px;
}
.allTable
{
    background-color: #fff;
    color: #4e4e4e;
    display: flex;
    gap: 2rem;
}
.textarea {
    height:60px;
   max-width: 670px !important;
}
.marLeft
{
margin-left:20px;
}
.rightPanel label {
    font-size: 1.00em;
}
.btnDelete {
border:0px;
border-radius: 0px;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-bottom: 0;
padding: 10px 20px;
text-align: center;
vertical-align: middle;
background-color: #d9534f;
color: #fff;
}
.btnDelete:hover 
{
background-color: #c9302c;
border-color: #ac2925;
color: #fff;
}
.btnEdit {
border:0px;
border-radius: 0px;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-bottom: 0;
padding: 10px 20px;
text-align: center;
vertical-align: middle;
background-color: #428bca;
color: #fff;
}
.btnEdit:hover 
{
background-color: #3071a9;
color: #fff;
}
.btnApprove {
border:0px;
border-radius: 0px;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
background-color: #5cb85c;
color: #fff;
}
.btnApprove:hover 
{
background-color: #449d44;
color: #fff;
}
.btnApproveDisable {
border:0px;
border-radius: 0px;
cursor:default;
display: inline-block;
font-size: 14px;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
background-color: #5cb85c;
color: #fff;
opacity:0.2;
}
.btnApproveDisable:hover 
{
background-color: #5cb85c;
color: #fff;
cursor:default;
opacity:0.2;
}
.btnDeleteDisable {
border:0px;
border-radius: 0px;
display: inline-block;
font-size: 14px;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
background-color: #d9534f;
color: #fff;
cursor:default;
opacity:0.2;
}
.marLeft10
{
margin-left:10px;
}
.btnDeleteDisable:hover 
{
background-color: #d9534f;
color: #fff;
cursor:default;
opacity:0.2;
}
.btnDeleteInner
{
background: #e74c3c;
border: 0 none;
border-radius: 0px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 14px;
margin-bottom: 0;
padding: 10px 20px;
text-align: center;
vertical-align: middle;
}
.btnDeleteInner:hover
{
background: #c0392b;
cursor: pointer;
}
.approvedL {
background-color: #5cb85c;
border-radius: 3px;
float: left;
height: 15px;
margin-right: 5px;
margin-top: 2px;
width: 15px;
}
.pendingL {
background-color: #999;
border-radius: 3px;
float: left;
height: 15px;
margin-right: 5px;
margin-top: 2px;
width: 15px;
}
.rejectedL {
background-color: #d9534f;
border-radius: 3px;
float: left;
height: 15px;
margin-right: 5px;
margin-top: 2px;
width: 15px;
}
.addEmpTable
{
background-color:#fff;
color: #4e4e4e;
}
.rightSection {
height: calc(100vh - 157px);
overflow: auto;
}
/*Table design*/
.myLeaveTable
{
border: 1px solid #dee2e6;
}

.myLeaveTable th, .myLeaveTable td {
padding: 0.75rem;
border: 1px solid #dee2e6;
}
.myLeaveTable th {
background: #f1f1f1;
position: sticky;
top: 0px;
z-index: 999;
text-align:left;
}
.myLeaveTable tr:nth-child(even) {

background: #fff;
}
.myLeaveTable tr:nth-child(odd) {
background: #f1f1f1;
}
/*Table design*/
.OLeaveTable
{
padding:20px;
background-color:#fff;
color: #4e4e4e;
}
.OLeaveTable td
{
text-align:left;
color: #4e4e4e;
border-bottom: 1px solid #ccc;
padding: 8px 0px;
}
.OLeaveTable th
{
text-align:left;
color: #4e4e4e;
padding-bottom: 10px;
border-bottom: 2px solid #ccc;
}

.CReqLeavesTable
{
padding:20px;
background-color:#fff;
color: #4e4e4e;
}
.CReqLeavesTable td
{
text-align:left;
color: #4e4e4e;
border-bottom: 1px solid #ccc;
padding: 8px 0px;
}
.CReqLeavesTable th
{
text-align:left;
color: #4e4e4e;
padding-bottom: 10px;
border-bottom: 2px solid #ccc;
}
.attByDate, .attInd, .attDownl, .attByMonth
{
padding:20px;
border-radius:5px;
border:0px;
color:#fff;
font-weight:bold;
cursor:pointer;
width:45%;
margin-right:30px;
margin-bottom:30px;
padding-top: 120px;
font-size: 15px;
background-repeat: no-repeat;
background-position:top center;
}
.attByDate
{
background-color:#8075c4;
background-image:url(../images/byDate.png);
}
.attByDate:hover
{
background-color:#9085d4;
}
.attInd
{
background-color:#5bc0de;
background-image:url(../images/indv.png);
}
.attByMonth
{
background-color:#f0433d;
background-image:url(../images/downl.png);
margin-right:0px;
}
.attByMonth:hover
{
background-color:#ff534d;
}
.attInd:hover
{
background-color:#6bd0ee;
}
.attDownl
{
background-color:#2dcb73;
background-image:url(../images/downl.png);
}
.attDownl:hover
{
background-color:#3ddb83;

}
.HeaderDiv
{
    background-color: #fff;
    text-align: left;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.HeaderDiv > input, .HeaderDiv > select {
    margin: 0px;
}
/*Amol*/
.editAttendanceSorting {
display: flex;
align-items: center;
gap: 10px;
font-size:16px;
margin-bottom: 5px;
}
.editAttendanceSorting input, .editAttendanceSorting select {
width: fit-content;
min-width: 150px;
margin-bottom: 0px;
margin-top: 0px;
}
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 10px;
}
#dvGrid table {
width:100%;
background: #fff;
    border: transparent;
}
#dvGrid table tr:last-child span{ 
    background: #718093;
    padding: 5px 10px;
    color: #fff;
}
#dvGrid table tr:last-child a{ 
    padding: 5px 10px;
    border-bottom: 1px solid #718093;
    color: #000;
    }
#dvGrid table tr:last-child a:hover{ 
    background: #718093;
    padding: 5px 10px;
    color: #fff;
}
#dvGrid table tr:last-child td{ 
    width: 40px;
    }
#dvGrid table td a {
    text-decoration:none;

}
.designationTable {
width:100%;
background-color: #fff;
padding:10px 0px;
}
.addDesigTable {
padding: 20px;
background-color: #fff;
text-align: justify;
color: #4e4e4e;
min-width: 400px;
border-color: #dcdde1;
}
.addDesigTable tr td, .addDesigTable tr th {
padding: 5px;
}
.addDesigTable tr th {
    background:#2f3640;
    color:#fff;
}
#dvGrid table tr td:nth-last-child(n) {
     width: 10%;
    white-space: nowrap;
}
table#ContentPlaceHolder1_GridView1 > tbody > tr:last-child > td > table td {
    display: inline-block;
    width: auto;
}
table#ContentPlaceHolder1_GridView1 > tbody > tr:last-child > td > table, table#ContentPlaceHolder1_GridView1 > tbody > tr:last-child > td > table * {
    display: block;
}
.designationBtns {
        width: 100%;
    background-color: #fff;
    padding: 20px 0px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.EmpIdCard {
        width: 336px;
    margin: 0px auto;
    font-size: 18px;
    display: flex;
    gap: 15px;
    flex-direction: column;
    align-items: center;
    border: 1px solid #ccc;
    padding: 15px 10px;
}
.visulonLogo {
        width: 180px;
            text-align: center;
}
.visulonLogo img {
        width: 100%;
}
.EmpPhoto {
    width: 100px;
}
.EmpIdCard table td {
    padding: 5px;
}
.EmpIdCard table tr td:first-child {
font-weight:600;
}
.EmpPhoto img {
    width: 80%;
    border-radius: 50%;
}
.EmpnameList {
    display: flex;
    gap: 15px;
    font-size: 15px;
    margin-bottom: 20px;
    align-items: center;
}
.EmpnameList select {
    width: 100%;
    margin: 0;
}
.companyAdd {
    text-align: center;
    background: #9f4f81;
    color: #fff;
    padding: 10px;
}
.companyAdd h1 {
font-size: 22px;
margin: 0;
}
.companyAdd div {
font-size: 16px;
}
/*Animated textbox placeholder*/
    .form-wrapper {
  max-width: 30%;
  min-width: 300px;
  padding: 50px 30px 50px 30px;
  margin: 50px auto;   
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 15px 35px rgba(50,50,93,.1),0 5px 15px rgba(0,0,0,.07);
}

.form-group {
  position:relative;  

}

.form-label {
  position: absolute;
  left: 0;
  top: 10px;
  color: #999;
  background-color: #fff;
  z-index: 1;
  transition: transform 150ms ease-out, font-size 150ms ease-out;
}

.focused .form-label {
  transform: translateY(-125%);
  font-size: 1.00em;
}

.form-input {
    position: relative;
    padding: 12px 0px 5px 0;
    width: 100%;
    outline: 0;
    border: 0;
    box-shadow: 0 1px 0 0 #e5e5e5;
    transition: box-shadow 150ms ease-out;
    font-family: Arial;
    z-index: 2;
    background: inherit;

}

.form-input.filled {
  box-shadow: 0 2px 0 0 lightgreen;
}
.ActiveLeftmenu {
    background-color: #2d2c2f;
    color: #fff;
}
/*Edn of textbox place holder*/
p:last-child { color: blue; }
#dvGrid table th{
background: #f1f1f1;
    position: sticky;
    top: 0px;
    z-index: 999;
    text-align: left;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ccc;
  opacity: 1; /* Firefox */
}
::-webkit-scrollbar-track {
background-color: #ecf0f1;
}

::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #14171b; 
}