@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&family=Lora:ital,wght@0,400..700;1,400..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Righteous&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
 html, body {
    overflow-x: hidden !important;
}
.home_content 
{
    height:100vh !important;
}

body {
    margin: 0px;
    padding: 0px;
    font-family: Poppins;
    font: 13px/1.231 arial,helvetica,clean,sans-serif;
    /*background:url(Images/bg.jpg) repeat-x;
	
 /*background-color: #c2c0c0;
    background-image: -moz-linear-gradient(center top , #c77d02, #c2c0c0);
    border: 1px solid transparent;*/


    width: 100%;
}

.stdHeader {
    float: left;
    width: 1000px;
}

.shadow {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 3px 3px 5px 6px #ccc;
}

.MaskedEditFocus {
    background-color: #FFC;
}

.MaskedEditError {
    background-color: #FCC;
    color: #000000;
}
/*.gridBorderLeft
{
border-left:solid 1px gray;
border-bottom:solid 1px lightgray;
height:27px;
color:#333;
/*background-color:#f5f5f5;*/


.stdlogindiv {
    box-shadow: 0 0 1px 1px #E8E8E8;
    float: left;
    height: 150px;
    margin-bottom: 100px;
    padding-left: 70px;
    padding-right: 70px;
    width: 300px;
    margin-left: 150px;
    padding-top: 50px;
}

.gridBorderCenter {
    border-left: dotted 1px lightgray;
    border-bottom: solid 1px lightgray;
    height: 27px;
    color: #333;
    /*background-color:#f5f5f5;*/
}

.gridBorderRight {
    border-right: solid 1px gray;
    border-left: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    height: 27px;
    /*background-color:#f5f5f5;*/
}

.stdImgBox {
    height: 200px;
    widows: 150px;
    margin-bottom: 10px;
}

.stdlblHeading {
    font-size: 15px;
    font-weight: bold;
}

.stdcol {
    border: 1px solid;
    width: 200px;
    height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    font-size: 14px;
}

