@charset "UTF-8";

/* Muthusuba */

:root {
	--theme_color: #8F183C;
    --white_color:#ffffff;
    --form-select-color:#e9e9ed;
    --calender-header-col:#dee2e6 ;
    --form-select-border:#a5a3a3;
    --black-opacity:#00000080;
    --black-color:#000000;
    --grey-color:#333333;
    --table-group-color:#cccccc;
    --login-btn-color:#555557;
    --placeholder-color:#6c757d;
    --error-color:red;
    --btn-disable-color:#c0c0c0;
    --btn-disable-bg:#dddddd;
    --btn-focus:#ff4d4d;
    --btn-focus-br:#007bff;
    --table_row_bg:#f2f2f2;
    --menu_show_mob:#33333363;
    --status_green_col:#198754;
    --status_orange_col:#f3752c;
}

body{
    line-height: 1.42857143 !important;
    font-family:Tahoma, Geneva, sans-serif;
}

.theme_gray{
    background-color: var( --table-group-color) !important;
}

.bg-gradient{
    background-image: linear-gradient(90deg,var(--status_green_col) 50%,var(--status_orange_col) 50%) !important;
}

.bg-orange {
    background-color: var(--status_orange_col) !important;
}

.active_role{
    padding: 4px;
    background-color: var(--table_row_bg);
}

.modal_backdrop{
    background-color: var(--menu_show_mob) !important;
}

.modal-footer button:focus {
    border-color: var(--btn-focus-br) !important;
    background-color: var(--btn-focus) !important;
}

.error,
#error_msg {
    color: var(--error-color);
}

.error {
    border-color: var(--error-color);
}

.ui-datepicker .ui-datepicker-prev-hover, 
.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next{
    top: 4px !important;
    border:1px solid var(--table-group-color);
    cursor: pointer;
}

.aimg {
    width: 110px;
    height: 110px;
}

.dt-input{
    border-radius: 0px !important;
}

input:focus::placeholder {
    color: transparent;
}

.dt-input,
.dt-paging-button{
    border: 1px solid var(--form-select-border) !important;
    padding: 0.3em 0.8em !important;
    margin-left: 2px !important;
}

.dt-paging-button{
    background-color: var(--form-select-color) !important;
}

div.dt-processing>div:last-child>div,
div.dt-container div.dt-paging button.dt-paging-button.current:hover,
div.dt-container div.dt-paging button.dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button:hover{
    background: var(--theme_color) !important;
    color: var(--white_color) !important;
    border: 1px solid var(--theme_color) !important;
}

button:disabled {
    cursor: default;
    pointer-events: none;
    color: var(--btn-disable-color) !important;
    background-color: var(--btn-disable-bg) !important;
}

td.child{
    padding: 4px 0px !important;
}

.aimg,
.ui-datepicker .ui-datepicker-prev-hover, 
.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next,
.foot,
#calendar-wrapper .cal-day:hover {
    background-color: var(--form-select-color);
}

.recurringTr {
	background-color: #fac8c8 !important;
}

#stmt_colloque_tbody tr.total_row{
    background-color: var(--calender-header-col) !important;
}

#stmt_tbody tr.category_header,
#tablepagination tr.group {
    background-color: var(--table-group-color) !important;
}

.view_btn_border,
.ui-datepicker-month,
.ui-datepicker-year,
.filter_border {
    border: 1px solid var(--theme_color) !important;
}

.date_filter_radius{
    border-radius: 0px 4px 4px 0px;
    border-left: 0px !important;
}

.filter_radius{
    border-radius: 4px 0px 0px 4px !important;
    border-right: 0px !important;
}

select.select_filter {
    background-image:none !important 
}

.closeex {
    background-color: var(--login-btn-color) !important;
}

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, 
.ui-widget-header .ui-priority-secondary,
.modal_fade_bg {
    opacity: 1 !important;
}

.modal_fade_bg{
    background-color: var(--black-opacity);
}

.calendar-header{
    border: 1px solid var(--calender-header-col); 
}

.dt-input:focus,
.dt-input:hover{
    border: 1px dashed var(--form-select-border) !important;
}

.form-select:focus,
.form-select:hover {
    border: 1px dashed var(--form-select-border);
}

.planificationTable .planificationTd,
.topnavul .submenu a.active{
    background-color: var(--white_color) !important;
}

.form-select option {
    color: inherit;
}

.glyphicon-chevron-left::before{
    content: "❮";
}

.glyphicon-chevron-right::before{
    content: "❯";
}

/* textarea:disabled {
    background-color: var(--white_color) !important;
    border: 0px !important;
    resize: none !important;
} */

input[type="radio"],
input[type="checkbox"],
a span img,
.cursor-pointer{
    cursor: pointer !important;
}

.text-preserve {
    white-space: pre-line !important;
}

input[type="checkbox"][disabled],
input[type="radio"][disabled]{
    pointer-events: auto !important;
}

input:disabled + label,
.disabled label,
input[type="checkbox"][disabled],
input[type="radio"][disabled],
.cursor-not-allowed{
    cursor: not-allowed !important;
}

.prev:hover,
.next:hover,
.topnavul .active,
button.ui-datepicker-current,
.button.ui-datepicker-close,
.ui-widget-header,
.theme_bg {
    background-color: var(--theme_color) !important;
} 

.badge{
    padding:4px 4px 5px 4px !important;
}

.calendar .calendar-header table th,
.fs-24 {
    font-size: 24px !important;
}

div.error,
.fs-14{
    font-size: 14px !important;
}

