.apexcharts-tooltip span {
    /* background: #212121; */
}

/* MAIN PANEL */
.main-panel {
    padding-bottom: 100px;
}
#app > div.container-scroller > div > div.main-panel {
    width: calc(100% - 240px);
}

/* DASHBOARD */
.border_bg_deco_wh {
border: 2px solid #3c3839 !important;
border-radius: 15px !important;
background: linear-gradient(to bottom, #252122 0%, #353233 100%) !important;
}
#app > div.container-scroller > div > div > div > div:nth-child(1) > div > div > div > div > div > div.icon_text_wh > div:nth-child(1) > div > i{
    height: 25px;
}
#app > div.container-scroller > div > div > div > div:nth-child(1) > div > div > div > div > div:nth-child(2) > div.icon_text_wh > div:nth-child(1) > div > i,
.dash_info_item .icon_box i  {
    height: 22px;
}
#app > div.container-scroller > div > div > div > div:nth-child(1) > div > div > div > div > div:nth-child(3) > div.icon_text_wh > div:nth-child(1) > div > i,
.dash_info_item .icon_box i.ftaw {
    font-size: 17px;
    height: 17px !important;
}

.dash_info_item > .icon_text_wh {
    display: flex;
    align-items: center;
}

/* CLIENTS */
#one-panel > div.clients_grid_container_wh > div:nth-child(1) > div.avatar_title_container_wh > div.dropdown > div {
    transform: translate(-50px, 25px) !important;
}
/* CREATE DOCUMENT */
/* #app > div.container-scroller > div > div > div > form > div.row.flex-grow.m_t_15 > div.col-12.grid-margin.stretch-card > div > div > div.form_wh {
    width: unset !important;
} */
#app > div.container-scroller > div > div > div > form > div.row.flex-grow.m_t_15 > div.col-12.grid-margin.stretch-card > div > div > div > div {
    gap: 10px;
}
#app > div.container-scroller > div > div > div > form > div.row.flex-grow.m_t_15 > div.col-12.grid-margin.stretch-card > div > div > div > div > span.icon_text_wh {
    width: 200px !important;
    /* margin-right: 15px; */
}
#app > div.container-scroller > div > div > div > form > div.row.flex-grow.m_t_15 > div.col-12.grid-margin.stretch-card > div > div > div > div > span.icon_text_wh > span {
    white-space: nowrap;
}

select > option {
    color: black !important;
}

/* SITUATION  CHANTIER */
.card_green_gradient_bg_wh .icon_text_wh {
    display: flex;
    align-items: center !important;
}
.card_green_gradient_bg_wh .icon_text_wh i {
    height: 17px !important;
}
#ongletOne > div > div.col-12.row.m_t_50 > div > div,
#ongletTwo > form > div.col-12.jcsb_wh.m_t_50 > div > div {
    flex-wrap: wrap !important;
    margin-bottom: 15px !important;
}
#ongletOne > div > div.col-12.row.m_t_50 > div > div > span {
    margin-bottom: 10px !important;
}
#ongletTwo > form > div.col-12.jcsb_wh.m_t_50 > div > div {
    /* justify-content: flex-start;
    gap: 15px; */
    flex-wrap: wrap !important;
}
#ongletTwo > form > div.col-12.jcsb_wh.m_t_50 > div > div > span {
    min-width: 250px !important;
    margin-right: 15px !important;
    margin-bottom: 10px !important;
    /* width: 100% !important; */
}
#ongletTwo > form > div.col-12.jcsb_wh.m_t_50 > div > div > div > input {
    min-width: 150px !important;
    /* max-width: 150px !important; */
}