.stdbackgrdModalPopud {
    background-color: #333;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

.stdimg {
    height: 180px;
    width: 150px;
}

.stddivPosition {
    margin-left: 350px;
}

.stdlblStatusmsg {
    color: #EC4731;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}

.stdORmsg {
    color: #EC4731;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    font-family: Maiandra GD;
}

.stdGrdStatusmsg {
    color: #EC4731;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    font-family: Maiandra GD;
}

.stdControls {
    width: 234px !important;
    border: solid 1px #e6e6e6;
    font-size: 12px;
    color: Gray;
    height: 20px;
    padding: 20px !important;
    border-radius: 10px;
    box-shadow: rgb(221, 221, 221) 0px 0px 10px 0px;
}

.stdScriptControls {
    border: solid 1px lightgray;
    font-size: 13px;
    color: #333;
    height: 30px;
}

.stdControls12 {
    width: 150px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 18px;
    -moz-box-shadow: 0 0 1px 1px #E8E8E8;
    -webkit-box-shadow: 0 0 1px 1px #E8E8E8;
    box-shadow: 0 0 1px 1px #E8E8E8;
}

.stdControls13 {
    width: 80px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 18px;
    -moz-box-shadow: 0 0 1px 1px #E8E8E8;
    -webkit-box-shadow: 0 0 1px 1px #E8E8E8;
    box-shadow: 0 0 1px 1px #E8E8E8;
}

.stdControlsWbsGrid {
    width: 50px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 18px;
    -moz-box-shadow: 0 0 1px 1px #E8E8E8;
    -webkit-box-shadow: 0 0 1px 1px #E8E8E8;
    box-shadow: 0 0 1px 1px #E8E8E8;
}

.stdConroldtd {
    width: 200px;
}

.stdErrormsg {
    color: Red;
    font-size: 20px;
}

.stdControlsDD {
    width: 180px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 24px;
}

.stdControlsDD1 {
    width: 200px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 24px;
}

.stdControlsDD12 {
    width: 150px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 24px;
    -moz-box-shadow: 0 0 1px 1px #E8E8E8;
    -webkit-box-shadow: 0 0 1px 1px #E8E8E8;
    box-shadow: 0 0 1px 1px #E8E8E8;
}

.stdControlsDDWbsGrid {
    width: 100px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 24px;
    -moz-box-shadow: 0 0 1px 1px #E8E8E8;
    -webkit-box-shadow: 0 0 1px 1px #E8E8E8;
    box-shadow: 0 0 1px 1px #E8E8E8;
}

.stdControlsDD13 {
    width: 200px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 24px;
    -moz-box-shadow: 0 0 1px 1px #E8E8E8;
    -webkit-box-shadow: 0 0 1px 1px #E8E8E8;
    box-shadow: 0 0 1px 1px #E8E8E8;
}

.stdtable {
    float: left;
}

.stdControlsCalender {
    width: 180px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 20px;
}

.stdControlsCalender12 {
    width: 135px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 20px;
}

.stdtxtBoxMultiLine {
    width: 200px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 50px;
}

.modalBackground {
    background-color: #CCCCFF;
    filter: alpha(opacity=70);
    opacity: 0.8;
    border: solid 0.5px steelblue;
}


.stdLabels {
    /*#A29D9D;*/
    width: 200px;
    color: #333;
    font-size: 14px;
    /*text-shadow:0 1px 0 dimGray;*/
    font-weight: 500;
    padding: 10px;
}

.stdLabels1 {
    /*#A29D9D;*/
    width: 100px;
    color: #333;
    font-size: 14px;
    /*text-shadow:0 1px 0 dimGray;*/
    font-weight: bold;
    padding-left: 18px;
}

.stdLabels2 {
    /*#A29D9D;*/
    width: 100px;
    color: #333;
    font-size: 14px;
    /*text-shadow:0 1px 0 dimGray;*/
    font-weight: bold;
    font-family: Maiandra GD;
}

.stdLabels3 {
    /*#A29D9D;*/
    width: 70px;
    color: #333;
    font-size: 14px;
    /*text-shadow:0 1px 0 dimGray;*/
    font-weight: bold;
    font-family: Maiandra GD;
}


.stdLabel4 {
    /*#A29D9D;*/
    width: 200px;
    color: #333;
    font-size: 14px;
    /*text-shadow:0 1px 0 dimGray;*/
    font-weight: bold;
    padding-left: 5px;
}

.stdLablesUsername {
    width: 200px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
}

.stdlblWBS {
    /*#A29D9D;*/
    width: 100px;
    color: #333;
    font-size: 14px;
    /*text-shadow:0 1px 0 dimGray;*/
    font-weight: bold;
}

.tsm_Welcome {
    float: left;
    width: 198px;
    height: 80px;
    color: White;
}

.stdRowHeight {
    height: 25px;
}

.stdRowHeightsearch {
    height: 50px;
}

.stdRowHeightMultiLIne {
    height: 50px;
}

.stdRowHeightSave {
    height: 60px;
}

height:30px;
}

.tsm-logout {
    float: right;
}

.tsm-maindiv {
    float: left;
}

.tsm-title_New {
    font-weight: bold;
    font-size: 20px;
    color: white;
    font-family: Maiandra GD;
    margin-left: 4px;
    text-align: left;
    width: 100%;
}

.tsm-title {
    font-weight: 600;
    font-size: 20px;
    color: #00095c;
    float: left;
    width: 100%;
   /* margin-left: 4px; */
    float: left;
    
}

.tsm-title1 {
    font-weight: bold;
    font-size: 24px;
    color: #de6503;
    background-color: Yellow;
    width: 900px;
    font-family: Maiandra GD;
    margin-left: 4px;
}


.tsm-title11 {
    float: left;
    background-color: #e4e4e4;
    width: 980px;
    font-family: Maiandra GD;
    margin-left: 4px;
    font-weight: bold;
    font-size: 24px;
    color: #13c5b7;
}







.stdlblEmployeeName {
    color: Green;
    font-family: Maiandra GD;
    font-size: 20px;
}


.tsm_cuslogo {
    float: right;
    height: 72px;
    width: 198px;
}


/*Prem Worte CSS */

.footer_j {
    float: left;
    font-family: Arial;
    font-size: 14px;
    color: #fff;
    margin-top: 13px;
    margin-left: 4px;
}

.et-loginbg {
    float: left;
    background: url(Images/hlogin_page.png) no-repeat;
    width: 375px;
    height: 258px;
}

.g-button-red {
    background-color: #D14836;
    background-image: -moz-linear-gradient(center top, #DD4B39, #D14836);
    border: 1px solid transparent;
    color: #FFFFFF;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
}

    .g-button-red:hover {
        background-color: #C53727;
        background-image: -moz-linear-gradient(center top, #DD4B39, #C53727);
        border: 1px solid #B0281A;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        color: #FFFFFF;
        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    }

    .g-button-red:active {
        background-color: #B0281A;
        background-image: -moz-linear-gradient(center top, #DD4B39, #B0281A);
        border: 1px solid #992A1B;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset;
    }


.stdScriptControls1 {
    width: 50px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 20px;
    border: solid 0px white;
}

.stdScriptControls2 {
    width: 100px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 20px;
    border: solid 0px white;
}

.stdScriptControls3 {
    width: 200px;
    border: solid 1px lightgray;
    font-size: 14px;
    color: #333;
    height: 20px;
    border: solid 0px white;
}


.gridHeaderLeft {
    border-top: solid 1px Yellow;
    border-left: solid 1px Yellow;
    border-bottom: solid 1px Yellow;
    height: 30px;
    background-color: #6aade4;
    color: white;
    text-align: center;
}

.gridHeaderCenter {
    border-top: solid 1px Yellow;
    border-left: dotted 1px Yellow;
    border-bottom: solid 1px Yellow;
    height: 30px;
    background-color: #6aade4;
    color: white;
    text-align: center;
}

.gridHeaderRight {
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    border-bottom: solid 1px #fff;
    border-left: dotted 1px #fff;
    height: 30px;
    background-color: #9a9a9a;
    color: white;
    text-align: center;
}


.gridBorderLeft {
    border-left: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    border-right: solid 1px lightgray;
    height: 30px;
    color: #333;
}

.gridBorderRight {
    border-right: solid 1px lightgray;
    border-left: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    height: 30px;
}

.modalBackground {
    background-color: #CCCCFF;
    filter: alpha(opacity=40);
    opacity: 0.5;
    border: solid 0.5px steelblue;
}

.grid_j td {

    color: #5F5A59;
    padding: 8px;
    margin: 0px;
    border: solid 1px #c3c1c2;
}

.grid_j th {
      border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    border-left: dotted 1px #fff;
    font-size: 14px;
    height: 40px;
    background-color: #9fa5e0;
    color: white;
    text-align: center;
}


.headerdiv {
    float: left;
    width: 1000px;
}

.labeldiv {
    margin-top: 15px;
    margin-left: 400px;
}

.innerdiv {
    float: left;
    padding-left: 270px;
}

/*Dash Board*/

.Banner_M {
}



.defaults {
    /* background:url(Images/view1.png) no-repeat;   */
    background: #fff;
    border-radius: 20px;
    width: 100%;
    height: 410px;
    z-index: 9999;
    position: absolute;
    box-shadow: rgb(221, 221, 221) 0px 0px 10px 0px;
}



.body_header {
    float: left;
    width: 1000px;
    height: 130px;
}

.body_header_text {
    float: left;
    font-weight: bold;
    color: #3797E0;
    margin-top: 45px;
    padding-left: 200px;
    font-size: 30px;
    font-family: Rockwell;
}



.logo_R {
    float: right;
    background: url(Images/logo.png) no-repeat;
    margin-top: 45px;
    padding-right: 5px;
    width: 114px;
    height: 72px;
}

.logolef_01 {
    float: left;
    width: 76px;
    height: 76px;
    margin-top: 35px;
}



.footer_F {
    float: left;
    height: 56px;
    width: 1000px;
    background-color: #6aade4;
    margin-top: 5px;
}

.Footer_TX {
    float: left;
    font-family: Arial;
    font-size: 14px;
    color: #fff;
    margin-top: 20px;
}

.Footer_Logo {
    float: right;
    width: 151px;
    height: 33px;
    margin-top: 10px;
    margin-right: 10px;
}










/***New theme CSS Started *******************/



.Sheet_bg {
    float: left;
    width: 1000px;
    height: 800px;
    background: url(Images/nHome_bg.jpg) no-repeat;
    border: solid 1px #fa920d;
}

.timesheetmang_main {
    margin: 0 auto;
    width: 1000px;
}

.TSMangament {
    margin: 0 auto;
    width: 1000px;
}

.inner_BGtsm {
    /*float:left;
	 width:1000px; 

	background:url(Images/tsminner_Bg.png) no-repeat;
		height:104px; */
       padding: 8px;
    margin: 0;
    background: #E4E9F7 !important;
}

.TSM_Menusstart {
    float: right;
    width: 700px;
    height: 33px;
    margin-top: 45px;
}


    .TSM_Menusstart ul {
        float: right;
        width: 700px;
        list-style: none;
        display: inline;
        padding: 0px;
        font-size: 14px;
        margin: 0px;
    }

        .TSM_Menusstart ul li {
            float: right;
            margin: 0px;
            padding-top: 4px;
            padding-right: 2px;
            background: url(Images/menu_btn.png) no-repeat;
            height: 31px;
            width: 98px;
            text-align: center;
            font-weight: bold;
        }


    .TSM_Menusstart a {
        color: White;
        text-decoration: none;
    }


        .TSM_Menusstart a:hover {
            text-decoration: none;
        }

.TSM_Body {
    float: left;
    width: 1000px;
    height: 300px;
    background-color: White;
}


.TSM_Pagetitlestrip {
    float: right;
    width: 557px;
    height: 11px;
    background: url(Images/pagetitile_s.png) no-repeat;
}

.inthismainTSM {
    float: left;
    width: 1000px;
    height: 48px;
}

.TSM_maintxt {
    float: left;
    font-family: Lucida Bright;
    font-size: 24px;
    font-weight: bold;
    color: #9a9a9a;
    width: 996px;
    text-align: right;
}

.TSM_Footer {
    float: left;
    background: url(Images/Footer.png) no-repeat;
    width: 1000px;
    height: 104px;
}

.TSM_Footer_TXT {
    float: left;
    color: White;
    margin-top: 46px;
    margin-left: 20px;
}





.grid_22 td {
    font: 12px Arial,Helvetica,sans-serif;
    color: #5F5A59;
    padding: 5px;
    margin: 0px;
    border: solid 1px #FFF;
    border-bottom: solid 1px #c3c1c2;
}

.grid_22 th {
    font: 13px helvetica,arial,sans-serif;
    font-weight: bold;
    color: #FFF;
    padding: 5px;
    margin: 0px;
    border-left: solid 1px #c3c1c2;
    border-top: solid 1px fff;
    border-left: solid 1px fff;
    border-bottom: solid 1px fff;
    background-color: #9a9a9a;
}

.grid_23 td {
    font: 12px Arial,Helvetica,sans-serif;
    color: #5F5A59;
    padding: 0px;
    margin: 0px;
    border: solid 1px #FFF;
    border-bottom: solid 1px #c3c1c2;
}

.grid_23 th {
    font: 13px helvetica,arial,sans-serif;
    font-weight: bold;
    color: #FFF;
    padding: 0px;
    margin: 0px;
    border-left: solid 1px #c3c1c2;
    border-top: solid 1px fff;
    border-left: solid 1px fff;
    border-bottom: solid 1px fff;
    background-color: #9a9a9a;
}

.gridBorderLeft1 {
    height: 30px;
    color: #333;
}

.stdLink {
    color: #204d00 !important;
    font-size: 18px !important;
    text-decoration: none !important;
    font-weight: bold;
    cursor: pointer;
}
/*.divModalBackground
{
filter: alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;

 background-color:#CCCCFF;
 position: absolute;
top: 0px; 
left: 0px;
z-index: 800;
}*/


#divModalBackground {
    background-color: rgb(250, 250, 250);
    opacity: 0.7; /* Safari, Opera */
    -moz-opacity: 0.25; /* FireFox */
    filter: alpha(opacity=70); /* IE */
    z-index: 200;
    height: 100%;
    width: 100%;
    background-repeat: repeat;
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: center;
    line-height: 240px;
}

    #divModalBackground > img {
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

.gridHeaderRight {
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    border-left: dotted 1px #fff;
    font-size: 14px;
    height: 40px;
    background-color: #9fa5e0;
    color: white;
    text-align: center;
}


.gridBorderLeft {
    border-left: solid 1px lightgray;
    border-bottom: solid 1px lightgray;
    border-right: solid 1px lightgray;
    height: 30px;
    color: #333;
    box-sizing: border-box;
}


/*	Gridview Pagination CSS 2 */

.grid_paging a {
    text-decoration: none;
}

    .grid_paging a:hover {
        text-decoration: underline;
    }

    .grid_paging a:link {
        font-size: 10px;
        padding: 2px 6px;
        background-color: #FFFFFF;
        border: 1px solid #F9C035;
    }

.grid_paging span {
    background-color: #13C5B7;
    border: 1px solid #F9C035;
    color: #FFFFFF;
    padding: 2px 5px;
}




/* on 30 May 2013*/

.AddNew a {
    color: #636462;
    font-size: 13px;
    text-align: center;
    padding: 5px 15px;
    color: Blue;
    float: right;
    cursor: pointer;
}

    .AddNew a:hover {
        font-size: 13px;
        text-align: center;
        padding: 5px 15px;
        text-decoration: underline;
    }

.stdPopUp {
    background-color: white;
    border: solid 1px #13c5b7;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}

.panelHeader {
    color: White;
    font-size: 16px;
    background-color: #13c5b7;
    font-weight: bold;
    margin-bottom: 15px;
    border-radius: 5px 0px 0px 0px;
}

/* Divya Styles 03/11/2025 */
/* Dashboard */
.container {
    width: 1420px;
}

.container-fluid {
    padding: 0px !important;
}
/* Navbar */
.navbar {
    background-color: #00095c !important;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    position: relative;
    z-index: 1000;
}

.navbar-brand {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0ef;
    text-transform: uppercase;
    text-decoration: none;
}

/* Hamburger */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

    .menu-toggle span {
        height: 3px;
        width: 26px;
        background: #fff;
        margin: 4px 0;
        border-radius: 2px;
        transition: 0.4s;
    }

/* Nav links container */
.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
}

    .nav-links a {
        color: white;
        text-decoration: none;
        font-size: 16px;
        transition: 0.3s;
    }

        .nav-links a:hover {
            color: #0ef;
        }

/* Responsive section */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100%;
        width: 250px;
        background-color: #545c63;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transition: 0.4s ease;
        box-shadow: -4px 0 10px rgba(0, 0, 0, 0.3);
    }

    input[type="checkbox"] {
        display: none;
    }

        /* Toggle Menu open */
        input[type="checkbox"]:checked ~ .nav-links {
            right: 0;
        }

        /* Animate Hamburger */
        input[type="checkbox"]:checked + label .line1 {
            transform: rotate(45deg) translate(5px, 5px);
        }

        input[type="checkbox"]:checked + label .line2 {
            opacity: 0;
        }

        input[type="checkbox"]:checked + label .line3 {
            transform: rotate(-45deg) translate(6px, -6px);
        }
}
/* General style for the top user bar */
.user-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    background-color: #6c757d; /* same as Bootstrap bg-secondary */
    color: white;
    padding: 6px 15px;
}

    /* The text and links on the right side */
    .user-info-bar .user-links {
        text-align: right;
        font-weight: bold;
        color: white;
    }

