:root{
    --hdm-orange:#FB8500;
    --hdm-blue:#01224B;
    --hdm-black:#000;
    --hdm-green:#22C035;
    --badge-padding:8px 13px;
}
.dependency{
    display: flex;
    float: right;
    justify-content: center;
    flex-wrap: wrap;
    margin-block: 10px;
}
.dependency span{
    font-size: 12px;
    padding: 3px;
    background: var(--bs-yellow);
    border-radius: 50px;
}
.p-status{
    font-size: 11px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px;
    border-bottom-right-radius: 10px;
}
.p-status.request_deadline,.p-status.pending{
    background: var(--bs-yellow);
}

.p-status.doing,.p-status.deadline_accepted{
    background: var(--bs-cyan);
}
.p-status.done{
    background: var(--bs-teal);
}
.edit_dead_line{
    font-size: 15px;
    cursor: pointer;
    padding: 3px;
}
.deadline-btn-wrapper{
    display: inline;
}
.deadline-btn-wrapper span{
    font-size: 15px;
    cursor: pointer;
    padding: 3px;
    margin-inline: 5px;
}
.process-accordion .accordion-button::after{
    margin-right: auto;
    margin-left: 0;
}
.process-task-item{
    display: block;
    width: fit-content;
    padding: 10px 32px;
    margin-inline: auto;
    text-align: center;
    cursor: pointer;
    border-radius: 30px;
    border: 1.5px solid var(--hdm-orange);
    color: var(--hdm-orange);
    font-weight: 700;
}
.process-task-item-wrapper{
    margin-block: 20px;
    width: fit-content;
}
.process-task-item-wrapper.active .process-task-item{
    background: var(--hdm-blue);
    color: #fff;
    border-color: var(--hdm-blue);
    position: relative;
}

.process-task-item-wrapper.active .process-task-item:after{
    content: "";
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjYiIHZpZXdCb3g9IjAgMCAyNiAyNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQuODI5MSAxNC4yNzQ0TDEwLjMzODkgMTkuNzg0MkwyMS4zNTg0IDcuOTc3NTQiIHN0cm9rZT0iI0U4RUJFRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==);
    background-position: center;
    width: 30px;
    height: 30px;
    position: absolute;
    left: -10px;
    background-color: var(--hdm-green);
    background-size: 70%;
    background-repeat: no-repeat;
    border-radius: 50%;
    bottom: -10px;
}
.process-task-item-description-wrapper{
    float: none;
    width: 90%;
    margin-inline: auto;
    margin-top: 5px;
    display: none;
}
.process-task-item-description-wrapper textarea{
    min-height: 80px;
}
.process-task-item-wrapper.active .process-task-item-description-wrapper{
    display: block;
}
.ProcessItem{
    margin-top: 20px;
}
.ProcessItem:nth-of-type(1){
    margin-top: 0;
}
.show-task-btn{
    border: none;
    background: var(--bs-blue);
    color: #fff;
    font-size: 12px;
    padding: 5px 15px;
    border-radius: 50px;
}
.task-modal-item{
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed gray;
}
.task-modal-item:nth-last-of-type(1){
    border: none;
}
.task-modal-item p:nth-of-type(1){
    font-weight: bold;
    margin-bottom: 0;
}
.task-modal-item p:nth-of-type(2){
    font-size: 14px;
    margin-bottom: 0;
}
.tasks-modal-content{
    padding: 12px;
}
.checkbox-wrapper label{
    min-width: fit-content;
}
.vacation-detail-wrapper{
    padding: 20px;
}
.vacation-detail-wrapper .vacation-detail-item{
    display: flex;
    gap: 16px;
    align-items: baseline;
    position: relative;
}
.vacation-detail-wrapper .vacation-detail-item p{
    min-width: fit-content;
}
.vacation-detail-wrapper .vacation-detail-item span{
    width: 100%;
    border-bottom: 1px dashed;
    height: 0;
}
.change-vacation-status{
    min-width: 85px;
    text-align: center;
    background: #e8e8e8;
    padding: 5px 10px;
    border-radius: 50px;
    cursor: pointer;
}
.empty-exit-btn{
    font-size: 12px;
    padding: 3px 9px;
    margin-right: 5px;
    background: #dfdfdf;
    border-radius: 50px;
    cursor: pointer;
}
.vacation-overall{
    gap: 15px;
    flex-wrap: wrap;
}
.vacation-overall p{
    width: calc(33% - 50px);
    display: flex;
    justify-content: center;
}
.rules-wrapper{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}
.rules-wrapper label{
    border-bottom: 1px dotted var(--bs-blue);
    color: var(--bs-blue);
    cursor: pointer;
    width: fit-content;
}
#vacationRules .modal-content{
    padding: 20px;
}
.ProcessMItem .Dept li{
    writing-mode: vertical-rl;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ProcessMItem .Dept li.pending,.tab_project li#pend .cnt{
    background: #f6f6f6;
}
.ProcessMItem .Dept li.request_deadline{
    background: var(--bs-yellow);
}
.ProcessMItem .Dept li.deadline_accepted{
    background: var(--bs-info);
    color:#fff;
}.ProcessMItem .Dept li.doing,.tab_project li#doing .cnt{
     background: var(--bs-blue);
     color:#fff;
 }
.ProcessMItem .Dept li.done,.tab_project li#done .cnt{
    background: var(--bs-teal);
    color:#fff;

}
.custom-range-wrapper{
    display: none;
}
.month-wrapper{
    display: flex;
    height: 80vh;
    justify-content: space-between;
    gap: 6px;
    position: absolute;
    right: calc(var(--bs-gutter-x) / 2);
    left: calc(var(--bs-gutter-x) / 2);
    top: 0;
    z-index: 1;
}

.month-wrapper .month{
    width: 16.66666666%;
    background: #fafafa;
    padding: 5px;
}
.month-wrapper .month h5{
    font-size: 14px;
}
.task-wrapper{
    position: relative;
    height: 80vh;
    overflow-y: scroll;
}
.tasks{
    position: relative;
    z-index: 2;
    margin-top: 35px;
    display: flex;
    gap: 6px;
    width: 100%;
}

.tasks .task-item{
    width: 100%;
    position: relative;

}
.tasks .task-month{
    width: 16.66666666666%;

}
.tasks .task-item-wrapper{
    width: 99%;
    margin-inline: auto;
    background: #fff;
    padding: 2px;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
}

.add_task_to_month{
    font-size: 12px;
    padding: 3px 5px;
    width: fit-content;
    background: #ededed;
    border-radius: 50px;
    z-index: 3;
    cursor: pointer;
}

.task-item .Project_Detail b{
    font-weight: normal;
    border: 1px solid var(--bs-warning);
    float: left;
    font-size: 10px;
    padding: 5px 10px 1px;
    color: #000;
    border-radius: 50px;
}
.task-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 3px;
    border-bottom: 1px solid #d8d8d8;
    margin-bottom: 3px;
}
.task-project{
    font-weight: normal;
    border: 1px solid var(--bs-warning);
    font-size: 10px;
    padding: 5px 10px 1px;
    color: #000;
    border-radius: 50px;
}
.task-owner{
    display: flex;
    align-items: center;
    gap: 5px;
}
.task-owner .title{
    width: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--fourth);
}
.task-owner .thumb{
    width: 30px;
    height: 30px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}
.task-item .body p{
    font-size: 13px;
    margin: 0;
}
.ShowSeoTask{
    width: 98%;
    border: 1px solid #ccc;
    color: #333;
    font-size: 12px;
    display: flex
;
    align-content: center;
    justify-content: center;
    padding: 5px 0 3px 0;
    align-items: center;
    cursor: pointer;
}
.ShowSeoTask i{
    font-size: 16px;
    margin: -2px 0 0 4px;
}
.ShowDetailTask .ContentTaskShow .TitleTaskView .TaskDetailText .desc small{
    font-size: 12px;
}
.task-item .EditSeoTask{
    font-size: 9px;
    background: var(--bs-dark);
    padding: 1px 10px;
    border-radius: 50px;
    margin: 0 0 0 4px;
    position: absolute;
    top: -10px;
    left: -10px;
    color: #fff;
    cursor: pointer;
    display: none;
    z-index: 99;
}
.task-item .deleteTask{
    background: var(--bs-danger);
    width: 71px;
    font-size: 9px;
    color: #fff;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    left: -10px;
    bottom: -10px;
    z-index: 9;
    float: right;
    position: absolute;
    display: none;
    padding: 2px 0 1px;
    cursor: pointer;
}
.task-item:hover .EditSeoTask,.task-item:hover .deleteTask{
    display: flex !important;
}
.task-item .status {
    margin-top: 5px;
    display: flex;
    justify-content: center;
}
.task-item .status small {
    font-size: 10px;
}

.task-item .status span {
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 40px;
}
.task-item .status.done span {
    background: #b1ffb1;
}

.task-item .status.doing span {
    background: var(--bs-info);
}

.Filter_Task .filter_member_seo {
    float: right;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
    display: flex;
    flex-wrap: nowrap;
}
.Filter_Task .filter_member_seo li {
    width: 100%;
    text-align: center;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    padding:5px 0;
}
.Filter_Task .filter_member_seo li .thumb {
    width: 50px;
    height: 50px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
}
.Filter_Task .filter_member_seo li span {
    float: right;
    width: 100%;
    font-size: 13px;
    margin: 4px 0 0 0;
}
.Filter_Task .filter_member li:hover , .Filter_Task .filter_member_seo li.active {
    background: var(--bs-yellow);
    border-radius: 5px;
}


