#autre_cons img{
            max-width: 100%;
        }

.responsive-calendar .day .badge {
    width: 20px !important;
}
    .sivi_modele.active{
        border-left: 5px solid #FFB636;
    }
    .desc_docs{
        max-height: 0px;
        transition: 0.3s;
        overflow: hidden;
    }
    .desc_docs.active{
        max-height: 1000px;
        overflow: auto;
        margin-top: 15px;

    }
    

    .detail_elt_acc {
    background: white;
    border-radius: 5px;
    padding-left: 30px;
    }
    .chat_area .search-bar input {
    margin: 12px;
    padding: 15px 50px;
    border-radius: 100px;
    display: inline-block;
    background-color: #EEF2F5;
    border: none;
    color: var(--body-color);
    background-image: url(data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.966 56.966' fill='%23c1c7cd'%3e%3cpath d='M55.146 51.887L41.588 37.786A22.926 22.926 0 0046.984 23c0-12.682-10.318-23-23-23s-23 10.318-23 23 10.318 23 23 23c4.761 0 9.298-1.436 13.177-4.162l13.661 14.208c.571.593 1.339.92 2.162.92.779 0 1.518-.297 2.079-.837a3.004 3.004 0 00.083-4.242zM23.984 6c9.374 0 17 7.626 17 17s-7.626 17-17 17-17-7.626-17-17 7.626-17 17-17z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 25px 48%;
    font-size: 16px;
}

/*----------------- Theme CSS start ------------------*/
:root {
  --theme-color-1: #1089FF;
  --theme-color-2: #39d9f7;
  --theme-bg-tap: #0975DE ;
  --theme-transprent-1: #39b1f766;
  --theme-transprent-2: #1089ff80;
  --theme-boxshadow-1: #2fc6f85c;
  --theme-boxshadow-2: #2fc6f894;
  --body-bg-color:#EEF2F5;
  --theme-bg-card-1: #fff;
  --theme-cabinets-icons: #fff;
  --theme-cabinets-icons-box-shadow: #9d9d9d40;
  --theme--head-text-color:black;
  --theme-dark-form-bg-color:#F4F8F9 ;
  --theme-dark-form-control-color: #495057;
  --theme-dark-form-control-bg: white;
  --theme-dark-black-white-color: black;
  --theme-bg-color: #fff;
  --settings-icon-hover: #9fa7ac; 
  --developer-color: #f9fafb;
  --input-bg: #fff;
  --input-chat-color: #a2a2a2;
  --border-color: #eef2f4;
  --body-color: #273346; 
  --settings-icon-color: #c1c7cd;
  --msg-message: #969eaa;
  --chat-text-bg: #fff;
  --msg-date: #888b8f;
  --button-bg-color: #f0f7ff;
  --button-color: var(--theme-color);
  --detail-font-color: #919ca2;
  --msg-hover-bg: rgba(238, 242, 244, 0.4);
  --active-conversation-bg: --theme-color;
  --overlay-bg: linear-gradient(
   to bottom,
   rgba(255, 255, 255, 0) 0%,
   rgba(255, 255, 255, 1) 65%,
   rgba(255, 255, 255, 1) 100%
  );
  --chat-header-bg: linear-gradient(
   to bottom,
   #EEF2F5 0%,
   #EEF2F5 78%,
   rgba(255, 255, 255, 0) 100%
  );
}/**/

[data-theme="Dimigo"] {
  --theme-color-1: #fc6767;
  --theme-color-2: #ec008c;
  --theme-bg-tap:#ec008c;
  --theme-transprent-1: #eb008d66;
  --theme-transprent-2: #ec008c80;
  --theme-boxshadow-1: #fc67675c;
  --theme-boxshadow-2: #fc676794;

  --button-color:;
  --button-bg-color:;
}

[data-theme="Mojito"] {
  --theme-color-1: #00c988;
  --theme-color-2: #02af43;
  --theme-bg-tap:#1cd160;
  --theme-transprent-1: #1cd16066;
  --theme-transprent-2: #1cd16080;
  --theme-boxshadow-1: #1cd1605c;
  --theme-boxshadow-2: #1cd16094;

  --button-color:;
  --button-bg-color:;
}

[data-theme="Royal"] {
  --theme-color-1: #141E30;
  --theme-color-2: #243B55;
  --theme-bg-tap:#141E30;
  --theme-transprent-1: #243B5566;
  --theme-transprent-2: #243B5580;
  --theme-boxshadow-1: #243B555c;
  --theme-boxshadow-2: #243B5594;

  --button-color:;
  --button-bg-color:;
}

.Hydrogen {
  background-color: #1089FF;
}

.Dimigo {
  background-color: #f53878;
}

.Mojito {
  background-color: #13d496;
}

.Royal {
  background-color: #141E30;
}
#theme_area{
    padding-top: 5px;
}
#theme_area .detail-change svg {
  width: 16px;
  margin-left: auto;
}

#theme_area .colors {
  display: flex;
  margin-left: auto;
  padding-top: 5px;
}

#theme_area .color {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  width: 40px;
  cursor: pointer;
}
#theme_area .color.selected {
  background-size: 10px;
  background-position: center;
  background-repeat: no-repeat;
}
#theme_area .color:not(:last-child) {
  margin-right: 4px;
}

.dark-light {
 width: 22px;
 height: 22px;
 color: var(--settings-icon-color);
 flex-shrink: 0;
}
.dark-light svg {
  width: 100%;
  fill: transparent;
  transition: 0.5s;
 }

.dark-mode {
  --body-bg-color:#1b1c1d;
  --theme-bg-card-1:#323336;
  --theme-cabinets-icons: #383b40;
  --theme-cabinets-icons-box-shadow: #23232340;
  --theme--head-text-color:white;
  --theme-dark-form-bg-color:#323336;
  --theme-dark-form-control-color: #bcbcbc;
  --theme-dark-form-control-bg: #42464b;
  --theme-dark-black-white-color: white;
  /*
  --border-color: #323336;
  --body-color: #d1d1d2;
  --active-conversation-bg: linear-gradient(
   to right,
   rgba(47, 50, 56, 0.54),
   rgba(238, 242, 244, 0) 100%
  );
  --msg-hover-bg: rgba(47, 50, 56, 0.54);
  --chat-text-bg: #383b40;
  --chat-text-color: #b5b7ba;
  --msg-date: #626466;
  --msg-message: var(--msg-date);
  --overlay-bg: linear-gradient(
   to bottom,
   rgba(0, 0, 0, 0) 0%,
   #27292d 65%,
   #27292d 100%
  );
  --input-bg: #2f3236;
  --chat-header-bg: linear-gradient(
   to bottom,
   #27292d 0%,
   #27292d 78%,
   rgba(255, 255, 255, 0) 100%
  );
  --settings-icon-color: #7c7e80;
  --developer-color: var(--border-color);
  --button-bg-color: #393b40;
  --button-color: var(--body-color);
  --input-chat-color: #6f7073;
  --detail-font-color: var(--input-chat-color);*/
} 

/*editing will be in this id or class :
#left_nav - .card-container:hover - .card-container - .form_title
.conbrd - .table .thead-omg th - #content .hi - #rdv_info .statu_menu
.img_profile - #rdv_time .calendar_timeline h3 - .head_card_icon
.btn_fixed_pay - .btn_fixed_right_bottom 

pink: stroung#fc6767 - light#ec008c
green:
stroung#13d496  - light#1cd160
black_royal:
stroung#141E30 - light#243B55
*/