/* Style link buttons */


/* Adjust the entire top bar */
.top-user-bar {
    background-color: #6c757d; /* Bootstrap secondary */
    color: white;
}


#nav {
    display: flex;
    justify-content: end;
}


#DIV4 b {
    color: #333 !important;
}

#DIV4 table tr td {
    color: red;
}




















/* Responsive tweaks */
@media (max-width: 992px) {
    .top-user-bar {
        flex-direction: column !important;
        text-align: center !important;
    }

        .top-user-bar img {
            width: 200px;
            margin-bottom: 8px;
        }

        .top-user-bar .text-end {
            text-align: center !important;
        }
}

@media (max-width: 576px) {
    .stdLink {
        display: inline-block;
        margin: 4px 6px;
        font-size: 14px;
    }

    .top-user-bar img {
        width: 160px;
    }
}


/* Dashboard page and side bar */


body {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

::selection {
    color: #fff;
    background: #11101d;
}

/* ---------- Sidebar ---------- */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 240px;
    /* background: #05107a; */
  background:#1a0a55;
    padding: 10px 14px;
    z-index: 99;
    transition: all 0.5s ease;
    overflow-y: scroll;
}
/*
.sidebar {
    overflow: hidden !important;   
    background-clip: padding-box !important;
    border-right: none !important;
    box-shadow: none !important;
      position: fixed !important;
    z-index: 999999 !important;
}


.sidebar::after,
.sidebar::before {
    display: none !important;
    content: none !important;
}


.home_content,
.main-content {
    border-left: none !important;
}
*/




.sidebar .nav_list > li .sub-menu {
    position: relative;
    z-index: 9999999 !important;
    width:100%;
 max-height: 280px;     
    overflow-y: auto;     
    overflow-x: hidden;
}


.sidebar,
.sidebar .nav_list,
.sidebar .nav_list > li {
    overflow: visible !important;
}

.sidebar .nav_list > li .sub-menu::-webkit-scrollbar {
    width: 6px;
}
.sidebar .nav_list > li .sub-menu::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar .nav_list > li .sub-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}
.sidebar .nav_list > li .sub-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.45);
}

/* Sidebar scrollbar */
.sidebar::-webkit-scrollbar {
    width: 6px;
}
.sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}