.fs-12{
    font-size: 13px !important;
}

.fs-10,
div.show_menu .expand-name,
div.show_menu ul.nav_list li a{
    font-size: 10px !important;
}

.h-36px{
    height: 36px;
}

.h-53px{
    min-height: 53px;
    height: 53px;
}

.reload_20px,
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next,
.form-check-input.wh-20px,
.wh-20px{
    height:20px !important;
    width: 20px !important;
}

.form-check-input{
    height:14px !important;
    width: 14px !important;
    min-height:14px !important;
    min-width: 14px !important;
}

div.show .submenu{
    margin-left: 3px !important;
}

.side-bg{
    border-right: 1px solid var(--theme_color);
}

ul.nav-tabs li.nav-item a.hover,
ul.nav-tabs li.nav-item a.active{
    border-color: var(--theme_color) !important;
}

table.dataTable > tbody > tr.child ul.dtr-details > li{
    border-bottom: 0px !important;
}

ul.nav-tabs li.nav-item a.active,
.theme-col,
.topnavul .active1,
.topnavul .active1:hover,
ul.submenu .topnavul a:hover,
ul.submenu .topnavul a.active{
    color: var(--theme_color) !important;
}

.icon_rotate{
    rotate: 180deg;
}

.icon_rotate_90{
    rotate: -90deg;
}

.sticky-top{
    z-index: 100 !important;
}

.list_modal .btn_sec,
.dtr-details,
#tablepagination_wrapper{
    width:100% !important;
}

.topRecordInfo{
    min-height: 30px !important;
}

.collapse.submenu.hidden,
div:has(.show) .contact_pdf ,
div:has(.show) .new_contact ,
.d_mob_none,
.dtr-details .visible,
.hide-cell,
.plan_list .btn_sec,
.remove_button,
.ui-datepicker-close,
a.active .menu_up_icon,
a.active .menu_down_icon,
.dtr-title,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
.dtr-data .hidden,
.situ_actions_div:has(.meetcreate) .meetlist_space,
.ui-button-icon-space,
.ui-icon-closethick,
#menu_close,
.plan_last_filter input,
.ui-datepicker-trigger,
.hide-calendar .ui-datepicker-calendar,
.filter-none input,
.jqx-listbox-bottomright,
#jqxScrollWraphorizontalScrollBarsi_dest_rue_jqxWidget,
#horizontalScrollBarsi_autre_rue_jqxWidget,
#horizontalScrollBarrue_jqxWidget,
#tablepagination_filter {
    display: none !important;
}

.spinner,
.active_icon,
.hidden {
    display: none;
}

.dt-scroll {
    flex-direction: column;
    position: relative;
}

.dtr-details li{
    padding-bottom: 0px !important;
    padding-top: 2px !important;
}

.dropzone,
.dt-scroll,
.region .dtr-data,
.dtr-details li,
.ui-datepicker-title{
    display: flex;
}

.data5 span.ren{
    display: block !important;
}

.prev:hover,
.next:hover,
.topnavul a.active1.active:hover,
.topnavul a.active,
.topnavul .active span,
.ui-state-active, .ui-widget-content .ui-state-active,
#titre .selected,
button.ui-datepicker-current,
.button.ui-datepicker-close,
.tabtext:hover,
.tabtext.active {
    color:var(--white_color) !important;
}

.tfoot_position {
	display: table-header-group;
	position: sticky !important;
}

.add1 {
    background: url("../images/add-sign.png") no-repeat scroll 6px 7px var(--theme_color);
}

#groupingSwitch {
    background: url("../images/list_icons.png") no-repeat scroll 2px -77px;
}

.w-5{
    width: 5%;
}

.w-15{
    width: 15%;
}

.w-20{
    width: 20% !important;
}

.mh-350{
    max-width: 350px;
    max-height: 350px;
}

.w-30{
    width: 30% !important;
}

.w-35{
    width: 35% !important;
}

.w-40{
    width: 40% !important;
}

.w-45{
    width: 45% !important;
}

.w-55{
    width: 55%;
}

.w-60{
    width: 60%;
}

.w-65{
    width: 65%;
}

.w-70{
    width: 70%;
}

.w-93{
    min-width: 93%;
}

.show_menu .logo_width .w-75{
    width: 92% !important;
}

.wd-17px{
    width:17px !important;
}

.wd-45px{
    min-width: 45px !important;
}

.wd-50px{
    width: 50px !important;
}

.wd-60px{
    width: 60px !important;
}

.wd-80px{
    width: 80px !important;
}

.wd-90px{
    width: 90px !important;
}

.wd-100px{
    width: 100px !important;
}

.wd-110px{
    width:110px !important;
}

.wd-120px{
    width:120px !important;
}

.wd-140px{
    width:140px !important;
}

.wd-150px{
    width:150px !important;
}

.wd-160px{
    width:160px !important;
}

.wd-180px{
    width:180px !important;
}

.wd-200px{
    width:200px !important;
}

.wd-250px{
    width:250px !important;
}

#showQrcode img{
    width:300px !important;
}

.wd-350px{
    width:350px !important;
}

.validated,
.not_ready_to_validate,
.equiper_validated,
.ready_to_validate,
.billed,
.d_inblock,
.introduction_equiper {
    display: inline-block;
}

.wd-30px {
    height: 30px !important;
    width: 30px !important;
    min-width: 30px !important;
}

.wd-20px{
    height: 26px !important;
    width: 26px !important;
    min-width: 26px !important;
}