/*----------------- Theme CSS End ------------------*/
.nav-tabs {
    margin-bottom: 10px;
}
.height_overlay{
    top: 0 !important;
}
.date h1{
    text-align: right;
    margin: 0px;
    font-size: 26px;
    font-weight: bold;
    color: #6210E1;
}
.date h4{
    text-align: right;
    font-size: 26px;
    font-weight: bold;
    color: #FEA600;
}
.first-data{
    background-color: white;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 0px 9px #31383b0d;
    border:1px solid #1089FF;
    padding: 15px;
    font-size: 14px;
}
.second-data{
    background-color: white;
    width: 100%;
    height: 313px;
    border-radius: 8px;
    margin-top: 60px;
    box-shadow: -5px 0px #FEA600;
    padding: 10px;
    margin-right: 30px;
}  
.third-data{
    background-color: white;
    width: 100%;
    border-radius: 8px;
    margin-top: 60px;
    box-shadow: -5px 0px #00caba;
    padding: 10px;
    padding: 20px;
}



.div_first_data_title{
    background: #6b16e1; 
    padding-left: 4px; 
    border-radius: 5px;
}
.div_second_data_title{
    background: #fea600; 
    padding-left: 4px; 
    border-radius: 5px;
}
.canvas_data_title{
    background: white; 
    border-radius: 5px;
    padding: 5px;
}

.first-data canvas, .second-data canvas{
    max-height: 100%;
    max-width: 100%;
}
.datatable{
    margin-bottom: 50px;
    border-radius: 10px;
    padding: 10px 15px;
    overflow: auto;
    width: 100%;
}

/*  ------------ button plus css ----------*/
#plus div img {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 10;
    cursor: pointer;
}
/* ------------------notice ----------------*/
#notice ul {
    padding: 0px;
    padding-bottom: 15px;
}
#notice ul li {
    background-color: #f4f6fa;
    margin: 12px 10px 0px 10px;
    padding: 15px;
    border-radius: 5px;
    height: auto;
    color: black;
    transition: .2s ease-in;
    font-weight: 400!important;
    transition: .3s ease-in;
    cursor: pointer;
}
.anime{
    position: absolute!important;
    top: -100%!important;
}
#notice ul li a{ color: black;
}
.up{
    position: absolute!important;
    top: -1000%!important;
}
#notice ul li:hover {
    border-left: 2px solid purple;
}
.notice{
    background-color: white;
    width: 400px;
    max-height: 350px;
    position: absolute;
    left: -415px;
    top: 80px;
    font-size: 16px;
    border-radius: 15px;
    z-index: 20;
    box-shadow: 0px 0px 8px 0px #4242422e;
    overflow: auto;
}
/*  ------------ form formation add - remove display none */

.overlay_form{
    position: fixed;
    border-radius: 15px;
    top: 10%;
    left: 21%;
    transition: 0.3s;
    z-index: 50;
    padding: 0px;
    transition: 0.6s;
    background-color: #F4F8F9!important;
}
.overlay_form_info{
    position: fixed;
    border-radius: 15px;
    top: 20%;
    left: 30%;
    transition: 0.3s;
    z-index: 50;
    padding: 0px;
    transition: 0.6s;
    background-color: #F4F8F9!important;
    z-index:100
}
.form_title{
    background-image: linear-gradient( 240deg, var(--theme-color-2) 0%, var(--theme-color-1) 90% );
    border-radius: 15px 15px 0px 0px;
    position: relative;
}

.black_transparent{    
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
    z-index: 20;
    display: none;
}
.hide_form{
    top: -400%;
}
.form_overflow{
    overflow: auto;
    overflow-x: hidden;
    max-height: 100vh;
}
.form_overflow_clinic{

}
/* ----------------------------- scrollbar ----------------------   */

::-webkit-scrollbar {
    width: 6px;
    background-color: #00000036;
    border-radius:50px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: linear-gradient( -366.7deg, #EF1829 -8.8%, #FEA600 90% );
    border-radius:4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #d4a03d; 
}
/* ------ all comments in this scrollbar css by omar is my suggestions -----*/

#DataTables_Table_0_filter label input.form-control,#DataTables_Table_1_filter label input.form-control,#DataTables_Table_2_filter label input.form-control,#DataTables_Table_3_filter label input.form-control,#DataTables_Table_4_filter label input.form-control,#DataTables_Table_5_filter label input.form-control,#DataTables_Table_6_filter label input.form-control,#DataTables_Table_7_filter label input.form-control,#DataTables_Table_8_filter label input.form-control,#DataTables_Table_9_filter label input.form-control{
    border-radius: 10px !important;
    background-color: #8c8c8c0a !important;
    border: 0.7px solid #0c4cad61 !important;
    box-shadow: 0px 0px 9px #31383b0d !important;
    background-color: #F4F6FA !important;
}
#DataTables_Table_0_length label select.custom-select,#DataTables_Table_1_length label select.custom-select,#DataTables_Table_2_length label select.custom-select,#DataTables_Table_3_length label select.custom-select,#DataTables_Table_4_length label select.custom-select,#DataTables_Table_5_length label select.custom-select,#DataTables_Table_6_length label select.custom-select,#DataTables_Table_7_length label select.custom-select,#DataTables_Table_7_length label select.custom-select,#DataTables_Table_8_length label select.custom-select,#DataTables_Table_9_length label select.custom-select{
    padding: 0px 5px 0px 14px!important;
    background: none!important;
    border: 0.7px solid #0c4cad61!important;
    box-shadow: none!important;
    font-weight: bold!important;
    border-radius: 50px;
}

#DataTables_Table_0_paginate .pagination .active .page-link,#DataTables_Table_1_paginate .pagination .active .page-link,#DataTables_Table_2_paginate .pagination .active .page-link,#DataTables_Table_3_paginate .pagination .active .page-link,#DataTables_Table_4_paginate .pagination .active .page-link,#DataTables_Table_5_paginate .pagination .active .page-link,#DataTables_Table_6_paginate .pagination .active .page-link,#DataTables_Table_7_paginate .pagination .active .page-link,#DataTables_Table_8_paginate .pagination .active .page-link,#DataTables_Table_9_paginate .pagination .active .page-link{
    color: blueviolet!important;
    border: 2px solid blueviolet!important;
    border-radius: 39px!important;
    width: 37px!important;
    padding-left: 0px!important;
    background-color: transparent!important;
    box-shadow: none!important;
}
.table .thead-omg th{
    color: #fff !important;
    background-color: var(--theme-bg-tap);
    font-weight: bold!important;
    border-color: none!important;
}
table tr td {
    padding: 7px 7px!important;
    font-weight: 500;
}
table hr {
    margin: 5px 0px;
}
#form_update div input {
    font-weight: bold;
}
#form_prix div input {
    font-weight: bold;
}
#form_prix div select {
    font-weight: bold;
}
#form_paiement div select {
    font-weight: bold;
}
#form_paiement div input {
    font-weight: bold;
}
#form_affectation div select {
    font-weight: bold;
}
#form_affectation div input {
    font-weight: bold;
}
#form_update div select {
    font-weight: bold;
}

#form_add div input {
    font-weight: bold;
}
#form_add div select {
    font-weight: bold;
}



/* ------ new css for clinic application -----*/

body{
    background-color: var(--body-bg-color)!important;
    overflow-x: hidden;
    position: relative;
    font-family: 'Montserrat',Roboto,arial,sans-serif;
}
#left_nav{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 76px;
    height: 100vh;  
    background-image: linear-gradient( 0deg, var(--theme-color-2) 0%, var(--theme-color-1) 90% );
    border-radius: 0px 20px 0px 0px;
    overflow-x:hidden;
    display: block;
    color: white;
    box-shadow: 1px 0px 8px #1089ff29;
    z-index: 20;
    transition: .2s ease-in;
}
ul, ol{
    list-style: none;
}
a{
    text-decoration: none;
}
#left_nav ul{
    display: block;
    padding: 0px;
    height: 150px;
    text-align: center;
    font-size: 24px;
    color: #ffffffb5;
    padding-top: 10px;
    margin-top: 30px;
}