.SearchBoxCarable .SearchBox li .Filter_Task .users .filter_member_seo {
    flex-direction: column;
    padding: 0;
    margin: 0;
    display: block !important;
    float: right;
    width: 100%;
}
.SearchBoxCarable .SearchBox li .Filter_Task .users .filter_member_seo li {
    width: 48%;
    display: block;
    float: right;
    margin: 0 1%;
    border-radius: 0;
    padding: 5px 6px;
}
.SearchBoxCarable .SearchBox li .Filter_Task .users .filter_member_seo li.thumb {
}
.SearchBoxCarable .SearchBox li .Filter_Task .users .filter_member_seo li .thumb {
    float: right;
    width: 40px;
    height: 40px;
}
.SearchBoxCarable .SearchBox li .Filter_Task .users .filter_member_seo li span {
    float: right;
    width: auto;
    font-size: 14px;
    margin: 11px 9px 0 0;
    font-weight: 400;
}
.SearchBoxCarable .SearchBox li .box_search .projectList .filter_project_seo {
    height: 300px;
}
.SearchBoxCarable .SearchBox li .box_search .projectList .filter_project_seo li {
    width: 48%;
    float: right;
    margin: 4px 1%;
    text-align: center;
    padding: 10px;
    border-radius: 0;
    border: 1px solid #eee;
    font-size: 13px;
}


.Filter_Task .filter_project_seo {
    float: right;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    height: 86px;
    overflow: auto;
    display: flex;
    justify-content: right;
    align-items: start;
    flex-wrap: wrap;
}
.Filter_Task .filter_project_seo li {
    background: #fff;
    border: 1px solid #ccc;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 50px;
    margin: 0 0 0 11px;
    cursor: pointer;
}
.Filter_Task .filter_project_seo li:hover , .Filter_Task .filter_project_seo li.active {
    background: var(--bs-yellow);
    border: 1px solid var(--bs-yellow);
}
.process-wrapper-tasks{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.process-log-item .profile-img{
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: cover;
    background-color: #eee;
    border-radius: 50px;
}
.process-log-item{
    display: flex;
    gap: 18px;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #c4c4c4;
    margin-bottom: 8px;
}
.process-log-item:nth-last-of-type(1){
    border-bottom: none;
}
.process-log-item .log-data-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
}
.process-log-item .user-data{
    margin: 0;
    font-size: 14px;
    display: flex;
    gap: 3px;
    align-items: center;
    color: #8B8996;
}
.process-log-item .user-data span{
    font-size: 13px;
}
.process-log-item .log-text{
    margin: 0;
    font-size: 16px;
    color: var(--hdm-blue);
    font-weight: bold;
}
.add-comment-wrapper{
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.add-comment-wrapper .form-group{
    width: 100%;
    margin: 0;
}
.add-comment-wrapper .add-comment-btn{
    width: fit-content;

}
.process-log-wrapper{
    max-height: 1000px;
    overflow-y: scroll;
}
.process-log-title{
    float: none;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--hdm-orange);
}
.ProcessMItem{
    position: relative;
    overflow:hidden;
    padding-top: 25px;
}
.ProcessMItem .pending-process{
    font-size: 10px;
    position: absolute;
    left: 0;
    top: 0;
    width: fit-content;
    padding:2px;
    background: var(--bs-info);
    color: #fff;
}
#addTaskModal .modal-content{
    overflow-y: scroll;
    max-height: 500px;
}
.process-items-wrapper{
    height: 100vh;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.process-status-item{
    width: 33%;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
}
.process-status-item h5{
    font-size: 14px;
    text-align: center;
}
.process-item{
    background: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
}
.process-item h2{
    font-size: 12px;
    text-align: center;
}
.process-item .p-status{
    border-bottom-right-radius: 5px;
}
.process-item .Memmber{
    list-style: none;
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    margin: 5px 0 7px 0;
    position: relative;
}
.process-item .Memmber li{
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.process-item .Memmber li .avatar{
    width: 40px;
    height: 40px;
    background-position: center;
    background-size: cover;
    background-color: #eee;
    border-radius: 50px;
}
.process-item .Memmber li span{
    margin: 4px 0 0 0;
    font-size: 13px;
}
.process-item .desc{
    display: flex;
    justify-content: center;
}
.timer-wrapper{
    position: fixed;
    width: 100%;
    height: fit-content;
    background:#f4f4f4;
    bottom: -50%;
    z-index: 99;
    right: 0;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
    border-top:2px solid #6c757d45;
    transition:0.5s;
    overflow:auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-height: 140px;
}
.timer-wrapper.show{
    bottom: 0;
}
.task-doing-time{
    width: fit-content;
    padding:10px;
    font-size: 12px;
    background:#fff;
    border-radius:10px;
}
.task-doing-time p{
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: center;
    justify-content: center;
}
.task-doing-time .task-timer{
    font-size: 14px;
    text-align: center;
}
.StartTask.disabled{
    opacity: 0.2;
    cursor: not-allowed !important;
}
.Calender_show_date .section_time .Task_show .task_item .CTATask .taskCTA .DoneTask{
    background: var(--bs-red);
    color: #fff;
    border-color: var(--bs-red);
}
.task-timer.pause{
    color: var(--bs-warning);
}
.Calender_show_date .section_time .Task_show .task_item .CTATask .taskCTA .finalTaskItem {
    background: var(--bs-green);
    color: #fff;
    border-color: var(--bs-green);
}
.taskDurationWrapper{
    float: right;
    width: 100%;
    padding:10px;
    border-bottom: 1px solid #eee;
    background:#fcfcfc;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    justify-content: space-between;
}

.TaskItemParent{
    cursor: grab;
}
.dragging .TaskItemParent,.dragging {
    cursor: grabbing !important;
}
.Calender_show_date .section_time .Task_show .ListOFTask{
    min-width: 100%;
    min-height: 180px;
}
.ReportDailyBox .Body .ReportItem h2{
    font-size: 14px;
    text-align: center;
}
.SearchBoxCarable .SearchBox{
    display: flex;
    flex-wrap: wrap;
    gap:10px;
}
.report-task{
    display: flex;
    justify-content: space-between;
}
.task-time-badge{
    background: var(--bs-blue);
    color: #fff;
    border-radius:50px;
    padding:2px 5px;
    font-size: 12px;
}
.all-tasks-time{
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #e3e3e3;
    float: right;
    width: 100%;
}
#ReportDailyBoxPerson .Head{
    display: flex;
    justify-content: space-between;
}
.dailyReportPersonDate-wrapper{
    display: flex;
    align-items: center;
    gap: 10px;
}
.dailyReportPersonDate-wrapper button{
    margin: 0;
    padding: 6px 0;
    min-width: 90px;
    width: fit-content;
}
.remove-wrapper{
    float: left;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.remove-wrapper #removeContent{
    width: auto;
    font-weight: normal;
    padding: 7px 61px;
    background: var(--bs-danger);
    border-radius: 50px;
    color: #fff;
    margin: 20px 1% 0;
    cursor: pointer;
}
.table-header-btn{
    float: left;
    width: 160px;
    margin: -6px 0 17px 0;
    background: #f9f9f9;
    border: 0;
    border-bottom-color: currentcolor;
    height: 40px;
    padding: 0;
    text-align: center;
    border-radius: 7px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.15);
    font-size: 13px;
    border-bottom: 3px solid var(--bs-primary);
    text-decoration: none;
    color: #000;
    display: flex
;
    justify-content: center;
    align-items: center;
}
.project-wrapper{
    display: flex
;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.project-card{
    border-radius: 30px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    overflow:hidden;
    min-width: 250px;
    width: calc(33% - 12px);
}
.project-card-header{
    padding: 10px;
    display: flex
;
    justify-content: center;
    margin-bottom: 10px !important;
    color: var(--hdm-blue);
    border-bottom: 1px dashed var(--hdm-orange);
}
.project-card-body{
    padding-inline: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px dashed var(--hdm-blue);

}
.project-card-body p{
    display: flex
;
    align-items: center;
    gap: 10px;
    color: var(--hdm-black);
    margin-block: 5px;
}

/*.project-card.new{*/
/*    border-top: 3px solid var(--bs-orange);*/
/*}*/
/*.project-card.unseen{*/
/*    border-top: 3px solid var(--bs-success);*/
/*}*/
.project-card *{
    margin: 0;
}

.project-card .btn-wrapper{
    display: flex;
    gap: 5px;
    justify-content: space-between;
    padding-inline: 5px;
}
.project-card .btn-wrapper a{
    font-size: 14px;
    padding: 8px 10px;
}

.project-card .edit-project{
    background: var(--bs-blue);

}
.project-card .detail-project{
    background: var(--bs-green);

}
#fill_gads_brief .checkbox-wrapper{
    float: right;
    flex-wrap: wrap;
}
.brief-table-wrapper .table-head{
    display: flex;
    float: right;
    gap: 10px;
    width: 100%;
    font-weight: bold;
    margin-bottom: 5px;
}
.brief-table-wrapper .table-head span{
    width: 48%;
    flex: 0.5;
}
.brief-table-wrapper .table-data{
    float: right;
    display: flex;
    width: 100%;
    gap: 10px;
    margin-bottom: 5px;
    align-items: center;
}
.brief-table-wrapper .table-data input{
    width: 48%;
    flex: 0.5;
}
.removeTableRow{
    font-size: 19px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}