.z-9999{
    z-index: 9999 !important;
}

.z-10000{
    z-index: 10000 !important;
}

.z-10001{
    z-index: 10001 !important;
}

.ui-autocomplete{
    z-index: 1051 !important;
}

.z-3{
    z-index: 3 !important;
}

.modal-backdrop,
.z-2{
    z-index: 2 !important;
}

.not_editable {
    pointer-events: none;
}

span.restoreicon {
    background: url("../images/reload.png");
    background-size: cover;
    float: left;
}

span.ren {
    background: url("../images/contact_select.png");
    background-size: cover;
    float: left;
}

.datacontact5 span.situlist {
    background: url("../images/list_icons.png") no-repeat scroll -57px 2px;
}

td.datameeting5 span,
.datacontact5 .csrtDIV {
    display: inline;
    float: left;
}

.not_ready_to_validate {
    background: url("../images/delete_status.png");
    background-size: cover;
    float: left;
}

.pdf_icon div{
    background: url("../images/pdf_btn_icon.png");
    background-size: cover;
    float: left;
}

span.stmt_pdf,
span.situ_pdf_carte {
    background-image: url("../images/pdf_icon.png");
    background-size: cover;
    float: left;
}

span.meetlist {
    background: url("../images/situation_list.png");
    background-size: cover;
    float: left;
}

span.meetcreate {
    background: url("../images/situation_creation.png");
    background-size: cover;
    float: left;
}

span.viewicon {
    background: url("../images/view.png");
    background-size: cover;
    float: left;
}

.situation_open {
    background: url("../images/tick.png");
    background-size: cover;
    float: left;
}

span.delete {
    background: url("../images/delete.png");
    background-size: cover;
    float: left;
}

span.deleteviewicon,
div.deleteviewicon {
    background: url("../images/permenant_del.png");
    background-size: cover;
    float: left;
}

.equiper_validated {
    background: url("../images/double_status.png");
    background-size: cover;
    float: left;
}

.validated {
    background: url("../images/valid.png");
    background-size: cover;
    float: left;
}

.ready_to_validate {
    background: url("../images/valider.png");
    background-size: cover;
    float: left;
}

.billed {
    background: url("../images/gray_status.png");
    background-size: cover;
    float: left;
}

.introduction_equiper {
    background: url("../images/introduction_equiper.png") no-repeat;
    background-size: cover;
    float: left;
}

.situation_closed {
    background: url("../images/remove_icon.png");
    background-size: cover;
    float: left;
}

.situation_pending {
    background: url("../images/status_icon.png");
    background-size: cover;
    float: left;
}

.data5 span.ren {
    background: url("../images/situation.ico") no-repeat scroll 0 0;
    width: 16px !important;
    height: 16px !important;
    margin: 2px auto;
    cursor: pointer;
}

.ui-dialog-titlebar-close{
    background-image: url("images/ui-icons_777777_256x240.png");
    background-position: -95px -127px;
    display: inline-block;
    border: 1px solid var(--table-group-color);
    border-radius: 3px;
}

.ui-datepicker .ui-datepicker-prev-hover, 
.ui-datepicker .ui-datepicker-prev{
    left: 2px !important;
}

.ui-datepicker .ui-datepicker-next-hover, 
.ui-datepicker .ui-datepicker-next{
    right: 3px !important;
}

.ui-datepicker select.ui-datepicker-month, 
.ui-datepicker select.ui-datepicker-year{
    width: 50% !important;
}

#calendar-wrapper .cal-day,
#calendar-wrapper .cal-heading {
    width: 14.28% !important;
}

#calendar-wrapper .cal-day {
    height: 100px;
}

.hide {
    visibility: hidden;
}

.show {
    display: table-cell !important;
}

.stmt_colloque_date-error .error{
    white-space: nowrap;
}

.breadcrumb-item + .breadcrumb-item::before{
    padding-right: 4px !important;
}

.dataTables_paginate {
    padding-right: 0px !important;
}

.dataTables_wrapper .dataTables_processing {
    height: 62px !important;
}

.dropzone{
    height: 200px !important;
    align-items: center;
    justify-content: center;
}

.spinner{
    text-align: center !important;  
}

.sidebar {
    width: 180px; 
    min-width: 180px;
}

.sidebar.show_menu {
    width: 80px;
    min-width: 80px; 
}

.content-area {
    width: calc(100% - 180px); 
}

.content-area.content-show{
    width: calc(100% - 80px); 
}

.img_width{
    width: 230px;
}

.dt-scroll-foot {
    order: 1;
    top: 0;
}
  
.dt-scroll-head {
    order: 2;
    top: 34.5px;
}

.dt-scroll-foot,
.dt-scroll-head {
    flex: 0 0 auto;
    position: sticky !important;
    z-index: 3;
}

table.dataTable > tbody > tr.selected > *{
    box-shadow: none !important;
    color: var(--black-color) !important;
}

.modal-backdrop,
table.dataTable tbody tr.selected{
    background-color: #0000 !important;
}

.modal.fade .modal-dialog{
    transition: none !important;
    transform: none !important;
}

.dt-scroll-body {
    order: 3;
    flex: 1 1 auto;
    background: var(--white_color) !important;
    max-height: 100% !important;
}

.collapse.submenu.shown {
	display: block !important;
}

.breadcrumb-item + .breadcrumb-item::before{
    content: '|';
}

.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal !important;
}

.swiped-row {
    transition: transform 0.3s ease;
    position: relative;
    transform : translateX(-100px);
}