#left_nav ul li{
    padding: 3px;
    color: #00000036;
}
#left_nav ul li i{
    color: rgba(255, 255, 255, 0.80);
}
#left_nav ul li span {
    display: inline-block; 
    padding: 5px 10px; 
    border-radius: 10px; 
    transition: 0.3s; 
    color:white;
}
#left_nav ul li span:hover {
    background-color: #00000036;
}
#left_nav a{
    color: white;
}
#left_nav ol{
    display: block;
    padding: 0px;
    font-size: 24px;
    line-height: 2;
}
#left_nav ol li {
    margin-bottom: 15px;
}
#left_nav ol li a{
    color: rgba(255, 255, 255, 0.80);
    border-radius: 10px;
}
#left_nav ol li a:hover{
    color: white;
}
.border_active{
    border-left: 3px solid transparent;
    /*background: rgba(0, 0, 0, 0.1);*/
}
.border_active_on{
    border-left: 3px solid #FFB636!important;
}
#left_nav .border_active_on a span:first-child {
    background-color: #FFB636!important;
}
#left_nav .border_active_on a:first-child{
    color: white!important;;
}
.top_nav_active{
    background-color: rgba(36, 159, 255, .17);
}
.top_nav_active i{
    color:#6239F7!important;
}
.active_nav span{
    background-color: transparent;
    border-radius: 10px;
}
.active_nav span:first-child{
    width: 50px;
    display: inline-block;
    text-align: center;
}
.active_nav_on{
    background-color: #FFB636!important;
}
.color_white{
    color: white!important;
}
.btn-myLink{
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
}
.margin_0{
    margin: 0;
}
.bttn{
    box-shadow: none;
    border-radius: 8px;
    font-weight: 600;
    padding: 13px 20px;
}
.bttn:hover{
 box-shadow: 0px 0px 9px #b4b4b4a1;
}

.white_space{
    white-space: nowrap;
}
.active_nav span.a_style{
    padding-left: 30px;
    white-space: nowrap;
    font-size: 20px;
}
.first_a{
    padding-left: 20px;
    font-size: 20px;
}
#left_nav ol li div {
    padding-left: 10px;
}
.full_width{
    width: 300px!important;
}
.display_none{
    display: none;
    transition:.2s;
}
.bax_active{
    background: #00000026;
}
#top_nav{
    width: 100%;
    height: 60px;
    background-color: var(--theme-bg-card-1);
    box-shadow: 0px 0px 9px #31383b1a;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
}
#top_nav ul{
    list-style: none;
    float: right;
    margin-right: 25px;
}
a{
    text-decoration: none;
}
#top_nav ul li{
    display: inline-block;
}
#top_nav ul li .top_nav_elt{
    display: inline-block;
    padding: 6px 12px;
    border-radius: 10px;
    transition: 0.3s;
    color: var(--theme--head-text-color);
}
#top_nav ul li .top_nav_elt:hover {
    color: #6239F7!important;
}


.down_to_up{
    transition: 0.3s;
}
.span_submenu_active .down_to_up{
    transform: rotateZ(180deg);
}
#top_nav ul li{
    cursor: pointer;
}
#top_nav ul{
    display: block;
    padding: 0px;
    text-align: center;
    font-size: 24px;
    padding-top: 8px;
}
#content{
    padding-left: 110px!important;       
    padding-right: 30px!important;
}
#content .hi{
    background-image: linear-gradient( 240deg, var(--theme-color-2) 0%, var(--theme-color-1) 90% ); 
    border-radius: 10px;
    color: white;
    padding: 25px;
    box-shadow: 0px 0px 9px #31383b0d;
    margin-bottom: 15px;
}
.hi h4,p{
    margin: 0px;
}
.hi h4{
    font-size: 26px;
    font-weight: bold;
}
.hi p{
    font-size: 14px;
    font-weight: 400;
}
.hi img {
    width: 55px;
}
.bordar{
    background-color:white; 
    border-radius: 10px;
    padding:10px;
    box-shadow: 0px 0px 9px #31383b0d;
    margin-bottom: 20px;
    position: relative!important;
}
.cir{
    height: 48px;
    width: 48px;
    background-color: pink;
    border-radius: 50%;
}
.profil{
    background-color:white; 
    border-radius: 10px;
    box-shadow: 0px 0px 9px #31383b0d;
    position: relative!important;   
    padding: 0px 20px;
    padding-bottom: 35px;
    margin-bottom:15px;
}
.schema{
    background-color:white; 
    border-radius: 10px;
    box-shadow: 0px 0px 9px #31383b0d;
    padding: 40px 10px 20px 10px;
}
.recent{
    background-color:white; 
    border-radius: 10px;
    box-shadow: 0px 0px 9px #31383b0d;
    padding-bottom: 20px;
}
.current h1{
    font-size: 24px;
    font-weight: 600;
    margin-top: 10px;
}
.papro{
    background-color:white; 
    border-radius: 10px;
    box-shadow: 0px 0px 9px #31383b0d;
    height: 90px;
    margin: 20px -10px;
    padding: 20px 0px;
    position: relative;
}
.papro ul{
    padding: 0px;
    margin-top:8px;
}
.papro ul li:first-child{
    font-weight: bold;
    font-size: 14px;
    color: black;
}
.papro ul li{
    font-size: 8px;
    color: grey;
}
.statu li{
    width: 90px;
    border-radius: 19px;
    color: white!important;
    text-align: center;
    margin-top: 17px;
    font-size: 9px!important;
    padding: 0px 6px;
    background-color: #ffbb3370;
}
.btn_action{
    border-radius: 10px;
    box-shadow: none;
    border: 2px solid #ffbb33;
    color: black;
    padding: 8px 26px;
    background-color: transparent;

}
.btn_action:hover{
    box-shadow: 0px 0px 9px #31383b0d!important;
}
.btn_action:active{
    box-shadow: 0px 0px 9px #31383b0d!important;
}
.btn_action:focus{
    box-shadow: 0px 0px 9px #31383b0d!important;
}

.conbrd{
    background-color:var(--theme-bg-tap); 
    border-radius:  8px 8px 0px 0px;
    /*box-shadow: 0px 0px 9px #31383b0d;*/
    height: 50px;
    width: 100%;
    padding: 14px 0px;
    cursor: pointer;
    color: white;
    font-weight: bold;
}
.bil_con{
    height: 50px;
    padding: 14px 0px;
}
.conbrddisable{
    background-color:#9ba4ad; 
    border-radius:  8px 8px 0px 0px;
    /*box-shadow: 0px 0px 9px #31383b0d;*/
    height: 80px;
    width: 100%;
    padding: 28px 0px;
    cursor: pointer;
    color: white;
    font-weight: bold;
}

.bg_white{
    background-color: white;
    color: black!important;
}
.bg_white a{
    background-color: white;
    color: black!important;
}
.bgy{
    background-color:#ffc107;
    color: white!important;
}
.bgy a{
    background-color:#ffc107;
    color: white!important;
}
.table_content{
    background-color: white;
    width: 100%;
    border-radius:  0px 10px 10px 10px;
    padding: 20px 40px 40px 40px;
}