.brief-table-wrapper.fourth .table-data input{
    width: 24%;
}
.brief-table-wrapper.fourth .table-head span{
    width: 24%;
}
.brief-row.fourth{
    width: calc(25% - 10px);


}
.checkbox-item-wrapper{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-start;

}
.checkbox-item-wrapper .checkbox-item{
    padding: var(--badge-padding);
    border-radius: 30px;
    background: #FFD7AA;
    color: var(--hdm-black);
}
.brief-table-wrapper-data .table-head{
    display: flex
;
    width: 100%;
    border-bottom: 1px dashed var(--hdm-orange);

    font-weight: bold;
}
.brief-table-wrapper-data .table-head span:nth-of-type(1){
    border-left: 1px dashed var(--hdm-orange);
}
.brief-table-wrapper-data .table-head *{
    width: 50%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    font-weight: 700;
    padding-block: 8px;

}
.brief-table-wrapper-data .table-data{
    display: flex
;

}
.brief-table-wrapper-data .table-data *{
    width: 50%;
    margin: 0;
    padding-block: 10px;
    display: flex
;
    justify-content: center;
}
.brief-table-wrapper-data .table-data div{
    display: flex
;
    flex-direction: column;
}
.brief-table-wrapper-data .table-data div p{
    width: 100%;
    border-left: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 10px;
    border-bottom: 1px dashed var(--hdm-orange);
    padding-inline: 5px;
}
.brief-table-wrapper-data .table-data div p:nth-last-of-type(1){
    border-bottom: none;
}
.brief-table-wrapper-data .table-data p:nth-of-type(1){
    border-left: 1px dashed var(--hdm-orange);
}
.saveWriterSetting,.saveFinalWords{
    padding: 10px 15px;
    background: var(--bs-blue);
    border-radius: 50px;
    border: none;
    color: #fff;

}
.float-right{
    float: right;
}
.project-card .btn-wrapper a.full-btn{
    width: 100%;
}
.gads-brief-header{
    display: flex
;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--hdm-orange);
}
.gads-brief-header div{
    padding: 10px;
    width: calc(50% - 10px);
    border-radius: 30px;
    background: #FFD7AA;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    display: flex
;
    justify-content: center;
    align-items: center;
}
.brief-row-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.brief-row div:nth-of-type(2){
    min-height: 45px;
    padding-inline: 5px;
    display: flex
;
    justify-content: center;
}
.updateRemainModal{
    padding: 3px;
    font-size: 11px;
    border: none;
    border-radius: 50px;
}
.list_of_data.update {
    border-bottom: 6px solid #002ec6;
}
.list_of_data.refund {
    border-bottom: 6px solid green;
}
.editStockDate{
    border: none;
    border-radius: 50px;
    background: #efefef;
    width: 30px;
    height: 30px;
    display: flex
;
    justify-content: center;
    align-items: center;
    padding: 0;
    text-align: center;
    margin-inline: auto;
}
.list_of_data li .editStockDate i{
    right: 0;
    left: 0;
    top: 0;
}
.r-btn-wrapper{
    display: flex
;
    flex-direction: column;
    gap: 10px;
}
.setStockConflict{
    border: none;
    padding: 3px 5px;
    border-radius: 50px;
    background: #730010;
    color: #fff;
}
.setStockConflict.active{
    background: #163fd6;

}
.deleteRefund{
    border: none;
    background: #4f1d0a;
    color: #fff;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.stock-charge{
    padding: 5px;
    font-size: 12px;

}
.stock-charge option{
    font-size: 12px;
}
.editChargeStock .btn {
    float: right;
    width: 100%;
    background: var(--bs-primary);
    font-size: 13px;
    padding: 3px 0;
    font-weight: 100;
    opacity: 0;
    margin: 0;
    margin-top: 4px;
}
.editChargeStock:hover .btn {

    opacity: 1;
}
.recruitmentDetail{
    border: none;
    border-radius: 50px;
    text-align: center;
    padding: 0;
    width: 30px;
    height: 30px;
}
.recruitmentDetail i{
    display: block !important;
    top: inherit !important;;
    left: inherit !important;;
    right: inherit !important;;
}
.recruitment_detail{
    display: flex
;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dddddd;
}

.deleteEpisode{
    width: 40px;
    height: 40px;
    display: flex
;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
}
.addTrainingEpisode{
    display: block;
    width: fit-content;
    padding: 6px 20px;
    border-radius: 50px;
    background: var(--bs-teal);
    color: #fff;
    cursor: pointer;
}
.episode-item{
    display: flex
;
    float: right;
    width: 100%;
    align-items: center;
}
.addTrainingEpisode-wrapper{
    float: right;
    width: 100%;
    margin-top: 10px;
}
.training-card-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.train-card{
    flex: 0.3;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
    position: relative;
}
.train-card .card-h{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.train-card .card-h .show-episodes{
    border: none;
    display: flex
;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50px;
}
.train-card .card-h div{
    display: flex;
    gap: 5px;
    align-items: center;

}
.train-card .card-h p{
    margin: 0;
}

.train-card .card-episodes{
    display: none;
}


.train-card .card-episodes.show{
    display: block;
}

.train-card .card-episodes a{
    text-decoration: none;
    color: #fff;
    background: var(--bs-primary);
    padding: 3px 5px;
    font-size: 14px;
    border-radius: 5px;
}
.edit-training{
    position: absolute;
    right: -10px;
    top: -10px;
    background: var(--bs-green);
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    color: #fff;
}
.edit-training a{
    color:#fff;
}
.deleteTraining{
    width: fit-content;
    float: left;
    padding-inline: 10px;
    background: var(--bs-danger);
    font-size: 12px;
}
.instruction-btn{
    background: var(--bs-teal);
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 50px;
    margin-top: 10px;
    display: block;
    width: fit-content;
}

.onboarding-category-wrapper{
    float: right;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #cfcfcf;
}

.onboarding-category-wrapper .title-wrapper{
    float: right;
    color: var(--first);
    font-size: 16px;
}
.onboarding-category-wrapper:last-of-type {
    border-bottom:none;
}
.onboarding-items-wrapper .form-group{
    position: relative;
}
.onboarding-items-wrapper .edit-training{
    right: -20px;
    top: 0;
}


/*new design*/

.Main nav .menu .new-nav{
    background: #3C7ED0;
    background: linear-gradient(0deg, rgba(60, 126, 208, 1) 0%, rgba(1, 34, 75, 1) 100%);
    border-radius: 20px;
    padding: 70px 0;
}
.Main nav .menu .new-nav li a,.Main nav .menu .new-nav li i{
    color: #fff;
}
.new_design .Main nav .menu{
    padding: 0;
}
.logo-wrapper{
    display: flex
;
    justify-content: center;
    align-items: center;
}
.logo-wrapper img{
    width: 100%;
    max-width: 150px;
}
.Main nav .menu .new-nav li a{
    font-size: 16px;
    border-bottom:none;
    padding: 10px 30px;
}
.Main nav .menu .new-nav .sub_menu li a,.Main nav .menu .new-nav .sub_menu li i{
    color: var(--hdm-blue) !important;

}
.Main nav .menu .new-nav .sub_menu{
    width: calc(100% - 30px);
    float: left;
}

.Main nav .menu .new-nav li .sub_menu.active{
    padding: 15px 10px 15px;
    position: relative;
    border-radius: 0px 20px 20px 0px;
    background: #ffffff;
    z-index: 3;
}
.Main nav .menu .new-nav li .sub_menu.active li{
    opacity: 1;
    position: relative;
    display: block;
    z-index: 2;
}
.new-nav .active-submenu{
    padding: 15px 10px 15px;
    position: relative;
    border-radius: 0px 20px 20px 0px;
    background: #ffffff;
    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgb(244 244 244) 100%);
    right: 30px;
    width: calc(100% - 30px);
}
.new-nav .active-submenu .submenu:after{
    content: "";
    position: absolute;
    background-color: transparent;
    top: -40px;
    left: 28px;
    height: 40px;
    width: 40px;
    border-bottom-left-radius: 38px;
    box-shadow: -8px 16px 0 0 #f6f6f6;
    z-index: 1;

}
.new-nav .active-submenu .submenu:before{
    content: "";
    position: absolute;
    background-color: transparent;
    left: 27px;
    bottom: -39px;
    height: 40px;
    width: 40px;
    border-top-left-radius: 38px;
    box-shadow: -8px -16px 0 0 #f6f6f6;
    z-index: 1;

}
.new-nav .active-submenu:after{
    content: "";
    width: calc(100% - 10px);
    display: block;
    position: absolute;
    right: 10px;
    background: #ffffff;
    height: calc(100% - 16px);
    z-index: 2;
    top: 8px;
    border-radius: 20px 20px 20px 20px;

}
.Main nav .menu .new-nav li.active-submenu a{
    position: unset;
}
.Main nav .menu .new-nav li.active-submenu a, .Main nav .menu .new-nav li.active-submenu i{

    color: var(--hdm-blue) !important;
    font-weight: bold;
    padding-right: 0;
}
.Main nav .menu .new-nav li.active-submenu span, .Main nav .menu .new-nav li.active-submenu i{
    z-index: 4;
    position: relative;
}

.Main nav .menu ul.new-nav li a i{
    color: #fff;
    margin: 0 0 0 14px;
}
.Main nav .menu .new-nav li.active-submenu i{
    font-size: 18px;
    margin-left: 10px;
}
.Main nav .menu .new-nav li a .las.la-angle-down{
    left: 0px;
    transition: 0.2s;
}
.Main nav .menu .new-nav li.active-submenu a .las.la-angle-down{
    left: 40px;
    transform: rotate(180deg)
}
.Main nav .menu ul.new-nav li a:hover{
    color: #fff;
}