.swiped-action {
    position: absolute !important;
    right: 0;
    top: 0;
    transition: transform 0.3s ease;
    transform : translateX(100px);
    width: 100px;
    height: 100%;
}

.wd-174px {
    width : 185px !important;
}

#planPresenceTbody .swiped-row,
#planificationTbody .swiped-row{
    transform : translateX(-185px) !important;
}

table.dataTable > tbody#pa_situ_container > tr:last-child > td,
table.dataTable > tbody#pa_support_network_container > tr:last-child > td,
table.dataTable > tbody#pa_autres_prestation_container > tr:last-child > td,
table.dataTable > tbody#pa_besoins_container > tr:last-child > td,
table.dataTable > tbody#pa_type_container > tr:last-child > td,
table.dataTable > tbody > tr:last-child > td.comment_sec{
    border-bottom: 1px solid var(--calender-header-col) !important;
}

table.dataTable > tbody > tr:last-child{
    border-bottom: 1px solid var(--white_color) !important;
}

.planification_list .dt-scroll-body,
.overflow-x-hidden {
    overflow-x: hidden !important;
}

.releves_modal_overflow,
.Pa_modal_overflow.desktop_Pa_modal_overflow,
.dashboard_oveflow,
.Pa_modal_overflow{
    height:calc(100vh - 90px);
}

.edit_equiper_overflow,
.presences_overflow,
.situation_overflow,
.contact_overflow{
    height: calc(100vh - 130px);
}

.fixed-table{
    height:calc(100vh - 148px);
}

.stmt_tab_overflow{
    height: calc(100vh - 187px);
}

.tab_modal_overflow{
    height:calc(100vh - 250px);
}

.pa_mob_overflow{
    height:calc(100vh - 165px);
}

.menu-width .pa_btn {
    margin-left:auto !important;
}

option:disabled{
    color: var(--btn-disable-color) !important;
}

input.date_filter_input:placeholder-shown{
    background: none !important;
}

#contactSearchResults tfoot input:placeholder-shown,
tfoot input:placeholder-shown {
    background: url("../images/search-icon.png") no-repeat scroll 96% 6px;
}

.calndr {
    background: url("../images/calendar.gif") 95% 7px no-repeat;
}

.top-35{
    top:34.5px !important;
}

.top-42{
    top:42.3px !important;
}

.dt-column-header {
    flex-direction: row !important;
}