.accordion .card {
    border-radius: 0;
    border-top: none!important;
    box-shadow: 0px 0px 9px #31383b0d;
    border: 1px solid #ffc107!important;
}
.accordion .card:first-child {
    /*border-top: 1px solid blue!important;*/
}
.accordion .card .card-header {
    background: #fff;
}
.accordion .card-header{
    padding: 0px;
}
.accordion .card-header h2 span {
    float: left;
}
.accordion .card-header .btn {
    font-size: 1.04rem;
    font-weight: 500;
    width: 100%;
    text-align: left;
    position: relative;
}
.accordion .card-header i {
    float: right;
    font-size: 1rem;
    font-weight: bold;
    position: relative;
}
.accordion .card-header button:hover {
    color: #23384e;
}
.accordion .card-body {
    background: #eef2f5;
}
.accordion .highlight {
    color: #fff;
    background: #202d3c !important;
}
.mb-0 button.btn.btn-link {
    border-left: 5px solid #2196f3;
    border-radius: 0px;
    background: #e1f1ff;
    padding: 10px 20px;
}
.mb-0 button.btn.btn-link.collapsed:hover {
    background: #e1f1ff;
}
.mb-0 button.btn.btn-link.collapsed {
    background: #f3f6f9;
}
.mb-0 span.btn.btn-link {
    border-left: 5px solid #2196f3;
    border-radius: 0px;
    background: #e1f1ff;
    padding: 20px;
}
.mb-0 span.btn.btn-link.collapsed:hover {
    background: #e1f1ff;
    text-decoration: none!important;
    cursor: initial;
}
.mb-0 span.btn.btn-link.collapsed {
    background: #f3f6f9;
}
.btn_imp{
    position: absolute;
    top: 5px;
    right: 5px;
}
.relative{
    position: relative;
    font-weight: bold;
}

button:hover{
    text-decoration: none!important;
}
button{
    text-decoration: none!important;
}
.table_content h2{
    font-weight: bold;
    font-size: 1.5rem;
}
.conbrd a { 
    color: white;

}
.conbrd a:hover { 
    color: white;

}
.form-control{
    box-shadow: 0px 0px 6px #31383b0d!important;
    border: 0px solid #ced4da00!important;
}
.card-body input{
    margin-bottom: 20px;
}
.card-body select{
    margin-bottom: 20px;
}
td{
    cursor: default;
}
.display_none{
    display: none;
}
.f_s{
    height: 40px!important;
    border-radius: 10px!important;
    padding-left: 15px!important;
    padding-right: 15px!important;
    /*font-size: 18px!important;*/
    font-weight: 500!important;
}
.f_r{
    height: 38px!important;
    border-radius: 10px!important;
    font-size: 13px!important;
    font-weight: 394!important;
}
.f_l{
    font-size: 18px;
    font-weight: 600;
    color: var(--theme--head-text-color);
}
.sub{
    background: var(--theme-dark-form-control-bg);
    padding: 20px 0px;
    box-shadow: 0px -1px 20px #31383b0d;
    border-radius: 0px 0px 15px 15px;
}
.btn_sub{
    border-radius: 50px!important;
    box-shadow: 0px 0px 9px #31383b0d!important;
    font-weight: 600;
}
.btn_white{
    background-color: white!important;
    color: black;
}
.btn_white:hover{
    background-color: whitesmoke!important;
    color: black;
}
.btn_white:active{
    background-color: whitesmoke!important;
    color: black;
}
.width_full{
    width: 100%!important;
}
.spn_cal{
    position: absolute;
    top: 86px;
    right: 30px;
    font-size: 20px;
    color: grey;
    background-color: white;
    padding: 7px 15px;

}/*
.label_before{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: '';
    background-color: #5562eb;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
    transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
}
.label_after{
    width: 32px;
    height: 32px;
    content: '';
    border: 2px solid #D1D7DC;
    background-image: url(" data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns=…8 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E " );
    background-repeat: no-repeat;
    background-position: 2px 3px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 200ms ease-in;
    background-color: #54E0C7;
    border-color: #54E0C7;
}
/*   option css */
.inputGroup {
    background-color: #fff;
    display: block;
    margin: 10px 0;
    position: relative;
    border-radius: 5px;
}
.btn-link:hover{
    text-decoration: none!important;
}
.inputGroup label {
    padding: 12px 30px;
    border-radius: 5px;
    width: 100%;
    display: block;
    text-align: center;
    color: #3C454C;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 200ms ease-in;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inputGroup label:before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    content: '';
    border-radius: 5px;
    background-color: #5562eb;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transform: translate(-50%, -50%) scale3d(1, 1, 1);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    z-index: -1;
}
.inputGroup label:after {
    width: 32px;
    height: 32px;
    content: '';
    border-radius: 5px;
    border: 2px solid #D1D7DC;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    background-repeat: no-repeat;
    background-position: 2px 3px;
    border-radius: 50%;
    z-index: 2;
    position: absolute;
    left: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    transition: all 200ms ease-in;
}
.inputGroup input:checked ~ label {
    color: #fff;
}
.inputGroup input:checked ~ label:before {
    -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
    transform: translate(-50%, -50%) scale3d(56, 56, 1);
    opacity: 1;
}
.inputGroup input:checked ~ label:after {
    background-color: #54E0C7;
    border-color: #54E0C7;
}
.inputGroup input {
    width: 32px;
    height: 32px;
    order: 1;
    z-index: 2;
    position: absolute;
    right: 30px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    visibility: hidden;
}
/*  end option css*/


.caisse{
    background-color: white;
    border-radius: 10px;
    box-shadow: 0px 0px 9px #31383b0d;
    height: 390px;
    border:3px solid #E85931;
}
#pay_info_section{
    padding: 0px;
    margin-bottom: 10px;
}

.bg_card{
    background-color: #F4F8F9!important;
}
.display_none{
    display: none!important;
}
.input_search{
    border-radius: 50px;
    background: #EEF2F5!important;
    padding: 5px 40px 5px 15px!important;
    width: 100%!important;
    line-height: 2!important;
    border: 1px solid transparent!important;
}
.n_b{    
    border-radius: 0px 10px 10px 10px!important;
}
.p_r{
    position: relative!important;
}
.span_searh{
    position: absolute;
    right: 15px;
    top: 5px;
    font-size: 24px;
    color: #778899a6;
}
.ul_s{
    display: flex;
    padding: 0px;
    margin-top: 20px;
}
.ul_s li {
    padding-right: 30px;
}

#img_plus_nav{
    position: relative;
}
.plus{
    position: fixed;
    bottom: 1%;
    background-image: linear-gradient( 180deg, #39D9F7 0%, #1089FF 90% );
    right: 1%;
    border-radius: 40px;
    padding: 5px;
    z-index: 3;
    height: 60px;
    width: 60px;
}
.img_plus{
    width: 50px;
    position: absolute;
    bottom: 5px;
    cursor: pointer;
}
.table_s_bg{
    border-radius: 0px;
    box-shadow: 0px 8px 9px #31383b1a;
    margin-top: -10px;
}

.my_badge{
    padding: 10px 10px;
    border-radius: 20px 20px 0px;
}



#rdv_info .statu_menu{
    background-color: var(--theme-transprent-2);
    border-radius: 50px;
    margin-top: 20px;
    color: black;
    margin-bottom: 20px;
}
#rdv_info .statu_menu ul{
    display: flex;
    padding: 2px;
    line-height: 2.5;
}
#rdv_info .statu_menu ul li{
    display: inline-block;
    width:20%;
    color: white;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
}
.status_active{
    background-color: white!important;
    color: black!important;
}
/*#rdv_info*/ .patient_profile_section ul{
    padding-left: 15%;
    color: dimgrey;
}
/*#rdv_info*/ .patient_profile_section ul li{
    text-align: center;
    display: inline-block;
    font-weight: 500;
    width: 19%;
}

