/*font sizes*/
.size18px {
    font-size : 18px;
}

.size16px {
    font-size: 16px;
}


.fontsize3 {
}

.fontsize4 {
}



/*font style*/


@font-face {
    font-family: 'Segoe UI Custom';
    src: url('../fonts/Segoe UI.ttf') format('ttf');
}


.segoui {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}








/*font weight*/

.weight-600 {
    font-weight : 600
}

.weight-400 {
    font-weight: 400
}

.font-weight3 {
}

.font-weight4 {
}


/*color codes*/


.blueColor {
    color: #01B0F1;
}

.whiteColor{
    color : white;
}

/*backgound color classes*/

.blueBackground {
    background: #01B0F1;
}

.lightBlueBackground {
    background: #E6F0FA;
}

.greyBackground {
    background: #F6F6F6;
}

.greyDarkBg {
    background: #eaecee;
}

.choices__inner {
    background-color: white !important;
    border-radius: 6px !important;
    padding:10px
}




/*border classes*/

.border-grey {
    border: 1px solid #D7DBE3;
    border-radius : 10px;
    /*padding : 7px;*/
/*    margin : 0px 10px;*/

}

.timesheet-border-grey {
    border: 1px solid #D7DBE3;
    border-radius: 10px;
    padding: 7px;
}

.attendance-border-grey {
    border: 1px solid #D7DBE3;
    border-radius: 10px;
    padding: 7px;
    width:50%
}



/*heading classes*/
.pageMainHeading{
    font-size : 24px;
    font-weight : 600;
    font-family : 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

}


.sectionHeading {
    font-size: 16px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}


.sectionSubHeading {
    font-size: 18px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin:8px;
}



.lableHeading {
    font-size: 12px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin-bottom:4px;
}

.inputValue {
    font-size: 14px;
    font-weight: 400;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}


.tableSubHeading {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}


::placeholder {
  /*  color: rgba(0, 0, 0, 0.45);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 400;*/
}

input, textarea {
    color: rgba(0, 0, 0, 1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 400;
}



/*heading and table margin*/

.margin28px
{
    margin-bottom : 28px
}
.marginTop28px
{
    margin-top : 20px
}


.padding10px{
    padding : 10px
}





/*.emp-search-input {
    width: 22%;
    min-width: 16rem;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 6px;
    border: 1px solid #ccc;
}*/

.emp-search-input {
    width: 22%;
    min-width: 16rem;
    padding: 10px;
    padding-right: 36px; /* extra space for search icon */
    margin-bottom: 20px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: url('/assets/img/Other icons/PNG/Search.png') no-repeat right 10px center;
    background-size: 16px 16px;
    height: 40px; /* you can keep/remove this depending on design */
}

.tableMainContainer
{

}


.headingAndSearchBox
{
    display : flex;
    justify-content : space-between;
    

}

.searchBoxAndIcon
{
    display : flex;
    justify-content : space-between;
    align-content : center;
    gap : 0px 10px;
}


.inputWidth{

    width : 40%;
    min-width : 20rem

}

.status-pending {
    background-color: #fff8e1;
    color: #614a00;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.status-rejected {
    background-color: #fce8e6;
    color: #610800;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.status-approved {
    background-color: #dcffdc;
    color: #035408;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    display: inline-block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.dropdowncSS
{
    width :200px;
    height : 42px;
}

.EmpdropdowncSS
{
    width :285px;
    height : 42px;
}

.page-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 28px;
    color: #222;
}

.cursor-pointer{
    cursor:pointer;
}

.salaryToggle {
    display: inline-block;
    margin-left: 8px;
}

.tabs-button {
    width: 140px;
    height: 35px;
    gap: 10px;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-family: "Segoe UI-Semibold", Helvetica;
    font-weight: 400;
    font-size: 16px;
    border: none;
    outline: none;
    margin-bottom: 15px;
    background-color: #01b0f1;
    color: #ffffff;
}

    .tabs-button:hover {
        background: #0197d3;
    }

    .tabs-button:active {
        transform: scale(0.97); /* optional: gives "pressed" effect */
        background: #017baa;
    }

.tab-container {
    display: inline-flex;
    background-color: #eaeaea;
    border-radius: 8px;
    padding: 3px;
    margin-bottom: 13px;
}

.tab-btn {
    border: none;
    padding: 8px 14px;
    font-size: 16px;
    border-radius: 6px;
    cursor: pointer;
    background-color: transparent;
    color: #555;
    transition: all 0.3s ease;
}

    .tab-btn.active {
        background-color: #01b0f1; /* blue color */
        color: #fff;
    }

    .tab-btn:hover {
        background-color: rgba(0,0,0,0.05);
    }

.width-134px {
    width: 134px;
}