.sidebar.active {
    width: 78px;
}

     

    /* ---------- Logo ---------- */
    .sidebar .logo_content .logo {
        color: #fff;
        margin: auto;
        display: flex;
        justify-content: center;
        height: 50px;
        align-items: center;
        opacity: 1;
        transition: all 0.5s ease;
    }

.logo_content .logo i {
    font-size: 28px;
    margin-right: 5px;
}

.logo_content .logo .logo_name {
    padding: 16px 0px;
    margin-top: 18px;
}

.sidebar #btn {
    line-height: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: end;
    line-height: 0px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: end;
    font-size: 30px !important;
    padding: 14px 0px 0px;
    color: #fff;
        margin: 16px 0px;
}


.sidebar.active #btn {
    left: 50%;
    transform: translateX(-50%);
}

/* ---------- Nav Items ---------- */
.sidebar ul {
    padding-left: 0;
}

    .sidebar ul li {
        position: relative;
        list-style: none;
    }

        .sidebar ul li a {
            color: #fff;
            display: flex;
            align-items: center;
            text-decoration: none;
            /* border-radius: 12px; */
            white-space: nowrap;
            transition: all 0.4s ease;
        }

.sub-menu {
    display: none;
    padding-left: 40px;
    list-style: none;
    transition: all 0.3s ease;
}

showMenu > .sub-menu {
    display: block;
}

.arrow {
    transition: transform 0.3s ease;
}

/* Rotate arrow when menu open */
.showMenu > .arrow {
    transform: rotate(90deg);
}

.logo-collapsed {
    display: none;
    width: 40px;
    height: 40px;
}

.logo-expanded {
    display: block;
    width: 220px;
    height: auto;
        padding: 14px;
    margin-top: 10px;
}

/* When sidebar is collapsed */
.sidebar.close .logo-expanded {
    display: none;
}

.sidebar.close .logo-collapsed {
    display: block;
}

.logo-details img {
    transition: opacity 0.3s ease-in-out;
}

.sidebar.active ul li .arrow {
    /*display: none !important;*/
}

.sidebar ul li ul.sub-menu li a {
    color: #00095c;
        margin: 4px 4px 0px 4px;
    text-wrap-mode: wrap;
}

    .sidebar ul li ul.sub-menu li a:hover {
        color: #fff;
        background: #7464b3;
    }

.sidebar ul li a:hover {
    color: #11101d;
    background: #fff;
}

.sidebar ul li i {
    font-size: 20px;
    min-width: 38px;
    text-align: center;
   line-height: 42px;
}

.sidebar .links_name {
    font-size: 15px;
    opacity: 1;
    transition: all 0.3s ease;
}

.sidebar.active .links_name {
    opacity: 0;
    pointer-events: none;
}

/* ---------- Tooltip ---------- */
.sidebar ul li .tooltip {
    position: absolute;
    left: 125px;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    height: 35px;
    width: 120px;
    background: #fff;
    line-height: 35px;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    pointer-events: none;
    display: block;
    transition: all 0.3s ease;
}

.sidebar.active ul li:hover .tooltip {
    opacity: 1;
    top: 50%;
}

/* ---------- Multi-level Dropdown ---------- */
.sidebar ul li .sub-menu {
    display: none;
    flex-direction: column;
    margin-left: 20px;
    background: #e4e9f7;
    border-radius: 6px;
    overflow: hidden;
}

.sidebar ul li.showMenu > .sub-menu {
    display: flex;
}

.sidebar ul li .sub-menu a {
    padding: 6px;
    font-size: 14px;
}

.sidebar ul li .arrow {
position: absolute;
    right: -5px;
    top: 48%;
    transform: translateY(-50%);
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.3s;
    color: #fff;
    
}

.sidebar ul li.showMenu .arrow {
    transform: translateY(-50%) rotate(90deg);
    top: 28px;
}



ul#divHeader1 li a:hover .arrow {
    color: #333 !important;
}
/* ---------- Profile Section ---------- */
.sidebar .profile_content {
    position: absolute;
    color: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
}

.profile_content .profile {
    padding: 10px 6px;
    height: 60px;
    transition: all 0.4s ease;
}



.profile .profile_details {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

    .profile .profile_details img {
        height: 45px;
        width: 45px;
        object-fit: cover;
        border-radius: 12px;
    }

    .profile .profile_details .name_job {
        margin-left: 10px;
    }

    .profile .profile_details .name {
        font-size: 15px;
    }

    .profile .profile_details .job {
        font-size: 12px;
    }

.profile #log_out {
    position: absolute;
    bottom: 26px;
    left: 77%;
    min-width: 50px;
    line-height: 50px;
    font-size: 25px;
    border-radius: 12px;
    text-align: center;
    background: none;
    color: #fff;
}

.sidebar.active .profile #log_out {
    left: 50%;
    transform: translateX(-50%);
}

/* ---------- Home Content ---------- */

.home_content {
    position: relative;
    /* height: 100%; */
        width: calc(100% - 234px);
    left: 240px;
    
    transition: all 0.5s ease;
}
.sidebar.active ~ .home_content {
    width: calc(100% - 78px);
    left: 78px;
}

.home_content .text {
    font-size: 25px;
    font-weight: 500;
    color: #1d1b31;
    margin: 12px;
}

.main-content {
    padding: 26px;
}

/* New timesheet */
.timesheet-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    padding: 30px;
    border: 1px solid #e2e6ea;
    transition: box-shadow 0.3s ease;
}

    .timesheet-card:hover {
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }

h4.page-title {
    color: #444;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-label {
    font-weight: 600;
    color: #4b4b4b;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .form-label i {
        color: #00095c;
        font-size: 0.95rem;
    }

.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #ced4da;
    transition: all 0.2s ease;
}

    .form-control:focus, .form-select:focus {
        border-color: #00095c;
        box-shadow: 0 0 0 0.15rem rgba(108, 155, 125, 0.25);
    }

.table thead th {
    background-color: #9fa5e0;
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
}


.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa;
}

.table tbody tr:hover {
    background-color: #eef6f0;
}

.table td, .table th {
    text-align: center;
    vertical-align: middle;
    text-wrap-mode: nowrap;
}

.table td {
    font-size: 12px;
    text-wrap-mode: nowrap;
}

.btn-custom {
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 8px 18px;
    transition: all 0.25s ease;
}

.btn-save {
    background: #fff;
    border: 1.5px solid #6c9b7d;
    color: #6c9b7d;
}

    .btn-save:hover {
        background: #6c9b7d;
        color: #fff;
    }

.btn-submit {
    background: #5e8570;
    color: #fff;
    border: none;
}

    .btn-submit:hover {
        background: #507661;
    }

h6.range-label {
    text-align: center;
    color: #6c757d;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
}

@media (max-width: 768px) {
    .timesheet-card {
        padding: 20px;
    }
}

label.form-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-top: 10px;
}