/*#rdv_info*/ .patient_profile_section .patient_info ul {
    padding: 0px;
    margin:0px;
}
/*#rdv_info*/ .patient_profile_section .patient_info .papro {
    padding: 0px;
    height: auto;
    margin: 20px 0px 0px 0px;
}
/*#rdv_info*/ .patient_profile_section .patient_info .papro ul {
    margin: 0px;
    padding: 20px 0px;

}
/*#rdv_info*/ .patient_profile_section .patient_info .papro ul li {   
    display: inline-block;
    text-align: center;
    width: 16%;
    color: black;
    font-size: 14px;
    vertical-align: middle;
    position: relative;
    font-weight: 600;
}
/*#rdv_info*/ .patient_profile_section .patient_info .papro .btn_action {
    width: 12%;
    padding: 4px;
}
/*#rdv_info*/ .status {
    width: 15%!important;
    margin-right: 2%;
    box-shadow: none;
    font-size: 13px!important;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-left: .9%;
}
/*#rdv_info*/ .patient_profile_section .patient_info .papro .img_cir {
    background: #FFB636!important;
    border-radius: 40px;
    width: 44px;
    height: 44px;
    position: absolute;
    top: -22px;
    left: 24px;
}
.img_cir {
    background: #FFB636!important;
    border-radius: 40px;
    width: 44px;
    height: 44px;
    top: -22px;
    left: 24px;
    display: inline-block;

}
/*#rdv_info*/ .patient_profile_section .patient_info .papro .img_cir p{
    font-size: 18px;
    color: white;
    font-weight: 600;
    padding-top: 8.8px;
}
.img_cir p{
    font-size: 18px;
    color: white;
    font-weight: 600;
    padding-top: 8.8px;
}
/*#rdv_info*/ .patient_profile_section .patient_info .papro ul li:first-child{
    width: 14%!important;
}
#rdv_time {
    /*background-color: white;
     border-radius: 10px;
     box-shadow: 0px 0px 9px #31383b1a;*/
}
#rdv_time .calendar_date {
    margin-top: 20px;
}
#rdv_time .calendar_date .ui-datepicker .ui-datepicker-title{
    font-weight: 700;
    color: #1089FF;
}
.timeline {
    /*max-height: 500px;
    overflow-y: auto;*/
    padding: 0px 7px;
    margin-bottom: 30px;
}
#rdv_time  .calendar_timeline h3{
    font-size: 24px;
    font-weight: 600;
    color: var(--theme-color-1);
    margin-bottom: 30px;
}
.statu_menu a {
    color: white;
}
.statu_menu a:hover {
    color: white;
}
.status_active a{
    color: black;
}
.status_active a:hover{
    color: black;
}
#rdv_info h2{
    color: #FF4536;
    font-size: 29px;
    font-weight: bold;
}



.btn.btn-sm-rdv{
    padding:.3rem 0.3rem;font-size:.64rem}

.badge-nc {
    background-color: #00c85180!important;
}

.timeline ul li:hover{
    background: #3E64FF;
    color: white;

}
.timeline ul li{
    transition: .3s ease-in;
    cursor: pointer;
}
.border_line{
    width: 4px;
    height: 100%;
    background: #3E64FF;
    top: 0;
    position: absolute;
    transition: .3s ease-out;
}
.hid_nav div{
    margin-left: 0px!important;
}
.hid_nav{
    margin-left: 0px!important;
    background: #ffbc00;
    text-align:center;
    padding: 5px 0px;
    transition: .3s ease-out;
}
.hid_nav a{
    text-transform: uppercase;
    color: white;
    font-weight: 500;
    display: block;
}
.hid_nav a:hover{
    color: white;text-decoration: underline;
}
.hid_nav a > i{
    font-size: 16px;
}
.hid_nav a > i:hover{
    color:white; 
}
.hid_nav a:focus{
    color:white; 
}
.span_info{
    background: #09c3ec;
    z-index: 2;
    position: absolute;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 20px;
    color: #ffffff;
    padding-top: 7px;
    border-radius: 50px;
    transition: .3s ease-in;
}
.timeline_active{
    background: #3E64FF!important;
    color: white!important;
    cursor: default!important;
}


.timeline ul li:hover .number span {
    color: red;
}
.c_r_active{
    color: red;
}
/* dashboard style start here */


.containter_icons{
    left: 10px;
    width: 53px;
    height: 53px;
    position: absolute;
    border-radius: 33px;
    top: 5px;
    margin-top: 6px;
    padding: 9px;
}
.containter_icons span{
    color: white;
    font-size: 24px;
}

.bg_color_1{
    background-color: #6239f766;

}
.bg_color_2{
    background-color: #FFB63666;
}
.bg_color_3{
    background-color: #5EDFFF66;
}
.bg_color_4{
    background-color: #31383B66;
}
.color_1{
    color: #6239f766;
}
.color_2{
    color: #FFB636;
}
.color_3{
    color: #5EDFFF;
}
.color_4{
    color: #31383B;
}
.color_5{
    color: orange;
}
.space_card{
    padding-left: 65px;
}
.number_card{
    color: #31383B;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
}
.title_card{
    font-size: 18px;
    margin-top: -5px;
    font-weight: bold;
}
.img_profile{
    background: #42A5F5;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 6px var(--theme-transprent-2);
    border: 4px solid white;
    overflow: hidden;
}
.global_img_profile{
    padding: 30px 0px;
}
.img_profile p{
    color: white;
    font-size: 44px;
    text-align: center;
    padding: 17px 11px;
    font-weight: 700;

}
.name_profile{
    text-align: center;
    font-size: 26px;
    font-weight: bold;
}
.subname_profile{
    text-align: center;
    font-weight: 600;
    color: #7C7C7C;
}
.profile_desc{
    text-align: center;
    font-weight: 600;
    color: #7C7C7C;
    font-size: 16px;
    font-weight: 400; 
    text-align: unset;
}
.profile_text{
    text-align: center;
    font-weight: 600;
    color: #7C7C7C;
    float: right; 
    font-size: 17px;
    font-weight: 500;
}
.static_profile_1{
    margin-bottom: 20px;
}
.static_profile_2{
    text-align: right;
}
.n_s_p{
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    font-size: 18px;
}
.t_s_p{
    font-size: 12px;
    color: grey;
    font-weight: 500;
}
.title_recent{
    padding: 22px;
    font-size: 22px;
    font-weight: 600;
}
.recent {
    position: relative!important;
}
.card_recent .img_cir{
    top:7px!important;
    text-align: center!important;
    left: 10px;
    background-color: #5EDFFF!important;
    position: absolute;
}
.card_recent ul {
    padding: 0px;
    margin: 0px;
}
.card_recent_active{
    background: #5EDFFF66!important;
    border-left: 4px solid #6239f7!important;
}
.card_recent ul li {
    padding: 10px 0px;
    border-left: 4px solid transparent;
    padding-left: 70px;
    padding-right: 20px;
    position: relative;
    transition: .3s ease-in;
    margin-bottom: 20px;
}
.card_recent ul li:hover{
    background: #5EDFFF66;
    border-left: 4px solid #6239f7;
}
.name_recent_patient{
    color: black;
    font-weight: 600;   
    font-size: 13px;
    text-transform: uppercase;
}
.time_recent_patients{
    text-align:right;
}
.time_recent_right{
    color: black;
    font-weight: 600;
    font-size: smaller;
}


.btn_custom {
    color: grey;
    font-weight: 500;
    border: 2px solid #6239F7;
    padding: 10px 30px;
    border-radius: 50px;
    transition: .2s;
}
.btn_custom:hover{
    color: white;
    background-color: #6239F7;
}
.progress{
    border-radius: 1.4rem!important;
    margin-top: 10px;
}
.progress-bar{
    background-color: #6239f7;
    border-radius: 1.4rem!important;
}

.rdv_head{
    display: inline-block;
    margin-top: 3px;
}
.rdv_date_rest{
    float: right;
    position: relative;
    margin-right: 90px;
}
.rdv_date_rest a{
    position: absolute;
    right: -95px;
    padding: 9.4px 20px;
    top: -6px;
    box-shadow: 0px 0px 6px #31383b0d;
    border-radius: .25rem;
}
.rdv_date_rest a:hover{
    box-shadow: 0px 0px 6px #31383b0d;
}
.btn_fixed_pay{
    background-image: linear-gradient( 240deg, var(--theme-color-2) 0%, var(--theme-color-1) 90% );
    color: white;
    padding: 0px;
    text-align: center;
    border-radius: 10px;
    padding: 10px 20px;
    box-shadow: 0px 0px 9px #31383b0d;
    position: fixed;
    bottom: 20px;
    z-index: 100;
    right: 20px
}
.card_pay{
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 0px 9px #31383b0d;
    margin-bottom: 20px;
    overflow: hidden;
    text-align: center;
    letter-spacing: 1px;
    position: relative;
    padding: 15px;
}
.head_card_icon{
    background-image: linear-gradient( 240deg, var(--theme-color-2) 0%, var(--theme-color-1) 90% );
    color: white;
    padding: 0px;
    text-align: center;
}
.head_card_icon img{
    width: 100px;
}