@media screen and (max-width:992px) {

    .fs-18{
        font-size: 18px !important;
    }

    .menu-width .modal_btn {
        width: 100% !important;
        display: flex;
        justify-content: center !important;
    }

    .text,
    #error_msg,
    .ui-datepicker table,
    .ui-datepicker-year,
    .ui-datepicker-month,
    .calendar table td, 
    .calendar table th,
    .fs-16{
        font-size: 16px !important;
    }

    .top-8px{
        top:-8px !important
    }

    .border_mob{
        border: 1px solid var(--calender-header-col);
    }

    #notification_table .dt-scroll-head thead th.notif_details,
    #planification_table .dt-scroll-foot tfoot th.statusTd,
    #notification_table .dt-scroll-body thead,
    #notification_table .dt-scroll-body tfoot,
    .mob_head,
    thead td.d_md_flex.comment_display,
    th.d_md_flex.comment_display{
        display: none !important;
    }
    
    .dt-column-footer,
    .dt-column-header,
    .dt-column-title{
        width: 100%;
    }

    .min_wd_60px{
        min-width: 60px !important;
    }

    .min_wd_80px{
        min-width: 80px !important;
    }

    .mob_wd_50px{
        width:50px !important;
    }

    .wd-175px{
        width:175px !important;
    }

    .suiv_removeRow,
    .suivi_open,
    .h-41px{
        height: 41px;
    }

    .border_bottom_head{
        border-bottom: 1px solid var(--calender-header-col);
    }

    .mob_wd_180px{
        width:180px !important;
    }

    .notification_body .dt-empty,
    li.id .wd-20px.status_w_100{
        width: 100% !important;
    }

    .wd_60px{
        width: 70px !important;
    }

    .comment_overflow{
        max-height: calc(100dvh - 200px);
    }
    /* .contact_list .mob_h_34px{
        min-height: 38px;
    } */
}
@media screen and (min-width:992px) {
    .top-8px{
        top:-6px !important
    }

    .plan_body .details .py-1{
        padding: 0px !important;
    }

    .wd_60px{
        width: 60px !important;
    }

    .wd-125px{
        width:125px !important;
    }

    tr.frais_row_height {
        height: 80px !important;
    }

    .wd-175px{
        width:160px !important;
    }

    .notification_sec div:has(.show) .notification_modal .modal-content{
        width: 850px !important;
    }

    .presences_modal,
    .notification_sec #edit_presences_meeting .modal-content,
    .notification_sec #modifyPlanification .modal-content,
    .notification_sec.modal-open #modifyPlanification .modal-content,
    .list_modal div:has(.show) .top_menu ,
    .notification_sec div:has(.planification_modal.show) .top_menu,
    .notification_sec div:has(.planification_modal.show):has(.confirmation_modal.show) .top_menu,
    .wd-850px{
        width: 850px !important;
        /* min-width: 850px; */
    }

    .notification_sec div:has(.confirmation_modal.show) .top_menu,
    .list_modal.wd-850px ,
    .dekop_wd .wd-850px{
        width: 1350px !important;
    }

    .desk_w_20{
        width: 20%;
    }

    .dekop_wd .main-page-content,
    .wd-1350px{
        max-width: 1350px !important;
    }

    #tablepagination_wrapper .wd-20px {
        margin-right:6px;
    }

    a.btn,
    button.btn,
    div.error,
    .fs-18,
    .text,
    #error_msg,
    .ui-menu,
    .ui-datepicker table,
    .ui-datepicker-year,
    .ui-datepicker-month,
    .calendar table td, 
    .calendar table th,
    .fs-16{
        font-size: 14px !important;
    }

    .border_desk{
        border: 1px solid var(--calender-header-col);
    }

    .h-50px{
        height: 50px;
    }

    .pa_mar_top_38,
    .mar_top_38{
        margin-top: -38px;
    }

    .evolution_modal_overflow,
    .inter_overflow{
        height:calc(100vh - 80px);
    }

    .edit_prenses_overflow,
    .edit_situation_overflow,
    .edit_suivi_overflow,
    .plan_tab_overflow,
    .edit_contact_overflow,
    div:has(.update_error_msg) .inter_overflow,
    div:has(.update_msg) .inter_overflow{
        height:calc(100vh - 125px);
    }

    .config_overflow{
        height: calc(100vh - 110px) !important;
    }  

    .address_message .edit_contact_overflow{
        height:calc(100vh - 138px);
    }

    div:has(.update_error_msg) .edit_prenses_overflow,
    div:has(.update_msg) .edit_prenses_overflow,
    div:has(.update_error_msg) div.plan_tab_overflow,
    div:has(.update_msg) div.plan_tab_overflow,
    div:has(.update_error_msg) .edit_situation_overflow,
    div:has(.update_msg) .edit_situation_overflow,
    div:has(.update_error_msg) .edit_suivi_overflow,
    div:has(.update_msg) .edit_suivi_overflow,
    div:has(.update_error_msg) .edit_contact_overflow,
    div:has(.update_msg) .edit_contact_overflow{
        height:calc(100vh - 162px);
    }

    div:has(.update_error_msg) div.pa_mob_overflow{
        height:calc(100dvh - 210px) !important;
    }

    div:has(.update_error_msg) .stmt_tab_overflow,
    div:has(.update_msg) .stmt_tab_overflow{
        height:calc(100dvh - 230px) !important;
    }

    .menu_overflow{
        height:calc(100vh - 240px);
    }

    div.show_menu .menu_overflow{
        height:calc(100vh - 285px);
    }

    .prences_overflow{
        height:calc(100vh - 368px);
    }

    div:has(.update_msg) .prences_overflow{
        height:calc(100vh - 415px);
    }

    .mob_h_34px,
    .h_34px{
        min-height: 44px;
    }

    .edit_situation .flex-wrap{
        flex-wrap:nowrap !important;
    }
}
@media screen and (min-width:501px) and (max-width:720px) {

    .edit_presences .edit_prenses_overflow,
    div.edit_suivi_overflow,
    .edit_contact_overflow{
        height:calc(100dvh - 185px) !important;
    }

    div.edit_equiper_overflow{
        height:calc(100dvh - 150px) !important;
    }

    div.plan_tab_overflow ,
    div.edit_situation_overflow,
    div#planification_table .fixed-table{
        height:calc(100dvh - 205px) !important;
    }

    div.prences_overflow{
        height:calc(100dvh - 490px) !important;
    }

    div.stmt_tab_overflow{
        height:calc(100dvh - 300px) !important;
    }
    
    .mar_top_38{
        margin-top:0px !important
    }
}

