/* ---------------------------------------------------- Common ------------------------------------------------------------------ */
/* * {
    scrollbar-width: none;
    -ms-overflow-style: none;
} */

body::-webkit-scrollbar 
{
    display: none;
}
:root 
{
    --font-family-base: 'Montserrat', sans-serif;
}

body 
{
    font-family: var(--font-family-base);
    background-color: #ffffff;
    color: #000000;
    margin: 0;
    padding: 0;
    font-weight:400;
    letter-spacing:-0.75px;
    word-spacing:1.5px;
}

p 
{
    margin: 0;
}

a 
{
    color: #000;
    text-decoration: none;
}

a:hover 
{
    color: gray;
}
button
{
    margin:0;
    padding:0;
    outline: none;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-weight: 600;
    color:#fff;
}
.width100{width: 100%; text-align: center;}
.asubmit{color:#fff;}
.btnclose
{
    position: absolute;
    right: 15px;
    top: 15px;
    background-color: transparent;
    outline: none;
    border: none;
    color: #fff!important;
    cursor: pointer;
    font-size: 20px;
}
.btnclose2
{
    top:20px;
}
.btnlogout{
    background-color: #00a0e3!important;
    border: 0;
    font-weight: 600;
    letter-spacing: -0.15px;
}
.btnlogout:hover
{
    background-color: #2e2e2e!important;
    border-color: #868686;
}
.newapprove{background-color: #00a0e3!important;}
.newapprove:hover{background-color: #666666!important;}
select:disabled
{
    background-color: #e1e1e1!important;
}

.bordernone{border:none;}

ul 
{
    list-style-type: disc;
    margin-left: 20px;
}
select option
{
    padding: 0.5rem 0.75rem;
    margin: 0.25rem 0;
}
.paddingbottominput{margin-bottom: 15px;}
form
{
    width: 100%;
}

.tablistviewrequest
{
    border: 1px solid #d3d3d3;
}

.cursorpointer
{
    cursor:pointer;
}

.rightside
{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

textarea:focus, select:focus,input:focus
{
    outline: none!important;
    border: 2px solid #009fe3bb!important;
    box-shadow: 0 0 5px #009fe364!important;
}
input[type="file"]{background-color: #f6f6f6 !important;}
input[type="file"]::file-selector-button {
    border: 2px solid #00a0e3;
    padding: 0.3em 0.5em;
    border-radius: 0.3em;
    background-color: #00a0e3!important;
    transition: background-color 0.3s ease;
    color: #fff;
    font-size: 14px;
    letter-spacing: -0.005em;
    cursor: pointer;
  }

  .borderrighttable::-webkit-scrollbar, .borderrighttableleave::-webkit-scrollbar {
    border: none;
    width: 20px;
    height: 5px;
  }
  .borderrighttable::-webkit-scrollbar-track, .borderrighttableleave::-webkit-scrollbar-track {  
    background-color: rgb(205, 205, 205);
    border: none;
    border-bottom: none; /* Ensures no bottom border */
  }
  .borderrighttable::-webkit-scrollbar-thumb, .borderrighttableleave::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.107); 
    background-color: #00a0e3;
    border-radius: 5PX;
    width: 20%; 
  }
  .borderrighttable, .borderrighttableleave{
    overflow: auto;
    height: auto ; 
}
  .menu-toggle {
    font-size: 25px;
    cursor: pointer;
  }
  .displayflex
  {
  }
  .displayflex label{width: max-content;}
  .displayflex .rightcontent{width: 100%;margin-right: 0!important;}
  
  .mobile-menu {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    background: #333;
    color: white;
    transition: left 0.3s ease;
    padding: 2rem;
    z-index: 999;
  }
  
  .mobile-menu.open {
    left: 0;
  }
  
  .close-menu {
    font-size: 18px;
    cursor: pointer;
    text-align: right;
    margin-bottom: 1rem;
  }
  
  .mobile-menu ul {
    list-style: none;
    padding: 0;
  }
  
  .mobile-menu ul li {
    padding: 1rem 0;
    border-bottom: 1px solid #555;
  }

  .pb1{padding-bottom: 1rem;}
  .holidayaddright{padding:2rem!important;}

/* --------------------------------------------------------------------------------------------------- Admin ------------------------------------------------------------------------------------------ */

.form-group-label
{
    text-align: right;
}

.attchmentdiv
{
    width: 100%;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    padding: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
}

.attachment-preview
{
    height: 80px;
    background-color: #ccc;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-weight: bold;
    width:auto;
    padding: 1rem !important;
}
.view-attachment
{
    background-color: #00a0e3;
    display: flex;
    align-items: center;
    color: #fff;
    width: fit-content;
    padding: 0.25rem 1.55rem!important;
    border-radius: 40px;
    border: none;
    font-size: 14px;
}

.heightone
{
    border: 1px solid #d3d3d3;
    margin:0.5rem;
    height:100%;
}

/* ------------------------------------------------- Modal ----------------------------------- */
.modal-xxl
{
    max-width: 95%; /* or 100% if you want full width */
    width: 100%;
}
.modal-header
{
    padding:0;border:0;}

.holidayaddmodal .modalflexend, .leaveadminmodal .modalflexend
{
    width: 100%;
    justify-content: space-between!important;
    align-items: center;
}

.holidayaddmodal .TopRight, .leaveadminmodal .TopRight
{
    text-align: right;
}
.holidayaddmodal .TopRight .rightname h3, .leaveadminmodal .TopRight .rightname h3
{
    padding:0.85rem 5rem;
    color:#fff;
    text-align:center;
    background-color:#00a0e3;
    font-size:18px;
    font-weight:500;
    letter-spacing: -0.15px;
    margin:0;
}
.holidayaddmodal .btn-close, .leaveadminmodal .btn-close
{
    position: absolute;
    right: 25px;
    top: 25px;
}
.holidayaddmodal .borderright, .leaveadminmodal .borderright
{
    border:0px!important;
}
.holidayaddmodal .buttonmain, .leaveadminmodal .buttonmain
{
    margin-top:1rem;
}
.holidayaddmodal .flexalign
{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
}

/* ------------------------------------------------- Password -------------------------------------------------- */
.password-wrapper{position: relative;}

.toggle-password
{
    position: absolute;
    right: 30px;
    top: 22px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
}

/* Eye closed (default) */
.toggle-password.eye-closed
{
    background-image: url("./images/icons/eye-close.svg");
}

/* Eye open */
.toggle-password.eye-open
{
    background-image: url("./images/icons/eye-open.svg");
}

.spanpasswordgenerate
{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.spanpasswordgenerate span
{
    border-bottom: 1px solid #00a0e3;
    padding-bottom: 2px;
    display: flex;
    justify-content: flex-end;
    width: fit-content;
    margin-top:0.75rem;
    font-size:14px;
    letter-spacing: 0px;
    cursor:pointer;
}

/* ---------------------------------------------------- Login ---------------------------------------------------------------------- */
.login{margin:1rem;}
.login .row{margin:0;}
.login .heightfit
{
    height: calc(100% - 0rem);
}
.login .rightcontent
{
    height:100%;
    background-image:url('./images/loginrightbg.png');
    background-size: cover;
    background-position: center;
}
.login .rightcontent
{
    display: flex;
    justify-content: center;
    flex-direction:column;
    align-items: center;
    border:1px solid #d3d3d3;
}
.login .rightcontent h3
{
    font-weight:400;
    letter-spacing: -1px;
    word-spacing: 4px;
}
.login .rightcontent strong
{
    padding-bottom:5px;
    font-weight:800;
    border-bottom:1px solid #00a0e3;
    letter-spacing:-1px;
    word-spacing: 0;
}

.login .rightcontent .loginform .formflex
{
    align-items: center;
    margin-bottom:25px;
}
.login .rightcontent .loginform .formflex .paddingbottom
{
    text-align:right;
    margin:0;
}
.login .rightcontent .loginform .formflex h4
{
    font-size:17px;
    font-weight:600;
}
.login .rightcontent .loginform .formflex .passwordinput .relativepassword
{
    position:relative;
    display: flex;
    align-items: center;
}
.login .rightcontent .loginform .formflex .passwordinput .relativepassword i
{
    position:absolute;
    padding-right:15px;
    right:0;
}
.login .rightcontent .loginform .formflex .padding
{
    padding-right:0;
    margin:0;
}
.login .rightcontent .loginform .formflex .padding input{
    font-weight:600;
    background-color: #f8f8f8;
    border: 1px solid #d3d3d3;
    font-size: 16px;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    width: 100%;
    position: relative;
}
.login .rightcontent .loginform .formflex .padding label{
    padding-top:8px;
}
.login .rightcontent .loginform .forgotpassword
{
    display: grid;
    justify-items: end;
}
.login .rightcontent .loginform .forgotpassword h5
{
    width:auto;
    text-align:right;
    font-size:14px;
    margin:0;
    padding-top:10px;
    padding-bottom:5px;
    border-bottom:1px solid #00a0e3;
    letter-spacing:0px;
    cursor:pointer;
}

.rightcontent .form
{
    width:75%;
    margin: 0 auto;
}

.login .rightcontent h3{padding-bottom: 4rem;}

.rightcontent .resetflex
{
    width: 100%;
    text-align: center;
}

.rightcontent .resetflex .flexcenter
{
    display: inline-flex;
    gap: 15px;
}

.rightcontent .loginbutton
{
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    padding: 0.5rem 2.5rem;
    background-color: #00a0e3;
    color: #fff;
    font-weight: 600;
    cursor:pointer;
    width: fit-content;
    margin: auto;
    margin-top: 2rem;
}
.rightcontent .loginbutton:hover{background-color: #1f1f1f;}
.rightcontent .loginbutton a:hover{color:#fff;}

.login .bglogin
{
    height: auto;
    position: absolute;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    width: 82%;
    margin:auto;
}

.login .positionrelative
{
    padding-left: 0;
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    align-items: center;
}

.login .positionrelative .logobglogin
{
    width: 180px;
    position:absolute;
    top:10%;
}
.login .positionrelative .textbottom
{
    position:absolute;
    bottom:5%;
    color:#fff;
    letter-spacing:0px;
    cursor:pointer;
}
.login .positionrelative .textbottombutton
{
    position: absolute;
    bottom: 15%;
    color: #fff;
    letter-spacing: 0px;
    cursor: pointer;
    border: 1px solid #ffffff63;
    padding: 1rem 1.75rem;
    border-radius: 40px;
}

.login .positionrelative .two-color-bg
{
    width: 100%;
    height: 100%;
    position: relative;
}

.login .positionrelative .two-color-bg::before
{
    top: 0;
    background-color: #D4F2FF;
}

.login .positionrelative .two-color-bg::after
{
    bottom: 0;
    background-color: #575A5C;
}
.scrollbuttonlogin
{
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ---------------------------------------------------- Dashboard ------------------------------------------------------------------ */
.admindashboard
{
    /* height: calc(100% - 2rem); */
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
/* .admindashboard .heightone{height:calc(100% - 2.5rem);} */
/* .admindashboard .row{margin:0;}
.admindashboard .row>*{padding:0;} */
.admindashboard .toplogodatetime
{
    display:flex;
    flex-direction:column;
    padding-top:3rem;
    padding-left:3rem;
    padding-bottom:2rem;
}
.admindashboard .toplogodatetime img{width:140px;margin-bottom:2rem;}
.admindashboard .toplogodatetime p
{
    font-size:16px;
    display:flex;
    flex-wrap:nowrap;
    padding-top:2px;
    gap: 10px;
    letter-spacing:-0.3px;
}
.admindashboard .centertitle h3
{
    text-transform: capitalize;
    font-size:19px;
    font-weight:600;
    background-color:#00a0e3;
    width:100%;
    padding:0.75rem 0;
    color:#fff;
    text-align:center;
    margin-bottom:1rem;
}
.admindashboard .menus
{
    background-color: #ebebeb;
    padding: 1rem;
    text-align:center;
    border: 1px solid #dedede;
}
.admindashboard .menus h4
{
    font-size:15px;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:0px;
    margin-bottom: 1.5rem;
    margin-top:0.5rem;
}
.admindashboard .menus ul
{
    list-style:none;
    margin-left:0;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 2rem;
}
.admindashboard .menus ul li
{
    font-size:17px;
    letter-spacing:-0.45px;
    word-spacing:0.5px;
    font-weight:500;
    text-align:left;
    margin-top:1rem;
    width: max-content;
    min-width: 100%;
}
.admindashboard .menus ul li a:hover{color:#535353}
.admindashboard .menus ul li.active{font-weight:800;}
.admindashboard .menus ul li img
{
    background-color:#00a0e3;
    width:40px;
    margin-right:15px;
}
.admindashboard .rightcontent
{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-right: 0.75rem;
}
.admindashboard .rightcontent .holidaylist
{
    display:flex;
    justify-content: flex-end;
}
.admindashboard .rightcontent .holidaylist h4
{
    text-align:right;
    margin-top:1rem;
    background-color:#00a0e3;
    width: fit-content;
    padding:0.5rem 1rem;
    color:#fff;
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:-0.025px;
}
.admindashboard .leftcontent
{
    display: flex;
    justify-content: space-between;
}
.admindashboard .leftcontent .TopRightuserandname
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}
.admindashboard .leftcontent .TopRightuserandname .leftname{text-align:right;}
.admindashboard .leftcontent .TopRightuserandname .leftname h3
{
    border-bottom:3px solid #00a0e3;
    padding-bottom:8px;
    margin-bottom: 0.25rem;
    font-weight: 400;
}
.admindashboard .leftcontent .TopRightuserandname .leftname h5
{
    font-weight: 400;
    font-size:18px;
    letter-spacing:-0.1px;
}
.admindashboard .leftcontent .TopRightuserandname .rightimage{margin:1.5rem;}
.admindashboard .leftcontent .TopRightuserandname .rightimage .logo
{
    background-color: #f2f1f1;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    padding: 0.2rem;
    display:flex;
    align-items: center;
    justify-content: center;
}
.admindashboard .leftcontent .TopRightuserandname .rightimage .logo img{width:100%;}
.admindashboard .leftcontent .TopRightuserandname .rightimage h5
{
    font-size:16px;
    font-weight:600;
    background-color:#00a0e3;
    color:#fff;
    text-align:center;
    border-radius:50px;
    padding:0.25rem 1rem;
    margin-top:0.75rem;
}
.admindashboard .leftcontent .TopRightuserandname .rightimage h6{text-align:center;}
.copyright
{
    background-color:#575A5C;
    text-align:center;
    color:#fff;
    padding:0.7rem 0;
    /* position: absolute; */
    bottom: 0;
    margin-top: 2rem;
}
.copyright h5
{
    font-size:14px;
    letter-spacing:-0.05px;
    margin:0;
}
.copyright h5 a{color:#fff;}
.admindashboard .rightcontent .w100{width:100%;}
.admindashboard .rightcontent .card1 .color1
{
    background-color: #ebebeb;
    padding: 1rem;
    text-align: center;
    border: 3px solid #d6d6d6;
    margin-right: 1rem;
    position:relative;
}
.admindashboard .rightcontent .maincard .centercontent
{
    display:flex;
    gap:30px;
    align-items: center;
}
.admindashboard .rightcontent .maincard .centercontent .icon
{
    height: auto;
    width: 18%;
    border: 1px solid #00a0e3;
    padding:2px;
}
.admindashboard .rightcontent .maincard .centercontent .icon img
{
    width: 100%;
    height: 100%;
    background-color: #00a0e3;
}
.admindashboard .rightcontent .maincard .centercontent .text
{
    text-align: left;
    text-transform: uppercase;
    margin-top:10px;
}
.admindashboard .rightcontent .maincard .centercontent .text h4
{
    font-weight:500;
    margin:0;
    font-size:20px;
    letter-spacing:-0.35px;
}
.admindashboard .rightcontent .maincard .centercontent .text h2
{
    font-weight:600;
    font-size:52px;
    margin:0;
}
.admindashboard .rightcontent .maincard .bottomIcon
{
    display:flex;
    justify-content: flex-end;
}
.admindashboard .rightcontent .maincard .bottomIcon img
{
    background-color: #00a0e3;
    width: 40px;
    position:absolute;
    bottom: 15px;
}
.admindashboard .rightcontent .card2 .color2
{
    background-color: #d8eff9;
    padding: 1rem;
    text-align: center;
    border: 3px solid #d6d6d6;
    position:relative;
}
.admindashboard .rightcontent .margin3{margin-left:auto;margin-right:auto;}

/* ---------------------------------------------------- Add Employee ------------------------------------------------------------------ */
.admindashboard .rightcontent .w100 .borderright
{
    border:1px solid #d3d3d3;
    padding:2rem;
    margin-bottom: 2rem;
}
.admindashboard .rightcontent .w100 .borderright .flexcenter
{
    display:flex;
    width:100%;
    justify-content: flex-start;
    margin-top:1rem;
}
.admindashboard .rightcontent .w100 .borderright .buttonmain
{
    background-color:#00a0e3;
    display:flex;
    align-items:center;
    color:#fff;
    width: fit-content;
    padding:0.1rem 1.55rem 0.1rem 0.75rem;
    border-radius: 6px;
}
.admindashboard .rightcontent .w100 .borderright .buttonmain img
{
    width:40px;
    padding-right:5px;
}
.admindashboard .rightcontent .w100 .borderright .buttonmain h3
{
    margin-bottom:0;
    font-size:16px;
    letter-spacing:-0.35px;
}
.admindashboard .rightcontent .formflex .positionrelative{position:relative;}
.admindashboard .rightcontent .formflex label
{
    font-weight:600;
    font-size:18px;
    margin-bottom: 5px;
}
.admindashboard .rightcontent .formflex .error{color:red;font-weight:400;letter-spacing: normal;}
.admindashboard .rightcontent .formflex
{
    display: flex;
    align-items: baseline;
    margin-bottom:15px;
}
.admindashboard .rightcontent .formflex .labelright
{
    text-align:left;
}

.admindashboard .rightcontent .formflex input:disabled, .admindashboard .rightcontent .formflex textarea:disabled, .login .rightcontent .loginform .formflex .padding input:disabled, .admindashboard .rightcontent .formflex input:read-only, textarea[readonly], .readonly{background-color:#e1e1e1!important;}
.admindashboard .rightcontent .formflex .addemployee.selectform
{
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}
.admindashboard .rightcontent .formflex .selectform
{
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}
.admindashboard .rightcontent .formflex .select-icon
{
    position: absolute;
    top: 50%;
    right: 1.75rem;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.3s ease;
}
/* .admindashboard .rightcontent .formflex .selectform:focus
{
    border-color: #007bff;
    outline: none; 
    box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
} */
.admindashboard .rightcontent .formflex input, .admindashboard .rightcontent .formflex .selectform, .admindashboard .rightcontent .formflex textarea
{
    font-weight:500;
    font-size:18px;
    letter-spacing:-0.55px;
    padding:0.5rem 1rem;
    width:100%;
    background-color: #ffffff;
    border: 1px solid #d3d3d3;
    border-radius: 6px;
    color: #2a2a2a!important;
}
.admindashboard .rightcontent .card1 .color1
{
    background-color: #ebebeb;
    padding: 1rem;
    text-align: center;
    border: 3px solid #d6d6d6;
    margin-right: 1rem;
    position:relative;
}
.admindashboard .rightcontent .maincard .centercontent
{
    display:flex;
    gap:30px;
    align-items: center;
}
.admindashboard .rightcontent .maincard .centercontent .icon
{
    height: auto;
    width: 18%;
    border: 1px solid #00a0e3;
    padding:2px;
}
.admindashboard .rightcontent .maincard .centercontent .icon img
{
    width: 100%;
    height: 100%;
    background-color: #00a0e3;
}
.admindashboard .rightcontent .maincard .centercontent .text
{
    text-align: left;
    text-transform: uppercase;
    margin-top:10px;
}
.admindashboard .rightcontent .maincard .centercontent .text h4
{
    font-weight:500;
    margin:0;
    font-size:20px;
    letter-spacing:-0.35px;
}
.admindashboard .rightcontent .maincard .centercontent .text h2
{
    font-weight:600;
    font-size:52px;
    margin:0;
}
.admindashboard .rightcontent .maincard .bottomIcon
{
    display:flex;
    justify-content: flex-end;
}
.admindashboard .rightcontent .maincard .bottomIcon img
{
    background-color: #00a0e3;
    width: 40px;
    position:absolute;
    bottom: 15px;
}
.admindashboard .rightcontent .card2 .color2
{
    background-color: #d8eff9;
    padding: 1rem;
    text-align: center;
    border: 1px solid #d3d3d3;
    position:relative;
}
.admindashboard .rightcontent .margin3{margin-left:auto;margin-right:auto;}

/* ---------------------------------------------------- Employee List ------------------------------------------------------------------ */
.admindashboard .rightcontent .w100 .pagination
{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.admindashboard .rightcontent .w100 .pagination a
{
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    padding:0.35rem 0.75rem;
}
.admindashboard .rightcontent .w100 .pagination .color
{
    background-color: #fefefe;
    border:1px solid #d3d3d3;
    margin: 0.1rem;
    font-weight:500;
}

.admindashboard .rightcontent .w100 .pagination a.active
{
    margin: 0.1rem;
    background-color: #00a0e3;
    color: white;
    border: 1px solid #00a0e3;
    font-weight:600;
    font-size:16px;
    border:1px solid rgb(135, 135, 135);
}
.search-container
{
    position: relative;
    width: 40%;
    margin-bottom:1rem;
}

.search-container input
{
    width: 100%;
    padding: 10px 40px 10px 30px; /* padding-right for icon space */
    border: 2px solid #00a0e3;
    border-radius: 25px;
    font-size: 16px;
    box-sizing: border-box;
}

.search-container .search-icon
{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.admindashboard .rightcontent .w100 .pagination{margin-top:1rem;}
.admindashboard .rightcontent .w100 .tablelist .flexbutton{display:flex;gap:10px;}
.admindashboard .rightcontent .w100 .tablelist .editbutton, .admindashboard .rightcontent .w100 .tablelist .deletebutton
{
    background-color: #00a0e3;
    padding: 0.5rem 0.5rem;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: fit-content;
}
.admindashboard .rightcontent .w100 .tablelist .editbutton img,.admindashboard .rightcontent .w100 .tablelist .deletebutton img
{
    width: 22px;
    height: 22px;
    padding: 0.095rem;
}
.admindashboard .rightcontent .w100 .tablelist{min-width: max-content;
    width: 100%;}
.admindashboard .rightcontent .w100 .tablelist th
{
    background-color: #ededed;
    padding: 1rem;
    font-size: 18px;
    letter-spacing: -0.55px;
    font-weight:600;
}
.leavetable .tableoverlap{display: flex;flex-direction: column;align-items: center;justify-content: center;}
.leavetable .flexbutton{justify-content: center;}
.leavetable th:nth-child(3), .leavetable td:nth-child(3){text-align: left;}
.leavetable th:nth-child(2), .leavetable td:nth-child(2){text-align: left;}
.leavetable th{width: -moz-available;width: -webkit-fill-available;}
.leavetable th, .leavetable td{text-align: center;}
.admindashboard .rightcontent .w100 .tablelist td
{
    padding: 1rem;
    font-size: 18px;
    letter-spacing: -0.55px;
    font-weight:500;
}
.admindashboard .rightcontent .w100 .tablelist tr{border-bottom: 1px solid #d3d3d3;}
.admindashboard .rightcontent .w100 .tablelist tr:last-child{border:none;}

.admindashboard .rightcontent .w100 .borderrighttable
{
    border:1px solid #d3d3d3;
}

/* ---------------------------------------------------- Leave Requests ------------------------------------------------------------------ */
.admindashboard .rightcontent .w100 .borderrighttableleave .approved
{
    background-color: #009846;
}
.admindashboard .rightcontent .w100 .borderrighttableleave .pending
{
    background-color: #ff6f35;
}
.admindashboard .rightcontent .w100 .borderrighttableleave .on-hold
{
    background-color:rgb(56, 56, 56);
}
.admindashboard .rightcontent .w100 .borderrighttableleave .declined
{
    background-color: #E31E24;
}
.admindashboard .rightcontent .w100 .borderrighttableleave td span
{
    padding: 0.5rem 1.5rem;
    border-radius: 40px;
    color: #fff;
    font-size: 15px;
}
.admindashboard .rightcontent .w100 .borderrighttableleave
{
    border:1px solid #d3d3d3;
    padding: 0;
}
.admindashboard .rightcontent .w100 .borderrighttableleave .flexcenter
{
    display:flex;
    width:100%;
    justify-content: center;
    margin-top:1rem;
}
.admindashboard .rightcontent .w100 .borderrighttableleave .buttonmain
{
    background-color:#00a0e3;
    display:flex;
    align-items:center;
    color:#fff;
    width: fit-content;
    padding:0.1rem 1.55rem 0.1rem 0.75rem;
    border-radius: 6px;
}

.admindashboard .rightcontent .w100 .borderrighttableleave .buttonmain img
{
    width:40px;
    padding-right:5px;
}
.admindashboard .rightcontent .w100 .borderrighttableleave .buttonmain h3
{
    margin-bottom:0;
    font-size:16px;
    letter-spacing:-0.35px;
}
.admindashboard .rightcontent .w100 .tablelist .viewbutton
{
    background-color:rgb(65, 65, 65);
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: fit-content;
    color:#fff;
    font-weight:600;
    font-size:16px;
    cursor:pointer;
}
.admindashboard .rightcontent .w100 .tablelist .viewbutton img
{
    width:20px;
    margin-right:8px;
}
/* ------------------------------------------ Profile --------------------------------------------------------- */
.admindashboard .width70
{
    width:70%;
    margin:auto;
}

.admindashboard .changepasswordbutton
{
    background-color: #00a0e3;
    display: flex;
    align-items: center;
    color: #fff;
    width: fit-content;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
}
.admindashboard .changepasswordbutton h3
{
    font-size:16px;
    letter-spacing: -0.25px;
    margin-bottom: 0;
}

/* --------------------------------------------- Holiday List ----------------------------------------- */
.backtodashboard
{
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    justify-content: center;
}

.w25{width: 15%;}
.backtodashboard img{padding-right:8px;}
.holidaylistmain
{
    border:1px solid #d3d3d3;
    background-color: #f0f0f0;
    padding: 1.5rem!important;
    display: flex;
    justify-content: center!important;
    flex-wrap: wrap;
}
.holidaylistmain .list{width: 100%;}
.holidaylistmain .list tbody th
{
    background-color: #fdfdfd;
    font-weight:600;
}
.holidaylistmain .list tbody th:nth-child(1){width:15%;}
.holidaylistmain .list tbody th:nth-child(2){width:75%;}
.holidaylistmain .list tbody th:nth-child(3), .holidaylistmain .list tbody td:nth-child(3){text-align: center;}
.holidaylistmain .list th,.holidaylistmain .list tr, .holidaylistmain .list td
{
    padding:1rem 2rem;
    font-size: 18px;
    font-weight:500;
    border:1px solid #c4c4c4;
    background-color:#fafafa;
}
.holidaylistmain .buttonmain{
background-color: #00a0e3;
    display: flex;
    align-items: center;
    color: #fff;
    width: fit-content;
    padding: 0.1rem 1.5rem;
    border-radius: 6px;
}
.holidaylistmain .buttonmain a{cursor:pointer;}
.holidaylistmain .buttonmain img{width:35px;}
.holidaylistmain .buttonmain h3
{
    font-size: 16px;
    margin-bottom: 0;
    font-weight: 600;
    letter-spacing: -0.3px;
}
.holidaylistmain .top
{
    width: 100%;
    display: flex;
    margin-bottom: 1.5rem;
    flex-direction: column;
}
.holidaylistmain .buttontopright
{
    display:flex;
    justify-content: flex-end;
    margin-bottom: 0.45rem;
}
.holidaylistmain .iconmain
{
    display:flex;
    width: 100%;
}
.holidaylistmain .iconmain .icon
{
    height: auto;
    width: 80px;
    border: 1px solid #00a0e3;
    padding:2px;
}
.holidaylistmain .iconmain .icon img
{
    width: 100%;
    height: 100%;
    background-color: #00a0e3;
}
.holidaylistmain .content
{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 0.55rem 2rem;
    margin: 0.25rem 0 0.25rem 0.5rem;
}
.holidaylistmain .content h4
{margin-bottom: 0;font-weight:600;font-size:20px;}
.holidaylistmain .datechange
{
    display: flex;
    gap: 12px;
    align-items: center;
}
.holidaylistmain .datechange h5{margin-bottom: 0;}
.holidaylistmain .datechange i{font-size:12px;}
.holidaylistmain .deletebutton{color: #000;}
.holidaylistmain .editbutton:hover, .holidaylistmain .deletebutton:hover
{
    background-color: transparent !important;
    color: #595959!important;
}

/* ------------------------------------------------------------------------------------------------ Employee ------------------------------------------------------------------------------------------ */
.justifyspacebetweeen{justify-content: space-between;}
.filespan{font-size: 13px;
    padding: 0.25rem 0;}

/* ----------------------------------- Forgot Password ---------------------------------- */
/* .forgotright{align-items: flex-start!important;padding-left:6rem!important;} */
.forgotright h4{padding:0;}
.forgotright .padding{padding:0;}
.forgotright .form{padding-bottom:0!important;}
.forgotright .padding input{color: #909090;font-weight:500!important;}
.forgotbg {width:70%!important;}

/* ------------------------------- Reset Password ----------------------------- */
.resetright
{
    align-items: flex-start !important;
    padding-left: 6rem !important;
}
.resetright .form{width:85%!important;margin-left:-4%!important;}
.resetbg {width:65%!important;}
.mobileshow{display: none!important;}

/* -------------------------------------------- Logout ------------------------------------------------ */
.logoutmodal .modal-header
{
    padding:1rem;
    background-color: #00a0e3;
    color:#fff;
    letter-spacing: -0.25px;
}
.logoutmodal .modal-header .modal-title{font-weight: 600;}

/* -------------------------------------------- Delete Modal ------------------------------------------------ */
.deleteModal .modal-header
{
    padding:1rem;
    background-color: #00a0e3;
    color:#fff;
    letter-spacing: -0.25px;
}
.deleteModal .modal-header .modal-title{font-weight: 600;}

/* ------------------------------------ Error Password -------------------------------------------------- */
.errormodal .modal-header
{
    padding:1rem;
    background-color: #00a0e3!important;
    color:#fff;
    letter-spacing: -0.25px;
}
.errormodal .modal-header .modal-title{font-weight: 600;}
.errormodal
{
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.errormodal img
{
    width:-webkit-fill-available;
    width: -moz-available;
    margin:1rem 3rem 2rem;
}
.errormodal .modal-body{text-align: center;margin-bottom: 1rem;
    font-size: 18px;
    font-weight: 500;}

    /* ------------------------------------ welcomemodal -------------------------------------------------- */
.welcomemodal .modal-header
{
    padding:1rem;
    background-color: #00a0e3!important;
    color:#fff;
    letter-spacing: -0.25px;
}
.welcomemodal .modal-header .modal-title{font-weight: 600;}
.welcomemodal
{
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.welcomemodal img
{
    width:-webkit-fill-available;
    width: -moz-available;
    margin:1rem 3rem 2rem;
}
.welcomemodal .modal-body{text-align: center;margin-bottom: 1rem;
    font-size: 18px;
    font-weight: 500;}

.showModalEmployeeModal .modal-body, .showModalAdminModal .modal-body
{
    padding-top: 1.5rem;
    padding-bottom: 0;
    margin-bottom: 0;
}
.showModalEmployeeModal .modal-footer, .showModalAdminModal .modal-footer
{
    padding-top: 0;
    padding-bottom: 1.5rem;
}

/* View Leave Request Modal */
.leaveadminmodal .btnclose{color:#000!important;}

/* department-mapping */
#maping-form .admindashboard .rightcontent .formflex
{
    align-items: center;
}

.dashpadding{height: 100vh;}
.close-menu img{mix-blend-mode: plus-lighter;}
.admindashboard .rightcontent .w100 .pagination .active
{
    background-color: #00a0e3;
    color:#fff;
    padding:0.4rem 1rem;
    font-weight: 600;
}
#registration-response, #maping-form-response, #leave-form-response, #changepasswordbutton-response, #holiday-delete-response, #holiday-response , #apply_leave_encashment-response
{
    background-color: #00a0e3;
    width: 100%;
    display: block;
    /* padding: 1rem; */
    text-align: center;
    color:#fff;
    line-height: 2rem;
}
#registration-response.error, #maping-form-response.error, #leave-form-response.error, #changepasswordbutton-response.error, #holiday-delete-response.error, #holiday-response.error, #apply_leave_encashment-response.error{
  background-color: red;
}
#registration-response{margin:1rem auto;}
#maping-form-response{margin: 0 auto;}

.editbutton, .deletebutton{color:#fff;cursor:pointer;}
.editbutton:hover, .deletebutton:hover{background-color:#535353!important;color:#f8f8f8;}
.viewattchmentimage
{
    background-color: #00a0e3;
    padding: 0.5rem 1.5rem;
    border-radius: 40px;
}
.viewattchmentimage a{color:#fff;}
.positionabsolute{position: absolute;right:15px;top:10px;}
#file_attachment_section{display:none;}
.exportreport
{
    padding: 0.25rem 1.5rem!important;
    width: auto;
    border-radius: 40px;
    margin-bottom: 1rem;
    font-weight: 500;
}
.flexcenter{display: flex;align-items: center;justify-content: space-between; --bs-gutter-x: 0 !important;}
.inputw100{width:100%!important;}

.leavenew
{
    border: 1px solid #7575754a;
    background-color: #f3f3f3;
    margin-top: 1rem;
    padding: 0.75rem;
}
.leavenew .color9{
    display: flex;
    background-color: #fff;
    border-bottom: 1px solid #d3d3d3;
    margin-bottom: 0.5rem;
    padding: 1rem;
    justify-content: space-between;
    align-items: center;}

    .leavenew .color9 h4, .leavenew .color9 h2{margin-bottom: 0;}
    .leavenew .color9 h4{font-size: 20px;font-weight: 400;}
    .leavenew .color9 h2{font-weight: 600;color: #505050;}
    .leavenew .color10{
        margin-bottom: 0;
    background-color: transparent;
    border: none;padding: 0.55rem 0;}
    .leavenew .color10 button{width: fit-content;
    border-radius: 4px;
    padding: 0.55rem 2rem;background-color: #00a0e3;}
    .leavenew .color10 button
    {
        font-weight: 500;
    /* letter-spacing: 0.125px; */
    text-transform: capitalize;
    }
    .leavenew .color10 button:hover
    {
        background-color: #1f1f1f8f;
    }
    .apply_data
    {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 0;
    margin: auto;
    margin-bottom: 1rem;
    }
    .apply_data .br0{
        border: 1px solid #d1d1d1;
    width: 100%;
    padding: 0.55rem 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    }
    .apply_data .first
    {
            background-color: #00a0e3;
    font-weight: 500;
    text-transform: capitalize;
    color: #fff;
    border-radius: 40px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }
    .balance_data{
        margin-top: 15px;
        display: flex;
    width: 100%;
    justify-content: space-between;
    padding:0;
    margin-bottom: 1rem;
    }
    .balance_data .br0{
        border: 1px solid #d1d1d1;
    width: 100%;
    padding: 0.55rem 1rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    }
    .balance_data .first
    {
            background-color: #e9e9e9;
    font-weight: 500;
    text-transform: capitalize;
    }
    .apply_data .manageflex{padding-right:0;display: flex;}
    .balance_data .manageflex{width:100%;display: flex;}
    .details_leave_box{display: none;}
    .paddingauto{padding: inherit!important;}

    .la{
    width: 22px;
    height: 22px;
    text-align: center;
    border-radius: 50%;
    }
    .la_yellow{
        background-color: #eeee00;
    }
    .la_orange{
        background-color: orange;
    }
    .la_red{
        background-color: red;
    }
    .la_green{
        background-color: green;
    }
    .textcenter{
        display: flex;
    justify-content: center;
    }
    .buttonmain{
        padding: 0.5rem 1rem!important;
        color:#fff;
        font-size: 16px;
        border-radius: 8px!important;
        cursor: pointer;
    }
    .gap10{gap:10px;}

    .deleteemployee{
        font-weight: 500;
        background-color: #2e2e2e!important;
    }
    .updatebutton:hover, .deleteemployee:hover{background-color: #575A5C!important;}
    .updatebutton{
        font-weight: 500;
        background-color: #00a0e3;
    }
    .p1{padding: 1rem;}
    .overlapbutton{
        cursor:pointer;
        margin-bottom:0.25rem;
        display: flex;
    width: max-content;
    font-size: 14px;
    border-radius: 18px;
    text-align: center;
    padding: 0.2rem 0.85rem;
    color: #fff;
    background-color: #00a0e3;
    align-items: center;
    justify-content: center;
    }
    .leavechart{
        border: 1px solid #d3d3d3;
    padding: 2rem;
    background-color: #fafafa;
    }
    .overlapdata
    {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    .overlapdata li
    {
        margin-bottom: 0.5rem!important;
    border: 1px solid #d3d3d3;
        gap: 5px;
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: space-around;
    }
        .overlapdata li:last-child
    {
        margin-bottom: 0rem!important;
    }
    .overlapdata li .overlap
    {
        padding: 0.5rem;
    width: 100%;
    }
    .overlapdata li .overlap strong{font-weight:500;}
    .pt0{margin-top: 0;}

    .leavetableemployee th{text-align: center;}
    .leavetableemployee tr td{text-align: center;}
    .leavetableemployee th:last-child{text-align: left;}
    .leavetableemployee tr td:last-child{text-align: left;}
    .d-hide{display: none;}
    .aligncenter{text-align:center;}
    .alignleft{text-align:left;}
    .justifycenter{justify-content: center;}
    .mr25{margin-right: 10px;}
    .r{
        display: flex;
    align-items: center;
    }
    .f{
        display: flex;
    justify-content: space-between;
    }
    .f .filter{
        margin-bottom: 1rem;
        margin-right: 0.5rem;
        display: flex;
    align-items: center;
    }
    .f .filter select{
        cursor:pointer;
        border-radius: 10px 0px 0px 10px;
        padding: 0.35rem 1.5rem;
    }
    .f .filter .fsubmit{
        color:#fff;
        background-color: #4e4e4e !important;
        padding: 0.25rem 1.5rem !important;
    width: auto;
    border-radius: 0 10px 10px 0;
    font-weight: 500;
    }
    .fleximage{
        gap: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    }

    .search-container-input{position:  relative !important;width: 50%;}
    .search-container-new{
        display: flex;
        width: 100% !important;
    }
    .search-container-new-f{display: unset !important;}
    .search-container-new-button{
        width: 50%;
        justify-content: end;
        display: flex;
        
    }
    .search-container-new-button .newapprove{color: #fff;cursor: pointer;}
    .search-container-new-f .filter{
        gap: 20px;
    }
    .search-container-new-f .filter select{border-radius: 10px !important;}
    .search-container-new-f .fsubmit{
        border-radius: 10px !important;
        border: none;
    }
    .clear-button{
        background-color: red;
         padding: 0.25rem 1.5rem;
         font-weight: 500;
        border-radius: 10px;
        color: #fff;
    }
     .clear-button:hover{color: #fff;}
     .leave-encashment-history-table{
        padding: 0;
        margin-top: 20px;
     }
     .leave-encashment-history-table h4{
            padding-left: calc(var(--bs-gutter-x) * .5);
     }
     .holidaylistmain .reason-list tbody th:nth-child(1){
        width: 100% !important;
     }
     .holidaylistmain .reason-list  td:nth-child(2){
       text-align: center;
     }
     .admindashboard .rightcontent .w100 .borderright .dev_deletebutton{
background-color: red!important;
     }
     .admindashboard .rightcontent .w100 .borderright .pause_user, .admindashboard .rightcontent .w100 .borderright .active_user{
background-color: #2e2e2e!important;
     }
     .add-emp-flexbtn{
        width: 100%;
     }
     .add-emp-flexbtn-second{
        width: 100%;
        display: flex;
        gap: 10px;
     }
     .update-delete-button-flex{
        display: flex;
        gap: 20px;
     }
     @media only screen and (min-width:200px) and (max-width:767px) {
        .search-container-new{
            flex-direction: column;
            gap: 10px;
        }
        .search-container-new .search-container-input{
             width: 100%;
        }
        .search-container-new-f .filter{
            gap: 10px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .clear-button{
            text-align: center;
        }
     }
      @media only screen and (min-width:768px) and (max-width:1023px) {
         .search-container-new{
            flex-direction: column;
            gap: 10px;
        }
        .search-container-new .search-container-input{
             width: 100%;
        }
         .search-container-new-f .filter{
            gap: 10px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .clear-button{
            text-align: center;
        }
      }