.pay_section h5 { 
    position: relative;
    text-align: center;
    margin-bottom:15px;
}

.pay_section h5:before{
    content: '';
    position: absolute;
    left: 65%;
    bottom: -6px;
    width: 30px;
    height: 2px;
    border-radius: 50px;
    background: orange;
    transform:translateX(-65px) /*    width/2    */
}
/*h2 { 
    position: relative;
    margin-bottom:15px;
}
h2:before{
    content: '';
    position: absolute;
    left: 72%;
    bottom: -6px;
    width: 30px;
    height: 2px;
    border-radius: 50px;
    background: orange;
    transform:translateX(-65px) /*    width/2   
} */
.btn_change_schema{
    position: absolute;
    z-index: 1;
    right: 30px;
    top: 10px;
}

.ord_nbr_inactive{
    text-align: left;
    border: 1px solid grey;
    border-style: dashed;
    padding: 15px;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
    cursor: pointer;
}
.ord_nbr_active{
    text-align: left;
    padding: 15px;
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 10px;
    background: #fb3;
    color: white;
    cursor: pointer;
}

.actions_tab{
    position: absolute; 
    right: 85%;
    top: 0px;
    background: #fffffff0;
    transition: 0.3s;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 0px 0px 20px #8080808c;
}
.show_actions_tab{
    max-width: 500px; 
}
.img_profile_patients{
    text-align:center;
    /*overflow: hidden*/;

}
.img_profile_patients img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: 0px 0px 9px #31383b0d;
}

#sign_in{
    background-image: url(../img/sign_clinic_page_un.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    overflow:hidden; ;
    position: relative;
}
#sign_in input{
    background-color: white;
    transition: .2s;
}
#sign_in input:hover{
    background-color: white;
    border: 1px solid #FFB636!important;
    box-shadow: 0px 0px 9px #FFB63660!important;
}
#sign_in .user{
    position: absolute;
    right: 20px;
    font-size: 22px;
    top: 45px;
    color: grey;
}
#sign_in .btn_sign button{
    width: 250px;
    margin: 0px;
    margin-top: 5px;
    box-shadow: none;
}
#sign_in img{
    width: 100px;
    margin-left: 40px;
    margin-top: 5px;
}
#sign_in ul{
    margin-top: 10px;
    margin-right: 40px;
}
#sign_in ul li {
    display: inline-block;

}
#sign_in ul li a{
    display: inline-block;
    font-size: 19px;
    color: white;
    background: #2196f3;
    padding: 5px 11px;
    border-radius: 10px;
    margin: 0px 5px;
    transition: .3s;
}
#sign_in ul li a:hover{
    background-color: #0e82de;
    color: white;
}
#form_section {
    /*height:100vh;*/
    background: white;
}
form#form-connexion{
    padding: 20px 30px;
    padding-top: 70px;
    padding-bottom: 120px;
    height: 100vh;
}
.title_sign{
    font-size: 20px;
}
#footer_info{
    position: fixed;
    width: 100%;
    bottom: 20px;
    color: grey!important;
    font-weight: 600;
    font-size: 14px;
}
#footer_info a {
    color: grey;
}
#footer_info a:hover {
    color: #1089FF;
}

.somme_card_pay_section{
    border: 1px solid white;padding: 7px;border-radius: 10px;
}
#form_somme_paiements{
    padding: 0px 40px;
    padding-bottom: 15px;
}
.percentage_calc{
    width: 55px;
    height: 30px;
    /*background-color: red;*/
    /* margin-top: 5px;*/
    float: right;
    /* margin: 15px; */
    border-radius: 5px;
    margin-right: 8px;
    color: white;
    font-size: 16px;
    text-align: center;
    padding-top: 4px;
    font-weight: 600;
}
.signes_vitaux{
    padding: 0px 20px 10px;
}


.Mygreen{
    color: #00c851;
    font-size: 22px;
}

.Myred{
    color: #f00e0eb3;
    font-size: 22px;
}
.bar span {
    cursor: pointer;
}
/* new style for plus in consultation page by omar*/
#sub_menu .circle-menu {
    /*opacity:0;*/
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 19;
}
#sub_menu .circle-menu button,
#sub_menu .circle-menu ul li div {
    display: block;
    box-sizing: border-box;
    height: 50px;
    width: 50px;
    padding: 15px;
    border: none;
    outline: none;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
    background: var(--theme-color-1);
    color: #fff;
    transition: .3s!important;
}
#sub_menu .circle-menu ul li div:hover {
    background: #fb3;
}
#sub_menu .circle-menu button {
    position: relative;
    z-index: 2;
    -webkit-animation: appear .3s ease-out forwards;
    -moz-animation: appear .3s ease-out forwards;
    -o-animation: appear .3s ease-out forwards;
    animation: appear .3s ease-out forwards;
}
#sub_menu .circle-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#sub_menu .circle-menu ul li {
    position: absolute;
    z-index: 1;
    left: 0px;
    bottom: auto;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#sub_menu .circle-menu[upgraded="true"] {
    opacity: 1;
}

@keyframes appear {
    0% {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

#footer_clinic{
    /*background-image: linear-gradient( 45deg, #39D9F7 0%, #1089FF 90% );*/

    /*color: white;*/

    color: #1089FF;
    padding: 15px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
    margin-top: 30px;
    text-align:center;
}
#footer_clinic a{
    /*color: white;*/
    color: #1089FF;
    transition: .3s;
}
#footer_clinic a:hover{
    color: #FFB636;
}


.underlined{
    display: inline-block;
    width: 100%;
    padding: 0 0 10px 0;
    position: relative;
}
.underlined::after{
    content: '';
    position: absolute;
    height: 3px;
    bottom: -1px;
    width: 80px;
    left: 0;
    margin: 0;
    background:#ffb636;
}
.underlined-only{
    display: inline-block;
    width: 100%;
    padding: 0 0 20px 0;
    position: relative;
}
.underlined-only::after{
    content: '';
    position: absolute;
    height: 3px;
    bottom: -1px;
    width: 100%;
    left: 0;
    margin: 0;
    background: #ffb636;
}
.underlined-center{
    display: inline-block;
    width: 100%;
    padding: 0 0 20px 0;
    position: relative;
}
.underlined-center::after{
    content: '';
    position: absolute;
    height: 3px;
    bottom: -1px;
    width: 20%;
    left: 50%;
    margin: 0;
    background: #ffb636;
    transform: translate(-50%, 0%);
}
.underlined-tir{
    display: inline-block;
    width: 100%;
    padding: 0 0 20px 0;
    position: relative;
}
.underlined-tir::before{
    content: '';
    position: absolute;
    background: #78bb3c;
    width: 20%;
    height: 1px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
}

/************     Loader      ************************/