@media screen and (min-width:501px) and (max-width:991px) {
    #showQrcode img{
        width:250px !important;
    }

    .h_34px{
        min-height: 44.5px;
    }

    .mar_top_38{
        margin-top: -38px;
    }

    #notification_table .row_height{
        height: 75px !important;
    }

    tr.frais_row_height {
        height: 95px !important;
    }

    .comment_column_head,
    #tablepagination_paginate a{
        display: none !important;
    }

    .dvh-100{
        height: 100dvh !important;
    }

    .menu_overflow{
        height:calc(100dvh - 225px);
    }

    div.show_menu .menu_overflow{
        height:calc(100dvh - 265px);
    }

    .stmt_equip_list .fixed-table{
        height:calc(100dvh - 85px) !important;
    }

    .inter_situation_list .fixed-table{
        height:calc(100dvh - 96px);
    }

    .inter_overflow,
    .evolution_modal_overflow{
        height:calc(100dvh - 100px); 
    }

    .suivi_overflow,
    .situation_overflow{
        height:calc(100dvh - 160px);
    }

    .releves_modal_overflow,
    .edit_equiper_overflow,
    .edit_presences .edit_prenses_overflow,
    .edit_suivi_overflow,
    .Pa_modal_overflow,
    .config_overflow,
    div:has(.update_msg) div.suivi_overflow{
        height:calc(100dvh - 113px);
    }

    .fixed-table{
        height:calc(100dvh - 130px);
    } 

    div:has(.update_msg) .Pa_modal_overflow{
        height:calc(100dvh - 130px) !important;
    }

    #presences_equip_table .fixed-table{
        height:calc(100dvh - 135px);
    }

    .plan_tab_overflow,
    .edit_situation_overflow,
    .edit_prenses_overflow,
    .edit_contact_overflow{
        height:calc(100dvh - 145px);
    }

    .contact_overflow{
        height: calc(100dvh - 185px) !important;
    }

    .edit_presences div:has(.update_msg) div.edit_prenses_overflow,
    div:has(.update_msg) div.situation_overflow,
    div:has(.update_msg) div.edit_suivi_overflow{
        height: calc(100dvh - 150px) !important;
    }

    .address_message .edit_contact_overflow,
    div:has(.update_msg) .inter_overflow{
        height:calc(100dvh - 155px);  
    }

    div:has(.update_msg) .releves_modal_overflow,
    .stmt_equip_list .dt-scroll-body,
    .inter_situation_list .dt-scroll-body{
        height:calc(100dvh - 170px) !important;
    }

    #notification_table .dt-scroll-body,
    div:has(.update_error_msg) div.edit_suivi_overflow{
        height: calc(100dvh - 175px) !important;
    }

    div:has(.update_error_msg) div.situation_overflow,
    div:has(.update_error_msg) .inter_overflow{
        height:calc(100dvh - 180px);
    }

    div:has(.update_msg) div.edit_contact_overflow{
        height: calc(100dvh - 185px) !important;
    }

    #planification_table .fixed-table,
    div:has(.update_msg) div.contact_overflow,
    div:has(.update_msg) div.edit_prenses_overflow,
    div:has(.update_msg) div.plan_tab_overflow,
    div:has(.update_msg) div.edit_situation_overflow{
        height: calc(100dvh - 190px) !important;
    }

    .dt-scroll-body,
    #ProchesAidantsContainer .dt-scroll-body,
    div:has(.update_error_msg) div.edit_contact_overflow{
        height: calc(100dvh - 210px) !important;
    }

    div:has(.update_error_msg) div.edit_prenses_overflow,
    div:has(.update_error_msg) div.plan_tab_overflow,
    div:has(.update_error_msg) div.edit_situation_overflow{
        height: calc(100dvh - 215px) !important;
    }

    div:has(.update_error_msg) div.contact_overflow,
    .stmt_tab_overflow{
        height: calc(100dvh - 220px) !important;
    }

    div:has(.update_msg) .stmt_tab_overflow{
        height:calc(100dvh - 270px) !important;
    }

    .collform_list div:has(.update_msg) .dt-scroll-body{
        height:calc(100dvh - 250px) !important;
    }

    div:has(.update_error_msg) #contact_list .dt-scroll-body{
        height:calc(100dvh - 255px) !important;
    }

    .pa_mob_overflow,
    div:has(.update_error_msg) div.suivi_overflow{
        height:calc(100dvh - 255px);
    }

    #planification_table .dt-scroll-body,
    div:has(.update_error_msg) .stmt_tab_overflow,
    .prences_overflow .dt-scroll-body{
        height: calc(100dvh - 275px) !important;
    }

    div:has(.update_error_msg) div.pa_mob_overflow{
        height: calc(100dvh - 310px) !important;
    }

    div:has(.update_msg) .prences_overflow{
        height:calc(100vh - 455px);
    }

    .prences_overflow {
        height:calc(100vh - 400px);
    }

    .content-show {
        width: calc(100% - 80px) !important; 
    }

    .presences_overflow,
    tr:has(.comment_display div:empty) td.comment_display,
    #ProchesAidantsContainer .fixed-table{
        height: calc(100dvh - 138px);
    }

    .plan_body .border-bottom,
    .border_bottom{
        border-bottom:0px !important
    }
    
    .mob_border_btn,
    .border_head_btn{
        border-bottom: 1px solid var(--calender-header-col) !important;
    }

    #planificationTbody td.child,
    #presences_equip_table td.child,
    #planification_table td.child,
    .dtr-data{
        width:100% !important;
    }

    #notification_table colgroup,
    .d_md_none,
    .plan-child-smallscreen td.benificier,
    .plan-child-smallscreen td.region{
        display: none !important; 
    }

    .ipad_w_5{
        width: 5% !important;
    }

    .ipad_w_10{
        width: 10% !important;
    }

    .ipad_w_15{
        width: 15% !important;
    }

    .ipad_w_20{
        width: 20% !important;
    }

    .ipad_w_25{
        width: 25% !important;
    }

    .ipad_w_50{
        width: 50% !important;
    }

    .ipad_w_60{
        width: 60% !important;
    }

    .ipad_w_30{
        width: 30% !important;
    }

    .ipad_w_35{
        width: 35% !important;
    }

    .ipad_w_40{
        width: 40% !important;
    }

    .ipad_w_45{
        width: 45% !important;
    }

    #presences_equip_table .dt-scroll-body,
    #planification_table .dt-scroll-body,
    #notification_table .dt-scroll-body{
        overflow-x: hidden !important;
    }

    #planificationTbody tr.child,
    #presences_equip_table tr.child,
    #planification_table tr.child{
        display: flex;
        padding: 0px;
    }
    
    .content-show #configuration_table tr.presences_wrap,
    .content-show #evolutionTableBody td.child,
    .content-show #edit-planification tr.presences_wrap,
    .content-show .dt-scroll-body tbody tr.presences_wrap,
    .content-show .stmTable tr.suivi_wrap,
    .content-show .dt-scroll-body tbody tr.presences_wrap.groupTopTR,
    .content-show .dt-scroll-body tbody tr.presences_wrap.groupTR,
    .content-show .dt-scroll-head thead tr.presences_wrap,
    .content-show .dt-scroll-foot tr.presences_wrap,
    .content-show .dt-scroll-body tbody tr.notification_web,
    .content-show .dt-scroll-head thead tr.notification_web,
    .content-show .dt-scroll-foot tr.notification_web{
        width: calc(100vw - 95px) !important;
    } 

    #configuration_table tr.presences_wrap,
    #evolutionTableBody td.child,
    .dt-scroll-body tbody tr.presences_wrap,
    #edit-planification tr.presences_wrap,
    .stmTable tr.suivi_wrap,
    .dt-scroll-body tbody tr.presences_wrap.groupTopTR,
    .dt-scroll-body tbody tr.presences_wrap.groupTR,
    .dt-scroll-head thead tr.presences_wrap,
    .dt-scroll-foot tr.presences_wrap,
    .dt-scroll-body tbody tr.notification_web,
    .dt-scroll-head thead tr.notification_web,
    .dt-scroll-foot tr.notification_web{
        display: flex;
        flex-wrap: wrap;
        width: calc(100vw - 195px) !important;
    }

    .mob_wd_110px{
        width:180px !important;
    }

    .top_75{
        top: 71px !important;
    }

    .carousel-item-start{
        transform: translateX(0) !important;
    }

    .edit_situation .flex-wrap{
        flex-wrap:nowrap !important;
    }
}

