@font-face {
    font-family: Franklin Gothic Demi Regular;
    src: url('../open-iconic/font/fonts/Franklin Gothic Demi Regular.ttf') format('truetype');
}

@font-face {
    font-family: Franklin Gothic Book Regular;
    src: url('../open-iconic/font/fonts/Franklin Gothic Book Regular.ttf') format('truetype');
}

@font-face {
    font-family: Franklin Gothic Medium Regular;
    src: url('../open-iconic/font/fonts/Franklin Gothic Medium Regular.ttf') format('truetype');
}

.container-timeSheet {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    overflow-y: scroll;
    height: calc(100vh - 112px);
}

.table-timeSheet {
    font-family: 'Franklin Gothic Medium Regular';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 0px;
    color: #404A54;
    margin-top: 20px;
    max-width: 1200px;
    min-width: 720px;
}

.th-header {
    border-top: none !important;
    font-family: 'Franklin Gothic Medium Regular';
    font-size: 16px;
    letter-spacing: 0.4px;
    color: #222F3E;
}

.tr-timeSheet {
    border-top: none !important;
    font-family: 'Franklin Gothic Medium Regular';
    font-size: 15.5px;
    text-align: left;
    letter-spacing: 0px;
    color: #404A54;
}

.div-customer-group {
    display: flex;
}

.icon-customer-code {
    width: 30px;
    height: 30px;
    font-family: 'GravityRegular';
    font-size: 11.5px;
    text-align: left;
    letter-spacing: 0.2px;
    color: #FFFFFF;
    opacity: 1;
    border-radius: 50%;
    background-color: #c496f1;
    padding-top: 6px;
    padding-left: 7px;
}

.div-customer-group-child {
    display: flex;
    flex-direction: column;
    margin-left:10px;
}
.div-time {
    display: flex;
    flex-direction: column;
}
.nbre_heure {
    font-family: 'GravityRegular';
    font-size: 15.5px;
    text-align: left;
    letter-spacing: 0.2px;
    color: #404A54;
    opacity: 1;
}
.customer-code {
    font-family: 'GravityRegular';
    font-size: 14px;
    text-align: left;
    letter-spacing: 0px;
    color: #8395A7;
}

.img-round {
    border-radius: 50%;
    width: 30px;
    height: 30px;
}

.div-statut {
    margin-top: 10px;
}

.span-statut {
    font-family: 'GravityRegular';
    margin-left: 10px;
}

.min-width-80 {
    min-width: 80px;
}

.div-edit-delet {
    display: none;
    margin-top: 10px;
}

.btn-delet {
    margin-left: 20px;
}

.tr-timeSheet:hover .div-edit-delet {
    display: block;
}

.tr-timeSheet:hover {
    cursor: pointer;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 2px 1px 4px #00000040;
    border-radius: 5px;
}

.div-dashboard {
    display: none;
    margin-left: 20px;
}

@media(min-width: 1367px) {
    .div-dashboard {
        display: block;
        margin-left: 20px;
    }

    .table-timeSheet {
        width: 1200px;
    }

    .container-timeSheet {
        display: flex;
        flex-direction: row;
    }
}
.header-div {
    border-bottom: 1px solid #eaeaea;
    height: 50px;
    width: 1096px;
    margin-left: -16px;
}

.header-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

@media screen and (max-width: 1024px) {

    ::deep .personal-attchment {
        left: 60% !important;
        margin-top: 40% !important;
    }
}

.div-customer-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: -24px;
    margin-left: 20px;
}

.div-customer-group-child {
    display: flex;
    flex-direction: column;
}

.customer-name {
    /* Assuming existing styles, can be customized */
    font-size: 16px;
    font-weight: bold;
}

.customer-code {
    /* Assuming existing styles */
    font-size: 14px;
    color: #666;
}

.billable-icon {
    width: 14px;
    height: 18px;
    margin-left: 75%;
}

.billable-label {
    color: #35414C;
    font-size: 14px;
}

.fields-container {
    height: 367px;
    width: 1096px;
    padding: 16px;
}

.fields-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
}

.field-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    max-width: 255px;
}

.field-icon {
    width: 39px;
    height: 39px; 
}