.btn.btn-save.btn-custom {
      color: #fff;
    background: linear-gradient(135deg, #9be3d0, #1aaa96);
    padding: 8px 30px;
    border-radius: 20px;
    box-shadow: rgb(221, 221, 221) 0px 0px 10px 0px;
  
    border: 1px solid #94e8da;
}

.btn.btn-clear.btn-custom {
    color: #fff;
    background: linear-gradient(135deg, #fceca4, #e0830f);
    padding: 8px 30px;
    border-radius: 20px;
    box-shadow: rgb(221, 221, 221) 0px 0px 10px 0px;
    
    border: 1px solid #f2c972;
        
}

.btn.btn-delete.btn-custom 
{
     color: #fff;
    background: linear-gradient(135deg, #ebb09b, #f73521);
    padding: 8px 30px;
    border-radius: 20px;
    box-shadow: rgb(221, 221, 221) 0px 0px 10px 0px;
        
            border: 1px solid #ef8a75;
}
    
.btn.btn-save.btn-custom:hover {
    color: #fff;
    background: linear-gradient(135deg, #1faf48, #1dbd93);
}
 .btn.btn-clear.btn-custom:hover {
    color: #fff;
    background: linear-gradient(135deg, #d47a26, #f5a465);
}
 .btn.btn-delete.btn-custom:hover {
    color: #fff;
    background:linear-gradient(135deg, #e32f2f, #f0391a);
}


input.form-control, select.form-select {
    padding: 10px;
    font-size: 14px;
}



.table input,
.table select {
    width: 100%;
    min-width: 50px; /* prevent collapsing */
    max-width: 100%;
}

input[type="time"] {
    width: 80px;
    min-width: 70px;
    font-size: 0.9rem;
}

table input.form-control, table select.form-select, textarea.form-control,  table select.form-control {
    padding: 6px;
        margin-bottom:10px;
}
table select.form-control, table input.form-control, .form-control.hours-input{
     font-size: 12px;
    width: 90%;
        margin: 8px auto;
            text-align: center;
}
textarea.form-control {
    display: block;
    
}


    
.table-bg {
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: rgb(221,221,221) 0px 0px 10px 0px;
}

#liBilling, #liAdminEnableTimesheet {
    display: none !important;
}

.form-fields {
    display: flex;
    margin-bottom: 6px;
}

    .form-fields div:first-child {
        width: 32% !important;
    }

.fomr-fields div:last-child {
    width: 60% !important;
}

#ctl00_cphBody_gridProject {
    width: 100%
}

.search-btn {
   
    padding: 10px;
    border-radius: 10px;
}

.pagination {
    display: flex;
    justify-content: end;
}

    .pagination table tr td a {
        background: #92c3df;
        width: 30px;
        margin-right: 4px !important;
        display: inline-block;
        text-align: center;
        height: 30px;
        line-height: 32px;
        text-decoration: none;
        border-radius: 50px;
        color: #fff !important;
        margin-top: 10px
    }

    .pagination table tr td span {
        background: #00095c;
        width: 30px;
        margin-right: 4px !important;
        display: inline-block;
        text-align: center;
        height: 30px;
        line-height: 32px;
        text-decoration: none;
        border-radius: 50px;
        color: #fff !important;
        margin-top: 10px
    }

#iImgbtn {
    padding: 10px 0px;
}

#ctl00_cphBody_ddlProject, #ctl00_cphBody_ddlresource,
select.stdControls {
    color: #000 !important; /* visible text color */
    background-color: #ffffff !important; /* visible white background */
    appearance: auto !important; /* restores native dropdown look */
    -webkit-appearance: menulist !important;
    -moz-appearance: menulist !important;
    border: 1px solid #ccc !important;
    height: 42px !important;
    padding: 3px 6px !important;
    position: relative !important;
    z-index: 1 !important;
    font-size: 14px !impotant;
}

    /* For dropdown options */
    #ctl00_cphBody_ddlProject option {
        color: #000 !important;
        background-color: #ffffff !important;
    }

.link-btn {
    font-size: 13px;
    color: #fff;
    font-family: Arial;
    margin-left: 12px;
    background: #2b358f;
    box-shadow: rgb(221, 221, 221) 0px 0px 10px 0px;
    padding: 14px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 10px;
}

.form-select {
    /* --bs-form-select-bg-img: none !important;*/
}



    .icon_card img {
        /* width: 36%;*/
        height: 56%;
        border-radius: 50px;
    }

    .icon_card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    }

.icon_label {
    font-size: 16px;
    font-weight: 500;
    color: #333;
        text-align: left;
}

/* Optional: colored icon backgrounds */
.icon_sunglasses img {
    background: #fbe9e7;
}

.icon_football img {
    background: #ffffff;
}

.icon_bike img {
    background: #ffe3e3;
}

.icon_coffee_mug img {
    background: #e8eaff;
}

.icon_record img {
    background: #fff5e0;
}

.icon_beer img {
    background: #fff0f5;
}

.icon_book img {
    background: #f0fff4;
}

.icon_dumbbell img {
    background: #e3f2fd;
}

.icon_pizza img {
    background: #e6f7ff;
}

.icon_t_shirt img {
    background: #f3e5f5;
}

.icon_ipod img {
    background: #ede7f6;
}

.status-card {
    padding: 0px 20px
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #dee2e6;
}

    .footer .text-muted {
        color: #6c757d !important;
        padding-left: 110px;
    }

.required-text {
    color: Red;
}

.validation-error-msg {
    color: Red;
    font-size: 12px;
}

input#ctl00_cphBody_fuEmployeeOrClient {
    width: 250px;
    margin-left: 24px;
}

.form-bg {
    box-shadow: rgb(221,221,221) 0px 0px 10px 0px;
    padding: 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #94fef41a 0%, #e2e5ff7d 100%), url(img/form-bg.jpeg);
}

.sub-icons {
    color: #00095c;
}

.stdLabels i, .stdLablesUsername i {
    color: #6871be;
}

.gridBorderLeft span, .gridBorderCenter span {
    padding: 10px;
    font-size: 14px;
}






/* ---------- Responsive ---------- */


@media (max-width: 991px) {
    .footer {
        width: 100%;
        margin-left: 0;
    }

    .sidebar {
        width: 60px;
    }

        .sidebar.active {
            width: 240px;
        }

        .sidebar .links_name {
            opacity: 0;
            pointer-events: none;
        }

        .sidebar.active .links_name {
            opacity: 1;
            pointer-events: auto;
        }

    .home_content {
      width: calc(100% - 60px);
        left: 60px;
    }

    .sidebar.active ~ .home_content {
        width: calc(100% - 240px);
        left: 240px;
    }
}

.Hide {
    display: none;
}

.ItemTeplateContent {
    font-size: 13px !important;
    color: Black;
    height: 30px;
    margin: 0px;
    border: solid 1px #e6e6e6;
    
    text-align: left;
    white-space: -moz-pre-wrap !important; 
    white-space: -pre-wrap;
    white-space: -o-pre-wrap; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
    word-break: break-word;
    white-space: normal;

    text-align: center;
}
#ctl00_cphBody_grdAssignProject input[type="checkbox"] {
    display: block;
    margin: 0 auto;
}
#ctl00_cphBody_grdProjectTSDates .ItemTeplateContent:nth-child(2)
{
    text-align:left;
}

.table-bg.table-responsive table .stdContentRight:last-child,  .table-bg.table-responsive table .stdContentLeft:last-child
{
   text-align: center;
}

h4.project-heading {
    font-size: 18px;
    padding-bottom: 12px;
}
.table-responsive input {
    margin-top: 5px;
}


