@import url("/css/var.css");
@import url("/css/menu.css");
@import url("/css/light_range.css");
@import url("/css/notif.css");
@import url("/css/toggle.css");
@import url("/css/loader.css");


/**{
    font-family: Poppins;    
}*/

@font-face {
	font-family: Poppins;
	src: url('/fonts/Poppins-Regular.ttf');
}

@font-face {
	font-family: Poppins_light;
	src: url('/fonts/Poppins-Light.ttf');
}

@font-face {
	font-family: Poppins_bold;
	src: url('/fonts/Poppins-Bold.ttf');
}

@font-face {
	font-family: Poppins_medium;
	src: url('/fonts/Poppins-Medium.ttf');
}

@font-face {
	font-family: Poppins_semi_bold;
	src: url('/fonts/Poppins-SemiBold.ttf');
}


html{
    background: linear-gradient(45deg, var(--background_body_1), var(--background_body_2));
    
}

body { 
    height: 98vh;
    cursor : default;
    font-family: Poppins;   
}

.desktop_mask{
        display: none;
    }

    .mask_all{
        display: none;
    }

.icon_color {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

.scroll_history{
    overflow-y: scroll; 
    height: calc(100% - 440px);
    transition: scrollbar-color .6s;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;

}

/*.scroll_history:hover{        
        scrollbar-color: var(--background_topic_hover) var(--background_tile) ;
}*/

.scroll_email_cpy{
    overflow-y: scroll; 
    height: calc(100% - 490px);
    transition: scrollbar-color .6s;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;
}
/*.scroll_email_cpy:hover{        
        scrollbar-color: var(--background_topic_hover) var(--background_tile) ;
}*/

.scroll_list_menu{
    overflow-y: scroll;    
    transition: scrollbar-color .6s;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;
    
}
/*.scroll_list_menu:hover{        
        scrollbar-color: var(--background_topic_hover) var(--background_tile) ;
}*/


.scroll_list{
    overflow-y: scroll; 
    height: calc(100% - 250px);
    transition: scrollbar-color .6s;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;
    margin-top:10px;
    border-radius: 10px;
    
}

.scroll_list_tk_perso{
    overflow-y: scroll; 
    height: calc(100% - 400px);
    transition: scrollbar-color .6s;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;
    margin-top:10px;
    border-radius: 10px;
    
}
/*.scroll_list:hover{        
        scrollbar-color: var(--background_topic_hover) var(--background_tile) ;
}*/

.scroll_list_max{
    overflow-y: scroll; 
    height: calc(100% - 250px);
    transition: scrollbar-color .6s;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;
    margin-top:10px;
    border-radius: 10px;  
}
/*.scroll_list_max:hover{        
        scrollbar-color: var(--background_topic_hover) var(--background_tile) ;
}*/

.scroll_list_stock_article{
    overflow-y: scroll; 
    height: calc(100% - 500px);
    transition: scrollbar-color .6s;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;
    margin-top:10px;
    border-radius: 10px;  
}

.scroll_list_reserved{
    overflow-y: scroll; 
    height: calc(100% - 900px);
    transition: scrollbar-color .6s;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;
    margin-top:10px;
    border-radius: 10px;  
}
/*.scroll_list_stock_article:hover{        
        scrollbar-color: var(--background_topic_hover) var(--background_tile) ;
}*/

.scroll_list_title{
    overflow-y: scroll; 
    height: calc(100% - 300px);
    transition: scrollbar-color .6s;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;
}
/*.scroll_list_title:hover{        
        scrollbar-color: var(--background_topic_hover) var(--background_tile) ;
}*/

.scroll_detail{
    overflow-y: scroll; 
    height: calc(100% - 100px);
    transition: scrollbar-color .6s;
    scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;
}
/*.scroll_detail:hover{        
        scrollbar-color: var(--background_topic_hover) var(--background_tile) ;
}*/

.title {
    width: 100%; 
    font-weight: 500;
    color: var(--text_color);    
    text-align: center;    
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}



.font_success{
    color: var(--font_success);
    
}

.font_warning{
    color: var(--font_warning);
    
}

.font_alert{
    color: var(--font_alert);
    
}

.font_little{
    font-size: 10px;
    
}


.font_middle{
    font-family: Poppins_light;
    font-size: 14px;
    
}

.font_table{
    font-family: Poppins_light;
    font-size: 18px;
    color: var(--font_purple);
}



.font_large{
    font-size: 18px;
    
}

.font_Extra_large{
    font-size: 22px;
    
}

.font_Title{
    font-size: 30px;    
}

.font_color{
    color: var(--text_color);
    
}
.font_color_gray{
    color: var(--text_color_gray);
    opacity: .7;
}

.font_color_black{
    color: black;
    
}

.font_light{
    font-family: Poppins_light;
    
    
}


.center{
    margin-left:auto;
    margin-right:auto;
    /*Préciser width:*/
}




  /*DASHBOARD*/

.menu {
    background: var(--background_bar);
    margin-top: 5px;
    padding: 5px;
    border-radius: 10px;   
    
}

.fond_logo {
    background: var(--background_logo);
    /*margin-top: 5px;*/
    padding: 2px;
    border-radius: 10px;
    
    
}

.dash_container_menu {    
    /*background-color: aqua;*/
    max-width: 5000px;
    /*margin: 10px 10px;*/
    display: grid;
    
    /*gap: 20px;*/    
}

@media (min-width: 900px) {
    .dash_container_menu { grid-template-columns: 300px auto; }
}



.tile_menu1 {
    height: 70px;
    font-weight: 500;
    border-radius: 10px;  
    color: var(--text_color); 
    align-items: center;
    
    vertical-align: middle;   
    display: flex;
}

.tile_menu2 {
    height: 70px;   
    font-weight: 500;
    border-radius: 10px;  
    color: var(--text_color);    
    
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    display: flex;
}

.tile_center {
    color: var(--text_color);    
    
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    display: flex;
}






.bg_total {
    background: var(--background_tile);    
    border-radius: 10px;
    padding: 5px; 
    margin-top : 10px;   
}


.dash_container_total {    
    /*background-color: aqua;*/
    max-width: 5000px;
    margin: 10px 10px;
    display: grid;
    gap: 20px;    
}

.dash_container_captures {    
    /*background-color: aqua;*/
    max-width: 5000px;
    margin: 10px 10px;
    display: grid;
    gap: 10px;    
}
@media (min-width: 450px) {
    .dash_container_captures { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 650px) {
    .dash_container_captures { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 850px) {
    .dash_container_captures { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1050px) {
    .dash_container_captures { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1250px) {
    .dash_container_captures { grid-template-columns: repeat(6, 1fr); }
}
@media (min-width: 1450px) {
    .dash_container_captures { grid-template-columns: repeat(7, 1fr); }
}
@media (min-width: 1650px) {
    .dash_container_captures { grid-template-columns: repeat(8, 1fr); }
}


.tooltip_icon {
    position: relative;
    display: flex;
    background-color: var(--background_topic);
    width: 100%; 
    height: 30px;
    border-radius: 10px;  
    color: var(--text_color);    
    text-align: center;    
    align-items: center;
    justify-content: center;
    vertical-align: middle;  
  /*border-bottom: 1px dotted black;*/
}

.tooltip_icon .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #222;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 5px;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip_icon .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip_icon:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.dash_container_icons {    
    /*background-color: aqua;*/
    max-width: 5000px;
    margin: 10px 10px;
    display: grid;
    gap: 10px;    
}
@media (min-width: 140px) {
    .tooltip_icon{height: 30px;}
    .dash_container_icons { grid-template-columns: repeat(2, 1fr); }
    
}
@media (min-width: 210px) {
    .tooltip_icon{height: 35px;}
    .dash_container_icons { grid-template-columns: repeat(3, 1fr); }
    
}
@media (min-width: 280px) {
    .tooltip_icon{height: 40px;}
    .dash_container_icons { grid-template-columns: repeat(4, 1fr); }
    
}
@media (min-width: 350px) {
    .tooltip_icon{height: 45px;}
    .dash_container_icons { grid-template-columns: repeat(5, 1fr); }
    
}
@media (min-width: 420px) {
    .tooltip_icon{height: 50px;}
    .dash_container_icons { grid-template-columns: repeat(5, 1fr); }
    
}
@media (min-width: 490px) {
    .tooltip_icon{height: 55px;}
    .dash_container_icons { grid-template-columns: repeat(6, 1fr); }
    
}
@media (min-width: 560px) {
    .tooltip_icon{height: 60px;}
    .dash_container_icons { grid-template-columns: repeat(6, 1fr); }
    
}
@media (min-width: 630px) {
    .tooltip_icon{height: 60px;}
    .dash_container_icons { grid-template-columns: repeat(7, 1fr); }
    
}
@media (min-width: 700px) {
    .tooltip_icon{height: 60px;}
    .dash_container_icons { grid-template-columns: repeat(7, 1fr); }
    
}
@media (min-width: 770px) {
    .tooltip_icon{height: 60px;}
    .dash_container_icons { grid-template-columns: repeat(8, 1fr); }
    
}



.cursor_pointer{
    cursor: pointer;
}

select option:hover{
    background: var(--notif_info) !important;
}

select option:focus, option:active, option:checked {
    
    
    
    background: var(--notif_alert) !important;

    /*color: var(--notif_info) !important;*/
}

/*TOOLTIPS*/

.td_opt_button {
  
  display: inline-block;
  
}

.td_opt_button .opt_button{
  visibility: hidden;  
  opacity: 0;
  transition: opacity 0.3s;
}

.td_opt_button .opt_button::after{  
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.td_opt_button:hover .opt_button{
  visibility: visible;
  opacity: 1;
}



.tooltip {
  position: relative;
  display: inline-block;
  /*border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #222;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/*MENU CONTEXTUEL*/

.window_context_menu{
    position: absolute;
    border-radius: 10px;  
    
    border: 1px solid var(--background_topic);
    
    background-color: var(--background_context);
    color: var(--text_color); 
    padding: 10px 0;
    z-index: 900;
    display: none;
}

.window_context_menu.active{
    display: initial;
}

.context_menu{
    list-style: none;
    padding: 0;
    margin: 0;
}

.context_menu_item{
    padding: 0 10px;
}

.context_menu_item:hover{
    background-color: var(--background_topic_hover);  
    
}

.context_menu_separator{
    height: 1px;
    background-color: grey;
    margin: 5px 0;
}

@media (min-width: 600px) {
    .dash_container_total { grid-template-columns: repeat(2, 1fr); }
    .scroll_dashboard{
        
        height: calc(100% - 450px);
    }

}

@media (min-width: 900px) {
    .dash_container_total { grid-template-columns: repeat(3, 1fr); }
    .scroll_dashboard{
        
        height: calc(100% - 450px);
    }

}

@media (min-width: 1200px) {
    .dash_container_total { grid-template-columns: repeat(4, 1fr); }
    .scroll_dashboard{
        
        height: calc(100% - 400px);
        
    }
    
}
.scroll_dashboard{
        overflow-y: scroll;
        
        transition: scrollbar-color .6s;
        scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) ;
    }

/*.scroll_dashboard:hover{
        
        scrollbar-color: var(--background_topic_hover) var(--background_tile) ;
    }*/

/*@media (min-width: 1600px) {
    .dash_container_total { grid-template-columns: repeat(4, 1fr); }
}*/

.tile_total {
    background-color: var(--background_topic);
    width: 100%; 
    height: 80px;   
    font-weight: 500;
    border-radius: 10px;  
    color: var(--text_color);    
    text-align: center;    
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    display: flex;
    
    
}



.dash_container_history {    
    /*background-color: aqua;*/
    max-width: 5000px;
    margin: 10px 10px;
    display: grid;
    gap: 20px;
    height: calc(100% - 440px);    
}

@media (min-width: 800px) {
    .dash_container_history { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .dash_container_history { grid-template-columns: repeat(3, 1fr); }
}


.tile_history {
    background-color: var(--background_topic);
    width: 100%; 
    height: 100%;
    /*height: 800px; */
    font-weight: 500;
    border-radius: 10px;  
    color: var(--text_color);    
    text-align: center;    
    align-items: center;
    justify-content: center;
    
    
    
}

.tile_stock_article {
    background-color: var(--background_topic);
    border-radius: 10px;  
    color: var(--text_color);    
    text-align: center;    
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    
    
    
}


.tile_capture {
    background-color: var(--background_topic);
    width: 100%; 
    height: 240px;   
    font-weight: 500;
    border-radius: 10px;  
    color: var(--text_color);    
    text-align: center;    
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    
    
}


.bg {
    /*background: var(--background_tile);  */  
    border-radius: 10px;
    padding: 10px; 
    margin-top : 10px;   
}


.dash_container {    
    /*background-color: aqua;*/
    max-width: 5000px;
    margin: 10px 10px;
    display: grid;
    gap: 20px;    
}

@media (min-width: 125px) {
    .dash_container { grid-template-columns: repeat(1, 1fr); }
}

@media (min-width: 250px) {
    .dash_container { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 500px) {
    .dash_container { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 750px) {
    .dash_container { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1000px) {
    .dash_container { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 1250px) {
    .dash_container { grid-template-columns: repeat(6, 1fr); }
}


.tile {
    background-color: var(--background_topic);
    width: 100%; 
    font-weight: 500;
    border-radius: 10px;  
    color: var(--text_color);    
    text-align: center;
    align-items: center; 
    justify-content: center; 
    
    
}


.tableau{
    background: var(--background_table); 
    /*border-radius: 10px;
    margin-top:10px; */
    width:100%;
    border-collapse: collapse;
       
    
}

.tableau_wb{
    border-radius: 10px;
    margin-top:10px; 
    width:100%;
    border-collapse: collapse;
   
       
    
}



tr{
    color: var(--text_color_gray);
    font-family: Poppins_light;
    /*border-top: 1pt solid black;*/
    /*border-top-style: dotted;*/
    /*border-top-width: 1px;
    border-color: rgb(0, 0, 0);*/
}

td {
    text-align: center;
    align-items: center; 
    justify-content: center;
    
}

.excentr {
    background: rgba(255, 0, 0, 1);
    text-align: center;
    align-items: center; 
    justify-content: center;
}
  
  
  
.flex {
    text-align: center;    
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    display: flex;
    
}

.flex_haut {
    width: 100%; 
    text-align: center;    
    /*align-items: center;*/
    justify-content: center;
    /*vertical-align: middle;*/
    display: flex;
    
}





.formulaire {
    background: var(--background_tile);
    padding: 10px;
    border-radius: 20px;
    /*border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, .2);*/
    text-align: center;
    margin: 10px;
}

.formulaire_signature {
    background: var(--background_tile);
    padding: 10px;
    border-radius: 20px;
    /*border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, .2);*/
    text-align: center;
    margin: 10px;
}

.canvasDiv{
    border-radius: 10px;
    /*height:300px;
    width: 500px;*/
    background:rgba(255, 255, 255, .5);
    /*border : solid 3px #474747;*/

}

/*.canvas_signature{
        height:300px;
        width: 500px;
    }*/


p {
    color: var(--text_color);
    font-weight: 500;
    opacity: .7;
    font-size: 1.4rem;
    /*margin-bottom: 60px;*/
    text-shadow: 2px 2px 4px rgba(0, 0, 0, .2);
}



a {
    text-decoration: none;
    color: var(--text_color);
    font-size: 12px;
}

a:hover {
    text-shadow: 2px 2px 6px #00000040;
}

a:active {
    text-shadow: none;
}




.form_input_di {
    background:rgb(180, 180, 180);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    margin-left:5px;
    margin-right:5px;
    width: 500px;
    border-radius: 10px;    
    box-shadow: 4px 4px 60px rgba(0, 0, 0, .2);
    color: rgb(70, 70, 70);
    font-weight: 500;
    transition: all .3s;
    margin-bottom: 5px;
}

.form_input_di:hover,
.form_input_di[type="email"]:focus,
.form_input_di[type="password"]:focus {
    background: rgb(235, 235, 235);
    box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
}

.form_input_di_transparent {
    border: none;
    padding: 5px;
    width: 500px;
    border-radius: 10px;    
    color: rgb(70, 70, 70);
    font-weight: 500;
    transition: all .3s;
    margin-bottom: 5px;
    left:auto;
    right: auto;
}

.form_input_di_transparent:hover,
.form_input_di_transparent[type="email"]:focus,
.form_input_di_transparent[type="password"]:focus {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
}

.form_input_di_color {
    background:rgb(191, 191, 191);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    margin-left:5px;
    margin-right:5px;
    width: 500px;
    border-radius: 10px;    
    box-shadow: 4px 4px 60px rgba(0, 0, 0, .2);
    color: rgb(70, 70, 70);
    font-weight: 500;
    transition: all .3s;
    margin-bottom: 5px;
}

.form_input_di_color:hover,
.form_input_di_color[type="email"]:focus,
.form_input_di_color[type="password"]:focus {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
}

.form_input_flex {
    background:rgb(180, 180, 180);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    margin-left:5px;
    margin-right:5px;
    width: 80%;
    border-radius: 10px;    
    box-shadow: 4px 4px 60px rgba(0, 0, 0, .2);
    color: rgb(70, 70, 70);
    font-weight: 500;
    transition: all .3s;
    margin-bottom: 5px;
}

.form_input_flex:hover,
.form_input_flex[type="email"]:focus,
.form_input_flex[type="password"]:focus {
    background: rgb(235, 235, 235);
    box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
}

.bg_for_flex{
    padding: 5px; 
    width:160px;
} 



.form_input {
    background:rgb(180, 180, 180);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 500px;
    border-radius: 10px;    
    box-shadow: 4px 4px 60px rgba(0, 0, 0, .2);
    color: rgb(70, 70, 70);
    font-weight: 500;
    transition: all .3s;
    margin-bottom: 5px;
}

.form_input_text:hover,
.form_input_text[type="email"]:focus,
.form_input_text[type="password"]:focus {
    background: rgb(235, 235, 235);
    box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
}

.form_input_text {
    background:rgb(180, 180, 180);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, .3);
    border-top: 1px solid rgba(255, 255, 255, .3);
    padding: 1rem;
    width: 500px;
    height:150px;
    border-radius: 10px;    
    box-shadow: 4px 4px 60px rgba(0, 0, 0, .2);
    color: rgb(70, 70, 70);
    font-weight: 500;
    transition: all .3s;
    margin-bottom: 5px;
}

.form_input:hover,
.form_input[type="email"]:focus,
.form_input[type="password"]:focus {
    background: rgb(235, 235, 235);
    box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
}



.form_input_button {
    background-color: var(--background_topic);
    width: 550px; 
    height: 50px;   
    font-weight: 500;
    border-radius: 10px;    
    color: var(--text_color);    
    border: none; 
    transition: all .3s;
    cursor: pointer;
    margin-top: 5px;
}

.form_input_button:hover {
    background-color: var(--background_topic_hover);
    transform: scale(1);
}

.form_input_button:active {
    background-color: var(--background_topic_active);
    box-shadow: 0 5px #666;
    transform: scale(0.9);
}

.form_input_button_flex {
    background-color: var(--background_topic);
    width: 80%; 
    height: 50px;   
    font-weight: 500;
    border-radius: 10px;    
    color: var(--text_color);    
    border: none; 
    transition: all .3s;
    cursor: pointer;
    margin-top: 5px;
    margin-left:10px;
    margin-right:10px;
}

.form_input_button_flex:hover {
    background-color: var(--background_topic_hover);
    transform: scale(1);
}

.form_input_button_flex:active {
    background-color: var(--background_topic_active);
    box-shadow: 0 5px #666;
    transform: scale(0.9);
}

.dash_toggle {
    background-color: var(--background_topic);
    width: 100%; 
    height: 80px;   
    font-weight: 500;
    border-radius: 10px;    
    color: var(--text_color);    
    border: none; 
    transition: all .3s;
    cursor: pointer;
    margin-top: 5px;
    
}

.dash_toggle:hover {
    background-color: var(--background_topic_hover);
    transform: scale(1);

}

.dash_toggle:active {
  background-color: var(--background_topic_active);
  box-shadow: 0 5px #666;
  transform: scale(0.9);
  /*transform: translateY(4px);*/
}

input[type=file] {
  color: #222245;
  padding: 8px;
  background:rgba(180, 180, 180, .8);
  border: none;
  border-radius: 20px;    
    
}

input[type=file]:focus {
  outline: 2px dashed #222245;
  outline-offset: 2px;
}

input[type=file]::file-selector-button {
  margin-right: 8px;
  border: none;
  background:rgb(180, 180, 180);
  padding: 8px 12px;
  color: rgb(70, 70, 70);
  cursor: pointer;
  transition: all .3s;
  border-radius: 20px;    
    
}

input[type=file]::file-selector-button:hover {
  background-color: var(--background_topic_hover);
  color: rgb(255, 255, 255);
}

input[type=file]::file-selector-button:active {
  background-color: var(--background_topic_active);
  box-shadow: 0 5px #666;
  transform: scale(0.9);
  color: rgb(255, 255, 255);
  transform: scale(0.9);
    
  
}



/*input[type="file"] {
  display: none;
}*/

/*.form_input_upload {
    background:rgb(191, 191, 191);
    border: none;
    transition: all .3s;    
    width: 100%; 
    height: 80px;   
    border-radius: 50px;    
    color: rgb(70, 70, 70);
    font-weight: 500;
    padding: 1rem;
    
    
    
    
    
}

.form_input_upload:hover,
.form_input_upload:focus{
    background-color: var(--background_topic_hover);
    transform: scale(1);
    color: rgb(255, 255, 255);
}*/

/*.form_input_upload:active {
  background-color: var(--background_topic_active);
  box-shadow: 0 5px #666;
  transform: scale(0.9);
  color: rgb(255, 255, 255);
    
  
}*/



/*****************************/

/*nav 
{
    width: 30%;
    height: 65px;
    right: 5px;
    position :absolute; 
    right:0;
}
 
nav .main_pages 
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    
}
 
nav .main_pages a 
{
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    color: var(--text_color);
    border-radius: 5px;    
    
    
}
 
nav a:hover 
{
    background: var(--background_topic_hover);
    
}

label, #toggle
{
    display: none;
}*/
.sr-only {
  position: absolute;
  top: -30em;
}

table.sortable td,
table.sortable th {
  padding: 0.125em 0.25em;
  
}

table.sortable th {
  font-weight: bold;
  position: relative;
}

table.sortable th.no-sort {
  padding-top: 0.35em;
}

table.sortable th:nth-child(5) {
  width: 10em;
}

table.sortable th button {
  padding: 4px;
  margin: 1px;
  font-size: 100%;
  background: transparent;
  border: none;
  display: inline;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  outline: none;
  cursor: pointer;
  text-align: center;
  align-items: center; 
  justify-content: center;
  color: var(--text_color_gray_dark);
  font-family: Poppins_medium;
}

table.sortable th button span {
  position: absolute;
  right: 4px;
}

table.sortable th[aria-sort="descending"] span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;  
  top: 0;
}

table.sortable th[aria-sort="ascending"] span::after {
  content: "▲";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.show-unsorted-icon th:not([aria-sort]) button span::after {
  content: "♢";
  color: currentcolor;
  font-size: 100%;
  position: relative;
  top: -3px;
  left: -4px;
}

table.sortable td.num {
  text-align: right;
}



/* Focus and hover styling */

table.sortable th button:focus,
table.sortable th button:hover {
  padding: 3px;
  border: 2px solid currentcolor;
  background-color: rgba(54, 162, 236, .3);
  border-radius: 10px;
  border-color: rgba(50, 50, 50, .8);
  
}

table.sortable th button:focus span,
table.sortable th button:hover span {
  right: 2px;
}

table.sortable th:not([aria-sort]) button:focus span::after,
table.sortable th:not([aria-sort]) button:hover span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.sortable tbody tr:nth-child(2n) td {
  background: var(--background_table1);
}
table.sortable tbody tr:nth-child(2n+1) td {
  background: var(--background_table2);
}

.qr_code_menu{
    position: absolute;
    border-radius: 10px;
    padding:2px; 
    border-style: none;
    right: 20px; 
    width:64px;
    height: 64px;   
}

.input_search{
    background: rgba(255, 255, 255, .8);   
    border-radius: 10px;
    padding: 5px; 
    color: var(--background_bar); 
    border-style: none;
    float: right;
    width:25%;
    margin-top:17px;
    margin-right: 20px;
}

.input_search_create_ri{
    background: rgba(255, 255, 255, .8);   
    border-radius: 10px;
    padding: 5px; 
    color: var(--background_bar); 
    border-style: none;
    float: right;
    width:25%;
    margin-top:15px;
    margin-right: 20px;
}



.search_bar{
    height: 50px;
}

footer {
    position: absolute; 
    bottom: 0;
    text-align: center;
}

.plus{
    position: absolute; 
    right:60px;
    bottom: 60px;
    width:80px;
    height: 80px;
    border-radius: 40px;
    color: var(--text_color);
    line-height: 80px;
    align-items: center;
    font-size: 40px;
    font-weight: 100;
    background-color: var(--background_topic);
    border: none; 
    transition: all .3s;
    cursor: pointer;
}

.plus:hover {
    background-color: var(--background_topic_hover);
    transform: scale(1);
}

.plus:active {
    background-color: var(--background_topic_active);
    box-shadow: 0 5px #666;
    transform: scale(0.9);
}

 
@media all and (max-width: 991px)
{

    

    html{
        background: var(--background_body_mobile);
    }

    body { 
        height: 90vh;
        cursor : default;
        font-family: Poppins;
        
    }
    .mobile_mask{
        display: none;
    }
    .desktop_mask{
        display: block;
    }

    .plus{
        
        right:20px;
        bottom: 10px;
        width:50px;
        height: 50px;
        border-radius: 25px;
        color: var(--text_color);
        line-height: 50px;
        align-items: center;
        font-size: 30px;
        font-weight: 100;
        
    }


    .mobile_right{
        position:absolute;
        right:20px;
    }

    .input_search{
        float: none;
        
        height: 25px;
        width:80%;
        margin-left:10%;
        margin-top:5px;
    }

    .input_search_create_ri{
        float: none;
        
        height: 25px;
        width:80%;
        margin-left:2%;
        margin-top:5px;
    }


    .mobile_center{        
        text-align: center;    
        align-items: center;
        justify-content: center;
        vertical-align: middle;        
    }

    .mobile_padding{
        padding: 10px;
    }

    .mobile_margin_left{
        margin-left: 90px;
    }

    .aspan {

        font-size: 12px;
    }
    /*.canvasDiv{
        height: 200px;
        width: 300px;
    }*/

    /*.canvas_signature{
        height: 100%;
        width: 100%;
    }*/

    .form_input {        
        width: 80%;        
    }

    .form_input_text {
        width: 80%;
    }

    .form_input_di {
        width: 80%;
    }

    .form_input_di_color {
        width: 80%;
    }

    .form_input_di_transparent{
        width: 80%;
    }

    .form_input_flex {
        width: 60%;
    }

    .bg_for_flex{
        padding: 1px; 
        width:30%;
    }

    .form_input_button {
        width: 80%;
    }

    .mobile_margin_top{
        margin-top:10px;

    }

    .search_bar{
        height: 130px;
    }

    .font_Title{
        font-size: 16px;    
    }

    .font_Extra_large{
        font-size: 18px;    
    }

    .font_table{
        font-size: 10px;
        
    }

    
    
    
    .dash_button:hover {
        transform: scale(1);
    
    }
    
    .dash_button:active {
      background-color: var(--background_topic_hover);
      box-shadow: 0 5px #666;
      transform: scale(0.9);
      /*transform: translateY(4px);*/
    }

    tr{
        font-size: 11px;
        
    }
    .mobile_font_size_9{
        font-size: 9px;
        
    }
    

    .scroll_list{        
        height: calc(100% - 310px);        
    }

    .scroll_list_tk_perso{        
        height: calc(100% - 310px);        
    }

    .scroll_list_max{        
        height: calc(100% - 210px);        
    }

    /*.tile {
        margin: 5px;
        
        width:98%;
        
        border-radius: 10px;
        padding: 10px;    
        
    }*/


    /*nav
    {
        background: rgba(255, 0, 0, 1);
        height: 60px;
        z-index: 99;
        align-items: right;
        justify-content: right;
        width: 100%;
        text-align: right;  
        
    }
 
    nav .main_pages 
    {
        background: rgba(0, 250, 0, 1);
        display: none;
        flex-direction: column;
        background: #48435C;
        height: 220px;
        z-index: 99;
        width: 100%;
        margin-left:-100%;
    }
 
    nav .main_pages a {
        background: rgba(0, 0, 250, 1);
        width: 100%;
        z-index: 99;
    }
 
    label 
    {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        color: var(--text_color);
        cursor: pointer;
    }
 
    #toggle:checked + .main_pages {
        display: flex;
    }*/
}

@media all and (max-width: 801px)
{

    

    .bg_for_flex{
        zoom: 0.8;
        
    }

    .bg {
         zoom: 0.8;   
    }

    

}