#ongletOne > div > div.col-12.row.m_t_50 > div > div > div > input {
    margin-left: 0 !important;
}
#ongletOne > div > div.col-12.row.m_t_50 > div:nth-child(2) {
    padding-left: 3.5rem !important;
}
/* CLIENT DASHBOARD */
#app > div.container-scroller > div > div > div > div.row.suivi_chantier_header_wh > div.card_green_gradient_bg_wh,
#app > div.container-scroller > div > div > div > div.row.suivi_chantier_header_wh > div.card_green_gradient_container_mini_wh > div.card_green_gradient_bg_wh {
    width: 300px !important;
}
/********Media Query*********/
/*********Mobile*********/
@media (max-width: 1050px) {
    #app > div.container-scroller > div > div > div > div.row.suivi_chantier_header_wh {
        gap: 25px;
    }
    #app > div.container-scroller > div > div > div > div.row.suivi_chantier_header_wh > div.card_green_gradient_container_mini_wh,
    #app > div.container-scroller > div > div > div > div.row.suivi_chantier_header_wh > div.card_green_gradient_bg_wh,
    #app > div.container-scroller > div > div > div > div.row.suivi_chantier_header_wh > div.card_green_gradient_container_mini_wh > div.card_green_gradient_bg_wh {
        width: 100% !important;
    }
}
@media (max-width: 991px) {
    #overview > div > div.col-lg-4.d-flex.flex-column > div > div > div > div {
        padding-top: 0 !important;
        padding-left: 0px !important;
        padding-right: 0 !important;
    }
    .navbar .navbar-brand-wrapper {
        width: 220px;
        background-image: none !important;
    }
    #app > div.container-scroller > div > div.main-panel {
        width: calc(100% - 220px);
    }
    .sidebar_wh {
        width: 220px;
    }



    .displayNone,
    .displayNoneMobile {
        display: none !important;
    }
    /* NAVBAR */
    .navbar .navbar-menu-wrapper .navbar-toggler {
        display: none !important;
    }
    .navbar .navbar-brand-wrapper .navbar-brand.brand-logo,
    .navbar .navbar-brand-wrapper .navbar-toggler:not(.navbar-toggler-right) {
        display: block !important;
    }
    .navbar .navbar-menu-wrapper .navbar-nav .nav-item.dropdown .navbar-dropdown {
        left: unset !important;
        width: fit-content !important;
    }
    /* SIDEBAR */
    .sidebar-offcanvas {
      top: unset !important;
      max-height: unset !important;
      right: unset !important;
    }
    .sidebar-icon-only .sidebar .nav .nav-item .nav-link {
        padding: 10px 0 !important;
        display: flex !important;
        justify-content: center !important;
    }
    .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-title, .sidebar-icon-only .sidebar .nav .nav-item .nav-link .badge, .sidebar-icon-only .sidebar .nav .nav-item .nav-link .menu-sub-title {
        display: none !important;
    }
    .sidebar-icon-only .sidebar .nav .nav-item .nav-link svg {
        display: block !important;
    }

    /* MAIN PANEL */
    .main-panel {
        /* width: 100% !important; */
        padding-bottom: 100px;
    }
    /* CREATE CLIENT */
    #app > div.container-scroller > div > div > div > div:nth-child(2) > div > div.col-12.grid-margin.stretch-card > div > div > form > div.row,
    #panel_form_company > form > fieldset > div.form-card.form_step_page_wh.m_t_30 > div.row {
        flex-direction: column;
        gap: 20px !important;
    }
    #app > div.container-scroller > div > div > div > div:nth-child(2) > div > div.col-12.grid-margin.stretch-card > div > div > form > div.row > div,
    #panel_form_company > form > fieldset > div.form-card.form_step_page_wh.m_t_30 > div.row > div {
        width: 100% !important;
    }

    .picture_input_container_wh {
        position: relative !important;
        top: unset !important;
        right: unset !important;
        width: unset !important;
    }

    /* SUIVI CHANTIER REFERRANT */
    .card_green_gradient_bg_wh {
        width: 300px !important;
        min-width: 300px !important;
    }
    #three-panel > div.jcsb_wh.m_t_30 {
        flex-direction: column !important;
        align-items: center !important;
    }
    /* .bar_visuals_col_container_wh {
        width: 40% !important;
    } */

    /* ************************* CHAT ************************** */
    /* ************************* CHAT ************************** */
    
    .chat_container {
        height: unset !important;
        overflow: auto !important;
        width: 100%;
        margin-left: unset !important;
        margin-right: unset !important;
    }
    .chat_container > div,
    .chat_container > div:nth-child(2) > div > div.stretch-card,
    .chat_container .card .card-body,
    .msger-chat,
    .msger-inputarea,
    .cont_wh {
        padding-left: unset !important;
        padding-right: unset !important;
        /* width: 100% !important; */
    }
    .chat_container > div {
        overflow-x: hidden;
        /* padding-left: 25px !important; */
        
    }
    #overview > div > div.col-lg-8.d-flex.flex-column > div > div > div > div {
        border-left: none !important;
        width: 100% !important;
    }
    #overview > div > div.col-lg-8.d-flex.flex-column > div {
        margin-left: unset !important;
    }
    .msger-chat {
        height: 55vh !important;
        padding-left: 20px !important;
        /* min-height: 300px !important; */
    }
    .msger-inputarea,
    .msger-chat {
        width: 95% !important;
    }
    .msger-inputarea > div:first-child {
        margin-left: 0 !important;
    }
    .backToChatList {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 10px;
    }
    .backToChatList i,
    .backToChatList h4 {
        font-size: 20px;

        color: #a8e863 !important;
    }
    .backToChatList i {
        height: 18px;
        margin-bottom: 8px;
    }
    .backToChatList h4 {
        font-size: 18px;
        margin-bottom: 0;
    }

    .msg-img {
        display: none !important;
    }

    #msgerChat div.msg-bubble > div.msg-info,
    #msgerChat div.msg-bubble > div.msg-text {
        font-size: 14px;
        
    }

    #overview > div > div.col-lg-8.d-flex.flex-columnm > div {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    

    #overview > div > div.col-lg-4.d-flex.flex-column > div > div > div > div > ul > li > .nav-link {
        margin-bottom: 0 !important;
        height: 40px !important;
        display: flex;
        align-items: center !important;
        justify-content: center !important;
    }
    #sharedfiles-tab {

    }

    
  }

  @media (max-width: 840px) {
    .card_green_gradient_bg_wh {
        width: 100% !important;
    }
    
  }
  @media (max-width: 768px) {
    /* NAVBAR */
    .navbar .navbar-brand-wrapper .navbar-brand.brand-logo,
    .navbar .navbar-brand-wrapper .navbar-toggler:not(.navbar-toggler-right),
    .sidebar-icon-only .navbar .navbar-brand-wrapper {
        display: none !important;
    }
    /* DASHBOARD */
    .amount_pill_wh {
        justify-content: center;
    }
    #overview > div > div.col-lg-4.d-flex.flex-column > div > div > div > div > div > h4,
    #overview > div > div.col-lg-8.d-flex.flex-column > div > div > div > div > h4,
    #app > div.container-scroller > div > div > div > div:nth-child(3) > div > div > div > h4
    {
        text-align: center !important;
    }

    #overview > div > div.col-lg-8.d-flex.flex-column > div > div {
        padding-left: unset !important;
        margin-top: 25px !important;
    }
    #overview > div > div.col-lg-8.d-flex.flex-column > div > div > div > div {
        padding: 10px !important;
        padding-top: 0 !important;
    }
    /* ############################################################################################## */
    #app > div.container-scroller > div > div > div > div:nth-child(3) > div > div > div {
        padding: 0 0px !important;        
    }
    
    /* AJOUT UTILISATEUR */
    #app > div.container-scroller > div > div > div > div.row.mt-5 > div,
    #app > div.container-scroller > div > div > div > div.row.mt-5 > div > div {
        padding-right: 0 !important;
    }
    #app > div.container-scroller > div > div > div > div.row.mt-5 > div > div > form > div.form-group.row {
        gap: 1.5rem !important;
    }

    /* Error page */
    body > div.error_img_container_wh {
        display: flex;
        flex-wrap: wrap;
        justify-content: center !important;
    }
    body > div.error_img_container_wh > h2 {
        font-size: 17px !important;
    }
    body > div.error_img_container_wh > h6{
        font-size: 14px !important;
    }
    /* Parametres page */
    .flexwrap_wh_resp {
        flex-wrap: wrap;
        gap: 15px;
    }

    /* create document */
    #app > div.container-scroller > div > div > div > div > div.col-12.jcc_wh > h1 {
        font-size: 22px !important;
        margin-bottom: 0 !important;
    }
    #app > div.container-scroller > div > div > div > div > div.back-link > a > svg {
        height: 33px !important;
    }
    #dragndropInputTextDoc {
        display: inline-block !important;
    }

    /* SITUATION CHANTIER */
    /* #app > div > div > div > div > div.row.flex-grow.breadcrumb-ss > div.col-12.jcc_wh {
        margin-left: 30px !important;
    } */
    #ongletOne > div > div.col-12.row.m_t_50 {
        margin-left: unset!important;
        margin-right: unset!important;
    }
    #app > div > div > div > div > div.row.flex-grow.breadcrumb-ss > div.col-12.jcc_wh > h1 {
        max-width: 300px !important;
    }
    #ongletOne > div > div.col-12.row.m_t_50 > div {
        margin-top: 10px !important;
    }
    #ongletOne > div > div.col-12.row.m_t_50 > div > div {
        display: inline-block !important;
        margin-bottom: 20px !important;
    }
    #ongletOne > div > div.col-12.row.m_t_50 > div > div > span {
        margin-bottom: 10px !important;
        /* margin-left: 10px !important; */
    }

    #ongletOne > div > div.col-12.row.m_t_50 > div:nth-child(2) {
        padding-left: 15px !important;
    }

    /* #ongletOne > div > div.col-12.row.m_t_50 > div > div {
        padding-left: 10px !important;
    } */


    #ongletTwo > form > div.col-12.jcsb_wh.m_t_50 {
        display: inline-block;
        margin-bottom: 20px !important;
    }
    #ongletTwo > form > div.col-12.jcsb_wh.m_t_50 > div:nth-child(2) {
        margin-top: 15px !important;
    }
    #ongletTwo > form > div.col-12.jcsb_wh.m_t_50 > div > div {
        display: inline-block;
        margin-bottom: 15px !important;
    }
    #ongletTwo > form > div.col-12.jcsb_wh.m_t_50 > div > div > span {
        margin-bottom: 7px !important;
    }

    #ongletTwo > form > div.col-12.m_t_70.pdx_20_wh.d-flex.flex-column.align-items-center > div.d-flex.align-items-center {
        flex-direction: column !important;
    }
    #ongletTwo > form > div.col-12.m_t_70.pdx_20_wh.d-flex.flex-column.align-items-center > div.d-flex.align-items-center > span {
        margin-bottom: 7px !important;
    }
    #ongletTwo > form > div.col-12.m_t_70.pdx_20_wh.d-flex.flex-column.align-items-center > div.d-flex.align-items-center > div > input {
        margin-left: 0 !important;
    }


    /* CHAT */
    #nkd-app > div > div:nth-child(3) > div > div > div {
        padding: 0 0 !important;  
        padding-left: 0 !important;      
        padding-right: 0 !important;
    }
  }


  @media(max-width: 500px) {
    /* CREATE DOCUMENT */
    #app > div.container-scroller > div > div > div > form > div.row.flex-grow.m_t_15 > div.col-12.grid-margin.stretch-card > div > div > div > div {
        flex-direction: column;
        align-items: flex-start;
    }
  }