.TeplateHeader {
    font: 12px helvetica, arial, sans-serif;
    font-weight: 700;
    color: #ffffff;
    padding-top: 4px;
    padding-bottom: 4px;
    margin: 0px;
    border-left: solid 1px #e6e6e6e6;
    border-top: solid 1px #e6e6e6e6;
    border-left: solid 1px #e6e6e6e6;
    border-right: solid 1px #e6e6e6e6;
       background-color: #9fa5e0 !important;
    color: #fff !important;
    text-align: center;
      /*white-space: -moz-pre-wrap !important; 
    white-space: -pre-wrap; 
    white-space: -o-pre-wrap; 
   white-space: pre-wrap; 
    word-wrap: break-word; 
    word-break: break-word;
    white-space: normal;*/
}



.TeplateHeader_Table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: white;
    text-align: center;
}
.ItemTeplateContent_TablePrint_TopBorder {
    border-top: solid 1px #e6e6e6;
}

.stdMainMsg {
color:  #ff0000;
    width: 100%;
    text-align: center;
    font-weight: 700;
}

.SearchPopUpNew {
    margin-top: 14px;
    background-color: #f2f3ff;
    box-shadow: rgb(221, 221, 221) 0px 0px 4px 0px;
    border: 2px solid #e9eaf6;
    border-radius: 10px;
    padding: 20px;
    margin-left: -25%;
}

    .SearchPopUpNew input {
        margin-bottom: 10px;
    }

#widget {
    position: absolute;
}

#widgetField {
    width: 350px;
    height: 26px;
    background: url(../../../images/field.png);
    overflow: hidden;
    position: relative;
}

    #widgetField a {
        display: block;
        position: absolute;
        width: 26px;
        height: 26px;
        top: 0;
        right: 0;
        text-decoration: none;
      
    }

    #widgetField span {
        font-size: 12px;
        font-weight: bold;
        color: #000;
        position: absolute;
        top: 0;
        height: 26px;
        line-height: 26px;
        left: 5px;
        width: 250px;
        text-align: center;
    }

#widgetCalendar {
    position: absolute;
    left: 0;
    height: 0px;
    overflow: hidden;
    width: 588px;
    background: #B9B9B9;
    margin-top: 0% !important;
}

    #widgetCalendar .datepicker {
        position: absolute;
        bottom: 0;
        top: auto;
    }

    #widgetCalendar .datepickerContainer,
    #widgetCalendar .datepickerBorderT,
    #widgetCalendar .datepickerBorderB,
    #widgetCalendar .datepickerBorderL,
    #widgetCalendar .datepickerBorderR,
    #widgetCalendar .datepickerBorderTL,
    #widgetCalendar .datepickerBorderTR,
    #widgetCalendar .datepickerBorderBL,
    #widgetCalendar .datepickerBorderBR {
        background: transparent !important;
    }

    #widgetCalendar .datepicker a:hover {
        color: #b6f063;
    }


.stdBorderLeft {
    font-size: 13px !important;
    font-weight: bold;
    background-color: #9fa5e0;
    text-align: center;
    border-top: solid 1px #e6e6e6;
    border-bottom: solid 1px #e6e6e6;
    border-left: solid 1px #e6e6e6;
    /* text-shadow: 1px 1px #FFCC00; */
    color: #fff;
    height: 30px;
    padding: 8px 6px;
}

.stdBorderRight {
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    background-color: #9fa5e0;
    border-top: solid 1px #e6e6e6;
    border-bottom: solid 1px #e6e6e6;
    border-left: solid 1px #e6e6e6;
    border-right: solid 1px #e6e6e6;
    /*text-shadow: 1px 1px #FFCC00;*/
    color: #fff;
    height: 30px;
    padding: 8px 6px;
}

.stdContentLeft {
    font-size: 13px !important;
    border-bottom: solid 1px #e6e6e6;
    border-left: solid 1px #e6e6e6;
    border-right: solid 1px #e6e6e6;
    color: #1f1f21;
    height: 30px;
    padding: 4px 6px;
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: pre-wrap; /* css-3 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    word-break: unset;
    white-space: normal;
}

.stdContentRight {
    font-size: 13px;
    border-bottom: solid 1px #e6e6e6;
    border-left: solid 1px #e6e6e6;
    border-right: solid 1px #e6e6e6;
    color: Black;
    height: 30px;
    padding: 4px 6px;
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: pre-wrap; /* css-3 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    word-break: unset;
    white-space: normal;
}

.mandatorycontrol {
    color: red;
}

.lblContent {
    color: maroon;
}
span.lblContent
{
        color:#096bac;
    padding-left: 24px;
    font-weight: 600;
}
/* Modal Popup Start */

.stdMainPopup {
    background: url(../images/header.jpg) repeat;
       border-radius: 10px 0px 0px 10px;
}

.stdPopupClose {
    /*padding-right: -20px;
            cursor: pointer;
            margin-bottom: -30px;
            margin-top: -23px;
            margin-right: -18px;
            background-position: top;
            position: relative;*/
    /* cursor: pointer;
    margin-bottom: -41px;
    margin-top: 10px;
    margin-right: 12px;
    background-position: top;
    position: relative;
    height: 27px;
    border-radius: 10px; */
   cursor: pointer;
    margin-bottom: -34px;
    margin-top: 12px;
    margin-right: -20px;
    background-position: top;
    position: relative;
    height: 27px;
    border-radius: 10px;
    position: absolute;
    right: 7%;
}

.stdPopupInnerMain {
    background-color: White;
    border-radius: 10px;
    margin: 10px;
    float: left;
    padding: 16px 0px;
}

.stdPopInnerMsg {
    float: left;
    color: Red;
    text-align: center;
    margin-top: 6px;
}

.stdPopupInnerContent {
    /*    float: left;
*/ margin: 5px 30px 10px 25px;
}

.stdPopupInnerContentHeading {
    float: left;
    font-weight: bold;
    color: #0c438f;
    font-size: 18px;
}

.modalBackground {
    background-color: gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

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

.theme-btn {
    width: max-content;
    font-size: 16px;
    color: var(--color-white);
    padding: 10px 24px;
    transition: all 0.5s;
    text-transform: capitalize;
    position: relative;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    border: 1px solid #ecf1f6 !important;
    background: linear-gradient(135deg, #1ff0d2 0%, #6b76ec 100%);
    color:#fff;
    box-shadow: var(--box-shadow);
    z-index: 1;
        text-decoration: none;
}

    .theme-btn::before {
        content: "";
        height: 300px;
        width: 300px;
        background: var(--theme-color2);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%) scale(0);
        transition: 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        z-index: -1;
    }

    .theme-btn:hover {
        color: #fff;
            background:linear-gradient(135deg, #54d6c3 0%, #05107a 100%);
    }

        .theme-btn:hover::before {
            transform: translateY(-50%) translateX(-50%) scale(1);
        }





    .theme-btn i {
        margin-left: 10px;
        transform: rotate(-35deg);
        transition: var(--transition2);
    }

    .theme-btn:hover i {
        transform: rotate(0);
    }

    .theme-btn span {
        margin-right: 5px;
    }

.stdRowHeight {
    height: 35px;
}

.GridPager a, .GridPager span {
    display: block;
    height: 20px;
    width: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 17px !important;
}

.GridPager a {
    background-color: #f5f5f5;
    color: #969696;
    border: 1px solid #969696;
}

.GridPager span {
    background-color: #A1DCF2;
    color: #000;
    border: 1px solid #3AC0F2;
}
.list-of-app
{
    padding:20px 10px ;
}
.filter-area
{
    display:flex;
    justify-content:end;
    align-items:center;
    gap:10px;
}
.filter-area a
{
    text-decoration:none;
    font-size:14px;
}
.field-head i
{
    background: #fff;
    padding: 10px;
    box-shadow: rgb(221, 221, 221) 0px 0px 10px 0px;
    border-radius: 50px;
}
#ctl00_cphBody_gridContacts
{
    width:100%;
}
#ctl00_cphBody_grdAssignProject_ctl02_chkbox
{
   display: flex;
    justify-content: center;
    margin: auto;
}
.grid_j tr td:first-child
{
    text-align:center;
}

img.mobile-menu {
    display:none;
}



@media (max-width:767px)
{
    .logo-expanded {
   
    display: none;
}
img.mobile-menu {
    width: 50px;
    display:block;
}
.profile #log_out {

    left: 38%;
}
.sidebar ul li .arrow

 {
    position: absolute;
    right: -10px;
    top: 60%;
    transform: translateY(-52%);
 }

}

.dropdown-item.active, .dropdown-item:active {

    background-color: #05107a !important;
}
/*
.card-link
{
    text-decoration:none;
}
.bg-1

 {
    background: #e3f2fd;
}
.bg-2 {
    background: #fbe4e4;
}
*/
.dashborad-links a
{
    text-decoration: none;
}

.pro-card-link {
    text-decoration: none;
}

.pro-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 50px 20px 30px;
    text-align: center;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    height: 100%;
}

.pro-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.18);
}