.field-content {
    display: flex;
    flex-direction: column;
}

.span-entry-number {
    margin-top: -20px;
    margin-left: 29px;
    font-size: 14px;
}

.hour-field {
    margin-left: -13px;
}

    .hour-field input {
        width: 170px;
        border: none;
        margin: 0;
    }

.note-field {
    margin-left: -45px;
}

    .note-field input {
        width: 255px;
    }

.datecss {
    width: 250px;
}

.popup-footerAddAbsence {
    width: 758px;
    display: flex;
    flex-direction: row;
}

.column-3.div-col {
    /* Assuming existing styles */
    padding: 10px;
}

.img-footer-att {
    width: 18px;
}

@media screen and (min-width: 1700px) {
    .img-footer-att {
        height: 2.5vh;
        margin-top: 0.4vh !important;
        margin-left: 1vh;
    }
}

.btndisabled:hover {
    cursor: not-allowed;
}

::deep .hour-field input {
    width: 255px !important;
}

::deep .select-entry-style {
    width: 100% !important;
}

::deep .border-input {
    width: 255px !important;
}

.billable-container {
    height: 79px;
    border-bottom: 1px solid rgba(199, 207, 216, 0.2);
    padding-top: 5px;
}

.label-billable {
    margin-left: 81%;
    margin-top: 22px;
}

.img-round {
    border-radius: 50%;
    width: 42px;
    height: 42px;
    margin-top: 9px;
}

.custom-switch input:checked + .slider {
    background-color: #00AE9E;
}

::deep .input:checked + .slider:before {
    transform: translateX(30px); /* Translation du cercle */
}

.save-button-disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #CCCCCC !important;
}


::deep .style-att-addtime {
    left: 63% !important;
    margin-top: 40% !important;
}

.custom-personal-attachment {
    left: 60% !important;
    margin-top: 40% !important;
}

.billable-img {
    width: 16px;
    height: 20px;
    margin-right: 5px;
}

.billable-lab {
    color: #344D66;
    font-size: 15px;
    font-family: 'GravityBold';
}

.externalFile {
    width: 205px;
}

.ul-position {
    position: fixed;
    z-index: 11;
}

.font-switch {
    font-size: 13px;
}
.TimeSheet-category {
    width: 200px !important;
}
.TimeSheet-note {
    width: 200px !important;
}
.fields-rowTime {
    width: 1000px !important;
}
.dateTimesheet{
    width:170px;
}
.footerTimesheet{
    width:1094px;
}
.timesheetFiled {
    max-width: 230px !important;
}
.span-timesheetAdd {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 183px;
}
.DateAddInput{
    width:170px !important;
}
.TimeSheet-InterneNote {
    width: 200px !important;
}
@media screen and (max-width: 1200px) {
    .addNewpoupup {
        width: 710px !important;
    }
    .TimeSheet-category {
        width: 170px !important;
    }
    .TimeSheet-note {
        width: 130px !important;
    }
    .fields-rowTime {
        width: 685px !important;
    }
    .dateTimesheet {
        width: 140px !important;
    }
    .footerTimesheet {
        width: 720px;
    }
    .att-Icon-timesheet{
        margin-top:unset !important;
    }
    .timesheetFiled {
        max-width: 200px !important;
    }
    .span-timesheetAdd {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        width: 129px;
    }
    .DateAddInput {
        width: 130px !important;
    }
    .TimeSheet-InterneNote {
        width: 129px !important;
    }
    .headerResp{
        width:710px;
    }
    .LabelRes{
        margin-left:65% !important;
    }
}
.style-comp {
    font-family: 'Gravity-Regular', sans-serif;
    color: #344D66;
}
.row-allign {
    margin-right: 58px;
}

.row-allignNote {
    margin-right: -28px;
}

@media screen and (max-width: 1200px) {
    .AbsenceRespPopUp {
        width: 720px !important;
    }
    .item-respABS{
        width:220px !important
    }
    .bil-res-abs{
        margin-left:45% !important;
    }
}
.field-res{
height:100px;
}

.span-popAdd {
    font-family: 'GravityRegular';
    font-size:12px;
}