@media screen and (max-width:500px) {   
    .intervenant_details #ui-id-1{
        height: 200px !important;
    }

    #notification_table .row_height{
        height: 100px !important;
    }

    .mob_table .fixed-table{
        height: calc(100dvh - 86px) !important;
    }
    
    .edit_equiper_overflow,
    .evolution_modal_overflow,
    .calendar_overflow{
        height:calc(100dvh - 132px);
    }

    div:has(.inter_pdf_btn) .fixed-table {
        height:calc(100dvh - 104px) !important;
    }

    .Pa_modal_overflow{
        height:calc(100dvh - 125px);
    }

    .config_overflow,
    .inter_overflow,
    .suivi_overflow{
        height: calc(100dvh - 135px) !important;
    }

    .releves_modal_overflow,
    #modifyEvolution .Pa_modal_overflow{
        height:calc(100dvh - 145px);
    }

    .fixed-table{
        height:calc(100dvh - 150px);
    }

    div:has(.update_error_msg) .calendar_overflow {
        height: calc(100dvh - 150px) !important;
    }

    .mob_presences_overflow{
        height:calc(100dvh - 200px) !important;
    }

    .mob_table .dt-scroll-body,
    #ProchesAidantsContainer .fixed-table{
        height: calc(100dvh - 164px);
    }

    .presences_overflow,
    .edit_prenses_overflow,
    .plan_tab_overflow,
    .edit_situation_overflow,
    .edit_suivi_overflow,
    .edit_contact_overflow{
        height:calc(100dvh - 170px) !important;
    }

    .contact_overflow,
    .situation_overflow,
    div:has(.update_msg) .releves_modal_overflow,
    div:has(.update_msg) .Pa_modal_overflow,
    div:has(.update_msg) div.situation_overflow,
    div:has(.update_msg) .suivi_overflow,
    .edit_presences_overflow,
    div:has(.update_msg) .inter_overflow{
        height:calc(100dvh - 175px) !important; 
    }

    .address_message .edit_contact_overflow{
        height:calc(100dvh - 185px) !important;
    }

    #presences_equip_table .fixed-table{
        height:calc(100dvh - 192px);
    }

    .inter_situation_list .dt-scroll-body{
        height:calc(100dvh - 195px) !important;
    }

    div:has(.update_error_msg) #ProchesAidantsContainer .fixed-table{
        height:calc(100dvh - 200px);
    }

    div:has(.update_msg) .mob_presences_overflow {
        height: calc(100dvh - 220px) !important;
    }

    #notification_table .dt-scroll-body,
    .stmt_equip_list .dt-scroll-body,
    div:has(.update_error_msg) div.suivi_overflow{
        height: calc(100dvh - 205px) !important;
    }

    div:has(.update_msg) div.plan_tab_overflow,
    div:has(.inter_pdf_btn) .dt-scroll-body,
    div:has(.update_msg) div.situation_overflow,
    div:has(.update_msg) div.edit_contact_overflow{
        height:calc(100dvh - 210px) !important;
    }

    div:has(.update_msg) div.edit_situation_overflow,
    div:has(.update_msg) div.edit_suivi_overflow{
        height: calc(100dvh - 220px) !important;
    }

    #planification_table .fixed-table{
        height:calc(100dvh - 222px);
    }

    .dt-scroll-body{
        height: calc(100dvh - 234px) !important;
    }

    #ProchesAidantsContainer .dt-scroll-body{
        height: calc(100dvh - 240px) !important;
    }

    .planification_overflow .dt-scroll-body{
        height: calc(100dvh - 247px) !important;
    }

    .situation_list .dt-scroll-body,
    div:has(.update_msg) div.presences_overflow,
    div:has(.update_error_msg) .inter_overflow{
        height:calc(100dvh - 250px) !important;
    }

    div:has(.update_msg) div.contact_overflow,
    div:has(.update_error_msg) .suivi_overflow{
        height:calc(100dvh - 255px) !important;
    }

    div:has(.update_msg) div.edit_prenses_overflow{
        height: calc(100dvh - 260px) !important;
    }

    .planification_list .dt-scroll-body{
       height:calc(100dvh - 275px) !important; 
    }

    div:has(.update_error_msg) #ProchesAidantsContainer .dt-scroll-body{
        height: calc(100dvh - 280px) !important; 
    }

    .collform_list div:has(.update_msg) .dt-scroll-body{
        height:calc(100dvh - 285px) !important;
    }

    div:has(.update_error_msg) div.plan_tab_overflow{
        height:calc(100dvh - 290px) !important;
    }

    div:has(.update_error_msg) div.edit_prenses_overflow,
    div:has(.update_error_msg) div.edit_situation_overflow,
    div:has(.update_error_msg) div.edit_contact_overflow,
    div:has(.update_error_msg) div.edit_suivi_overflow,
    div:has(.update_error_msg) div.situation_overflow{
        height:calc(100dvh - 295px);
    }

    div:has(.update_error_msg) div.contact_overflow{
        height:calc(100dvh - 295px) !important;
    }

    div:has(.update_msg) div.pa_mob_overflow{
        height:calc(100dvh - 300px) !important;
    }

    div:has(.update_error_msg) #contact_list .dt-scroll-body{
        height:calc(100dvh - 305px) !important; 
    }

    .stmt_tab_overflow,
    #presences_equip_table .dt-scroll-body{
        height:calc(100dvh - 313px) !important;
    }

    .pa_mob_overflow{
        height:calc(100dvh - 320px) !important;
    }

    div:has(.update_msg) .stmt_tab_overflow{
        height: calc(100dvh - 370px) !important;
    }

    .prences_overflow .dt-scroll-body{
        height: calc(100dvh - 340px) !important;
    }

    #planification_table .dt-scroll-body{
        height:calc(100dvh - 345px) !important;
    }

    div:has(.update_error_msg) div.pa_mob_overflow{
        height:calc(100dvh - 385px) !important;
    }

    div:has(.update_error_msg) .stmt_tab_overflow{
        height:calc(100dvh - 405px) !important;
    }

    .bg-gradient{
        background-image: linear-gradient(var(--status_green_col) 50%,var(--status_orange_col) 50%) !important;
    }

    .status_break{
        display: flex;
        justify-content: center;
    }

    .mob_position{
        position: absolute;
        right:4px;
    }

    .wd_164px{
        width: 164px;
        line-height: 16px !important;
    }

    .collform_status.bg-gradient,
    .wd_145px{
        width: 145px;
        line-height: 16px !important;
    }

    .mob_wd_110px{
        min-width:130px !important;
    }

    .header_toggle{
        height: 70px !important;
    }

    tr:has(.comment_display div:empty) td.notif_align_center{
        height:88px !important;
    }

    .top_75{
        top: 109px !important;
    }
    
    .notification_body tr,
    .notification_body .dt-empty{
        max-width:100% !important;
        display: block;
    }

    .dt-empty{
        max-width:100px !important;
        white-space: normal !important;
    }

    #presences_equip_table .dt-scroll-body,
    #planification_table .dt-scroll-body{
        overflow-x: hidden !important;
    }

    #planificationTbody td.child,
    .dtr-data,
    .sidebar.show_menu,
    .content-area,
    .content-area.content-show,
    tbody .mob_w_100,
    tfoot .mob_w_100,
    #presences_equip_table td.child,
    #planification_table td.child{
        width: 100% !important;
    }

    #configuration_table tr.presences_wrap,
    #edit-planification tr.presences_wrap,
    .stmtTable tr.suivi_wrap,
    .dt-scroll-body tbody tr.notification_web,
    .dt-scroll-head thead tr.notification_web,
    .dt-scroll-foot tr.notification_web,
    .dt-scroll-body tbody tr.presences_wrap.groupTopTR,
    .dt-scroll-body tbody tr.presences_wrap.groupTR,
    .dt-scroll-head thead tr.presences_wrap,
    .dt-scroll-foot tr.presences_wrap {
        display: flex;
        flex-wrap: wrap;
        width: calc(100vw - 16px) !important;
    }
    

    #evolutionTableBody td.child{
        width: calc(100vw - 16px) !important;
    }

    .notification_head,
    #evolutionTableBody tr.child,
    #evolutionTableBody{
        display: block;
        padding: 0px;
    } 

    .ui-datepicker,
    .calendar_pick div.ui-datepicker{
        left: 72.333px !important;
    }

    #showQrcode img{
        width:250px !important;
    }

    .mob_border{
        border-bottom: 1px solid var(--calender-header-col) !important;
    }

    .plan_body .border-bottom,
    .mob_border_btn,
    .logo_border,
    .border_bottom{
        border-bottom:0px !important;
    }

    input[type="radio"],
    .form-check-input{
        height:18px !important;
        width: 18px !important;
    }

    .jqx-listbox{
        width: 97% !important;
    }

    #menu_close{
        display: block !important;
    }

    #notification_table colgroup,
    .d_sm_none,
    .plan-child-smallscreen td.benificier,
    .plan-child-smallscreen td.region{
        display: none !important; 
    }
    
    .comment_column_head,
    #tablepagination_paginate a,
    .bottom ,
    .sidebar {
        display: none; 
    }

    div.show_menu ul.nav_list li a{
        height: 36px !important;
    }

    div.show_menu .expand-name.fs-16,
    div.show_menu ul.nav_list li a{
        font-size: 16px !important;
    }

    .sidebar.show_menu .l-navbar,
    .sidebar.show_menu{
        position:absolute;
        left: 0px;
        top: 0px;
    }

    .sidebar.show_menu .l-navbar  {
        width: calc(100% / 2 * 1.25); 
        z-index: 999;
    }

    .sidebar.show_menu{
        z-index: 998;
        background-color: #33333363;
        height: 100vh;
        display: block;
    }

    .carousel-control-next{
        opacity: 1 !important;
    }

    .w-92{
        width: 92% !important;
    }
}