/* Floating Icon */
.pro-card-icon {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
        width: 50px;
    height: 50px;
    background: #eef1ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pro-card-icon img {
    width: 36px;
}

/* Text */
.pro-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 6px;
}

.pro-card-count {
    font-size: 26px;
    font-weight: 700;
    color: #2f3cff;
}
.Adminlinks_Padding {
       padding: 4px;
    
}
.top-naviagtion

 {
    display: flex;
    /* justify-content: end; */
 
  
}

  .top-naviagtion a
        {
            text-decoration: none;
    color: black;
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
    border-radius: 10px !important;
        } 
            
        

/* pop up new styles */
.stdMainPopup {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;

    height: 100vh !important;
    z-index: 10001 !important;

    background: #fff !important;
    overflow-x: hidden !important;
}


.stdSlidePanel {
    width: 480px !important;
    height: auto !important; 
    background: #fff !important;
    border-radius: 12px;     

    
    transform: translateX(120%) !important;
    opacity: 0 !important;

  
    transition:
        transform 0.75s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity 0.4s ease !important;

    will-change: transform, opacity;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;
}


.stdMainPopup.popup-show .stdSlidePanel {
    transform: translateX(0) !important;
    opacity: 1 !important;
}
.main-content.container-fluid {
    padding: 6px 20px 60px !important;
}



.icon_card {
background: #e4f7ff;
    border-radius: 18px;
    padding: 10px;

    box-shadow:rgb(221,221,221) 0px 0px 10px 0px;
    transition: all 0.35s ease;

    height: 100%;
     position: relative;
    overflow: hidden;
        border: 1px solid #b8eaff;
}

.icon_card::after {
    position: absolute;
    right: -10px;
    bottom: -12px;

    font-family: "FontAwesome";
    font-size: 110px;
    line-height: 1;

    opacity: 0.07;          
    pointer-events: none;  

}


.icon_card:has(.fa-check-circle)::after {
    content: "\f058"; 
    color: #27ae60;
}


.icon_card:has(.fa-hourglass-half)::after {
    content: "\f252"; 
    color: #f39c12;
}


.icon_card:has(.fa-file-text)::after {
    content: "\f15b"; 
    color: #7f8c8d;
}


.icon_card:has(.fa-calendar-plus)::after {
    content: "\f073"; 
    color: #1f3c88;
}


.icon_card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(31,60,136,0.22);
}

.dashboard-section a
{
    text-decoration:none;
}

.dashboard-section .icon_label span
{
    font-size:24px;
    color:#ff7c00;
    
}




.fa-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 26px;
    line-height: 20;         
    
    color: #0f8492;
    background: radial-gradient(circle at top left, #ffffff, #eef2f7);

    box-shadow:
        0 12px 26px rgba(31,60,136,0.25),
        inset 0 2px 4px rgba(255,255,255,0.9);

    margin: 0 auto 16px auto;
    transition: all 0.35s ease;
    
}


.fa-icon::before {
    display: block;
   line-height: 2;
}

.icon_card:hover .fa-icon {
    transform: scale(1.15) rotate(-6deg);
    color: #ffffff;
    background: linear-gradient(145deg, #1f3c88, #35b7c4);

    box-shadow: 0 18px 40px rgba(31,60,136,0.45);
    
}


.icon_label {
  font-size: 16px;
    font-weight: 600;
    color: #243a5e;
    line-height: 1.4;
    text-align: center;
}

/* Count styling */
.icon_label asp\:Label,
.icon_label label {
    font-size: 22px;
    font-weight: 700;
    color: #1f3c88;
}




.icon_card:hover .approved,
.icon_card:hover .pending,
.icon_card:hover .draft {
    color: #ffffff;
}




@media (max-width: 768px) {

    .icon_card {
        padding: 20px 14px;
    }

    .fa-icon {
        width: 52px;
        height: 52px;
        font-size: 22px;
        margin-bottom: 14px;
    }

    .icon_label {
        font-size: 14px;
    }

    .icon_label asp\:Label,
    .icon_label label {
        font-size: 20px;
    }
}


.Adminlinks_Padding a {
    display: flex;
    flex-direction: column;     
    align-items: center;
    justify-content: center;
    text-align: center;
   padding: 6px;
    
    background: #ffffff;
    border-radius: 14px;
    text-decoration: none;

    box-shadow: 0 6px 18px rgba(31,60,136,0.08);
    transition: all 0.35s ease;
}


.nav-icon {
    font-size: 14px;
    color: #1f3c88;
    margin-bottom: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
}


.Adminlinks_Padding span {
      font-size: 12px;
    font-weight: 600;
    color: #243a5e;
    line-height: 1.3;
}


.Adminlinks_Padding a:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(31,60,136,0.18);
}

.Adminlinks_Padding a:hover .nav-icon {
    transform: scale(1.15);
    color: #35b7c4;
}




.leave-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 20px 40px rgba(31, 60, 136, 0.12);
}

.apply-btn {
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 12px;
}

/* Chart */
.chart-wrapper {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 14px auto;
}

.chart-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
}


.chart-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: bold;
    color: #0984e3;
}

.chart-center-text span {
    font-size: 22px;
    display: block;
}

.chart-center-text small {
    font-size: 11px;
    color: #6c757d;
}


.leave-info {
    
    font-size: 12px;
    margin-top: 6px;
    MARGIN: auto;
    DISPLAY: inline-block;
    TEXT-ALIGN: right;
}

.legend {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend.used {
    color: #ff7675;
}

.legend.used .dot {
    background: #ff7675;
}

.legend.available {
    color: #0984e3;
}

.legend.available .dot {
    background: #0984e3;
}
.custom-tooltip {
    position: absolute;
    background: #000;
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    z-index: 10;
    transition: opacity 0.15s ease;
}

.custom-tooltip::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: #000;
    transform: rotate(45deg);
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
}