.new_design ul.list_of_data {
    border: none;
    box-shadow: none;
    border-radius: 50px;
    padding: 11px 3px;
}
/*.new_design ul.list_of_data:nth-of-type(odd) {*/
/*    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.10);*/
/*    z-index: 10;*/
/*}*/
.new_design ul.list_of_data:hover{
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.10);
    z-index: 10;
}
.new_design .list_of_data li{
    color: #000;
    font-size: 14px;
    font-weight: 400;
}
.new_design .Main .content .row{
    padding: 20px;
    border-radius: 40px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    margin: 0;
    width: 100%;
}
.new_design .title{
    color: var(--hdm-blue);
    font-size: 24px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.menu-wrapper{
    float: right;
    width: 250px;
    position: relative;
}
.toggle-nav{
    display: none;
}
.new_design .toggle-nav{
    position: fixed;
    right: 250px;
    width: 27px;
    height: 95px;
    display: flex
;
    justify-content: center;
    align-items: center;
    border-radius: 20px 0 0 20px;
    background: #FDFDFD;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: 0.3s;
}
.new_design .list_of_data.head{
    border-radius: 50px;
    background: linear-gradient(180deg, #F5F6F6 23.91%, #FFF 155.43%);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05) !important;
    padding: 13px 0 13px !important;
}
.new_design .list_of_data.head li{
    color: #000;
    font-size: 16px;
    font-weight: 700;
    border-left:1px solid #adadad;

}
.new_design .list_of_data.head li:last-of-type{

    border-left:none;
}

.menu-wrapper.toggled{
    width: 118px;
}
nav .menu-wrapper.toggled .menu{
    width: 118px;
}
nav .menu-wrapper.toggled .menu .new-nav li a span {
    display: none;
}
nav .menu-wrapper.toggled .new-nav li a .las.la-angle-down{
    display: none;

}
nav .menu-wrapper.toggled .menu ul.new-nav li a i{
    margin: 0;
}
nav .menu-wrapper.toggled .menu .new-nav li a{
    display: flex
;
    justify-content: center;
}
.toggle-nav.active{
    right: 118px;
}
.toggle-nav.active i{
    transform: rotate(180deg);
}
.new_design .form-control{
    border-radius: 30px;
    background: #FFF;

    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    border: none;
}
.new_design .form-group label{
    color: #000;
    font-size: 15px;
    font-weight: 500;
}
.new_design .btn{
    border-radius: 40px;
    background: linear-gradient(180deg, var(--hdm-blue) 0%, #0250B1 100%);
    box-shadow: 1px 1px 2px 0 rgba(255, 255, 255, 0.50) inset;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    padding: 10px 32px;
    min-width: fit-content;
    width: 165px;
    margin-block: 10px;
    display: flex
;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.new_design .list_of_data li .edit,.new_design .list_of_data li .show{
    background: transparent;
    color: var(--hdm-orange);
}
.new_design .list_of_data li .edit i,.new_design .list_of_data li .show i{
    font-size: 20px;
}
.secondary-btn{
    border-radius: 30px;
    background: linear-gradient(180deg, var(--hdm-green) 0%, #9DDBA4 100%);
    box-shadow: 2px 2px 4px 0 rgba(255, 255, 255, 0.50) inset;
    border: none;
    color: #fff;
    width: 160px;
    padding: 10px 32px;
    font-size: 16px;
    font-weight: 700;
    float: left;
    margin-block: 10px;
    text-decoration: none;
    text-align: center;
    min-width: fit-content;
}
.secondary-btn:hover{
    background: linear-gradient(180deg, var(--hdm-green) 0%, #9DDBA4 100%);
    box-shadow: 2px 2px 4px 0 rgba(255, 255, 255, 0.50) inset;
    border: none;
    color: #fff;
}
.accordion-item{
    margin-block: 10px;
    border-radius: 30px;
    border: 1.5px solid #8B8996;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
    padding-inline: 10px;
}
.accordion-item button{
    border: none;
    color: #626262;
    font-size: 16px;
    font-weight: 500;
}
.accordion-collapse{
    border: none;
}
.accordion-button:focus{
    box-shadow: none;
}
.new_design .date_picker_element:after{
    background: transparent;
}
.new_design .date_picker_element i{
    background: transparent;
}
.process-de-wrapper{
    float: right;
    width: 100%;
    display: flex
;
    align-items: flex-end;
    gap: 30px;
}
.new_design .form-group input[type='checkbox'] {
    -webkit-appearance: none;
    width: 25px;
    height: 25px;
    background: transparent;
    border-radius: 5px;
    border: 2px solid var(--hdm-blue);
}
.new_design .form-group input[type='checkbox']:checked {
    background: var(--hdm-blue);
}
.process-card{

    width: 49%;
    border-radius: 30px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.10);
    padding: 20px;
    min-width: 450px;
    margin-bottom: 20px;
}
.process-card-header{
    display: flex
;
    justify-content: space-between;
    border-bottom: 1px dashed var(--hdm-orange);
    padding-bottom: 13px;
    margin-bottom: 13px;
}
.process-status{
    height: fit-content;
    width: fit-content;
    padding: 8px 10px;
    border-radius: 50px;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    display: flex
;
    align-items: center;
    gap: 3px;
    border: 1px solid;
}
.pending .process-status{
    color: var(--hdm-orange);
    border-color: var(--hdm-orange);
}
.doing .process-status{
    color: var(--hdm-blue);
    border-color: var(--hdm-blue);
}
.done .process-status{
    color: var(--hdm-green);
    border-color: var(--hdm-green);
}
.process-deadline-wrapper {
    display: flex
;
    align-items: center;
    position: relative;
}
.process-deadline{
    color: #8B8996;
    display: flex
;
    align-items: center;
    gap: 3px;
    /*padding-left: 10px;*/
    /*margin-left: 10px;*/
    /*border-left: 1px solid #8B8996;*/
}
.process-deadline-bar{
    width: 146px;
    height: 7px;
    background: #E8EBEF;
    border-radius: 50px;
    position: relative;
}
.process-deadline-bar span{
    display: block;
    position: absolute;
    left: 0;
    height: 7px;
    border-radius: 50px;
    z-index: 2;
    background: var(--hdm-blue);
    top: 0;
    bottom: 0;
}
.process-remaining-wrapper{
    display: flex;
    opacity: 0;
    align-items: center;
    gap: 12px;
    position: absolute;
    bottom: -30px;
    width: fit-content;
    min-width: 320px;
    background: #fff;
    padding: 10px 3px;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    right: -50%;
    transition: 0.2s;
}
.process-deadline:hover + .process-remaining-wrapper {
    opacity: 1;
}
.tab_div_p{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.process-card h3{
    color: var(--hdm-blue);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}
.bars-wrapper{
    display: flex
;
    justify-content: center;
    gap: 7px;
}
.dep-bar{
    width: 95px;
    height: 220px;
    display: flex
;
    position: relative;
    border-radius: 20px;
    border: 2px solid;
    overflow: hidden;
    margin-block: 5px;
}
.bar-percent{
    position: absolute;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    width: fit-content;
    z-index: 3;
    display: block;
}
.bar-fill{
    display: block;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -3px;
    border-radius: 20px;
    z-index: 2;
}
.dep-bar-detail{
    color: #000;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    display: block;
}
.new_design .third-btn{
    border-radius: 40px;
    background: var(--hdm-orange);
    box-shadow: 2px 2px 4px 0 rgba(255, 255, 255, 0.50) inset;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    padding: 10px 32px;
    min-width: 160px;
    width: fit-content;
    margin: 0;
    text-decoration: none;
    float: right;
    text-align: center;
    margin-block: 10px;

}
.new_design .third-btn:hover{
    background: var(--hdm-orange);
    color: #fff;
    text-align: center;
    text-decoration: none;
}
.new_design .fourth-btn{
    border-radius: 40px;
    background: linear-gradient(180deg, #FFD7AA 0%, #FFFCF9 100%);
    box-shadow: 2px 2px 4px 0 rgba(255, 255, 255, 0.70) inset, 4px 4px 30px 0 rgba(0, 0, 0, 0.10);
    color: var(--hdm-orange);
    font-size: 16px;
    font-weight: 700;
    border: none;
    padding: 10px 32px;
    min-width: 160px;
    width: fit-content;
    margin: 0;
    text-decoration: none;
    float: right;
    text-align: center;
    margin-block: 10px;

}
.new_design .fourth-btn:hover{
    background: linear-gradient(180deg, #FFD7AA 0%, #FFFCF9 100%);
    color: var(--hdm-orange);
    text-align: center;
    text-decoration: none;
}
.fl-n{
    float: none !important;
}
.process-card-footer{
    display: flex
;
    justify-content: space-between;
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px dashed var(--hdm-orange);
}
.process-card.done .remaining-time{
    display: none;
}
.process-deadline-wrapper.late .remaining-time{
    color: #E10508;
}
.process-deadline-wrapper.late .process-deadline-bar span{
    background: #E10508;
}
.process-card.full-late{
    background: #FFF0F1;

}
.process-card.full-late{
    background: #FFF0F1;

}
.new_design .tab_project{
    margin: 0;
    float: none;
    justify-content: flex-start;
    padding-right: 40px;
    gap: 10px;
    align-items: flex-end;
}
.new_design .tab_project li{
    border-radius: 30px 30px 0 0;
    border: 2px solid var(--hdm-blue);
    background: linear-gradient(180deg, #F5F6F6 23.91%, #FFF 155.43%);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
    color: #000;
    font-size: 16px;
    font-weight: 700;
    border-bottom: none;
    min-width: 150px;
    text-align: center;
    padding: 16px 20px;
    position: relative;
}
.new_design .tab_project li.active{
    color: var(--hdm-orange);
    font-size: 18px;
    border-color: var(--hdm-orange);
    font-weight: 700;
    padding: 32px 20px;

}
.tab_div {
    margin-block: 20px;
}
.table-btn-wrapper{
    display: flex
;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.outline-btn,.outline-btn:hover{
    padding: 8px 23px;
    border-radius: 50px;
    border: 1.5px solid var(--hdm-blue);
    text-decoration: none;
    color: var(--hdm-blue);
    display: flex
;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    background: transparent;
}

.outline-btn.secondary-outline,.outline-btn.secondary-outline:hover{
    border: 1.5px solid var(--hdm-orange);
    color: var(--hdm-orange);
}

.new_design .pagination span, .pagination a{
    border-radius: 10px;
    background: #E8EBEF;
    color: #fff !important;
}
.new_design .pagination span{
    background: var(--hdm-blue);
    color: #fff !important;
    border-radius: 10px;

}
.new_design .pagination .next,.new_design .pagination .prev{
    background: transparent;
    color: #000 !important;
}
.new_design .form-group{
    margin-block: 12px;
}
.new_design .select2-container .select2-selection--single{
    border-radius: 30px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    border: none !important;
}
.received-process .process-deadline{
    border-left:none;
    padding-left: 0;
    margin-left: 0;
}
.received-process .process-card-footer{
    justify-content: flex-end;
}
.requested-department{
    padding: 12px 25px;
    display: flex
;
    justify-content: center;
    align-items: center;
    width: fit-content;
    border: 1px solid;
    border-radius: 50px;
}
.process-deadline-detail-wrapper{
    display: flex
;
    align-items: center;
    gap: 13px;
    flex-wrap: wrap;
}
.process-deadline-detail-wrapper div{
    color: #000;
    font-size: 16px;
    font-weight: 400;
    padding: 10px 32px;
    border-radius: 30px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
}
.new_design *{
    line-height: normal;
}
.ProcessItem .ProcesDept .DeptList{
    float: none;
    display: flex
;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    height: fit-content;
    margin-bottom: 20px;
}
.ProcessItem .ProcesDept .DeptList li{
    float: none;
    margin: 0;
}
.request-deadline-wrapper .deadline{
    width: fit-content;
    padding: 10px 25px 10px 25px;
    border-radius: 30px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    color: #000;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    gap: 60px;
    align-items: center;
}
.request-deadline-wrapper .deadline.can-edit-deadline{
    padding-left: 7px;
}
.request-deadline-wrapper .deadline div{
    display: flex;
    align-items: center;
    gap: 10px;
}
.request-deadline-wrapper .deadline button{
    border-radius: 30px;
    box-shadow: 2px 2px 4px 0 rgba(255, 255, 255, 0.50) inset;
    border: none;
    padding: 9px 25px;
    color: #fff;
    font-size: 16px;
}
.request-deadline-wrapper .deadline .accept_deadline{
    background: linear-gradient(180deg, var(--hdm-green) 0%, #9DDBA4 100%);
}
.request-deadline-wrapper .deadline .reject_deadline{
    background: linear-gradient(180deg, #E10508 0%, #F28B8D 100%);
}
.request-deadline-wrapper{
    margin-top: 18px;
}
.new-deadline{
    display: flex;
    display: none;
    gap: 10px;
    align-items: center;
    padding-top: 25px;
    margin-top: 25px;
    border-top: 1px dashed var(--hdm-orange);
}
.new-deadline.flex {
    display: flex;
}
.new-deadline .form-group{
    margin: 0 !important;
    max-width: 323px;
}
.requestNewDeadLine{
    border-radius: 40px;
    background: linear-gradient(180deg, var(--hdm-blue) 0%, #0250B1 100%);
    box-shadow: 1px 1px 2px 0 rgba(255, 255, 255, 0.50) inset;
    border: none;
    color: #fff;
    padding: 9px 25px;
    font-size: 16px;
}
.new_design .Main .content .row.deadline-row{
    margin-bottom: 20px;
}
.my-0{
    margin-block: 0 !important;
}
.add-task-wrapper{
    display: flex
;
    align-items: flex-end;
}
.process-department-status-wrapper{
    display: flex
;
    gap: 20px;
    align-items: stretch;
}
.process-department-status{
    width: 100%;
    border-radius: 30px;
    border: 3px solid;
    background: #FFF;
    padding: 20px;
}
.process-department-status:nth-of-type(1){
    border-color: #FFD7AA;
}
.process-department-status:nth-of-type(2){
    border-color: #98C6FF;
}
.process-department-status:nth-of-type(3){
    border-color: #B7FEC6;
}
.process-department-status h5{
    color: #000;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}
.status-image{
    width: 55px;
    height: 55px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}
.status-card{
    display: flex
;
    gap: 10px;
    align-items: center;
    border-radius: 30px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    padding: 10px 5px 10px 20px;
    margin-block: 10px;
}
.status-card *{
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}
.status-card h6{
    color: #000;
    font-size: 16px;
    font-weight: 700;
}
.status-deadline{
    margin-top: 8px;
    display: flex
;
    justify-content: space-between;
    width: 100%;
}
.status-deadline p{
    color: #FF797C;
    font-size: 14px;
    font-weight: 400;
}
.status-deadline span{
    color: var(--hdm-blue);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.process-department-row{
    margin-block: 20px !important;
}
.task-bank-items{
    position: absolute;
    width: 100%;
    background: #fff;
    padding: 10px;
    border-radius: 30px;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    top: 80px;
    z-index: 12;
    display: none;
}
.task-bank-items div{
    font-size: 16px;
    color: #000;
    padding: 5px 14px;
    margin-block: 7px;
    cursor: pointer;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    border-radius: 50px;
}
.task-bank-items .addNewTaskBank{
    background: linear-gradient(180deg, var(--hdm-blue) 0%, #0250B1 100%);
    color: #fff;
    padding: 10px;
    width: fit-content;
    border-radius: 50px;
    margin-inline: auto;
}
#addTaskToDepartment .form-group{
    position: relative;
}
.process-tasks-item{
    display: flex
;
    gap: 7px;
    align-items: center;
    height: 80px;
    padding: 10px 15px;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    margin-block: 7px;
}
.process-tasks-item .profile{
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}
.process-tasks-item p{
    margin: 0;
    color: #8B8996;
    font-size: 16px;
}
.process-tasks-item .task-doer{
    width: 15%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 0.5px solid #8B8996;
    font-size: 16px;
}
.process-tasks-item h6{
    color: #000;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    width: 40%;
    margin: 0;
    height: 100%;
    display: flex
;
    justify-content: center;
    align-items: center;
    border-left: 0.5px solid #8B8996;
}
.task-edit-delete{
    display: flex;
    align-items: center;
    gap: 5px;
    height: 100%;
    border-left: 0.5px solid #8B8996;
    width: 10%;
    justify-content: center;

}
.task-edit-delete .deleteProcessTask{
    cursor: pointer;
    color: #E10508;
    padding: 3px;
}
.task-edit-delete .editProcessTask{
    cursor: pointer;
    color: var(--hdm-orange);
    padding: 3px;
}
.process-log-item.comment .log-text{
    color: var(--hdm-orange);
}
.showComments{
    color: var(--hdm-blue);
    cursor: pointer;
    position: relative;
}
.showComments i{
    font-size: 26px;
}
.showComments span{
    position: absolute;
    font-size: 14px;
    right: -4px;
    top: -4px;
    background: #FF797C;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.tasks-buttons{
    display: flex;
    align-items: center;
    width: calc(40% - 60px);
    justify-content: space-around;
}
.tasks-buttons .form-group{
    width: fit-content;
}
.tasks-buttons .doneTask{
    border-radius: 30px;
    background: linear-gradient(180deg, var(--hdm-green) 0%, #9DDBA4 100%);
    box-shadow: 2px 2px 4px 0 rgba(255, 255, 255, 0.50) inset;
    padding: 7px 15px;
    color: #fff;
}
.tasks-buttons .rejectTask{
    border-radius: 30px;
    background: linear-gradient(180deg, #E10508 0%, #F28B8D 100%);
    box-shadow: 2px 2px 3px 0 rgba(255, 255, 255, 0.50) inset;
    padding: 7px 15px;
    color: #fff;
    cursor: pointer;
}
.new_design .modal-content{
    border: none;
    border-radius: 30px;
    background: #FFF;
    box-shadow: 4px 4px 30px 0 rgba(0, 0, 0, 0.10);
    padding: 20px;
}
.response-comment-box{
    display: flex
;
    align-items: center;
    gap: 20px;
    padding: 10px;
    height: 80px;
}
.response-comment-box .profile{
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}
.response-comment-box .comment-writer{
    width: 20%;
    height: 100%;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
    border-left: 0.5px solid #8B8996;
}
.response-comment-box textarea,.response-comment-box textarea:focus,.response-comment-box textarea:focus-visible{
    width: calc(80% - 100px);
    height: 100%;
    border: none;
    display: flex
;
    align-items: center;
    color: #8B8996;
    outline: none;


}
#respondToComment{
    border-top: 1px dashed var(--hdm-orange);
    padding-top: 15px;
    margin-top: 15px;
    display: none;
}
.dep-task{
    padding: 7px 15px;
}
.dep-task .profile{
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}
.dep-task-comment i{
    font-size: 24px;
    color: var(--hdm-blue);
}
.dep-task-comment{
    display: flex
;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    color: var(--hdm-blue);
    width: 80px;
    height: 80px;
    cursor: pointer;
}
.dep-task-comment.disabled i,.dep-task-comment.disabled span{
    color: #BABABA;
    cursor: not-allowed;
}
.dep-task-wrapper{
    display: flex
;
    gap: 10px;
    margin-block: 5px;
}
.dep-task{
    border-radius: 20px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    width: calc(100% - 90px);
    display: flex;
    height: 80px;
    padding: 10px;
    gap: 4px;
}
.dep-task .doer{
    width: 20%;
    height: 100%;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
    border-left: 0.5px solid #8B8996;
    font-size: 16px;
;
}
.dep-task .doer p{
    color: #8B8996;
    margin: 0;
}
.dep-task h6{
    width: calc(60% - 60px);
    display: flex
;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-left: 0.5px solid #8B8996;
    color: #8B8996;
    font-size: 16px;
    font-weight: 500;
}
.dep-task .task-status-wrapper{
    display: flex
;
    justify-content: center;
    width: 20%;
    align-items: center;
}
.dep-task .task-status{
    padding: 8px 19px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 2px 2px 4px 0 rgba(255, 255, 255, 0.50) inset;
}
.dep-task .task-status.done{
    background: linear-gradient(180deg, var(--hdm-green) 0%, #9DDBA4 100%);
    color: #fff;
}
.dep-task .task-status.doing{
    background: linear-gradient(180deg, #FFD7AA 0%, #FFFCF9 100%);
    color: var(--hdm-orange);
}
.dep-task-comment-box{
    width: calc(100% - 90px);
    padding: 10px;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    display: none;
}
.dep-task-comment-box h6{
    margin: 0;
    color: #000;
    font-size: 16px;
    font-weight: 500;
}
.dep-task-comment-box textarea,.dep-task-comment-box textarea:focus-visible,.dep-task-comment-box textarea:focus{
    width: 100%;
    height: 90px;
    border: none;
    border-top: 1px dashed var(--hdm-orange);
    border-bottom: 1px dashed var(--hdm-orange);
    padding: 10px;
    margin-block: 10px;
    font-size: 16px;
    color: #8B8996;
    outline: none;
}
.task-comment .writer {
    width: 15%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left: 0.5px solid #8B8996;
    font-size: 16px;
}
.task-comment .writer p{
    margin: 0;
    font-size: 16px;
    color: #000;

}
.task-comment .profile{
    width: 60px;
    height: 60px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}
.task-comment{
    padding: 10px;
    height: 80px;
    display: flex;
    gap: 10px;
    align-items: center;
    border-radius: 20px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 10px;
}
.comment-text{
    padding-right: 10px;
    color: #8B8996;
    font-size: 16px;
}
.task-comment-wrapper{
    margin-bottom: 15px;
}
.Main nav .menu ul.new-nav li .badge{
    float: none;
    background: var(--hdm-orange);
    color: #fff;
    font-size: 10px;
    position: absolute;
    padding: 4px 13px;
    right: inherit;
    left: 40px;
    border-radius: 20px;
}
.new-nav .active-submenu .sub_menu .submenu:before,.new-nav .active-submenu .sub_menu .submenu:after{
    display: none;
}
.Main nav .menu ul.new-nav .active-submenu .badge{
    display: none;
}
.Main nav .menu .new-nav li .sub_menu.active .sub_menu.active{
    padding: 0;
    width: 100%;
    margin-bottom: 10px;
}
.Main nav .menu .new-nav li.active-submenu .sub_menu a.submenu .las.la-angle-down{
    left: 0;
}
.new_design .menu.flip{
    width: 88px !important;
}
.new_design .FlipMenuIcon.flip{
    right: 88px;
}
.new_design .menu.flip ul li .badge{
    background: var(--hdm-orange) !important;
    left: auto !important;
    right: 55px !important;

}
.new_design .FlipMenuIcon{
    height: 85px;
    width: 25px;
    border-radius: 20px 0 0 20px;
    background: #FDFDFD;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    font-size: 20px;
}
.new_design .title i{
    display: none;
}
.qa_responsible_form{
    display: none;
}
.task-data{
    display: flex;
    align-items: center;
    font-size: 12px;
    gap: 7px;
    margin-block: 7px;
}
.qc_form{
    display: none;
}
.qaAccept {
    border-radius: 0;
    color: #fff !important;
    margin-top: 5px;
    background: var(--bs-teal);
}
.taskCTA .qaAccept{
    margin-top:0;
}
.form-control.editFound#dateFund{
    background: transparent;
}
#happy_call_form textarea{
    height: 150px;
}
.hc-btn-wrapper{
    width: 100%;
    display: flex
;
    justify-content: center;
}
.new_design .titleSub{
    text-align: center;
    color: var(--hdm-blue);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    margin: 0;
    float: none;
}
.new_design .Show_top_personal .show_top_person {
    margin-block: 20px 40px;
}
.new_design .Show_top_personal .show_top_person li span{
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    margin: 0;
}
.new_design .Show_top_personal .show_top_person li{
    width: 460px;
    border-radius: 70px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    display: flex
;
    gap: 10px;
    padding: 0 0 0 30px;
    align-items: stretch;
    margin: 0;
}
.new_design .Show_top_personal .show_top_person li .data-wrapper{
    padding-block: 10px;
    width: 100%;
    display: flex
;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.new_design .Show_top_personal .show_top_person li .Thumb{
    width: 100%;
    height: 90px;
    max-width: 90px;
}
.new_design .Show_top_personal .show_top_person li div div{
    display: flex
;
    justify-content: space-between;
    width: 100%;
}
.new_design .Show_top_personal .show_top_person li .point-team{
    color: var(--hdm-orange);
}
.new_design .Show_top_personal .show_top_person li .point-wrapper{
    width: 100%;
    text-align: right;
    color: var(--hdm-green);
    display: flex;
    gap: 8px;
    align-items: center;
}
.new_design .Show_top_personal .show_top_person{
    flex-wrap: wrap;
    gap: 10px;
}
.new_design .user-points .List_of_detail{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex
;
    gap: 20px;
}
.new_design .user-points .List_of_detail li{
    border-radius: 30px;
    border: 1.5px solid #FFD7AA;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    width: 50%;
    height: 56px;
    display: flex
;
    align-items: center;
    padding: 5px;
}
.new_design .user-points .List_of_detail li span{
    width: 30%;
    border-radius: 30px;
    background: #FFD7AA;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex
;
    align-items: center;
    justify-content: center;
    color: var(--hdm-black);
    font-weight: 500;
    font-size: 16px;
}
.new_design .user-points .List_of_detail li b{
    width: 70%;
    display: flex
;
    justify-content: center;
    color: var(--hdm-black);
    font-weight: 700;
    font-size: 16px;
}
.new_design .Main .content .row.user-points-wrapper{
    margin-top: 20px;
}
.svg-item {
    width: 74px;
    font-size: 16px;
    animation: donutfade 1s;
    position: relative;
}
.svg-item i{
    position: absolute;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    font-size: 22px;
    color: #EDEBEB;

}
.svg-item i.active{
    color: var(--hdm-green);
}

@keyframes donutfade {
    /* this applies to the whole svg item wrapper */
    0% {
        opacity: .2;
    }
    100% {
        opacity: 1;
    }
}

.donut-ring {
    stroke: #EBEBEB;
}

.donut-segment {
    transform-origin: center;
}

.donut-segment-2 {
    stroke: var(--hdm-green);
    animation: donut1 3s;
    transform: rotate(-45deg);
}
.remaining-points{
    padding: 0;
    display: flex
;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}

.remaining-points .remain-text{
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    color: var(--hdm-black);
}
.ListOfTabPersonal li{
    background: transparent !important;
    border: none;
    border-bottom: 1px solid var(--hdm-blue);
    padding: 9px 15px;
}
.task-texts textarea{
    width: 100%;
}
.new_design div.mce-statusbar{
    display: none;
}
.new_design .ListOfTabPersonal li{
    background: transparent;
    border: none;
    color: var(--hdm-black);
    padding: 9px 15px;
    font-size: 16px;
    font-weight: 500;
    min-width: fit-content;
}
.new_design .ListOfTabPersonal li:hover, .ListOfTabPersonal li.active{
    background: transparent;
    border-bottom: 2px solid var(--hdm-orange);
    color: var(--hdm-black);

}
.new_design .ListOfTabPersonal{
    border: none;
    border-bottom: 1px solid var(--hdm-blue);
    display: flex;
    overflow-x: scroll;
    scrollbar-width: none;   /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    cursor: grab;
}
.new_design .ListOfTabPersonal::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}
.new_design .TitlePer{
    border-radius: 30px;
    border: 1.5px solid var(--hdm-orange);
    color: var(--hdm-orange);
    font-weight: 700;

}
.new_design .list_of_access li.header{
    border-radius: 30px;
    border: 1.5px solid var(--hdm-orange);
    color: var(--hdm-orange);
    padding-block: 10px;
    font-weight: 700;
    text-align: center;

}
.new_design .access_list label{
    border: none;
    border-radius: 30px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);

}
.new_design .access_list label:hover, .new_design .access_list label.active{
    background: #FFB703;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    color: #fff;
    font-weight: 700;

}
.new_design .access_list label:after{
    border-radius: 50%;
}
.new_design .access_list label.active::after, .access_list label:hover::after{
    background-color: var(--hdm-blue);
    border-color: var(--hdm-blue);
}
.fl-r{
    float: right;
}
.color-picker input {
    width: 100%;
    opacity: 0;
    display: block;
    z-index: 5;
    position: relative;
}
.color-picker i {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: fit-content;
    height: fit-content;
    margin: auto;
    font-size: 20px;
}
.color-picker .color-bg {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    left: 45px;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
}
.color-picker .color-value {
    position: absolute;
    right: 15px;
    top: 0;
    bottom: 0;
    height: fit-content;
    margin: auto;
    color: var(--hdm-black);
    z-index: 2;
    font-size: 16px;
    direction: ltr;
}
.color-picker{
    position: relative;
}
.new_design .socialLink{
    padding:0;
    border-radius: 50%;
    display: flex
;
    align-items: center;
    justify-content: center;
}
.new_design .socialLink i{
    inset: inherit;
}

.new_design .user-social-wrapper{
    display: flex;
    align-items: center;
    gap: 4px;
}
.new_design .user-social-wrapper div{
    display: flex
;
    align-items: center;
}
.new_design .wallet_report{
    background: transparent;
}

.new_design .linkOfCourse input{
    border: none;
}
.new_design .linkOfCourse {
    border-radius: 20px;
    border: 1.5px solid #B7FEC6;
    padding: 2px;
    overflow: hidden;
    justify-content: space-between;
}

.new_design .linkOfCourse .copyCourseLink {
    border-radius: 20px;
    background: #B7FEC6;
    color: #000;
}
.task-texts label{
    float: none;
}
.new_design .list_of_data li.tc{
    padding-block: 8px;
    border-radius: 30px;
    background: #E8EBEF;
}
.new_design .table-search-wrapper{
    margin-bottom: 30px;
}
.new_design .table-search-wrapper *{
    float: none !important;
}
.new_design .table-search-wrapper .table-search-items{
    display: flex;
    align-items: center;
    gap: 12px;
}
.new_design .table-search-wrapper .table-search-items{
    display: flex;
    align-items: center;
    gap: 12px;
}
.new_design .table-search-wrapper .table-search-items div,.new_design .table-search-wrapper .table-search-items a,.new_design .table-search-wrapper .table-search-items select{
    margin: 0 !important;
}
.new_design .table-search-wrapper .table-search-items .AdvancedSearch{
    border-radius: 30px;
    background: #FFB703;
    border: none;
    display: flex
;
    align-items: center;
    gap: 7px;
    padding: 0;
    height: 45px;
    padding-inline: 22px;
    color: #fff;
    box-shadow: none;
}
.new_design .table-search-wrapper .table-search-items .AdvancedSearch i{

    inset: 0 !important;
}
.new_design .table-search-wrapper .table-search-items #ConvertToEcxel{
    padding: 8px 23px;
    border-radius: 50px;
    border: 1.5px solid var(--hdm-blue);
    text-decoration: none;
    color: var(--hdm-blue);
    display: flex
;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    background: transparent;
    box-shadow: none;
    height: 45px;
    margin: 0 !important;
}
.new_design .table-search-wrapper .table-search-items #item-per-page{
    padding: 8px 23px;
    border-radius: 50px;
    border: 1.5px solid var(--hdm-blue);
    text-decoration: none;
    color: var(--hdm-blue);
    display: flex
;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    background: transparent;
    box-shadow: none;
    height: 45px;
    padding-block: 0;
    padding-inline: 5px;
    position: relative;
}
.new_design .table-search-wrapper .table-search-items #item-per-page select{
    text-align: center;
    background: transparent;
    box-shadow: none;
    z-index: 3;
}
.new_design .table-search-wrapper .table-search-items #item-per-page i{
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    z-index: 2;
}
.searchOrderWrapper{
    display: flex
;
    align-items: center;
}
.new_design .SearchOptionBox{
    border-radius: 40px;
    background: #E8EBEF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    margin-top: 10px;
}
.new_design .TagOfUser li .tagInput input {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
    cursor: pointer;
    opacity: 0;
}
.new_design .TagOfUser {
    display: flex;
    align-items: center;
}
.new_design .TagOfUser li .tagInput {
    min-width: 115px;
    text-align: center;
}
.new_design .tagCustomer{
    width: 100px;
    padding-block: 7px;
}
.tagCustomer.ads{
    background: #B7FEC6;
}
.tagCustomer.website{
    background: #98C6FF;
    color: #000;
}
.tagCustomer.academy{
    background: #E5B9FF;
    color: #000;
}
.new_design .vacation-status span{
    padding: 7px 10px;
    color: var(--hdm-black);
    border-radius: 20px;
}
.new_design .vacation-status span.s{
    background: #B7FEC6;
}
.new_design .vacation-status span.w{
    background: #FFD7AA;
}
.new_design .vacation-status span.c{
    background: #FFBCBD;
}
.new_design .Show_Date{
    padding: 7px 10px;
    color: #fff;
    border-radius: 20px;
}
.new_design .Show_Date.hourly{
    background: #98C6FF;
}
.new_design .Show_Date.daily{
    background: var(--hdm-orange);
}
.vacation-time{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.vacationFullHour{
    position: absolute;
    width: 170px;
    color: #fff;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: #98C6FF;
    padding: 7px 9px;
     display: none;
    margin: auto;
    z-index: 3;
    top: 0;
    bottom: 0;
    right: -50%;
    transition: 0.2s;
}
.Show_Date:hover .vacationFullHour {
    display: block;
}
.readVacationText{
    padding: 7px 10px;
    border-radius: 20px;
    background: #E8EBEF;
}
.new_design .vacation-overall p {
    border-radius: 40px;
    border: 2px solid #FFD7AA;
    background: transparent;
    color: var(--hdm-black);
}
.new_design .tags_item{
    padding: 10px 15px;
    border-radius: 20px;
    background: #98C6FF;
    color: #fff;
}
.new_design .savetoFin{
    padding: 7px 15px;
    border-radius: 20px;
    background: #FFD7AA;
    color: var(--hdm-black) !important;
}
.MoveToTrashBTN{
    width: fit-content;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 6px;
}
.list_of_data li .MoveToTrashBTN i{
    inset: 0;
}
.table-btn-wrapper{
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}
.new_design .CommentPart{
    float: none;
    padding: 7px 15px;
    border-radius: 20px;
    background: #98C6FF;
    color: #fff;
    position: relative;
}
.commentCount{
    position: absolute;
    right: -9px;
    background: #E10508;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex
;
    align-items: center;
    justify-content: center;
}
.new_design .saved,.new_design .show_request_invoice .saved{
    background: var(--hdm-green);
    width: 37px;
    height: 37px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: auto;
 }
.list_of_data li .saved i{
    inset: 0;
}
.qc_form li:nth-child(3) {
    display: none;
}
.report-box-wrapper{
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.report-box-wrapper .form-group{
    border-radius: 40px;
    border: 2px solid var(--hdm-orange);
}
.report-box-wrapper #wp-final_task-wrap,.report-box-wrapper #wp-remainingـtask-wrap{
    padding: 10px;
}
.new_design .wp-editor-container{
    border: none;
}
.report-box-wrapper label{
    display: flex
;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--hdm-blue);
    padding-bottom: 10px;
    margin-bottom: 10px;
    padding-top: 20px;
    float: none;
    height: fit-content;
    border-bottom: 1px dashed var(--hdm-orange);
    font-size: 16px;
}
.new_design .mce-top-part{
    border-radius: 30px;
    background: linear-gradient(180deg, #F5F6F6 23.91%, #FFF 155.43%);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
    padding-inline: 12px;
}
.new_design .wp-core-ui .button{
    border: none;
    color: #000000;
    border-radius: 50px;
}
.new_design .wp-editor-tabs{
    padding-left: 10px;
}
.new_design .wp-editor-tabs button{
    border-radius: 10px 10px 0 0;
    border: none;
}
.new_design .mce-top-part::before{
    display: none;
}
.title-wrapper{
    display: flex
;
    justify-content: space-between;
    align-items: center;
}
.title-wrapper h2,.title-wrapper span{
    width: 100%;
}
.title-wrapper h2 span{
    text-align: center;
}
.title-wrapper .report-date{
    width: 100%;
    display: flex
;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}
.title-wrapper .report-date i{
    color: var(--hdm-blue);
}
.task-box{
    border-radius: 40px;
    border: 2px solid var(--hdm-orange);
    padding: 0;
    width: calc(50% - 20px);
}
.task_descritpion h4{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--hdm-blue);
    border-bottom: 1px dashed var(--hdm-orange);

}
.task_descritpion h4 i{
    color: var(--hdm-blue);

}
.task_descritpion .row{
    gap: 20px;

}
.new_design div.sep{
    border-radius: 30px;
    border: 1.5px solid var(--hdm-orange);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
    background: transparent;
    color: var(--hdm-orange);
    padding-block: 8px;
}
.password_gen .password_generator{
    background: transparent;
    color: var(--hdm-blue);

}
.new_design .show.ShowPasswordItem{
    background: transparent !important;
}
.SearchInPassword{
    float: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 30px;
    border: 1.5px solid var(--hdm-orange);
    width: 210px;
    color: var(--hdm-orange);
    position: relative;
    transition: 0.2s;
}
.new_design .SearchInPassword input{
    float: none;
    background: transparent;
    box-shadow: none;
    color: var(--hdm-orange);

}
.SearchInPassword input::placeholder{
    color: var(--hdm-orange) !important;

}
.SearchInPassword i{
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: fit-content;
    left: 8px;

}
.SearchInPassword:focus-within {
    width: 100%; /* New width when input focused */
}
.Show_Password_item h2{
    color: var(--hdm-black);
}
.Show_Password_item .host_detail_access{
    border: none;
}
.Show_Password_item .host_detail_access p{
    float: none;
    text-align: center;
    padding-block: 9px;
    color: var(--hdm-orange);
    border-radius: 30px;
    border: 1.5px solid var(--hdm-orange);
}
.Show_Password_item .host_detail_access ul li .username{
    border-radius: 30px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    padding: 10px;
    display: flex
;
    align-items: center;
    justify-content: center;
}
.Show_Password_item .host_detail_access ul li #Copy{
    background: transparent;
    color: #000;
    font-size: 20px;
    left: 14px;
    bottom: 9px;
}
.Show_Password_item .host_detail_access ul li .url{
    border-radius: 30px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    padding: 10px;
}
.request-access-input-wrapper{
    display: flex;
    align-items: center;
    width: 100%;
}
.links-wrapper{
    display: flex
;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 22px;
}
.links-wrapper .link-item{
    width: calc(33% - 44px/3);
}
.links-wrapper .link-item .ProjectItem{
    border-radius: 40px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
}
.links-wrapper .link-item .ProjectItem .projectName{
    color: var(--hdm-blue);
    font-size: 20px;
    font-weight: 700;
    text-shadow: none;
    padding-bottom: 5px;
    float: none;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 0;
    border-bottom: 1px dashed var(--hdm-orange);

}
.links-wrapper .link-item .actionMenu{
    border-top: 1px dashed var(--hdm-orange);
    margin-top: 8px;

}
.links-wrapper .link-item .actionMenu i{
    color: var(--hdm-orange);
    font-size: 24px;
}
.ProjectItem.LinkManager .CountNumber{
    border-radius: 40px;
    background: var(--hdm-blue);
    padding: 10px 25px 10px 5px;
    color: #fff;
    display: flex
;
    justify-content: space-between;
    max-width: 300px;
    float: none;
    margin-inline: auto;
    margin-block: 8px;
}
.ProjectItem.LinkManager .CountNumber div{
    display: flex
;
    align-items: center;
    gap: 10px;
    font-size: 16px;
}
.ProjectItem.LinkManager .CountNumber div i{
    font-size: 26px;
}
.ProjectItem.LinkManager .CountNumber b{
    margin: 0;
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex
;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
    border-radius: 50%;
}
.ProjectItem.LinkManager .linkOfCourse{
    border: none;
}
.ProjectItem.LinkManager .linkOfCourse .copyCourseLink{
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 40px;
    border: 1.5px solid var(--hdm-green);
    background: transparent;
    color: var(--hdm-green);
    display: flex
;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.ProjectItem.LinkManager .linkOfCourse .copyCourseLink i{
    color: var(--hdm-green);
    font-size: 22px;

}
.mb-10{
    margin-bottom: 10px !important;
}
#Add_proxy_Ajax{
    display: flex
;
    align-items: flex-end;
}
.addproxyLink{
    border-radius: 20px;
    background: #B7FEC6;
    color: #000 !important;
    padding: 10px 15px;
}
.filter-tab-wrapper{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex
;
    float: right;
    width: 100%;
    gap: 15px;
    cursor: grab;
    border-bottom: 1px solid var(--hdm-blue);
    margin-bottom: 15px;
}
.filter-tab-wrapper li{
    padding: 10px;
}
.filter-tab-wrapper li a{
    text-decoration: none;
    color: var(--hdm-black);
    font-weight: 500;
    font-size: 16px;
    display: flex
;
    align-items: center;
    gap: 3px;
}
.filter-tab-wrapper li .Badge{
    font-size: 14px;
    border-radius: 20px;
    background: var(--hdm-orange);
    width: 39px;
    display: flex
;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.filter-tab-wrapper li.active   {
    border-bottom: 3px solid var(--hdm-orange);
}
.new_design .TicketShow .account_id{
    background: transparent;
    margin-top: 2px;
}
.new_design .list_of_data.ticket .dept{
    padding: var(--badge-padding);
    border-radius: 30px;
    border: none;
    background: #FFD7AA;
    color: var(--hdm-black);

}
.new_design .list_of_data.ticket .imp{
    padding: var(--badge-padding);
    border-radius: 30px;
    background: #E8EBEF;
    color: var(--hdm-black);
}
.new_design .surveyShow{
    background: transparent;
    border: none;
}
.new_design .list_of_data.ticket .st_tick{
    border-radius: 30px;
    background: #98C6FF;
    padding: var(--badge-padding);
    border: none;
    color:#fff;
}
.new_design .list_of_data.ticket .ActionForOrder{
    border-radius: 30px;
    background: var(--hdm-blue);
    padding: 8px 16px;
    border: none;
    color:#fff;
}
.ListOfActionTicket .TransferTicketToDept{
    border-radius: 30px;
    background: linear-gradient(180deg, var(--hdm-blue) 0%, #0250B1 100%);
    box-shadow: 2px 2px 4px 0 rgba(255, 255, 255, 0.50) inset;
    display: flex
;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 30px;
    color: #fff;
    margin: 0;

}
.ListOfActionTicket .FollowTag{
    border-radius: 30px;
    background: linear-gradient(180deg, #FFD7AA 0%, #FFFCF9 100%);
    box-shadow: 2px 2px 4px 0 rgba(255, 255, 255, 0.70) inset, 4px 4px 30px 0 rgba(0, 0, 0, 0.10);
    display: flex;
    color: var(--hdm-orange);


    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 30px;
    margin: 0;
}
.ListOfActionTicket{
    width: 100%;
    float: none;
    display: flex
;
    justify-content: flex-start;
    flex-direction: row;
    gap: 10px;
}
.new_design .showTicketSection .head .TicketTitle{
    float: none;
    width: 100%;
    display: flex
;
    justify-content: center;
    align-items: center;
    color: var(--hdm-blue);
    font-size: 20px;
    font-weight: 700;
}
.new_design .showTicketSection .head{
    float: none;
    display: flex
;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: fit-content;
    background: #fff;
    border: none;
    backdrop-filter: none;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--hdm-orange);
}
.new_design .showTicketSection {
    background: none;
    box-shadow: none;
}
.new_design .showTicketSection .head .TicketId {
    float: none;
    width: 100%;
    display: flex
;
    justify-content: center;
    gap: 10px;
    color: var(--hdm-black);
}
.new_design .showTicketSection .head .TicketId span {
    padding: var(--badge-padding);
    border-radius: 30px;
    font-size: 16px;
    display: flex
;
    align-items: center;
}
.new_design .showTicketSection .head .TicketId span.tid {
    background: #FFD7AA;
}
.new_design .showTicketSection .head .TicketId span.accountid {
    background: #E8EBEF;
}
.new_design .showTicketSection .head .TicketId span.mobile {
    background: #CCE2FF;
}
.new_design .ticketShowItem {
    align-items: flex-start;

}
.new_design .ticketShowItem .messageDiv{
    background: #fff;
    box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.05);
    border-radius: 15px;
    width: calc(100% - 30px);
}
.new_design .ticketShowItem .messageDiv:after {
    top: 20px;
    bottom: inherit;
    border-left-color: #fff;
}
.new_design .ticketShowItem .name {
    margin-bottom: 5px;
    color: var(--hdm-orange);
}
.new_design .ticketShowItem .author {
    margin-top: 15px;
    width: 80px;
}
.new_design .ticketShowItem .author .thumb {
    background-color: #E8EBEF;
    color: var(--hdm-blue);
    width: 55px;
    height: 55px;
}
.new_design .ticketShowItem {
    width: 100%;
    max-width: inherit;
}
.new_design .ticketShowItem .messageDiv .date {
    color: var(--hdm-black);
}
.new_design .showTicketSection .body {
    padding: 0;
}
.ticket-content-wrapper{
    width: calc(80% - 70px);
}
.new_design .ticketShowItem.another .messageDiv{
    background-color: #FFD7AA;
}
.new_design .ticketShowItem.another .messageDiv:after{
    border-left-color:#FFD7AA;
}
.new_design .ticketShowItem.another .name{
    color: var(--hdm-blue);
    text-align: left;
    padding-left: 40px;
}
.new_design .content.TicketShow.SendTicket #replyTicketAjax{
    background-color: transparent;
}
.new_design .content.TicketShow.SendTicket #replyTicketAjax label{
    color: var(--hdm-black);
}
.new_design .Img_selector{
    border: none;
    border-radius: 40px;
    background: #FFF;
    box-shadow: 4px 4px 30px 10px rgba(0, 0, 0, 0.05);
}
.new_design .form-group .Img_selector .box_upload{
    height: 26px !important;
    padding: 0 !important;
    display: flex
;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    color: #8B8996 !important;
    position: relative;
}
.new_design .form-group .Img_selector.uploaded .thumb{
    position: absolute;
    top: 0;
    height: 100%;
    right: 0;
    border-radius: 40px;
}
.new_design .projectList .row{
    margin-bottom: 15px !important;
}