#black_transparent2{           
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 60;
    display: none;
}/*
.loader {
    position: relative;
    top: 40%;
    left: 40%;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #1089FF;
    border-bottom: 16px solid #1089FF;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite;/* Safari 
}*/
/*
 Safari 
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
*/
/*start code for loader*/
@-webkit-keyframes move {
    to {
        stroke-dashoffset: -1200;
    }
}
@-moz-keyframes move {
    to {
        stroke-dashoffset: -1200;
    }
}
@-o-keyframes move {
    to {
        stroke-dashoffset: -1200;
    }
}
@keyframes move {
    to {
        stroke-dashoffset: -1200;
    }
}
@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@-moz-keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@-o-keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@keyframes fade {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
.loader {
    background: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: ;
    -webkit-animation-duration: 80s;
    -moz-animation-duration: 80s;
    -o-animation-duration: 80s;
    animation-duration: 80s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: pulsate;
    -moz-animation-name: pulsate;
    -o-animation-name: pulsate;
    animation-name: pulsate;
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    -o-animation-direction: normal;
    animation-direction: normal;
}
.loader svg {
    left: 0;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.animation {
    fill: none;
    stroke: #ffffff;
    stroke-linecap: square;
    stroke-miterlimit: 10;
    stroke-width: 0.5px;
    opacity: 1;
    stroke-dasharray: 600;
    -webkit-animation: move 4s linear forwards infinite, fade 4s linear infinite;
    animation: move 4s linear forwards infinite, fade 4s linear infinite;
}

/*end code for loader*/
.underlined_fin_tir{
    display: inline-block;
    position: relative;
}
.underlined_fin_tir:before {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 0;
    width: 30px;
    height: 3px;
    border-radius: 50px;
    background: orange;
}

.info_pat{
    color: #6239F7;font-weight: 700;
}




/***********************dropdown MENU RDVS**************/

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border-radius: 10px;
    min-width: 130px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1;border-radius: 10px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
.doctor_title_name{
    font-size: 17px;
    font-weight: 600;
}

.f_s + span{
    position: absolute !important;
    top: 3px !important;
    RIGHT: 20px !important;

}

.cross-icon
{font-size: x-large;
 color: white;
 position: absolute;
 right: 52px;
 top: 29px;}
label.f_l {
    margin-bottom: 0px;
}
input.f_s {
    margin-bottom: 5px;
}
.without_shadow{
    box-shadow: none;
}
.head_btn_div{
    padding: 70px 40px;
}
.up_text{
    font-size: 18px;
    font-weight: bold;
    transform: translateY(5px);
    margin: 0px;
    color: #ffc662;
    letter-spacing: 4px;
}
.title_intro_text{
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 56px;
}
.p_intro{
    font-size: 19px;
    color: #f7fbff;
    margin-bottom: 15px;
}
/**/
.card-container_cabinet{
    border-radius: 5px;
    box-shadow: 0 0 15px 1px #0045632e;
    text-align: center;
    transition: all .3s;
    position: relative;
    background: var(--theme-bg-card-1);   
    margin-bottom: 15px;
    padding-bottom: 15px;   
}
.card-container_cabinet:hover{
    box-shadow:0 0 20px 4px var(--theme-boxshadow-1);
}
.bg_card_cabinet{
    background:linear-gradient( -240deg, var(--theme-color-2) -80%, var(--theme-color-1) 160% );
    width: 100%;
    height: 100px;
    border-radius:5px 5px 0px 0px; 
}

.icons_plus_etat{
    display: inline-block;
    transform: translateY(-60px);
    position: relative;
}
.cabinets_icons{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background:var(--theme-cabinets-icons);
    padding: 15px;
    box-shadow: 0 0 17px 4px var(--theme-cabinets-icons-box-shadow);
    transition:  .5s;
}
.cabinets_icons i{
    color: #0a82ed;
}
.etat_cabinets{
    background: #31E87A;
    padding: 4px 2px;
    border-radius: 5px;
    width: 50px;
    position: absolute;
    font-size: 9px;
    color: black;
    font-weight: bold;
    bottom: -8px;
    left: 25px;
    text-transform: uppercase;

}
.name_cabinets{
    transform: translateY(-35px);
    font-size: 20px;
    font-weight: 600;
    padding: 0px 15px;
    text-transform: capitalize;
    color: var(--theme--head-text-color);
}
.buttons_cabinets{
    transform: translateY(-8px);
}
.btn_cabinet{
    border-radius: 50px;
    margin: 5px;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 0 15px 1px #00000017;
    text-transform:none;
    letter-spacing: 0.3px; 
}
.btn_color_purple{
    border:1.5px solid #6239F7;
    color: #6239F7;
    transition: .3s;
}
.btn_color_purple:hover{
    box-shadow: 0px 0px 14px 3px #6940ff7d;
    color: white;
    background:#6239F7; 
    transform: translateY(-5px);
}
.btn_color_sky{
    border:1.5px solid #36d3f7;
    color: #36d3f7;
    transition: .3s;
}
.btn_color_sky:hover{
    box-shadow: 0px 0px 14px 3px #36d3f7;
    color: white;
    background:#36d3f7; 
    transform: translateY(-5px);
}

    .cabi-top_card{
        /*        height: ;*/
    }
    .card-container:hover{
        box-shadow:0 0 20px 4px var(--theme-boxshadow-2);
    }

    .card-container {  
        background:linear-gradient( 240deg, var(--theme-color-2) 0%, var(--theme-color-1) 90% );
        background-size: cover;
        border-radius: 5px;
        box-shadow: 0 0 15px 1px #0045632e;
        color: #fff;
        text-align: center;
        transition: all .3s;
        position: relative;
    }
    .carosl_form{
        max-height: 200px; 
        overflow: auto; 
        background: #77889917; 
        padding: 20px 0px; 
        border-radius: 10px; 
        margin:0px 0px 15px 0px;
    }


    .card_user {
        box-shadow: 0px 0px 12px #0000001a;
        transition: 0.3s;
        border-radius: 12px;
        background:white;
        margin-top: 40px;
    }

    .card_user:hover {
        box-shadow: 0 0 20px 4px #76767647;
    }

    div.img_user {
        border-radius: 12px 12px 0 0;
        height: 400px;
        transition: 0.3s;
    }

    .container_desc {
        padding: 2px 16px;
    }
    .users_actions{
        float: right; 
        position: relative;
    }
    .users_actions span.users_actions_span{
        display: block; 
        padding: 0px 10px 0px 10px; 
        font-size: 22px;
        transition: 0.3s;
        cursor: pointer;
    }
    .users_actions .users_actions_span:hover{
        color: #6239F7;
    }
    .users_actions_menu{
        position: absolute; 
        right: 30px; 
        top: -60px; 
        background: white; 
        box-shadow: 0px 0px 10px #8080803d; 
        padding: 15px; 
        border-radius: 5px;
        opacity: 0;  
        visibility: hidden;
        z-index: 40;
        transition: 0.3s;
    }
    .users_actions_menu ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .users_actions_menu ul li{
        cursor: pointer;
        min-width: 250px;
        line-height: 2.5;
    }
    .users_actions_menu ul li a{
        color: black;
        DISPLAY: BLOCK;
    }

    .users_actions_menu ul li a:hover{
        color: #6239F7!important;
    }
    .users_actions_menu ul li span{
        display: inline-block;
        width: 40px; 
        text-align: center;
        font-size: 16px;

    }
    .users_actions_menu ul li:hover{
        color: #6239F7;
        background-color: whitesmoke;
        border-radius: 8px;
    }
    .submenu_users_show{

        opacity: 1; 
        visibility: visible;
    }
    .first_lettre{
        text-transform: capitalize;
    }




    .info_user_btn{
        position: absolute; 
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: 0.3s;
    }
    .img_user:hover .info_user_btn{
        opacity: 1;
    }

    /* button add user*/
    .btn_fixed_right_bottom {
        transition: 0.3s;
        background: linear-gradient( 240deg, var(--theme-color-2) 0%, var(--theme-color-1) 90% );
        text-align: center;
        color: white;
        position: fixed;
        bottom: 40px;
        right: 40px;
        z-index: 10;
        width: 60px;
        height: 60px;
        border-radius: 100%;
        font-size: 30px;
        cursor: pointer;
    }
    .btn_fixed_right_bottom span{
        display: block; 
        padding: 8px; 
        color: white;
    }
    /*.btn_fixed_right_bottom:hover{
        background: #2196F3;
    }*/
    .field-icon {
      position: absolute;
    top: 42px;
    right: 40px;
}
    .field-checkbox {
        width: 30px;
    height: 30px;
      position: absolute;
    top: 50px;
    right: 35px;
}
.cross-icon{
    font-size: 30px;
     color: white;
     position: absolute;
     right: 52px;
     top: 28px;
     cursor: pointer;
 }
 
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background: #e9f5ff;
}
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link:not(.active) {
/*    background: #e9f5ff;*/
}
  
.remove_filter_datatable .dataTables_filter, .dataTables_length {
    display: none;
}
.remove_filter_datatable table {
    margin-top: 0px;
}
    /*
    .card_user {
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
        transition: 0.3s;
        border-radius: 5px;
        margin-top: 70px;
    }

    .card_user:hover {
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    div.img_user {
        border-radius: 5px 5px 0 0;
        height: 400px;
        transition: 0.3s;
    }

    .container_desc {
        padding: 2px 16px;
    }
    .users_actions{
        float: right; 
        position: relative;
    }
    .users_actions span.users_actions_span{
        display: block; 
        padding: 0px 10px 0px 10px; 
        font-size: 22px;
        transition: 0.3s;
        cursor: pointer;
    }
    .users_actions .users_actions_span:hover{
        color: #6239F7;
    }
    .users_actions_menu{
        position: absolute; 
        right: 30px; 
        top: -60px; 
        background: white; 
        box-shadow: 0px 0px 10px #8080803d; 
        padding: 15px; 
        border-radius: 5px;
        opacity: 0;  
        visibility: hidden;
        z-index: 999;
        transition: 0.3s;
    }
    .users_actions_menu ul{
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .users_actions_menu ul li{
        cursor: pointer;
        min-width: 200px;
        padding-top: 5px;
    }
    .users_actions_menu ul li a{
        color: black;
    }

    .users_actions_menu ul li a:hover{
        color: #6239F7;
    }
    .users_actions_menu ul li span{
        display: inline-block;
        width: 25px; 
        text-align: center;
    }
    .users_actions_menu ul li:hover{
        color: #6239F7;
    }
    .submenu_users_show{

        opacity: 1; 
        visibility: visible;
    }
    .first_lettre{
        text-transform: capitalize;
    }




    .info_user_btn{
        position: absolute; 
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: 0.3s;
    }
    .img_user:hover .info_user_btn{
        opacity: 1;
    }

    /* button add user
    .btn_fixed_right_bottom {
        transition: 0.3s;
        background: #03a9f4;
        text-align: center;
        color: white;
        position: fixed;
        bottom: 40px;
        right: 40px;
        z-index: 10;
        width: 60px;
        height: 60px;
        border-radius: 100%;
        font-size: 30px;
        cursor: pointer;
    }
    .btn_fixed_right_bottom span{
        display: block; 
        padding: 8px; 
        color: white;
    }
    .btn_fixed_right_bottom:hover{
        background: #2196F3;
    }
    .papr {background-color: white;
           border-radius: 10px;
           box-shadow: 0px 0px 9px #31383b0d;
           height: 64px;
           margin: 5px -8px;
           padding: 10px 0px;
           position: relative;
    }
    .papr ul li {
        font-size: 8px;
        color: grey;
        DISPLAY: -WEBKIT-INLINE-BOX;
        font-size: unset;
        width: 136PX;
        width: auto;
        padding: 0PX 20PX;}
    .roles{
        position: fixed;
        border-radius: 15px;
        top: 10%;
        left: 21%;
        transition: 0.3s;
        z-index: 100;
        padding: 0px;
        transition: 0.6s;
        background-color: #F4F8F9!important;}
    */
    
        .sivi_modele{
            padding-top: 10px;
    background: #80808008;
    border-left: 5px solid var(--theme-color-1);
    padding: 0px 20px 10px;
        }
        
        .input_GR .inputGroup label.input_checkbox:after{
        border-radius: 3px;
    }
.input_GR .inputGroup{
    margin: 4px 0px;
    line-height: 2;
}
      .input_GR .inputGroup label {
    padding: 3px 3px 3px 28px;}
    .input_GR  .inputGroup label:after {
    width: 20px;
    height: 20px;
    left: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 49 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
    }
    
      #form_update_cons .inputGroup label {
    padding: 3px 3px 3px 28px;font-weight: 500;}
    #form_update_cons select,#form_update_cons input[type='date'],#form_update_cons input[type='text'],#form_update_cons input[type='number'],#form_update_cons textArea{
        font-weight: 500;
        color: #6239F7;
    }
    
    
    .links a {
    padding: 5px 10px;
}
.links_a{
    color: #515151;font-size: 18px;padding: 15px 15px 8px;font-weight: 600;
}
.label_info2{
        font-weight: 600;
        padding-bottom: 5px;
}
.label_info3{
        font-weight: 500;
}

    .info_cons{
        font-weight: 500;
        color: #6239F7;
    }
    
    #etiquette_cons label.f_l {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 700;
}
    .btn_updated{
        padding: 0px!important; 
        background-color: transparent!important; 
        box-shadow: none!important; 
        /*margin: 0px!important;*/
    }
    .btn_updated i{
        font-size: 28px!important;
    }

    @media (max-width: 1474px){
        #top_nav {
    height: 115px;
        }
        #content{
            padding-top: 125px !important;
        }
    }


    
                        .timeline-gros{
                            padding-top: 50px; padding-bottom: 100px;
                        }
                        .accouchement-timeline{position:relative;height:3px}
                        .accouchement-timeline:before{content:"";display:block;position:absolute;left:0;width:100%;height:3px;background-color:#ddd}
                        .accouchement-timeline:after{content:"";display:block;width:100%;height:9px;position:absolute;border-left:3px solid #ddd;border-right:3px solid #ddd;left:0;top:-3px}
                        .accouchement-timeline .progress{position:absolute;left:0;top:0;height:3px;background-color:#FFB636}
                        .accouchement-timeline .point-alpha .label,.accouchement-timeline .point-beta .label{color:#6239F7;font-size:16px;font-weight:600;display:block;width:150px}
                        .accouchement-timeline .point-alpha{position:absolute;z-index:2;width:3px;top:0}
                        .accouchement-timeline .point-alpha .legend{font-size:14px;text-align:center;width:150px;margin-top:10px;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
                        .accouchement-timeline .point-alpha:before{content:"";left:0;top:-3px;width:3px;height:9px;display:block;background-color:#4283f9;position:absolute}
                        .accouchement-timeline .point-alpha svg{position:absolute;top:-40px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);height:30px;fill:#eb3a3a}
                        .accouchement-timeline .point-beta{position:absolute;z-index:3;top:-17px;width:35px;height:35px;border-radius:50%;background-color:#fff;border:2px solid #4283f9;transition:.6s;}
                        .accouchement-timeline .parenting-tooltip{display: none;transition:.6s;}
                        .accouchement-timeline .point-beta:hover .parenting-tooltip{display: block;transition:.6s ease}
                        .accouchement-timeline .point-beta .parenting-tooltip{z-index:3;left:-20px;padding:10px;top:43px;position:absolute;background-color:#fff;border:1px solid #ddd;font-size:14px;}
                        .accouchement-timeline .point-beta .parenting-tooltip:before{content:"";display:block;width:15px;height:15px;-webkit-transform:rotate(45deg);transform:rotate(45deg);background-color:#fff;position:absolute;top:-8px;left:27px;border-left:1px solid #ddd;border-top:1px solid #ddd}
                        .parenting-banner{
                            position: relative;
                            width: 300px;
                            margin: 0 auto;
                        }
                        .parenting-banner .day, .parenting-banner .month, .parenting-banner .year{
                            position: absolute;
                            font-size: 35px;
                            top: 93px;
                            width: 42px;
                            text-align: center;
                            color: white;
                            font-weight: 500;
                        }