.upcoming-holiday-card {
    background: linear-gradient(180deg, #f0fbff, #ffffff);
    border-radius: 22px;
   
    box-shadow: 0 25px 45px rgba(31,60,136,0.15);
}


.holiday-header h5 {
    margin: 0;
    font-weight: 700;
    color: #1f3c88;
    font-size: 18px;
}

.holiday-sub {
    font-size: 12px;
    color: #6c8bbf;
}


.holiday-items {
    margin-top: 16px;
}

.holiday-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 12px;
    border-radius: 14px;
    transition: all 0.3s ease;
}

.holiday-item:hover {
    background: rgba(13,110,253,0.08);
    transform: translateX(6px);
}


.date-box {
    min-width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #0d6efd, #4dabff);
    border-radius: 14px;
    color: #fff;
    text-align: center;
    padding-top: 6px;
}

.date-box .day {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.date-box .month {
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.9;
}


.holiday-text {
    display: flex;
    flex-direction: column;
}

.holiday-name {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
}

.holiday-year {
    font-size: 12px;
    color: #6c757d;
}

/* employee leaves data */
.filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.filter-bar select,
.filter-bar input,
.filter-bar button {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

.summary-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.summary-card {
    flex: 1;
    padding: 16px;
    border-radius: 14px;
    color: #fff;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.summary-card strong {
    display: block;
    font-size: 22px;
   
}

.blue { background: linear-gradient(135deg,#4e73df,#224abe); }
.green { background: linear-gradient(135deg, #14b236, #42f5aa); }
.orange { background: linear-gradient(135deg, #f2a809, #fbe661) }
.red { background: linear-gradient(135deg,#e74a3b,#be2617); }

.table-wrapper {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 10px;
}

#ctl00_cphBody_grdTimeSheet th {
    background: #9ea7e6;
    color: #fff;
    padding: 1px;
}

#ctl00_cphBody_grdTimeSheet td {
    padding: 2px;
}


.grid-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px; /* keeps it compact */
}


.summary-card {
    padding: 8px;
    border-radius: 18px;
    color: #fff;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);

  
}


.summary-card span {
    font-size: 16px;
}


.summary-card strong {
    display: block;
    font-size: 30px;
}


.blue {
    background: linear-gradient(135deg, #6a8dff, #7ad7f0);
}

.green {
    background: linear-gradient(135deg, #2ad40d, #84d176)
}

.orange {
    background: linear-gradient(135deg, #ffb71f, #ffcc67);
}

.red {
    background: linear-gradient(135deg, #e23b2d, #f46b61);
}
select.form-control {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    background-image: none;
}

button.apply-leave-btn {
    width: max-content;
    font-size: 16px;
    color: var(--color-white);
    padding: 6px;
    transition: all 0.5s;
    text-transform: capitalize;
    position: relative;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    border: 1px solid #ecf1f6 !important;
    background: linear-gradient(135deg, #37d1bb 0%, #101a87 100%);
    color: #fff;
    box-shadow: var(--box-shadow);
    z-index: 1;
    text-decoration: none;
}
table select.form-control.stdControls,  table input.form-control.stdControls
{
    text-align:left !important;
}
.ajax__calendar_container {
    z-index: 99999 !important;
}
.ui-datepicker {
    z-index: 99999 !important;
}
div#ctl00_cphBody_divGrdMsg {
    font-size: 12px;
}
#ctl00_cphBody_grdEmployeeLeavesOB_ctl02_dlLeavesCounts 
{
    width:100%;
}

  .exceldownload img {
                width: 40px;
                height: 100%;
            }

        .filter-dropdown {
            display: flex;
            align-items: center;
        }

            .filter-dropdown label {
                margin-right: 10px;
            }

.exceldownload {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    flex-direction: column-reverse;
    font-weight: 600;
    color: #2e7d32;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  
    border: 1px solid #e6e6e6 !important;
    margin: 0px 4px important;
    border-radius: 6px important;
}

.select2-container--default .select2-selection--single {
   
    border: none !important;
   
}


/*<------------------Responsive---------------------> */

@media (min-width:992px) and (max-width:1199px)
{
  .sidebar {  
    width: 200px;
  }
  
  .home_content {
    width: calc(100% - 200px);
    left: 200px;   
} 


#divAssessmentsH_1, #divAssessmentsI_1, #divAssessmentsI_2, #divAssessmentsI_3, #divAssessmentsI_4,
#divAssessmentsI_5, #divAssessmentsI_6, #divAssessmentsI_7, #divAssessmentsI_8, #divAssessmentsI_9
#divAssessmentsI_10
{
    width:1200px;
} 
 html, body {
    overflow-x: hidden !important;
}
.home_content 
{
    height:100vh !important;
}
}

@media (max-width: 991px) {

   
    .sidebar .logo_content .logo .logo-expanded {
        display: none !important;   
    }

    .sidebar .logo_content .logo .logo-collapsed,
    .sidebar .logo_content .logo .mobile-menu {
        display: block !important;  
    }

   
    .sidebar.active .logo_content .logo .logo-expanded {
        display: block !important;  
    }

    .sidebar.active .logo_content .logo .logo-collapsed,
    .sidebar.active .logo_content .logo .mobile-menu {
        display: none !important;   
    }
    .btn.btn-save.btn-custom

 {
  
    padding: 8px 18px;
}
.btn.btn-clear.btn-custom {

    padding: 8px 18px;
}
.sidebar ul li .arrow {
 
    right: -20px;
    top: 53%;
  
}
.sidebar.active #btn {

    transform: translate(3%);
}
.sidebar .nav_list > li .sub-menu {
  
   max-height: max-content;
       margin-left: 10px !important;
}
.sidebar ul li i {
   
    min-width: 30px;
}


#divAssessmentsH_1, #divAssessmentsI_1, #divAssessmentsI_2, #divAssessmentsI_3, #divAssessmentsI_4,
#divAssessmentsI_5, #divAssessmentsI_6, #divAssessmentsI_7, #divAssessmentsI_8, #divAssessmentsI_9
#divAssessmentsI_10
{
    width:1200px;
}
 html, body {
    overflow-x: hidden !important;
}
.home_content 
{
    height:100vh !important;
}
#widgetField {
    width: 266px;
}
}


@media (max-width:767px)
{
    
 
 .Adminlinks_Padding a {

        padding: 6px 0px;
    }
    

    .nav-icon {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .Adminlinks_Padding span {
        font-size: 13px;
    }
    .sidebar.active #btn {
    
    transform: translateX(0%);
}
.theme-btn
 {
     font-size: 12px !important;   
    padding: 6px 14px !important;
 }
 html, body {
    overflow-x: hidden !important;
}
footer .text-muted {
    color: #6c757d !important;
    padding-left: 64px !important;
    font-size:12px !important;
}
.test label {
    padding: 4px 10px !important;
    font-size: 14px;
}
.SearchPopUpNew 
{
    width:300px !important;
    left: 190px !important;
}
#widgetField

 {
    width: 274px !important;
 }
 #widgetCalendar {
  
    left: -52px !important;
 }
 .tsm-maindiv {

    display: contents;
}

#divDemography 
{
    left:10% !important;
    width:78% !important;
}
.stdControls {
    width: 100% !important;
}
.SearchPopUpNew 
{
        z-index: 1 !important;

  
   left:2% !important;
   margin-left:0px !important;
}
}