.page-app .system-footer { padding: 10px; font-size: 12px }
.page-app .status-icon-wrapper { width: 18px; height: 18px}

.N_Cadre { border-right: #000000 thin solid; border-top: #000000 thin solid; border-left: #000000 thin solid; border-bottom: #000000 thin solid; }

.N_Combo { border-right: #000000 thin solid; border-top: #000000 thin solid; border-left: #000000 thin solid; border-bottom: #000000 thin solid; padding: 0 0 0 0; margin: 0 0 0 0; }

.Password { font-size: 12px; color: infotext; font-family: Wingdings, 'Wingdings 2', 'Wingdings 3'; text-align: left; width: 150px; }

.N_MenuFixi8 { z-index: 100; background-color: #FFFBD6; }

.M_MenuStatitc { padding-left: 5px; padding-top: 10px; font-family: Arial, Times, serif; font-size: medium; }

.M_MenuDynamic { padding-left: 5px; padding-right: 5Px; padding-top: 5px; padding-bottom: 2px; background-color: #FDFDF7; border-style: none; font-family: Arial, Times, serif; font-size: medium; }

.M_MenuDynamic img { width: 20px; height: 20px; }

.M_MenuStatitc img { width: 20px; height: 20px; }

.M_MenuDynamicHoover { border: thin ridge #000000; background-color: #A9C9ED; }

.M_MenuStatichoover { border: thin ridge #000000; background-color: #A8A8A8; }

.N_Tete { width: 100%; height: 122px; margin: 0px; }

.N_Tete_Bouton { background-image: url(style/menu/title_degrad_hd.jpg); background-repeat: no-repeat; height: 46px; border-right: 1px black solid; text-align: right; color: White; font-family: Arial; font-size: medium; width: 100%; }

.N_Tete_Bouton_BT { text-align: right; color: White; font-family: Arial; font-size: medium; border-style: none; text-decoration: none; background-color: transparent; }

.N_Tete_Bouton img { margin-right: 12px; margin-top: 12px; height: 22px; }

.N_View_famille { /*titre présentation article*/ border: 0px; padding: 2px; background-color: #ddd; font-size: 16px; font-family: Arial; font-weight: bold; width: 176px; }

.N_View_titre { /*titre présentation article*/ border: 1px solid black; font-size: 16px; font-family: Arial; font-weight: bold; width: 148px; }

.N_View_corps { /*corps présentation article*/ border-left: 1px solid black; border-right: 1px solid black; width: 148px; background-image: url('style/Presentation/corps_article.jpg'); background-position: right bottom; background-repeat: no-repeat; font-size: 9px; font-family: Arial; font-weight: bold; }

.N_View_foot { /*pied présentation article*/ border: 0px; width: 150px; background-image: url('style/Presentation/foot_article.jpg'); background-repeat: no-repeat; }

.N_SousTitre { border-style: solid; border-width: thin; font-family: Arial; font-size: medium; font-weight: bold; color: Black; text-decoration: none; width: 300px; }

.N_Titre { font-family: Arial; font-size: large; font-weight: bold; color: black; text-decoration: none; padding: 0 0 0 0; }

.N_TitreBT { border: none; font-family: Arial; font-size: medium; height: 45px; padding-left: 10px; padding-right: 10px; }

.link_N_TitreBT { height: 45px; border: none; font-family: Arial; font-size: medium; display: inline-block; padding-top: 14px; padding-left: 16px; padding-right: 16px; padding-bottom: 18px; text-decoration: none; height: 13px }

.link_N_TitreBT a { text-decoration: none; }

.link_N_TitreBT a:visited { color: white; }

.N_Fonction { border-style: outset; border-width: thin; font-family: Arial; font-size: large; font-weight: bold; text-decoration: none; background-color: #DFDFDF; text-align: left; height: 45px; }

.N_FonctionBT { border: 0; border-radius: 5px; font-family: Arial, Helvetica, sans-serif; font-size: small; background-color: #666666; height: 40px; color: #fff; padding: 0 10px; }

.N_Combo_table { border: thin inset #E2E2E2; padding: 0 0 0 0; margin: 0 0 0 0; }

.N_Combo_table_mandatory { border: thin inset #E2E2E2; padding: 0 0 0 0; margin: 0 0 0 0; background-color: #f6fafc; }

.N_BT_Function_en_ligne { display: inline-block; width: auto; padding: 10px; margin: 10px; background-color: #fff; vertical-align: top; border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #fafafa; }

.N_BT_Image { display: inline-block; width: auto; padding: 5px; margin: 5px; background-color: #fff; vertical-align: top; border: 1px grey solid; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; font-family: Arial; }

.N_BT_Image_nb { display: inline-block; width: auto; padding: 2px; margin: 2px; background-color: #fff; vertical-align: top; font-family: Arial; border: none; }

.N_BT_Image_txt { text-align: right; border-style: none; text-decoration: none; background-color: transparent; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000; }

.N_BT_Image button { text-align: right; color: White; font-family: Arial, Helvetica, sans-serif; font-size: medium; text-align: center; border-style: none; text-decoration: none; background-color: transparent; }

.N_Etat_qualite_J { background-color: #F0E68C; }

.N_Etat_qualite_B { background-color: #ADD8E6; }

.N_Etat_qualite_V { background-color: #66CDAA; }

.N_Etat_qualite_W { background-color: #FFFFFF; }

.N_Etat_red { background-color: #E66C82; }

.N_Overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.05); padding-top: 25%; padding-left: 30%; z-index: 999999999; cursor: none; width: 120px; }

.N_overlay_m { position: fixed; top: 45%; left: 45%; font-family: Arial; font-size: 16px; font-weight: normal; z-index: 1999999999; padding: 15px; cursor: none; }

.N_Default_badge { cursor: none; background-color: #E0E0E0; }

#progressBackgroundFilter { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; padding-top: 25%; padding-left: 30%; cursor: none; }

.N_Chapitre { width: 500px; height: 20px; font-family: Arial; font-size: 14px; padding-top: 6px; padding-left: 5px; font-weight: bold; color: White; background-color: #6699FF; }

.N_Texte { font-family: Arial; font-size: 12px; font-weight: bold; color: #000000; }

.N_Tache_F { width: 100%; border: none; }

.C_TD_Scanner { font-size: 20px; font-weight: bold; color: white; margin-left: 10px; }

.N_Serie_Add { border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #f6fafc; }

.N_Serie_Add hover { background-color: #f2f1dc; }

.N_Logon_table { max-width: 450px; font-family: verdana; font-size: 10px; background-color: #fff; }

.N_Logon_logo { max-width: 160px; width: 150px; text-align: center; }

.N_TexteVertical { width: 25px; }

.Td_chapitre { border-style: ridge; width: 75%; border-width: thin; font-family: Arial, Helvetica, sans-serif; font-size: small; background-color: #DDDDDD; color: #000000; vertical-align: text-top; height: auto; text-indent: inherit; line-height: 1em; }

.N_Kardex_BT { border: 0; border-radius: 5px; font-family: Arial, Helvetica, sans-serif; font-size: small; background-color: #666666; height: 40px; color: #fff; }

.N_Kardex_Cadre { border-right: black thin groove; border-top: black thin groove; border-left: black thin groove; border-bottom: black thin groove; }

.N_Kardex_Simplifier { width: 100%; border: 0px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; font-size: large; font-family: Arial; background-color: #CCCCCC; font-family: Arial; font-size: large; font-weight: normal; z-index: 1999999999; padding: 15px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.75); }

.N_Virtuel_clavier_img { border-right: black thin groove; border-top: black thin groove; border-left: black thin groove; border-bottom: black thin groove; width: 20px; }

.N_Bt_edit { border: none; background-color: transparent; border-spacing: 0; padding: 0px; margin: 0px; }

.N_Bt_edit img { width: 40px; }

.N_Fonction_BT { border: 0; border-radius: 5px; font-family: Arial, Helvetica, sans-serif; font-size: small; background-color: #666666; height: 40px; color: #fff; }

.Cadre_Centrer { visibility: visible; display: block; display: table-cell; vertical-align: middle; width: 250px; }

.Cadre { border-right: #000000 thin solid; border-top: #000000 thin solid; border-left: #000000 thin solid; border-bottom: #000000 thin solid; }

TABLE.title { font-size: 10pt; color: black; font-style: normal; font-family: Arial; background-color: WindowFrame; font-variant: normal; }

.Tr_Titre { border-width: medium; border-style: outset; background-color: #4673D0; font-family: 'Comic Sans MS'; font-size: larger; text-transform: uppercase; }

.Titre { font-size: 14pt; font-family: Arial, Sans-Serif; color: infotext; text-align: center; }

.PTitre { border-right: black thin double; border-top: black thin double; border-left: black thin double; border-bottom: black thin double; background-color: #e4eeff; }

.Erreur { font-size: 14pt; color: Red; font-family: Arial, Sans-Serif; text-align: center; }

.Erreur_Vente_S { font-size: 14pt; color: Red; font-family: Arial, Sans-Serif; text-align: Left; }

.Titre_Grille { font-size: 12pt; color: #000000; font-family: Arial, Sans-Serif; font-weight: bold; }

.Td_titre { border-right: black thin groove; border-top: black thin groove; border-left: black thin groove; border-bottom: black thin groove; background-color: #0099cc; }

.Td_titre_edit { border-right: black thin groove; border-top: black thin groove; border-left: black thin groove; border-bottom: black thin groove; background-color: #0099cc; }

.Td_Paire { border-right: #6699ff thin solid; border-top: #6699ff thin solid; border-left: #6699ff thin solid; border-bottom: #6699ff thin solid; background-color: #ffffff; }

.Td_Paire_edit { border-right: #6699ff thin solid; border-top: #6699ff thin solid; border-left: #6699ff thin solid; border-bottom: #6699ff thin solid; background-color: #ffffff; }

.N_Plateau_viewear { border-right: #000000 thin solid; border-top: #000000 thin solid; border-left: #000000 thin solid; border-bottom: #000000 thin solid; }

.Tr_generale { }

.Tr_admin { }

.Tr_Option { }

.Image_Logo { border-right: #0000ff groove; border-top: #0000ff groove; border-left: #0000ff groove; border-bottom: #0000ff groove; }

A.menulink { width: 150px; text-decoration: none; font-family: Verdana; font-size: 12px; color: #000000; BORDER: none; border: solid 1px #FFFFFF; }

A.menulink:hover { border: solid 1px #000000; background-color: #FF9900; }

.Procedure { }

.ProcedureT { font-size: 12px; color: black; font-family: 'Arial Black', Monospace; font-variant: small-caps; text-decoration: underline; text-transform: uppercase; }

.ProcedureR { font-size: 10px; color: black; font-family: Arial; text-transform: none; }

.TD_border { border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; }

#menu11 li a { height: 32px; voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; }

#menut li a:link, #menut li a:visited { color: #8BADCF; display: block; background: url(i/menu/menu21.gif); padding: 8px 0 0 10px; }

#menut li a:hover { color: #627EB7; background: url(i/menu/menu21.gif) 0 -32px; padding: 8px 0 0 10px; }

.ProcedureIMG { width: 70px; height: 70px; cursor: help; }

.ListeIMG { width: 40px; height: auto; border: 0; vertical-align: middle; }

.FunctionIMG { width: 28px; height: 28px; }

.FunctionIMG img:hover { width: 70px; height: 70px; cursor: help; }

.ListeTXT { font-weight: normal; font-size: 9pt; font-family: 'Comic Sans MS'; }

.texteTXT { font-weight: normal; font-size: 9pt; font-family: 'Comic Sans MS'; width: 100%; }

.zoom img:hover { width: 150px; height: auto; }

.zoommin img:hover { width: 50px; height: auto; }

.Td_date { border-right: black thin groove; border-top: black thin groove; border-left: black thin groove; border-bottom: black thin groove; }

.rechercheoption { font-size: 7pt; font-family: arial, Helvetica, sans-serif; text-transform: lowercase; font-weight: normal; font-style: normal; font-variant: normal; }

.info { font-size: 12px; font-family: Arial; }

.infoAttention { font-size: 12px; font-family: Arial; background-color: #ff6666; }

.N_Message_Logoff { position: fixed; top: 25%; bottom: 25%; left: 25%; right: 25%; width: 50%; border: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: medium; font-family: Arial; background-color: #ff5f8b; font-family: Arial; font-size: 16px; font-weight: normal; z-index: 1999999999; padding: 15px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.75); }

.N_Message_Logoff_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.15); padding-top: 25%; padding-left: 30%; z-index: 999999999; }

.keyboard { background: transparent; font-size: 15pt; font-style: normal; font-family: Arial, 'Arial Black', Sans-Serif; font-variant: normal; height: 50px; /* Height of button background height */ width: 50px; text-decoration: none; line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */ float: left; }

.KeyboardTD { background: transparent url(i/bouton/glossyback.gif) repeat top left; height: 52px; }

.KeyboardTD:hover { background: transparent url(i/bouton/glossyback2.gif) repeat top left; height: 52px; }

.tablerecherche { position: absolute; top: 165px; left: 200px; background-color: White; border-right: black thin outset; border-top: black thin outset; border-left: black thin outset; border-bottom: black thin outset; }

.Fileupload { text-decoration: underline; }

.N_Fonction_check { border-width: thin; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; }

#processErrorMessage { background-color: #fff; }

TD.KeyboardTD { background-color: #51adff; height: 52px; }

TD.KeyboardTD:hover { background-color: #3c5cff; height: 52px; }

.Fleche { border-style: none; }

.Fleche:hover { width: 40px; }

.HyperlinkCssClass img { width: 15px; border-style: none; }

.N_Kardex_E { border-style: double; border-width: thick; border-color: inherit; background-color: #F9D0AC; }

.N_Diagnostique_texte { font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight: bold; }

.N_Diagnostique_texte_info { font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: bold; }

.N_Diagnostique_back_error { border-style: ridge; border-width: thin; background-color: #E76058; }

.N_Diagnostique_img_chk { width: 40px; }

.N_Tools_bouton_P { height: 200px; border: 1px; }

.N_Tools_bouton_S { height: 120px; border: 1px; }

#image_bg_blank { padding: 0px; margin: 0px; display: table-cell; }

.wideContent { font-family: Arial, Helvetica, sans-serif; padding: 10px; }

.N_Corps_Texte { font-family: Arial, Helvetica, sans-serif; font-size: large; font-weight: normal; color: #000000; text-align: left; margin-top: 0px; }

.N_Cadre_Recherche { position: absolute; top: 365px; left: 750px; height: 150px; width: 350px; background-color: White; border-right: black thin outset; border-top: black thin outset; border-left: black thin outset; border-bottom: black thin outset; }

.btlogon { background-color: #5EB660; color: white; border: 0; border-radius: 5px; padding: 20px; padding-top: 10px; padding-bottom: 10px; font-size: 15px; font-weight: bold; }

.btefface { background-color: red; text-align: center; color: white; border: 0; border-radius: 5px; padding: 20px; padding-top: 10px; padding-bottom: 10px; font-size: 15px; font-weight: bold; }

.tarea { border: 0; border: 1px solid #6699FF; }

.evidence .champs_evidence:focus { height: 40px; font-size: 30px; width: 200px; border: 2px solid #727272; }

.article_simplifie { background-color: #fff; border: #fefefe 1px solid; }

.titre_article_simplifie { background-color: #efefef; border-bottom: 2px solid #fff; }

.titre_article_simplifie td { background-color: #efefef; border-bottom: 1px solid #fff; }

.Texte_evidence { font-weight: bold; font-style: normal; }

.Texte_Location_evidence { font-weight: bold; font-style: normal; font-size: large; color: #FF0000; }

div.pagination { padding: 2px; margin: 2px; text-align: center; font-size: 16px; }

div.pagination input { padding: 2px 5px 2px 5px; margin-right: 10px; border: none; background-color: white; text-decoration: none; }

div.pagination span.current { padding: 2px 5px 2px 5px; margin-right: 2px; color: black; }

div.pagination span.disabled { padding: 2px 5px 2px 5px; margin-right: 2px; }

.focus { padding: 2px 2px 2px 2px; margin-right: 2px; text-decoration: none; }

.current { font-weight: bold; padding: 2px 2px 2px 2px; margin-right: 2px; font-weight: bold; }


/*Police de caractère*/
.fox_serif { font-family: serif; }
.fox_sans_serif { font-family: sans-serif; }
.fox_monospace { font-family: monospace; }
.fox_font_tiny { font-size: 8px; }
.fox_font_litle { font-size: 10px; }
.fox_font_medium { font-size: 12px; }
.fox_font_large { font-size: 14px; }
.fox_font_extra_large { font-size: 20px; }
.fox_font_super_extra_large { font-size: 30px; }
.fox_font_super_extra_extra_large { font-size: 40px; }

/*Mise en forme*/
.fox_bold { font-weight: bold; }
.fox_italic { font-style: italic; }
.unset_fox_italic { font-style: normal; }
.unset_fox_bold { font-weight: normal; }
.fox_text_left { text-align: left; }
.fox_text_right { text-align: right; }
.fox_text_center { text-align: center; }
.fox_text_justify { text-align: justify; }
.fox_line_height { Line-Height: 1; }
.fox_line_height_double { line-height: 2; }
.fox_line_height_unset { line-height: 0; }
.fox_block { display: block; }
.fox_inline_block { display: inline-block; }
.fox_inline { display: inline; }
.fox_no_display { display: none; }
.fox_cursour_alias { cursor: alias; }
.fox_cursour_all_scroll { cursor: all-scroll; }
.fox_cursour_auto { cursor: auto; }
.fox_cursour_cell { cursor: cell; }
.fox_cursour_context_menu { cursor: context-menu; }
.fox_cursour_col-resize { cursor: col-resize; }
.fox_cursour_copy { cursor: copy; }
.fox_cursour_crosshair { cursor: crosshair; }
.fox_cursour_default { cursor: default; }
.fox_cursour_e-resize { cursor: e-resize; }
.fox_cursour_ew-resize { cursor: ew-resize; }
.fox_cursour_grab { cursor: -webkit-grab; cursor: grab; }
.fox_cursour_grabbing { cursor: -webkit-grabbing; cursor: grabbing; }
.fox_cursour_help { cursor: help; }
.fox_cursour_move { cursor: move; }
.fox_cursour_n_resize { cursor: n-resize; }
.fox_cursour_ne_resize { cursor: ne-resize; }
.fox_cursour_nesw_resize { cursor: nesw-resize; }
.fox_cursour_ns_resize { cursor: ns-resize; }
.fox_cursour_nw_resize { cursor: nw-resize; }
.fox_cursour_nwse_resize { cursor: nwse-resize; }
.fox_cursour_no_drop { cursor: no-drop; }
.fox_cursour_none { cursor: none; }
.fox_cursour_not_allowed { cursor: not-allowed; }
.fox_cursour_pointer { cursor: pointer; }
.fox_cursour_progress { cursor: progress; }
.fox_cursour_row_resize { cursor: row-resize; }
.fox_cursour_s_resize { cursor: s-resize; }
.fox_cursour_se_resize { cursor: se-resize; }
.fox_cursour_sw_resize { cursor: sw-resize; }
.fox_cursour_text { cursor: text; }
.fox_cursour_w-resize { cursor: w-resize; }
.fox_cursour_wait { cursor: wait; }
.fox_cursour_zoom_in { cursor: zoom-in; }
.fox_cursour_zoom_out { cursor: zoom-out; }

p { margin: 10px; padding: 0px; font-size: 12px; }

.fox_border_unset { border: 0; }
.fox_table, .fox_table_bordered { border-collapse: collapse; border-spacing: 0; width: 100%; display: table; }
.fox_table_bordered { border: 1px solid #ccc; }
.fox_line_bordered tr { border-bottom: 1px solid #ddd; }
.fox_striped tbody tr:nth-child(even) { background-color: #f1f1f1; }
.fox_table_bordered tr:nth-child(odd) { background-color: #fff; }
.fox_table-bordered tr:nth-child(even) { background-color: #f1f1f1; }
.fox_hoverable tbody tr:hover, .fox_ul.fox_hoverable li:hover { background-color: #ccc; }
.fox_centered tr th, .fox_centered tr td { text-align: center; }

.fox_table td, .fox_table th, .fox_table-all td, .fox_table-all th { padding: 8px 8px; display: table-cell; text-align: left; vertical-align: top; }
.fox_table_col_equal { table-layout: fixed; }
.fox_show_topleft { display: table-cell; vertical-align: top; text-align: left; }
.fox_show_topright { display: table-cell; vertical-align: top; text-align: right; }
.fox_show_bottomleft { display: table-cell; vertical-align: bottom; text-align: left; }
.fox_show_bottomright { display: table-cell; vertical-align: bottom; text-align: right; }
.fox_show_middle { display: table-cell; vertical-align: middle; text-align: center; }
.fox_show_left { display: table-cell; vertical-align: middle; text-align: left; }
.fox_show_right { display: table-cell; vertical-align: middle; text-align: right; }
.fox_show_topmiddle { display: table-cell; vertical-align: top; text-align: center; }
.fox_show_bottommiddle { display: table-cell; vertical-align: bottom; text-align: center; }

h1, h2, h3, h4, h5, h6 { font-family: Arial,sans-serif; font-weight: 400; margin: 10px 0; }

h1 { font-size: 36px; }

h2 { font-size: 30px; }

h3 { font-size: 24px; }

h4 { font-size: 20px; }

h5 { font-size: 18px; }

h6 { font-size: 16px; }

h1, h2, h3, h4, h5, h6 { font-family: "Segoe UI",Arial,sans-serif; font-weight: 400; margin: 10px 0; }

.fox_layer_extra_hight { z-index: 100000; }
.fox_layer_very_hight { z-index: 10000; }
.fox_layer_hight { z-index: 1000; }
.fox_layer_hight_middle { z-index: 50; }
.fox_layer_middle { z-index: 10; }
.fox_layer_low_middle { z-index: 5; }
.fox_layer_low { z-index: 1; }
.fox_layer_unset { z-index: 0; }

.fox_shadow { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); }
.fox_shadow_middle { box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); }
.fox_shadow_hight { box-shadow: 0 8px 20px 0 rgba(0,0,0,0.2),0 8px 40px 0 rgba(0,0,0,0.19); }
.fox_shadow_hover:hover { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); }
.fox_shadow_middle_hover:hover { box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); }
.fox_shadow_hight_hover:hover { box-shadow: 0 8px 20px 0 rgba(0,0,0,0.2),0 8px 40px 0 rgba(0,0,0,0.19); }

.fox_border { border: 1px solid; }
.fox_border_middle { border: 2px solid; }
.fox_border_hight { border: 4px solid; }
.fox_round_low { border-radius: 2px; }
.fox_round { border-radius: 4px; }
.fox_round-middle { border-radius: 8px; }
.fox_round-hight { border-radius: 16px; }
.fox_round_extra_hight { border-radius: 32px; }

/*padding*/
.fox_padding_low { padding: 2px; }
.fox_padding { padding: 4px; }
.fox_padding_middle { padding: 8px; }
.fox_padding_hight { padding: 16px; }
.fox_padding_extra_hight { padding: 32px; }
.fox_padding_unset { padding: 0px; }
.fox_padding_left_low { padding-left: 2px; }
.fox_padding_left { padding-left: 4px; }
.fox_padding_left_middle { padding-left: 8px; }
.fox_padding_left_hight { padding-left: 16px; }
.fox_padding_left_extra_hight { padding-left: 32px; }
.fox_padding_left_unset { padding-left: 0px; }
.fox_padding_right_low { padding-right: 2px; }
.fox_padding_right { padding-right: 4px; }
.fox_padding_right_middle { padding-right: 8px; }
.fox_padding_right_hight { padding-right: 16px; }
.fox_padding_right_extra_hight { padding-right: 32px; }
.fox_padding_right_unset { padding-right: 0px; }
.fox_padding_top_low { padding-top: 2px; }
.fox_padding_top { padding-top: 4px; }
.fox_padding_top_middle { padding-top: 8px; }
.fox_padding_top_hight { padding-top: 16px; }
.fox_padding_top_extra_hight { padding-top: 32px; }
.fox_padding_top_unset { padding-top: 0px; }
.fox_padding_bottom_low { padding-bottom: 2px; }
.fox_padding_bottom { padding-bottom: 4px; }
.fox_padding_bottom_middle { padding-bottom: 8px; }
.fox_padding_bottom_hight { padding-bottom: 16px; }
.fox_padding_bottom_extra_hight { padding-bottom: 32px; }
.fox_padding_bottom_unset { padding-bottom: 0px; }

/*margin*/
.fox_margin_low { margin: 2px; }
.fox_margin { margin: 4px; }
.fox_margin_middle { margin: 8px; }
.fox_margin_hight { margin: 16px; }
.fox_margin_extra_hight { margin: 32px; }
.fox_margin_unset { margin: 0px; }
.fox_margin_negative { margin: -4px; }
.fox_margin_left_low { margin-left: 2px; }
.fox_margin_left { margin-left: 4px; }
.fox_margin_left_middle { margin-left: 8px; }
.fox_margin_left_hight { margin-left: 16px; }
.fox_margin_left_extra_hight { margin-left: 32px; }
.fox_margin_left_unset { margin-left: 0px; }
.fox_margin_negative_left { margin-left: -4px; }
.fox_margin_right_low { margin-right: 2px; }
.fox_margin_right { margin-right: 4px; }
.fox_margin_right_middle { margin-right: 8px; }
.fox_margin_right_hight { margin-right: 16px; }
.fox_margin_right_extra_hight { margin-right: 32px; }
.fox_margin_right_unset { margin-right: 0px; }
.fox_margin_negative_right { margin-right: -4px; }
.fox_margin_top_low { margin-top: 2px; }
.fox_margin_top { margin-top: 4px; }
.fox_margin_top_middle { margin-top: 8px; }
.fox_margin_top_hight { margin-top: 16px; }
.fox_margin_top_extra_hight { margin-top: 32px; }
.fox_margin_top_unset { margin-top: 0px; }
.fox_margin_negative_top { margin-top: -4px; }
.fox_margin_bottom_low { margin-bottom: 2px; }
.fox_margin_bottom { margin-bottom: 4px; }
.fox_margin_bottom_middle { margin-bottom: 8px; }
.fox_margin_bottom_hight { margin-bottom: 16px; }
.fox_margin_bottom_extra_hight { margin-bottom: 32px; }
.fox_margin_bottom_unset { margin-bottom: 0px; }
.fox_margin_negative_bottom { margin-bottom: -4px; }

/*gestion barre d'outils*/
.fox_bar { width: 100%; overflow: hidden; }
.fox_bar { display: inline-block; width: auto; }
.fox_vertical_menu { width: 100%; overflow: hidden; }
.fox_vertical_menu .fox_menu_item { display: block; width: 100%; }
.fox_bar .fox_bar_item { padding: 8px 16px; float: left; width: auto; border: none; display: block; outline: 0; }
.fox_bar .fox_dropdown-hover, .fox_bar .fox_dropdown-click { position: static; float: left; }
.fox_bar .fox_button { white-space: normal; }

/*gestion bouton*/
.fox_button { border: none; display: inline-block; padding: 8px 16px; vertical-align: middle; overflow: hidden; text-decoration: none; }
.fox_button_click:focus { box-shadow: none; }
.fox_button_icon_left { background-position-y: center; background-position-x: 5px; background-repeat: no-repeat; padding-left: 32px; padding-right: 5px; }

/* Alignement des objects */
.fox_right { float: right !important; }
.fox_left { float: left !important; }
.fox_center .fox_bar { display: inline-block; width: auto; }

/*effet de filtre sur objet */

/*mettre en gris*/
.fox_effect_grayscal { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); }

/*Mise en flou*/
.fox_effect_blur { filter: blur(5px); }
.fox_effect_blur_middle { filter: blur(10px); }
.fox_effect_blur_hight { filter: blur(20px); }

/*Mise en lumière*/
.fox_effect_brightness { filter: brightness(150%); }
.fox_effect_brightness_middle { filter: brightness(200%); }
.fox_effect_brightness_hight { filter: brightness(250%); }

/*Mise en contraste*/
.fox_effect_contrast { filter: contrast(150%); }
.fox_effect_contrast_middle { filter: contrast(200%); }
.fox_effect_contrast_hight { filter: contrast(250%); }

/*opacité*/
.fox_effect_opacity { opacity: 0.75; }
.fox_effect_opacity_middle { opacity: 0.50; }
.fox_effect_opacity_hight { opacity: 0.25; }

/*Mise en saturation*/
.fox_effect_saturate { filter: saturate(2); }
.fox_effect_saturate_middle { filter: saturate(4); }
.fox_effect_saturate_hight { filter: saturate(8); }
.fox_effect_saturate_low { filter: saturate(50%); }

/*Sepia*/
.fox_effect_sepia { filter: sepia(50%); }
.fox_effect_sepia_middle { filter: sepia(75%); }
.fox_effect_sepia_hight { filter: sepia(100%); }

/*effet de filtre sur objet hover */

/*mettre en gris hover*/
.fox_effect_grayscal:hover { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); }

/*Mise en flou hover*/
.fox_effect_blur:hover { filter: blur(5px); }
.fox_effect_blur_middle:hover { filter: blur(10px); }
.fox_effect_blur_hight:hover { filter: blur(20px); }

/*Mise en lumière hover*/
.fox_effect_brightness:hover { filter: brightness(150%); }
.fox_effect_brightness_middle:hover { filter: brightness(200%); }
.fox_effect_brightness_hight:hover { filter: brightness(250%); }

/*Mise en contraste hover*/
.fox_effect_contrast:hover { filter: contrast(150%); }
.fox_effect_contrast_middle:hover { filter: contrast(200%); }
.fox_effect_contrast_hight:hover { filter: contrast(250%); }

/*opacité hover*/
.fox_effect_opacity:hover { opacity: 0.75; }
.fox_effect_opacity_middle:hover { opacity: 0.50; }
.fox_effect_opacity_hight:hover { opacity: 0.25; }

/*Mise en saturation hover*/
.fox_effect_saturate:hover { filter: saturate(2); }
.fox_effect_saturate_middle:hover { filter: saturate(4); }
.fox_effect_saturate_hight:hover { filter: saturate(8); }
.fox_effect_saturate_low:hover { filter: saturate(50%); }

/*Sepia hover*/
.fox_effect_sepia:hover { filter: sepia(50%); }
.fox_effect_sepia_middle:hover { filter: sepia(75%); }
.fox_effect_sepia_hight:hover { filter: sepia(100%); }

/* Animation */
.fox_animate_opacity { animation: opac 0.8s; }

@keyframes opac {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fox_animate_fading_low { animation: fading 10s infinite; }

@keyframes fading {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.fox_animate_fading { animation: fading 5s infinite; }

@keyframes fading {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.fox_animate_fading_quick { animation: fading 1s infinite; }

@keyframes fading {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.fox_animate_zoom { animation: animatezoom 0.6s; }

@keyframes animatezoom {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

.fox_animate_opacity_hover:hover { animation: opac 0.8s; }

@keyframes opac {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fox_animate_fading_hover:hover { animation: fading 5s infinite; }

@keyframes fading {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.fox_animate_fading_low_hover:hover { animation: fading 10s infinite; }

@keyframes fading {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.fox_animate_fading_quick_hover:hover { animation: fading 1s infinite; }

@keyframes fading {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

.fox_animate_zoom_hover:hover { animation: animatezoom 0.6s; }

@keyframes animatezoom {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Animation tremblement */
@keyframes shake-rotate {
    2% { transform: translate(0, 0) rotate(-5.5deg); }
    4% { transform: translate(0, 0) rotate(4.5deg); }
    6% { transform: translate(0, 0) rotate(6.5deg); }
    8% { transform: translate(0, 0) rotate(-6.5deg); }
    10% { transform: translate(0, 0) rotate(7.5deg); }
    12% { transform: translate(0, 0) rotate(-1.5deg); }
    14% { transform: translate(0, 0) rotate(-1.5deg); }
    16% { transform: translate(0, 0) rotate(6.5deg); }
    18% { transform: translate(0, 0) rotate(.5deg); }
    20% { transform: translate(0, 0) rotate(1.5deg); }
    22% { transform: translate(0, 0) rotate(-3.5deg); }
    24% { transform: translate(0, 0) rotate(1.5deg); }
    26% { transform: translate(0, 0) rotate(-5.5deg); }
    28% { transform: translate(0, 0) rotate(2.5deg); }
    30% { transform: translate(0, 0) rotate(-1.5deg); }
    32% { transform: translate(0, 0) rotate(-.5deg); }
    34% { transform: translate(0, 0) rotate(1.5deg); }
    36% { transform: translate(0, 0) rotate(3.5deg); }
    38% { transform: translate(0, 0) rotate(-1.5deg); }
    40% { transform: translate(0, 0) rotate(.5deg); }
    42% { transform: translate(0, 0) rotate(-1.5deg); }
    44% { transform: translate(0, 0) rotate(7.5deg); }
    46% { transform: translate(0, 0) rotate(-5.5deg); }
    48% { transform: translate(0, 0) rotate(5.5deg); }
    50% { transform: translate(0, 0) rotate(5.5deg); }
    52% { transform: translate(0, 0) rotate(4.5deg); }
    54% { transform: translate(0, 0) rotate(1.5deg); }
    56% { transform: translate(0, 0) rotate(3.5deg); }
    58% { transform: translate(0, 0) rotate(6.5deg); }
    60% { transform: translate(0, 0) rotate(-4.5deg); }
    62% { transform: translate(0, 0) rotate(-6.5deg); }
    64% { transform: translate(0, 0) rotate(4.5deg); }
    66% { transform: translate(0, 0) rotate(-6.5deg); }
    68% { transform: translate(0, 0) rotate(3.5deg); }
    70% { transform: translate(0, 0) rotate(-6.5deg); }
    72% { transform: translate(0, 0) rotate(-1.5deg); }
    74% { transform: translate(0, 0) rotate(-.5deg); }
    76% { transform: translate(0, 0) rotate(-3.5deg); }
    78% { transform: translate(0, 0) rotate(7.5deg); }
    80% { transform: translate(0, 0) rotate(5.5deg); }
    82% { transform: translate(0, 0) rotate(4.5deg); }
    84% { transform: translate(0, 0) rotate(2.5deg); }
    86% { transform: translate(0, 0) rotate(-2.5deg); }
    88% { transform: translate(0, 0) rotate(-6.5deg); }
    90% { transform: translate(0, 0) rotate(-1.5deg); }
    92% { transform: translate(0, 0) rotate(5.5deg); }
    94% { transform: translate(0, 0) rotate(1.5deg); }
    96% { transform: translate(0, 0) rotate(1.5deg); }
    98% { transform: translate(0, 0) rotate(5.5deg); }
    0%, 100% { transform: translate(0, 0) rotate(0); }
}

.fox_skake { display: inline-block; transform-origin: center center; }
.fox_shake { animation-play-state: running; animation-name: shake-rotate; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fox_shake_hover:hover { animation-play-state: running; animation-name: shake-rotate; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fox_shake_low { animation-play-state: running; animation-name: shake-rotate; animation-duration: 10s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fox_shake_low_hover:hover { animation-play-state: running; animation-name: shake-rotate; animation-duration: 10s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fox_shake_middle_low { animation-play-state: running; animation-name: shake-rotate; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fox_shake_middle_low_hover:hover { animation-play-state: running; animation-name: shake-rotate; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fox_shake_quick { animation-play-state: running; animation-name: shake-rotate; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fox_shake_quick_hover:hover { animation-play-state: running; animation-name: shake-rotate; animation-duration: 100ms; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.fox_sidebar { height: 100%; width: 200px; background-color: #fff; position: fixed !important; z-index: 1; overflow: auto; }
.fox_content_sidebar { border: 2px red solid; overflow: scroll; }

/* Colors */
.fox_color_amber, .fox_color_hover_amber:hover { color: #000 !important; background-color: #ffc107 !important; }
.fox_color_aqua, .fox_color_hover_aqua:hover { color: #000 !important; background-color: #00ffff !important; }
.fox_color_blue, .fox_color_hover_blue:hover { color: #fff !important; background-color: #65AFD2 !important; }
.fox_color_light_blue, .fox_color_hover_light_blue:hover { color: #000 !important; background-color: #87CEEB !important; }
.fox_color_brown, .fox_color_hover_brown:hover { color: #fff !important; background-color: #795548 !important; }
.fox_color_cyan, .fox_color_hover_cyan:hover { color: #000 !important; background-color: #00bcd4 !important; }
.fox_color_blue_grey, .fox_color_hover_blue_grey:hover, .fox_color_blue_gray, .fox_color_hover_blue_gray:hover { color: #fff !important; background-color: #607d8b !important; }
.fox_color_green, .fox_color_hover_green:hover { color: #fff !important; background-color: #4CAF50 !important; }
.fox_color_light_green, .fox_color_hover_light_green:hover { color: #000 !important; background-color: #8bc34a !important; }
.fox_color_indigo, .fox_color_hover_indigo:hover { color: #fff !important; background-color: #3f51b5 !important; }
.fox_color_khaki, .fox_color_hover_khaki:hover { color: #000 !important; background-color: #f0e68c !important; }
.fox_color_lime, .fox_color_hover_lime:hover { color: #000 !important; background-color: #cddc39 !important; }
.fox_color_orange, .fox_color_hover_orange:hover { color: #000 !important; background-color: #ff9800 !important; }
.fox_color_deep_orange, .fox_color_hover_deep_orange:hover { color: #fff !important; background-color: #ff5722 !important; }
.fox_color_pink, .fox_color_hover_pink:hover { color: #fff !important; background-color: #e91e63 !important; }
.fox_color_purple, .fox_color_hover_purple:hover { color: #fff !important; background-color: #9c27b0 !important; }
.fox_color_deep_purple, .fox_color_hover_deep_purple:hover { color: #fff !important; background-color: #673ab7 !important; }
.fox_color_red, .fox_color_hover_red:hover { color: #fff !important; background-color: #f44336 !important; }
.fox_color_sand, .fox_color_hover_sand:hover { color: #000 !important; background-color: #fdf5e6 !important; }
.fox_color_teal, .fox_color_hover_teal:hover { color: #fff !important; background-color: #009688 !important; }
.fox_color_yellow, .fox_color_hover_yellow:hover { color: #000 !important; background-color: #ffeb3b !important; }
.fox_color_white, .fox_color_hover_white:hover { color: #000 !important; background-color: #fff !important; }
.fox_color_black, .fox_color_hover_black:hover { color: #fff !important; background-color: #000 !important; }
.fox_color_grey, .fox_color_hover_grey:hover, .fox_color_gray, .fox_color_hover_gray:hover { color: #000 !important; background-color: #9e9e9e !important; }
.fox_color_light_grey, .fox_color_hover_light_grey:hover, .fox_color_light_gray, .fox_color_hover_light_gray:hover { color: #000 !important; background-color: #f1f1f1 !important; }
.fox_color_dark_grey, .fox_color_hover_dark_grey:hover, .fox_color_dark_gray, .fox_color_hover_dark_gray:hover { color: #fff !important; background-color: #616161 !important; }
.fox_color_pale_red, .fox_color_hover_pale_red:hover { color: #000 !important; background-color: #ffdddd !important; }
.fox_color_pale_green, .fox_color_hover_pale_green:hover { color: #000 !important; background-color: #ddffdd !important; }
.fox_color_pale_yellow, .fox_color_hover_pale_yellow:hover { color: #000 !important; background-color: #ffffcc !important; }
.fox_color_pale_blue, .fox_color_hover_pale_blue:hover { color: #000 !important; background-color: #ddffff !important; }
.fox_text_amber, .fox_text_hover_amber:hover { color: #ffc107 !important; }
.fox_text_aqua, .fox_text_hover_aqua:hover { color: #00ffff !important; }
.fox_text_blue, .fox_text_hover_blue:hover { color: #65AFD2 !important; }
.fox_text_light_blue, .fox_text_hover_light_blue:hover { color: #87CEEB !important; }
.fox_text_brown, .fox_text_hover_brown:hover { color: #795548 !important; }
.fox_text_cyan, .fox_text_hover_cyan:hover { color: #00bcd4 !important; }
.fox_text_blue_grey, .fox_text_hover_blue_grey:hover, .fox_text_blue_gray, .fox_text_hover_blue_gray:hover { color: #607d8b !important; }
.fox_text_green, .fox_text_hover_green:hover { color: #4CAF50 !important; }
.fox_text_light_green, .fox_text_hover_light_green:hover { color: #8bc34a !important; }
.fox_text_indigo, .fox_text_hover_indigo:hover { color: #3f51b5 !important; }
.fox_text_khaki, .fox_text_hover_khaki:hover { color: #b4aa50 !important; }
.fox_text_lime, .fox_text_hover_lime:hover { color: #cddc39 !important; }
.fox_text_orange, .fox_text_hover_orange:hover { color: #ff9800 !important; }
.fox_text_deep_orange, .fox_text_hover_deep_orange:hover { color: #ff5722 !important; }
.fox_text_pink, .fox_text_hover_pink:hover { color: #e91e63 !important; }
.fox_text_purple, .fox_text_hover_purple:hover { color: #9c27b0 !important; }
.fox_text_deep_purple, .fox_text_hover_deep_purple:hover { color: #673ab7 !important; }
.fox_text_red, .fox_text_hover_red:hover { color: #f44336 !important; }
.fox_text_sand, .fox_text_hover_sand:hover { color: #fdf5e6 !important; }
.fox_text_teal, .fox_text_hover_teal:hover { color: #009688 !important; }
.fox_text_yellow, .fox_text_hover_yellow:hover { color: #d2be0e !important; }
.fox_text_white, .fox_text_hover_white:hover { color: #fff !important; }
.fox_text_black, .fox_text_hover_black:hover { color: #000 !important; }
.fox_text_grey, .fox_text_hover_grey:hover, .fox_text_gray, .fox_text_hover_gray:hover { color: #757575 !important; }
.fox_text_light_grey, .fox_text_hover_light_grey:hover, .fox_text_light_gray, .fox_text_hover_light_gray:hover { color: #f1f1f1 !important; }
.fox_text_dark_grey, .fox_text_hover_dark_grey:hover, .fox_text_dark_gray, .fox_text_hover_dark_gray:hover { color: #3a3a3a !important; }
.fox_border_amber, .fox_border_hover_amber:hover { border-color: #ffc107 !important; }
.fox_border_aqua, .fox_border_hover_aqua:hover { border-color: #00ffff !important; }
.fox_border_blue, .fox_border_hover_blue:hover { border-color: #65AFD2 !important; }
.fox_border_light_blue, .fox_border_hover_light_blue:hover { border-color: #87CEEB !important; }
.fox_border_brown, .fox_border_hover_brown:hover { border-color: #795548 !important; }
.fox_border_cyan, .fox_border_hover_cyan:hover { border-color: #00bcd4 !important; }
.fox_border_blue_grey, .fox_border_hover_blue_grey:hover, .fox_border_blue_gray, .fox_border_hover_blue_gray:hover { border-color: #607d8b !important; }
.fox_border_green, .fox_border_hover_green:hover { border-color: #4CAF50 !important; }
.fox_border_light_green, .fox_border_hover_light_green:hover { border-color: #8bc34a !important; }
.fox_border_indigo, .fox_border_hover_indigo:hover { border-color: #3f51b5 !important; }
.fox_border_khaki, .fox_border_hover_khaki:hover { border-color: #f0e68c !important; }
.fox_border_lime, .fox_border_hover_lime:hover { border-color: #cddc39 !important; }
.fox_border_orange, .fox_border_hover_orange:hover { border-color: #ff9800 !important; }
.fox_border_deep_orange, .fox_border_hover_deep_orange:hover { border-color: #ff5722 !important; }
.fox_border_pink, .fox_border_hover_pink:hover { border-color: #e91e63 !important; }
.fox_border_purple, .fox_border_hover_purple:hover { border-color: #9c27b0 !important; }
.fox_border_deep_purple, .fox_border_hover_deep_purple:hover { border-color: #673ab7 !important; }
.fox_border_red, .fox_border_hover_red:hover { border-color: #f44336 !important; }
.fox_border_sand, .fox_border_hover_sand:hover { border-color: #fdf5e6 !important; }
.fox_border_teal, .fox_border_hover_teal:hover { border-color: #009688 !important; }
.fox_border_yellow, .fox_border_hover_yellow:hover { border-color: #ffeb3b !important; }
.fox_border_white, .fox_border_hover_white:hover { border-color: #fff !important; }
.fox_border_black, .fox_border_hover_black:hover { border-color: #000 !important; }
.fox_border_grey, .fox_border_hover_grey:hover, .fox_border_gray, .fox_border_hover_gray:hover { border-color: #9e9e9e !important; }
.fox_border_light_grey, .fox_border_hover_light_grey:hover, .fox_border_light_gray, .fox_border_hover_light_gray:hover { border-color: #f1f1f1 !important; }
.fox_border_dark_grey, .fox_border_hover_dark_grey:hover, .fox_border_dark_gray, .fox_border_hover_dark_gray:hover { border-color: #616161 !important; }
.fox_border_pale_red, .fox_border_hover_pale_red:hover { border-color: #ffe7e7 !important; }
.fox_border_pale_green, .fox_border_hover_pale_green:hover { border-color: #e7ffe7 !important; }
.fox_border_pale_yellow, .fox_border_hover_pale_yellow:hover { border-color: #ffffcc !important; }
.fox_border_pale_blue, .fox_border_hover_pale_blue:hover { border_color: #e7ffff !important; }
.fox_content_app { padding-left: 160px; }
.fox_border_black, .fox_border_hover_black:hover { border-color: #000 !important; }

/******************************************************************
 *              adaptation largeur écran                          *
 ******************************************************************/

@media screen and (min-width:993px) {
    .fox_hide_big { display: none !important; }
    .fox_hide_large { display: none !important; }
    .fox_sidebar { display: block !important; }
    .fox_content_app { padding-left: 160px; }
}

@media screen and (min-width:701px) {
    .Fox_Modal { z-index: 9999999999; position: absolute; background-color: #fff; border-color: none; }
    .fox_up_left { margin-left: -180px; margin-top: -150px; }
    .fox_up_right { margin-left: 0px; margin-top: -150px; }
    .fox_down_left { margin-left: -180px; margin-top: 20px; }
    .fox_down_right { margin-left: 0px; margin-top: 20px; }
    .Fox_plateau { display: inline-block; width: 50%; }
    .Fox_plateau_zoom { }
}

@media screen and (min-width:1250px) {
    .N_background_connexion { background-image: url(/style/Presentation/fox_back_g.png); background-repeat: no-repeat; background-position: 10px top; padding-right: 0; background-size: auto 100%; }
    .N_background_connexion_L { background-image: url(/style/Presentation/fox_back_g.png); background-repeat: no-repeat; background-position: right 10px top; background-size: auto 100%; }
    #background_connexionV { display: none; }
    .Fox_plateau { display: inline-block; width: 33%; }
    .Fox_plateau_zoom { }
}

@media screen and (max-width:600px) {
    .fox_hide_small { display: none !important; }
    .fox_content_app { padding-left: 0px; }
}

@media screen and (max-width:768px) {
    .fox_hide_small { display: none !important; }
    .fox_content_app { padding-left: 0px; }
    .fox_menu_grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); width: 100%; margin-left: 5%; margin-right: 5%; }
}

@media (max-width:992px) and (min-width:601px) {
    .fox_hide_medium { display: none !important; }
    .fox_sidebar { display: none; }
    .fox_content_app { padding-left: 0px; }
}

@media screen and (max-width:993px) {
    .fox_sidebar { display: none; }
    .fox_content_app { padding-left: 0px; }
    .Fox_detail_treeview { display: none; }
    .fox_Kardex_img_plateau { width: 95vw; height: auto; }
}

@media screen and (max-width:700px) {
    .Fox_Modal { z-index: 9999999999; background-color: #fff; border-color: none; position: fixed; left: 30%; top: 40%; right: 30%; bottom: auto; }
    .Fox_plateau { display: inline-block; width: 100%; }
    .Fox_plateau_zoom { display: none; }
    .N_background_connexion { background: none; }
    .N_background_connexion_L { background: none; }
    #background_connexionV { display: block; }
}

@media screen and (max-height:801px) {

    .Multiline_scaner { height: 50px; }
    .img_scanner { width: 25%; }
    .fox_margin_bottom_middle { margin-bottom: 4px; padding-top: 0px; padding-bottom: 0px; }
}

@media screen and (min-height:802px) {

    .Multiline_scaner { height: 150px; }
    .img_scanner { width: 50%; }
    .fox_margin_bottom_middle { margin-bottom: 5px; padding-top: 0px; padding-bottom: 0px; }
}

/***************************************************
       adaptation pour l'orientation
 ***************************************************/


/*******************************************************
        Text align
********************************************************/
.fox_text_left { text-align: left; }
.fox_text_right { text-align: right; }
.fox_text_center { text-align: center; }

/*****************************************************
                 Text formating
 *****************************************************/
.fox_text_bold { font-weight: bold; }

/***************************************************
                    BLUE CSS                        
 ***************************************************/
.fox_color_light_5 { color: #000 !important; background-color: #7DD4FD !important; }
.fox_color_light_4 { color: #000 !important; background-color: #7ACEF6 !important; }
.fox_color_light_3 { color: #000 !important; background-color: #77C8EF !important; }
.fox_color_light_2 { color: #000 !important; background-color: #73C1E7 !important; }
.fox_color_light_1 { color: #fff !important; background-color: #6CB7DB !important; }
.fox_color_dark_1 { color: #fff !important; background-color: #61A8CA !important; }
.fox_color_dark_2 { color: #fff !important; background-color: #5C9FBE !important; }
.fox_color_dark_3 { color: #fff !important; background-color: #5697B6 !important; }
.fox_color_dark_4 { color: #fff !important; background-color: #508CA9 !important; }
.fox_color_dark_5 { color: #fff !important; background-color: #4C849E !important; }
.fox_text_light_5 { color: #000 !important; color: #7DD4FD !important; }
.fox_text_light_4 { color: #000 !important; color: #7ACEF6 !important; }
.fox_text_light_3 { color: #000 !important; color: #77C8EF !important; }
.fox_text_light_2 { color: #000 !important; color: #73C1E7 !important; }
.fox_text_light_1 { color: #fff !important; color: #6CB7DB !important; }
.fox_text_dark_1 { color: #fff !important; color: #61A8CA !important; }
.fox_text_dark_2 { color: #fff !important; color: #5C9FBE !important; }
.fox_text_dark_3 { color: #fff !important; color: #5697B6 !important; }
.fox_text_dark_4 { color: #fff !important; color: #508CA9 !important; }
.fox_text_dark_5 { color: #fff !important; color: #4C849E !important; }
.fox_color_light { color: #000 !important; background-color: #f2f9fe !important; }
.fox_color_dark { color: #fff !important; background-color: #074b83 !important; }
.fox_color_action { color: #fff !important; background-color: #074b83 !important; }
.fox_color { color: #fff !important; background-color: #65AFD2 !important; }
.fox_text_color { color: #65AFD2 !important; }
.fox_border_color { border-color: #65AFD2 !important; }
.fox_hover_color:hover { color: #fff !important; background-color: #65AFD2 !important; }
.fox_hover_text_color:hover { color: #65AFD2 !important; }
.fox_hover_border_color:hover { border-color: #65AFD2 !important; }
.fox_background_unset { background: none; }

/*block néon*/
.fox_box_neon_tiny { box-shadow: 0 0 6px #65AFD2; }
.fox_box_neon { box-shadow: 0 0 12px #65AFD2; }
.fox_box_neon_middle { box-shadow: 0 0 24px #65AFD2; }
.fox_box_neon_hight { box-shadow: 0 0px 48px #65AFD2; }

/*block néon hover*/
.fox_box_neon_tiny_hover:hover { box-shadow: 0 0 6px #65AFD2; }
.fox_box_neon_hover:hover { box-shadow: 0 0 12px #65AFD2; }
.fox_box_neon_middle_hover:hover { box-shadow: 0 0 24px #65AFD2; }
.fox_box_neon_hight_hover:hover { box-shadow: 0 0px 48px #65AFD2; }

/* Texte Néon*/
.fox_text_neon_tiny_light { color: #65AFD2; text-shadow: 0 0 2px #f2f9fe; }
.fox_text_neon_light { color: #65AFD2; text-shadow: 0 0 4px #f2f9fe; }
.fox_text_neon_middle_light { color: #65AFD2; text-shadow: 0 0 8px #f2f9fe; }
.fox_text_neon_hight_light { color: #65AFD2; text-shadow: 0 0 16px #f2f9fe; }
.fox_text_neon_tiny { color: #f2f9fe; text-shadow: 0 0 2px #65AFD2; }
.fox_text_neon { color: #f2f9fe; text-shadow: 0 0 4px #65AFD2; }
.fox_text_neon_middle { color: #f2f9fe; text-shadow: 0 0 8px #65AFD2; }
.fox_text_neon_hight { color: #f2f9fe; text-shadow: 0 0 16px #65AFD2; }
.fox_text_neon_tiny_dark { color: #f2f9fe; text-shadow: 0 0 2px #074b83; }
.fox_text_neon_dark { color: #f2f9fe; text-shadow: 0 0 4px #074b83; }
.fox_text_neon_middle_dark { color: #f2f9fe; text-shadow: 0 0 8px #074b83; }
.fox_text_neon_hight_dark { color: #f2f9fe; text-shadow: 0 0 16px #074b83; }

/* Texte Néon hover*/
.fox_text_neon_tiny_light_hover:hover { color: #65AFD2; text-shadow: 0 0 2px #f2f9fe; }
.fox_text_neon_light_hover:hover { color: #65AFD2; text-shadow: 0 0 4px #f2f9fe; }
.fox_text_neon_middle_light_hover:hover { color: #65AFD2; text-shadow: 0 0 8px #f2f9fe; }
.fox_text_neon_hight_light_hover:hover { color: #65AFD2; text-shadow: 0 0 16px #f2f9fe; }
.fox_text_neon_tiny_hover:hover { color: #f2f9fe; text-shadow: 0 0 2px #65AFD2; }
.fox_text_neon_hover:hover { color: #f2f9fe; text-shadow: 0 0 4px #65AFD2; }
.fox_text_neon_middle_hover:hover { color: #f2f9fe; text-shadow: 0 0 8px #65AFD2; }
.fox_text_neon_hight_hover:hover { color: #f2f9fe; text-shadow: 0 0 16px #65AFD2; }
.fox_text_neon_tiny_dark_hover:hover { color: #f2f9fe; text-shadow: 0 0 2px #074b83; }
.fox_text_neon_dark_hover:hover { color: #f2f9fe; text-shadow: 0 0 4px #074b83; }
.fox_text_neon_middle_dark_hover:hover { color: #f2f9fe; text-shadow: 0 0 8px #074b83; }
.fox_text_neon_hight_dark_hover:hover { color: #f2f9fe; text-shadow: 0 0 16px #074b83; }

/*shape*/
/*triangle*/
/*triangle very tiny */

.fox_triangle_down_very_tiny { width: 0px; height: 0px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #65AFD2; }
.fox_triangle_up_very_tiny { width: 0px; height: 0px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 6px solid #65AFD2; }
.fox_triangle_left_very_tiny { width: 0px; height: 0px; border-top: 3px solid transparent; border-right: 6px solid #65AFD2; border-bottom: 3px solid transparent; }
.fox_triangle_right_very_tiny { width: 0px; height: 0px; border-top: 3px solid transparent; border-left: 6px solid #65AFD2; border-bottom: 3px solid transparent; }

/*triangle tiny*/
.fox_triangle_down_tiny { width: 0px; height: 0px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 12px solid #65AFD2; }
.fox_triangle_up_tiny { width: 0px; height: 0px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #65AFD2; }
.fox_triangle_left_tiny { width: 0px; height: 0px; border-top: 6px solid transparent; border-right: 12px solid #65AFD2; border-bottom: 6px solid transparent; }
.fox_triangle_right_tiny { width: 0px; height: 0px; border-top: 6px solid transparent; border-left: 12px solid #65AFD2; border-bottom: 6px solid transparent; }

/*triangle litle*/
.fox_triangle_down_litle { width: 0px; height: 0px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 24px solid #65AFD2; }
.fox_triangle_up_litle { width: 0px; height: 0px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 24px solid #65AFD2; }
.fox_triangle_left_litle { width: 0px; height: 0px; border-top: 12px solid transparent; border-right: 24px solid #65AFD2; border-bottom: 12px solid transparent; }
.fox_triangle_right_litle { width: 0px; height: 0px; border-top: 12px solid transparent; border-left: 24px solid #65AFD2; border-bottom: 12px solid transparent; }

/*triangle medium*/
.fox_triangle_down_medium { width: 0px; height: 0px; border-left: 24px solid transparent; border-right: 24px solid transparent; border-top: 48px solid #65AFD2; }
.fox_triangle_up_medium { width: 0px; height: 0px; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 48px solid #65AFD2; }
.fox_triangle_left_medium { width: 0px; height: 0px; border-top: 24px solid transparent; border-right: 48px solid #65AFD2; border-bottom: 24px solid transparent; }
.fox_triangle_right_medium { width: 0px; height: 0px; border-top: 24px solid transparent; border-left: 48px solid #65AFD2; border-bottom: 24px solid transparent; }

/*triangle large*/
.fox_triangle_down_large { width: 0px; height: 0px; border-left: 48px solid transparent; border-right: 48px solid transparent; border-top: 96px solid #65AFD2; }
.fox_triangle_up_large { width: 0px; height: 0px; border-left: 48px solid transparent; border-right: 48px solid transparent; border-bottom: 96px solid #65AFD2; }
.fox_triangle_left_large { width: 0px; height: 0px; border-top: 48px solid transparent; border-right: 96px solid #65AFD2; border-bottom: 48px solid transparent; }
.fox_triangle_right_large { width: 0px; height: 0px; border-top: 48px solid transparent; border-left: 96px solid #65AFD2; border-bottom: 48px solid transparent; }

/*circle*/
.fox_pie_tiny { width: 12px; height: 12px; border-radius: 50%; background: #65AFD2; }
.fox_pie_litle { width: 24px; height: 24px; border-radius: 50%; background: #65AFD2; }
.fox_pie_medium { width: 48px; height: 48px; border-radius: 50%; background: #65AFD2; }
.fox_pie_large { width: 96px; height: 96px; border-radius: 50%; background: #65AFD2; }

/*border*/
.fox_border_unset { border: 0 !important; }
.fox_border_tiny { border: 1px #65AFD2 solid !important; }
.fox_border_litle { border: 2px #65AFD2 solid !important; }
.fox_border_medium { border: 4px #65AFD2 solid !important; }
.fox_border_large { border: 8px #65AFD2 solid !important; }
.fox_border_extra_large { border: 16px #65AFD2 solid !important; }
.fox_border_left_tiny { border-left: 1px #65AFD2 solid !important; }
.fox_border_left_litle { border-left: 2px #65AFD2 solid !important; }
.fox_border_left_medium { border-left: 4px #65AFD2 solid !important; }
.fox_border_left_large { border-left: 8px #65AFD2 solid !important; }
.fox_border_left_extra_large { border-left: 16px #65AFD2 solid !important; }
.fox_border_right_tiny { border-right: 1px #65AFD2 solid !important; }
.fox_border_right_litle { border-right: 2px #65AFD2 solid !important; }
.fox_border_right_medium { border-right: 4px #65AFD2 solid !important; }
.fox_border_right_large { border-right: 8px #65AFD2 solid !important; }
.fox_border_right_extra_large { border-right: 16px #65AFD2 solid !important; }
.fox_border_top_tiny { border-top: 1px #65AFD2 solid !important; }
.fox_border_top_litle { border-top: 2px #65AFD2 solid !important; }
.fox_border_top_medium { border-top: 4px #65AFD2 solid !important; }
.fox_border_top_large { border-top: 8px #65AFD2 solid !important; }
.fox_border_top_extra_large { border-top: 16px #65AFD2 solid !important; }
.fox_border_bottom_tiny { border-bottom: 1px #65AFD2 solid !important; }
.fox_border_bottom_litle { border-bottom: 2px #65AFD2 solid !important; }
.fox_border_bottom_medium { border-bottom: 4px #65AFD2 solid !important; }
.fox_border_bottom_large { border-bottom: 8px #65AFD2 solid !important; }
.fox_border_bottom_extra_large { border-bottom: 16px #65AFD2 solid !important; }

/* Fond Dégradé */
.fox_linear_gradient_to_right { background-image: linear-gradient(to right, #7ACEF6, #508CA9); color: #fff; }
.fox_linear_gradient_to_bottom { background-image: linear-gradient(to bottom, #7ACEF6, #508CA9); color: #fff; }
.fox_linear_gradient_to_top { background-image: linear-gradient(to top, #7ACEF6, #508CA9); color: #fff; }
.fox_linear_gradient_to_left { background-image: linear-gradient(to left, #7ACEF6, #508CA9); color: #fff; }

/********************************************************
 *      Gradient sur hover
 ********************************************************/
.fox_linear_gradient_to_right_hover:hover { background-image: linear-gradient(to right, #7ACEF6, #508CA9); color: #fff; }
.fox_linear_gradient_to_bottom_hover:hover { background-image: linear-gradient(to bottom, #7ACEF6, #508CA9); color: #fff; }
.fox_linear_gradient_to_top_hover:hover { background-image: linear-gradient(to top, #7ACEF6, #508CA9); color: #fff; }
.fox_linear_gradient_to_left_hover:hover { background-image: linear-gradient(to left, #7ACEF6, #508CA9); color: #fff; }

/********************************************************
 *      Gradient Dark
 ********************************************************/
.fox_linear_gradient_to_right_dark { background-image: linear-gradient(to right, #61A8CA, #4C849E); color: #fff; }
.fox_linear_gradient_to_bottom_dark { background-image: linear-gradient(to bottom, #61A8CA, #4C849E); color: #fff; }
.fox_linear_gradient_to_top_dark { background-image: linear-gradient(to top, #61A8CA, #4C849E); color: #fff; }
.fox_linear_gradient_to_left_dark { background-image: linear-gradient(to left, #61A8CA, #4C849E); color: #fff; }

/********************************************************
 *      Gradient light
 ********************************************************/
.fox_linear_gradient_to_right_light { background-image: linear-gradient(to right, #6CB7DB, #7DD4FD); color: #000; }
.fox_linear_gradient_to_bottom_light { background-image: linear-gradient(to bottom, #6CB7DB, #7DD4FD); color: #000; }
.fox_linear_gradient_to_top_light { background-image: linear-gradient(to top, #6CB7DB, #7DD4FD); color: #000; }
.fox_linear_gradient_to_left_light { background-image: linear-gradient(to left, #6CB7DB, #7DD4FD); color: #000; }

/*******************************************************
 *     Tableau
 * ****************************************************/
.fox_table_th th { background: #65AFD2; color: white; border-right: 2px solid #fff; }
.fox_table_th_dark th { background: #0a69b7; color: white; border-right: 2px solid #fff; }
.fox_table_th_hover th:hover { background: #0a69b7; color: white; border-right: 2px solid #fff; }
.fox_table_th_dark_hover th:hover { background: #074b83; color: white; border-right: 2px solid #fff; }

/*********************************************************
 *      Boutons entete
 *********************************************************/
.bt_entete { background-position-x: center; background-position-y: 30%; background-repeat: no-repeat; padding-top: 28px; padding-bottom: 5px; }
.fox_recherche_search { background-position-x: center; background-position-y: center; background-repeat: no-repeat; height: 18px; }
.dropdownx { width: 200px; }
#recherche_avancee { box-shadow: 0px 5px 9px #888888; }

/*****   Menu modifié le 12/02/2019   ********/

.rrmRootGroup { margin: 0; padding: 0; background-color: lightgray; }
.rmRootGroup li { font-weight: bold; list-style: none; list-style-image: url(style/ascx/little_arrow.png); margin: 0; padding: 0; padding-top: 10px; padding-bottom: 3px; }
.rmRootGroup li a { margin: 0; padding: 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: black; padding-left: 20px; display: inline-block; width: 100%; padding-top: 1px; padding-bottom: 1px; }
.rmLevel1 li { margin: 0; padding: 0; font-weight: normal; list-style: none; font-size: 10px; font-family: Arial, Helvetica, sans-serif; text-decoration: none; color: black; padding-left: 20px; width: 100%; height: 14px; padding-top: 4px; padding-bottom: 4px; }
.rmLevel1 li a { font-size: 12px; font-family: sans-serif; text-decoration: none; color: black; height: auto; }
.rmLevel1 li a .rmText { display: inline-block; }
.rmVertical { margin: 0; padding: 0; }

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

.N_grille input { border: 0; }
.rtileBottomContent { width: 105px; padding: 0; margin: 0; text-align: center; padding: 20px; padding-left: 35px; }
.fox_GrandeImage { position: fixed; bottom: 50px; right: 20px; width: auto; min-height: 25vh; min-width: 400px; max-height: 50vh; max-width: 90vw; background-color: White; border-right: black thin outset; border-top: black thin outset; border-left: black thin outset; border-bottom: black thin outset; }
.fox_Regulexp { border-width: thin; border-style: solid; font-size: small; font-weight: normal; font-family: Arial, Helvetica, sans-serif; color: #FF0000; }
.fox_Position { float: right !important; }
.f4w_flou { color: rgba(0, 0, 0,0.9); font-family: Inconsolata, monospace; font-size: 25px; text-align: center; background-color: rgba(240, 240, 240,0.9); filter: blur(30px); }
.Fox_generale { background-position-x: center; background-position-y: 30%; background-repeat: no-repeat; padding-top: 28px; padding-bottom: 5px; }
.fox_add { position: fixed; bottom: 80px; right: 40px; border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #f6fafc; z-index: 10 }
.fox_Recherche { border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #fafafa; }
.fox_graphique { border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #fafafa; }
.fox_Kardex_article_view { width: 100%; border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #f6fafc; }
.fox_Kardex_block { border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #f6fafc; }
.fox_Kardex_Scanner { border: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: medium; font-family: Arial; background-color: #FFFFCC; font-family: Arial; font-size: 16px; font-weight: normal; z-index: 1999999999; padding: 5px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.75); }
.fox_Kardex_Inventaire { border: 0px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; font-size: medium; font-family: Arial; background-color: #99CCFF; font-family: Arial; font-size: 16px; font-weight: normal; z-index: 1999999999; padding: 5px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.75); }
.fox_afficheur_multi { position: fixed; left: 150px; top: 100px; width: 80%; right: 150px; border: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: medium; font-family: Arial; background-color: #ff5f8b; font-family: Arial; font-size: 16px; font-weight: normal; z-index: 1999999999; padding: 15px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.75); }
.fox_table_edit { border: none; border-spacing: 0; padding: 0px; margin: 0px; }
.N_Simplifie_recherche { border: medium solid #BFDCEA; padding: 10px; margin: 10px; vertical-align: top; font-family: Arial; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.N_Simplifie_en_ligne { display: inline-block; padding: 0px; margin: 10px; vertical-align: top; font-family: Arial; width: 300px; }
.N_Simplifie_en_ligne .ListeIMG { width: 180px; border: 0; border-radius: 5px; }
.N_Button_valider { width: 120px; height: 40px; }
.N_Button_annuler { width: 120px; height: 40px; }
.N_Button_valider_cloturer { width: 220px; height: 40px; }

/*********************************
 *   CLASSE GENERALE             *
 *********************************/

body { 
    margin: 0; 
    padding: 0; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: large; 
    font-weight: normal; 
    color: #000000; 
    
    /* 1. On remplace overflow-x: hidden par auto */
    /* Si hidden est actif, l'utilisateur ne pourra jamais scroller pour voir le reste de ses tableaux sur les autres pages */
    overflow-x: auto; 

    /* 2. On garde ton min-width à 0 pour le responsive */
    min-width: 520px; 

    /* 3. L'ASTUCE POUR LE FOND BLEU CIEL */
    /* On utilise une couleur de fond, mais on lui dit de s'afficher comme une table. 
       En CSS, un display: table force le fond à s'étirer automatiquement de la largeur 
       du plus grand élément enfant (le grand tableau de tes autres pages) */
    display: table;            
    width: 100%;
}


.Fox_label_mandatory { background-color: #f6fafc; }

.Fox_inblock { display: inline-block; }

.fox_no_visible { display: none; }

/* adaptation pour l'orientation */
@media (orientation: portrait) {
    .Fox_Produit_Horizontale { display: none; }
    .Fox_maj_image { display: inline-block; float: right; width: 100%; border: none; }
    .Fox_maj_txt { display: inline-block; width: 100%; }
    .Fox_detail_treeview { display: none; }
    .fox_add_panier { position: fixed; top: 150px; Left: 40px; border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #f6fafc; }
}

@media (orientation: landscape) {
    .Fox_Produit_Vertical { display: none; }
    .Fox_maj_image { display: inline-block; float: right; width: 24%; border: none; }
    .Fox_maj_txt { display: inline-block; width: 74%; }
    .fox_add_panier { position: fixed; bottom: 80px; right: 40px; border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #f6fafc; }
}

/* Prise en compte pour tablette et Télephone*/
@media (max-width:601px) {
    .fox_Capturephoto_Tbl { width: 100%; }
    .Fox_capture { width: 200px; max-width: 250px; max-width: 250px; }
}

/* Prise en compte pour PC */
@media (min-width:601px) {
    .fox_Capturephoto_Tbl { width: 100%; border-right: black thin groove; border-top: black thin groove; border-left: black thin groove; border-bottom: black thin groove; }
    .Fox_capture { width: 100%; }
}

/************************
    Page MASTERPAGE.MASTER
*************************/
.fox_masterpage_agent { width: 0px; border-top-style: none; border-right-style: none; border-left-style: none; height: 0px; border-bottom-style: none; }
.fox_form_background { background-color: #EEF5FB; }

/************************
    Page MASTERPAGE_MAJ.MASTER
*************************/

div.Masterpage_maj_multipage.RadMultiPage { background: #ffffff !important; border: 1px solid #D6E4F0 !important; border-top: 3px solid #F58220 !important; border-radius: 0 0 6px 6px !important; padding: 10px !important; box-shadow: 0 4px 16px rgba(29, 53, 94, 0.10) !important; min-height: 60px !important; }

.Masterpage_maj_pageview { width: 100%; height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #1D355E; background-color: #ffffff; padding: 6px 4px; box-sizing: border-box; }

/* =====================================================
   ASCX : TETE_PAGE.ASCX  — aligné Fox4Work + Kardex_inout
   ===================================================== */

/* ── TOKENS locaux (miroir des --kdx-* de Kardex_inout) ── */
.Tete_Page_root { --TP_navy: #1D355E; --TP_navy_mid: #2A5298; --TP_navy_light: #3b6faf; --TP_orange: #F58220; --TP_orange_dk: #d96b10; --TP_orange_lt: #f9a54a; --TP_ice: #D6E4F0; --TP_ice_light: #EEF5FB; --TP_fox_blue: #65AFD2; --TP_shadow_sm: 0 2px 8px rgba(29,53,94,.18); --TP_shadow_md: 0 4px 16px rgba(29,53,94,.28); --TP_grad_bar: linear-gradient(to right, #3b6faf, #2A5298, #1D355E); --TP_grad_logo: linear-gradient(to right, #ffffff 70%, #EEF5FB 100%); }

/* ── Conteneur global ── */
.Tete_Page_root { position: sticky; top: 0; z-index: 1000; box-shadow: var(--TP_shadow_md); }

/* Reflet haut (comme Kardex_inout_Execute_Bar::before) */
.Tete_Page_root::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--TP_orange); pointer-events: none; z-index: 1; }

/* ── Bande logo ── */
.Tete_Page_logo_bar { display: flex; align-items: center; justify-content: space-between; padding: 5px 14px; min-height: 40px; background: var(--TP_grad_logo); border-bottom: 1px solid var(--TP_ice); box-shadow: 0 3px 6px rgba(86,151,182,.12); }

.Tete_Page_logo_img { height: 28px; cursor: pointer; transition: opacity .15s ease; }
.Tete_Page_logo_img:hover { opacity: .80; }

.Tete_Page_society_name { font-size: 0.82rem; font-weight: 700; letter-spacing: .06em; color: var(--TP_navy) !important; opacity: .75; }

/* ── Barre d'outils (gradient navy — miroir Kardex_inout_Execute_Bar) ── */
.Tete_Page_toolbar { display: flex; align-items: center; padding: 0 8px; min-height: 48px; gap: 4px; background: var(--TP_grad_bar); box-shadow: 0 3px 10px rgba(29,53,94,.35); position: relative; }

.Tete_Page_toolbar_left { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.Tete_Page_toolbar_mid { flex: 1 1 auto; display: flex; align-items: center; }
.Tete_Page_toolbar_right { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }

/* ── Séparateur vertical ── */
.Tete_Page_separator { width: 1px; height: 24px; background: rgba(255,255,255,.18); margin: 0 6px; flex-shrink: 0; }

/* ── Bouton clavier virtuel ── */
.Tete_Page_keyboard_btn { height: 40px; border-radius: 6px; cursor: pointer; transition: opacity .15s ease, transform .1s ease; filter: brightness(0) invert(1); opacity: .85; }
.Tete_Page_keyboard_btn:hover { opacity: 1; transform: scale(1.06); }

/* ── Boutons d'action — base ── */
.Tete_Page_btn { min-width: 44px; height: 40px; border-radius: 6px; font-size: 0.68rem; font-weight: 700; text-align: center; cursor: pointer; border: 1px solid rgba(255,255,255,.15); outline: none; background-color: rgba(255,255,255,.10); background-repeat: no-repeat; background-position: center 6px; background-size: 16px 16px; padding: 22px 4px 4px; color: rgba(255,255,255,.88) !important; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .10s ease; letter-spacing: .02em; }

/* Survol orange (inspiré de fox_custom_btn:hover de Default_mn) */
.Tete_Page_btn:hover { background-color: rgba(245,130,32,.38) !important; border-color: rgba(245,130,32,.65) !important; color: #fff !important; box-shadow: 0 3px 10px rgba(245,130,32,.35); transform: translateY(-1px); }

/* Clic */
.Tete_Page_btn:active { transform: scale(.95) translateY(0); box-shadow: none; }

/* Focus accessibilité */
.Tete_Page_btn:focus { box-shadow: 0 0 0 2px rgba(245,130,32,.50); }

/* ── Icônes individuelles ── */
.Tete_Page_btn_home { background-image: url(../../../Style/Menu/icons_menu/home_16x16.png); }
.Tete_Page_btn_menu { background-image: url(../../../Style/Menu/menu_hamburger.png); }
.Tete_Page_btn_kardex { background-image: url(../../../Style/Menu/icons_menu/cadena_16x16.png); }
.Tete_Page_btn_edit { background-image: url(../../../Style/Menu/icons_menu/editer_16x16.png); }
.Tete_Page_btn_search { background-image: url(../../../Style/Menu/icons_menu/search_16x16.png); }
.Tete_Page_btn_back { background-image: url(../../../Style/Menu/icons_menu/retour_16x16.png); }
.Tete_Page_btn_add { background-image: url(../../../Style/Menu/icons_menu/ajouter_16x16.png); }
.Tete_Page_btn_actions { background-image: url(../../../Style/Menu/icons_menu/down_16x16.png); }
.Tete_Page_btn_print { background-image: url(../../../Style/Menu/icons_menu/printer_16x16.png); }
.Tete_Page_btn_profile { background-image: url(../../../Style/Menu/icons_menu/user_16x16.png); }
.Tete_Page_btn_logout { background-image: url(../../../Style/Menu/icons_menu/log_off_16x16.png); }

/* Déconnexion — rouge discret pour attirer l'œil */
.Tete_Page_btn_logout:hover { background-color: rgba(217,48,37,.40) !important; border-color: rgba(217,48,37,.65) !important; box-shadow: 0 3px 10px rgba(217,48,37,.30); }

/* ── Barre de progression (orange Fox) ── */
.Tete_Page_progress_track { width: 100%; height: 3px; background: rgba(29,53,94,.12); overflow: hidden; }

.Tete_Page_progress_bar { height: 3px; width: 0%; background: linear-gradient(to right, var(--TP_orange_lt), var(--TP_orange), var(--TP_orange_dk)); transition: width .3s ease; box-shadow: 0 0 6px rgba(245,130,32,.60); }

/* ── Panier ── */
.Tete_Page_panier_wrap { margin: 0; padding: 0; }

/* ── Zone erreur ── */
.Tete_Page_error_row { width: 98%; margin: 0 auto; text-align: right; min-height: 0; overflow: hidden; }

/* ── Panneau profil flottant
       (style badge Kardex_inout_Execute_Bar) ── */
.Tete_Page_profile_panel { position: absolute; top: 90px; right: 98px; width: 168px; border-radius: 8px; overflow: hidden; background: var(--TP_navy_mid); box-shadow: var(--TP_shadow_md); border: 1px solid rgba(214,228,240,.25); animation: animatezoom .25s ease; }

.Tete_Page_profile_panel_row { display: block; width: 100%; border-bottom: 1px solid rgba(255,255,255,.10); transition: background .15s ease; }

.Tete_Page_profile_panel_row:last-child { border-bottom: none; }

/* Survol orange dans le panneau profil */
.Tete_Page_profile_panel_row:hover,
.Tete_Page_profile_panel select:hover,
.Tete_Page_profile_panel a:hover { background: rgba(245,130,32,.22) !important; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .Tete_Page_hide_small { display: none !important; }
    .Tete_Page_toolbar { height: auto; padding: 4px 8px; }
}

@media (min-width: 601px) and (max-width: 960px) {
    .Tete_Page_hide_medium { display: none !important; }
}

@media (min-width: 961px) {
    .Tete_Page_hide_large { display: none !important; }
}

/* =====================================================
   ASCX : RECHERCHE.ASCX  — aligné Fox4Work + Kardex_inout
   ===================================================== */
/* ============================================================
       Recherche_ : styles propres au contrôle Recherche.ascx
       Palette    : fox4work #65AFD2 (bleu) / #616161 (gris) / #fff (texte)
       Accent     : #ff9800 orange fox4work (discret)
       Préfixe    : Recherche_
    ============================================================ */

/* --- Conteneur global (ancre pour le panneau absolu) --- */
.Recherche_container { position: relative; display: inline-block; vertical-align: middle; }

/* --- Barre de saisie principale --- */
.Recherche_wrapper { display: inline-flex; align-items: center; background-color: rgba(101, 175, 210, 0.12); border-bottom: 2px solid #65AFD2; padding: 2px 6px; height: 32px; box-sizing: border-box; }

/* --- Champ texte --- */
.Recherche_input { background-image: url(Style/Menu/icons_menu/search_10x10.png) !important; background-position: 6px center !important; background-repeat: no-repeat !important; padding-left: 20px !important; border: none !important; outline: none !important; font-size: 12px; font-family: Arial, sans-serif; width: 170px; height: 22px; vertical-align: middle; margin-top: 0 !important; }

.Recherche_input::placeholder { color: rgba(255, 255, 255, 0.40); }

/* --- Boutons icônes (toggle / scan) --- */
.Recherche_btn_icon { background: none !important; border: none !important; cursor: pointer; padding: 2px 3px !important; opacity: 0.70; transition: opacity 0.2s, transform 0.15s; vertical-align: middle; display: inline-block; }

.Recherche_btn_icon:hover { opacity: 1; transform: scale(1.1); }

/* -------------------------------------------------------
       Panneau recherche avancée
       top: 100% = juste sous la barre + 5px d'espacement
    ------------------------------------------------------- */
.Recherche_panel_avancee { position: absolute !important; top: calc(100% + 5px) !important; left: 0 !important; width: 340px; background-color: #616161 !important; border: 1px solid #65AFD2 !important; border-top: 3px solid #65AFD2 !important; border-radius: 0 2px 2px 2px; box-shadow: 0 4px 10px 0 rgba(0,0,0,0.28), 0 4px 20px 0 rgba(0,0,0,0.19) !important; color: #ffffff !important; font-family: Arial, sans-serif; font-size: 12px; padding: 8px !important; box-sizing: border-box; z-index: 10000; }

/* --- Titre principal --- */
.Recherche_titre_principal { color: #ffffff !important; background-color: transparent !important; font-size: 13px !important; font-weight: bold; border-bottom: 1px solid #65AFD2; padding-bottom: 5px; margin-bottom: 6px; display: block; width: 100%; }

/* --- Titre secondaire (recherche complémentaire) --- */
.Recherche_titre_secondaire { color: #ff9800 !important; background-color: transparent !important; font-size: 11px !important; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }

/* --- Table interne des filtres --- */
.Recherche_table_filtres { width: 100%; border-collapse: collapse; }

.Recherche_table_filtres td { width: 100px; padding: 3px 2px; vertical-align: middle; }

.Recherche_table_filtres span,
.Recherche_table_filtres label,
.Recherche_table_filtres .Recherche_label { font-size: 11px; color: #d0d0d0 !important; background-color: transparent !important; font-family: Arial, sans-serif; display: inline-block; width: 90px; }

.Recherche_table_filtres input[type="text"],
.Recherche_table_filtres .Recherche_input_filtre { width: 210px; font-size: 12px; background-color: #4a4a4a !important; color: #ffffff !important; border: 1px solid #65AFD2; border-radius: 2px; padding: 3px 6px; font-family: Arial, sans-serif; transition: border-color 0.2s; box-sizing: border-box; }

.Recherche_table_filtres input[type="text"]:focus { border-color: #ff9800; outline: none; box-shadow: 0 0 3px rgba(255, 152, 0, 0.30); }

/* --- Dropdown filtre --- */
.Recherche_option { width: 210px; font-size: 12px; background-color: #4a4a4a !important; color: #ffffff !important; border: 1px solid #65AFD2; border-radius: 2px; padding: 2px 4px; font-family: Arial, sans-serif; box-sizing: border-box; }

.Recherche_option option { background-color: #4a4a4a; color: #ffffff; }

/* --- Zone filtre actif (Tr_Affiche) ---
       Bande compacte : fond légèrement distinct,
       repère orange à gauche, icône fermer à droite  */
.Recherche_filtre_actif { width: 100%; background-color: #525252; border-left: 3px solid #ff9800; border-radius: 0 2px 2px 0; border-collapse: collapse; margin-top: 4px; }

.Recherche_filtre_actif td { padding: 4px 6px; vertical-align: middle; color: #ffffff !important; background-color: transparent !important; font-size: 11px; font-family: Arial, sans-serif; }

.Recherche_filtre_actif td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 185px; }

.Recherche_filtre_actif td:last-child { width: 22px; text-align: right; padding: 2px 4px; }

/* --- Bouton Rechercher --- */
.Recherche_btn_submit { background-color: #65AFD2 !important; color: #ffffff !important; border: none !important; border-radius: 2px !important; padding: 4px 14px !important; font-size: 12px !important; font-family: Arial, sans-serif !important; font-weight: bold !important; cursor: pointer !important; margin-top: 8px !important; float: right; transition: background-color 0.15s !important; }

.Recherche_btn_submit:hover { background-color: #4a9bbf !important; }

/* --- clearfix après bouton flottant --- */
.Recherche_clearfix::after { content: ""; display: table; clear: both; }

/************************
    Forme Pied_Page.ASCX
*************************/
.fox_pied_page { background-color: #999; text-align: center; text-decoration: none; margin: 0px; margin-bottom: 2px; color: #fff; font-size: 11px; padding: 0px; padding-bottom: 2px; }
.fox_pied_page_text { font-family: Arial, Helvetica, sans-serif; font-size: medium; }
.fox_pied_page_footer { height: 40px; font-family: Arial; font-size: 14px; padding-top: 0px; font-weight: bold; color: White; text-decoration: none; background-color: #ccc; position: fixed; bottom: 0; width: 100%; text-align: center; z-index: 999; }
.fox_pied_page_footer_p { color: #6856CB; font-family: 'Franklin Gothic Book', 'Courier New'; font-size: 12px; }
.connexion_form_contener .fox_pied_page_footer { position: initial; }

/************************
    Forme PlateauxViewer.ASCX
*************************/

.plateaux-viewer-container { display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; z-index: 100; }

.plateaux-viewer-map-wrapper { flex: 1; width: 100%; }

.plateaux-viewer-img { max-width: 100%; height: auto; display: block; }

/* On force l'alignement flex pour les boutons lorsqu'ils sont affichés */
.plateaux-viewer-actions.fox_hide_Plateaux_telecharger { display: flex; gap: 10px; }

/* 2. Votre Media Query corrigée pour le responsive */
@media screen and (max-width: 1450px) {
    /* L'utilisation de !important sécurise le masquage face aux règles Flexbox de base */
    .fox_hide_Plateaux_telecharger { display: none !important; }
}

/**************************
    Forme BT_Email.ASCX
***************************/

.email-inline-wrapper { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 8px; }
.email-icon-link img { display: block; height: 40px; width: auto; border: none; }
.email-control-item { display: inline-block; flex-shrink: 0; }

/**************************
    Forme BT_Famille.ASCX
***************************/

/* --- Conteneur Principal --- */
.BT_Famille_wrapper { background-color: #ffffff; border: 1px solid #e0e6ed; border-radius: 8px; padding: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #334155; max-width: 100%; }

/* --- En-tête --- */
.BT_Famille_header { display: flex; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #f1f5f9; }

.BT_Famille_icon_zoom { cursor: pointer; transition: transform 0.2s ease; margin-right: 12px; }

.BT_Famille_icon_zoom:hover { transform: scale(1.1); }

.BT_Famille_title { font-size: 1.125rem; font-weight: 600; color: #0f172a; margin: 0; }

/* --- Visuel de la Famille --- */
.BT_Famille_visual { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 20px; }

.BT_Famille_img { border-radius: 6px; border: 1px solid #cbd5e1; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 12px; transition: box-shadow 0.2s ease; }

.BT_Famille_img:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); }

.BT_Famille_designation { font-size: 0.875rem; font-weight: 500; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }

/* --- Détails --- */
.BT_Famille_details { margin-top: 16px; }

.BT_Famille_memo_container { background-color: #f0fdf4; border-left: 4px solid #22c55e; padding: 10px 14px; border-radius: 4px; margin-bottom: 20px; }

.BT_Famille_memo_info { font-size: 0.875rem; color: #166534; line-height: 1.5; }

/* --- Conteneur Liste de Fichiers (Card) --- */
.BT_Famille_file_list_card { border: 1px solid #cbd5e1; border-radius: 6px; background-color: #ffffff; overflow: hidden; }

.BT_Famille_card_header { background-color: #f8fafc; border-bottom: 1px solid #cbd5e1; padding: 10px 16px; }

.BT_Famille_file_title { font-size: 0.9rem; font-weight: 600; color: #475569; margin: 0; }

.BT_Famille_card_body { padding: 16px; }

/* --- Espace de Chargement --- */
.BT_Famille_upload_zone { background-color: #f8fafc; border: 1px dashed #94a3b8; border-radius: 6px; padding: 20px; margin-top: 16px; text-align: center; }

.BT_Famille_file_label { display: block; margin-bottom: 16px; font-size: 0.875rem; color: #334155; font-weight: 500; word-break: break-word; }

/* --- Boutons d'Action --- */
.BT_Famille_action_buttons { display: flex; justify-content: flex-end; gap: 12px; }

.BT_Famille_action_buttons input[type="submit"],
.BT_Famille_action_buttons button { padding: 8px 16px; font-size: 0.875rem; font-weight: 600; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; border: none; }

.BT_Famille_btn_cancel { background-color: #ffffff; color: #64748b; border: 1px solid #cbd5e1 !important; }

.BT_Famille_btn_cancel:hover { background-color: #f1f5f9; color: #334155; }

.BT_Famille_btn_upload { background-color: #2563eb; color: #ffffff; box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3); }

.BT_Famille_btn_upload:hover { background-color: #1d4ed8; box-shadow: 0 2px 4px rgba(37, 99, 235, 0.4); }

/**************************
    Forme ImageZoom.ASCX
***************************/

/* Overlay Gris Anthracite */
.fox_ImgZoom_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(40, 40, 40, 0.85); z-index: 9998; }

/* Conteneur de centrage */
.fox_ImgZoom_Wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 9999; }

/* Grande image avec effet 3D */
.fox_ImgZoom_GrandeImage { width: 30vw; /* Taille réduite à 30% pour ne pas être trop grande */ height: auto; max-height: 70vh; object-fit: contain; cursor: zoom-out; background-color: #fff; /* Effet 3D : Bordure + Ombre profonde */ padding: 8px; /* Espace entre l'image et le bord blanc */ border: 1px solid #ddd; border-radius: 4px; /* Coins légèrement arrondis pour le réalisme */ /* Double ombre : une pour la profondeur, une pour le contact */ box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.5), 0 0 0 8px rgba(255,255,255,1); /* Bordure blanche épaisse intégrée */ transition: transform 0.2s ease; }

/* Petit effet de flottement */
.fox_ImgZoom_GrandeImage:hover { transform: scale(1.02); }

.fox_round { border-radius: 6px; }
.fox_round { border-radius: 10px; }
/* On cache les barres de défilement du site quand l'image est ouverte */
body.modal-open { overflow: hidden; }

/**************************
    Forme Combo_field.ASCX
***************************/
.fox_combo_field { display: inline-block; vertical-align: top; overflow: hidden; border: none; }
.fox_combo_field select { padding: 5px; margin: -5px -30px -5px -5px; }

/*************************
    Forme Kardex_inout.ascx
**************************/

/* ══════════════════════════════════════════════════════════════
   TOKENS GLOBAUX
   ══════════════════════════════════════════════════════════════ */
:root { --kdx-navy: #1D355E; --kdx-navy-mid: #2A5298; --kdx-navy-light: #3b6faf; --kdx-orange: #F58220; --kdx-orange-dk: #d96b10; --kdx-orange-lt: #f9a54a; --kdx-ice: #D6E4F0; --kdx-ice-light: #EEF5FB; --kdx-ice-xlight: #f8fbfe; --kdx-muted: #5a7a99; --kdx-green: #5EB660; --kdx-red: #d93025; --kdx-shadow-sm: 0 2px 8px rgba(29,53,94,.12); --kdx-shadow-md: 0 4px 16px rgba(29,53,94,.18); --kdx-radius: 7px; --kdx-btn-navy: linear-gradient(140deg, #3b6faf 0%, #2A5298 40%, #1D355E 100%); --kdx-btn-orange: linear-gradient(140deg, #f9a54a 0%, #F58220 50%, #d96b10 100%); --kdx-btn-green: linear-gradient(140deg, #7dd87e 0%, #5EB660 50%, #3d9940 100%); --kdx-btn-red: linear-gradient(140deg, #f07070 0%, #d93025 60%, #b02010 100%); }

/* ══════════════════════════════════════════════════════════════
   BLOC 1 — CONSULTATION PLATEAUX
   ══════════════════════════════════════════════════════════════ */

.Fox_Kardex_inout_container { background: #fff; border-radius: var(--kdx-radius); border: 1px solid var(--kdx-ice); border-top: 3px solid var(--kdx-navy); padding: 14px 18px; box-shadow: var(--kdx-shadow-sm); box-sizing: border-box; }

.Fox_Kardex_inout_header { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--kdx-ice); }

.Fox_Kardex_inout_actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.Fox_Kardex_inout_card { background: #fff; border-radius: var(--kdx-radius); border: 1px solid var(--kdx-ice); border-top: 3px solid var(--kdx-navy); padding: 14px 18px; margin-top: 12px; box-shadow: var(--kdx-shadow-sm); box-sizing: border-box; }

.Fox_Kardex_inout_row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.Fox_Kardex_inout_switch_container { display: flex; align-items: center; }
.Fox_Kardex_inout_toggle { display: inline-flex; gap: 10px; font-size: 13px; font-weight: bold; color: var(--kdx-navy); cursor: pointer; }
.Fox_Kardex_inout_toggle label { margin-bottom: 0; cursor: pointer; }

.Fox_Kardex_inout_list_header { font-size: 11px; font-weight: bold; color: var(--kdx-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }

.Fox_Kardex_inout_listboxold { width: 100%; border: 1px solid var(--kdx-ice); border-radius: 5px; padding: 5px; font-size: 13px; color: var(--kdx-navy); background: var(--kdx-ice-xlight); transition: border-color .2s; }
.Fox_Kardex_inout_listboxold:focus { border-color: var(--kdx-navy-mid); outline: none; }

.Fox_Kardex_inout_action_grid { display: flex; gap: 8px; flex-wrap: wrap; margin: 5px 0; }

.Fox_Kardex_inout_footer { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--kdx-ice); display: flex; flex-direction: column; gap: 10px; }

.Fox_Kardex_inout_subpanel { background: linear-gradient(to bottom, var(--kdx-ice-light), #fff); border: 1px solid var(--kdx-ice); border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

.Fox_Kardex_inout_input_row { width: 100%; }
.Fox_Kardex_inout_input_group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.Fox_Kardex_inout_select { border: 1px solid var(--kdx-ice) !important; border-radius: 5px !important; padding: 6px 10px !important; font-size: 13px !important; background: var(--kdx-ice-xlight) !important; color: var(--kdx-navy) !important; transition: border-color .2s !important; }
.Fox_Kardex_inout_select:focus { border-color: var(--kdx-navy-mid) !important; outline: none !important; }

.Fox_Kardex_inout_numeric { border: 1px solid var(--kdx-ice) !important; border-radius: 5px !important; }

/* Bouton navy dégradé */
.Fox_Kardex_inout_btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 9px; background: var(--kdx-btn-navy); color: #fff !important; font-size: 13px; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; box-shadow: 0 3px 10px rgba(29,53,94,.28), inset 0 1px 0 rgba(255,255,255,.12); transition: filter .18s, transform .1s, box-shadow .18s; text-decoration: none; }
.Fox_Kardex_inout_btn:hover { filter: brightness(1.12); box-shadow: 0 5px 16px rgba(29,53,94,.38); }
.Fox_Kardex_inout_btn:active { transform: scale(.97); box-shadow: none; }

/* Bouton orange CTA */
.Fox_Kardex_inout_btn_primary { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 9px; background: var(--kdx-btn-orange); color: #fff !important; font-size: 13px; font-weight: bold; border: none; border-radius: 6px; cursor: pointer; box-shadow: 0 3px 10px rgba(245,130,32,.32), inset 0 1px 0 rgba(255,255,255,.15); transition: filter .18s, transform .1s, box-shadow .18s; }
.Fox_Kardex_inout_btn_primary:hover { filter: brightness(1.07); box-shadow: 0 5px 16px rgba(245,130,32,.45); }
.Fox_Kardex_inout_btn_primary:active { transform: scale(.97); }

/* Erreurs inline */
.Fox_Kardex_inout_error_inline { display: block; color: var(--kdx-red); font-size: 12px; font-weight: bold; margin-top: 6px; padding: 5px 10px; background: #fef2f2; border-left: 3px solid var(--kdx-red); border-radius: 4px; }

/* Bloc erreur générale */
.Fox_Kardex_inout_error_container { background: #fef2f2; border: 1px solid #fecaca; border-left: 5px solid var(--kdx-red); border-radius: var(--kdx-radius); padding: 14px 18px; margin-top: 12px; box-shadow: 0 2px 8px rgba(217,48,37,.1); }
.Fox_Kardex_inout_error_text_zone { display: flex; flex-direction: column; gap: 5px; }
.Fox_Kardex_inout_error_header { font-size: 15px; font-weight: 800; color: var(--kdx-red); }
.Fox_Kardex_inout_error_title { font-size: 13px; font-weight: bold; color: var(--kdx-navy); }
.Fox_Kardex_inout_error_message { font-size: 12px; color: var(--kdx-muted); font-style: italic; }

/* ══════════════════════════════════════════════════════════════
   BLOC 2 — ZONE D'EXÉCUTION
   ══════════════════════════════════════════════════════════════ */

[id$="Div_execution_action"] { background: linear-gradient(160deg, var(--kdx-ice-light) 0%, var(--kdx-ice-xlight) 60%, #fff 100%) !important; font-family: Arial, Helvetica, sans-serif; color: #000; width: 100vw; min-height: 100vh; box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════
   HEADER BAR — 3 zones : Logo | Machines | Badges
   ══════════════════════════════════════════════════════════════ */

.Kardex_inout_Execute_Bar { display: flex; min-width: 520px; width: 100vw; align-items: center; flex-wrap: nowrap; gap: 12px; padding: 0 14px; height: 52px; background: linear-gradient(to right, var(--kdx-navy-mid), var(--kdx-navy)); box-shadow: 0 3px 10px rgba(29,53,94,.4); position: sticky; top: 0; z-index: 200; box-sizing: border-box; overflow: hidden; }

.Kardex_Main_Overlay { display: block !important; min-width: 520px !important; max-width: 100vw !important; /* Force la zone à se caler sur l'écran physique */ box-sizing: border-box !important; }

@media (max-width: 600px) {

    /* On force le wrapper global de ta page à ignorer l'espace virtuel des 600px 
       en lui donnant une largeur maximale stricte basée sur l'écran du smartphone */
    .Kardex_Global_Wrapper { min-width: 520px !important; max-width: 100vw !important; width: 100% !important; overflow-x: hidden !important; /* Coupe le scroll horizontal causé par le body des autres pages */ padding: 8px !important; box-sizing: border-box !important; }

    /* Le conteneur d'actions flexibles (qui s'étirait anormalement sur ta capture) */
    .Fox_Kardex_inout_actions { display: flex !important; flex-direction: column !important; /* On empile pour le mobile */ align-items: stretch !important; width: 100% !important; min-width: 0 !important; /* Force l'élément à pouvoir descendre sous les 600px */ max-width: 100% !important; box-sizing: border-box !important; }

    /* Redressement du bloc blanc de picking (Quantité "1" et emplacement) */
    .Kardex_inout_Execute_PickingInfo { display: flex !important; flex-direction: row !important; /* On le passe en ligne pour un rendu propre et compact */ justify-content: space-around !important; align-items: center !important; width: 100% !important; min-width: 0 !important; /* Supprime l'héritage de taille minimale */ max-width: 100% !important; padding: 8px 12px !important; }

    /* On transforme le séparateur en bordure droite */
    .Kardex_inout_Execute_QtyContainer { border-right: 1px solid var(--kdx-ice) !important; border-bottom: none !important; padding-right: 15px !important; margin-right: 10px !important; margin-bottom: 0 !important; width: auto !important; flex: 0 0 auto !important; }

    /* On force les boutons de validation à occuper le bas proprement côte à côte */
    .Kardex_Main_Buttons_Cluster { display: flex !important; flex-direction: row !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; margin-left: 0 !important; }

    .Kardex_Btn { flex: 1 !important; width: auto !important; justify-content: center !important; }
}

/* Reflet haut */
.Kardex_inout_Execute_Bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(255,255,255,.2); pointer-events: none; }

/* ── Zone ① Logo gauche ── */
.Kardex_Bar_Logo { flex: 0 0 auto; display: flex; align-items: center; height: 100%; padding-right: 12px; border-right: 1px solid rgba(255,255,255,.18); }

.Kardex_Bar_Logo_img { height: 100px; width: auto; display: block; filter: brightness(0) invert(1); opacity: .88; }

/* ── Zone ② Centre : Tour + Machines ── */
.Kardex_Bar_Center { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; height: 100%; }

.Kardex_Bar_TourLabel,
.Kardex_Bar_TourLabel label { flex: 0 0 auto; color: rgba(255,255,255,.85) !important; font-size: 12px !important; font-weight: bold !important; font-family: Arial, sans-serif !important; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.2); }

/* ── Kardex inout : barre numéros de machine ── */
.Kardex_inout_execution_machine { display: inline-block; border-radius: 6px; padding: 8px 18px; margin: 4px; font-size: 1.1em; font-family: Arial, sans-serif; font-weight: bold; letter-spacing: 1px; }
.Kardex_inout_execution_actuel { background-color: #FF6600; color: #FFFFFF; border: 3px solid #CC3300; box-shadow: 0 0 14px 4px rgba(255, 102, 0, 0.85), 0 0 30px 6px rgba(255, 102, 0, 0.4); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); font-size: 1.3em; animation: kardex_pulse 1.2s infinite; }

@keyframes kardex_pulse {
    0% { box-shadow: 0 0 14px 4px rgba(255,102,0,0.85), 0 0 30px 6px rgba(255,102,0,0.4); }
    50% { box-shadow: 0 0 22px 8px rgba(255,102,0,1), 0 0 45px 12px rgba(255,102,0,0.6); }
    100% { box-shadow: 0 0 14px 4px rgba(255,102,0,0.85), 0 0 30px 6px rgba(255,102,0,0.4); }
}

.Kardex_inout_execution_std { background-color: #EEEEEE; color: #AAAAAA; border: 2px solid #CCCCCC; opacity: 0.5; }

/* Panel machines — VISIBLE et scrollable */
.Kardex_inout_execution_bar { flex: 1 1 0; min-width: 0; height: 36px; background: rgba(0,0,0,.28); border-radius: 6px; border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 2px 6px rgba(0,0,0,.22); display: flex !important; align-items: center; gap: 5px; padding: 0 8px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.Kardex_inout_execution_bar::-webkit-scrollbar { display: none; }

/* Boutons/cellules machine générés côté serveur */
.Kardex_inout_execution_bar input[type="button"],
.Kardex_inout_execution_bar button,
.Kardex_inout_execution_bar a,
.Kardex_inout_execution_bar span:not(.Kardex_Bar_TourLabel),
.Kardex_inout_execution_bar label { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 38px; padding: 2px 10px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: bold !important; font-family: Arial, sans-serif !important; white-space: nowrap !important; cursor: pointer; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(255,255,255,.13) !important; color: rgba(255,255,255,.88) !important; text-decoration: none !important; transition: background .15s, border-color .15s, box-shadow .15s; height: 26px !important; box-sizing: border-box; }

/* Survol machine */
.Kardex_inout_execution_bar input[type="button"]:hover,
.Kardex_inout_execution_bar button:hover,
.Kardex_inout_execution_bar a:hover { background: rgba(245,130,32,.35) !important; border-color: rgba(245,130,32,.55) !important; color: #fff !important; }

/* Machine active / sélectionnée */
.Kardex_inout_execution_bar .active,
.Kardex_inout_execution_bar input[type="button"].active,
.Kardex_inout_execution_bar button.active,
.Kardex_inout_execution_bar .N_Etat_qualite_V { background: var(--kdx-btn-orange) !important; border-color: var(--kdx-orange) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(245,130,32,.45) !important; }

/* ── Zone ③ Badges droite ── */
.Kardex_Bar_Right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.18); }

.Kardex_inout_Execute_Badge { display: inline-flex; align-items: center; padding: 4px 11px; border: 1px solid rgba(214,228,240,.35); border-radius: 4px; font-size: 12px !important; font-weight: bold !important; background: rgba(255,255,255,.13); color: rgba(255,255,255,.9) !important; white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; font-family: Arial, sans-serif !important; text-shadow: 0 1px 2px rgba(0,0,0,.15); transition: background .15s; }

/* Badge opération orange — très lisible */
.Kardex_Badge_Operation,
.Kardex_inout_Execute_Badge[style*="F58220"],
.Kardex_inout_Execute_Badge[style*="f58220"],
.Kardex_inout_Execute_Badge[style*="F26522"],
.Kardex_inout_Execute_Badge[style*="f26522"] { background: rgba(255,255,255,.94) !important; border-color: var(--kdx-orange) !important; color: var(--kdx-orange) !important; font-weight: 800 !important; text-shadow: none !important; box-shadow: 0 0 0 1px rgba(245,130,32,.2); }

/* ══════════════════════════════════════════════════════════════
   SECTION SUPÉRIEURE : Viewer | Article | Picking Info
   ══════════════════════════════════════════════════════════════ */

.Kardex_inout_Execute_TopSection { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px 0 !important; width: 100% !important; box-sizing: border-box !important; display: flex; width: 100%; align-items: flex-start; gap: 20px; }

.Kardex_inout_Execute_TopSection { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px 0 !important; width: 100% !important; box-sizing: border-box !important; }

.Kardex_inout_Execute_ViewerContainer { flex: 1 1 0 !important; min-width: 0 !important; overflow: hidden; border-radius: var(--kdx-radius); background: #fff; border: 1px solid var(--kdx-ice); box-shadow: var(--kdx-shadow-sm); }
.Kardex_inout_Execute_ViewerContainer img,
.Kardex_inout_Execute_ViewerContainer canvas,
.Kardex_inout_Execute_ViewerContainer table { max-width: 100% !important; height: auto !important; }

.Kardex_inout_Execute_ArticleVertical { flex: 0 0 200px !important; max-width: 200px !important; min-width: 0 !important; overflow: hidden; border-radius: var(--kdx-radius); padding: 8px; background: #fff; border: 1px solid var(--kdx-ice); box-shadow: var(--kdx-shadow-sm); }

.Kardex_inout_Execute_PickingInfo { flex: 0 0 140px !important; max-width: 140px !important; min-width: 0 !important; background: #fff !important; border-radius: var(--kdx-radius) !important; border: 1px solid var(--kdx-ice) !important; border-top: 3px solid var(--kdx-navy) !important; padding: 12px 10px !important; box-shadow: var(--kdx-shadow-sm) !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; text-align: center !important; }

/* Quantité — surcharge le Font-Size inline */
.Kardex_inout_Execute_Text_Qty { font-size: 2.4rem !important; font-weight: 900 !important; color: var(--kdx-navy) !important; line-height: 1; letter-spacing: -.02em; display: block; }

/* Opération */
.Kardex_inout_Execute_Text_Op { font-size: 1.4rem !important; font-weight: 800 !important; color: var(--kdx-orange) !important; line-height: 1; display: block; }

.Kardex_inout_Execute_QtyContainer { padding: 4px 0; border-bottom: 1px solid var(--kdx-ice); margin-bottom: 4px; width: 100%; }
.Kardex_inout_Execute_LocContainer,
.Kardex_inout_Execute_PosContainer,
.Kardex_inout_Execute_ImageContainer { padding: 2px 0; }

.Kardex_inout_Execute_ImageContainer { display: flex; justify-content: center; }
.Kardex_inout_Execute_ImageContainer img { width: 52px !important; height: auto !important; }

/* Surcharge les Font-Size inline */
.Kardex_inout_Execute_LocContainer span,
.Kardex_inout_Execute_LocContainer label { font-size: 13px !important; font-weight: bold !important; color: var(--kdx-navy) !important; }

.Kardex_inout_Execute_PosContainer span,
.Kardex_inout_Execute_PosContainer label { font-size: 11px !important; color: var(--kdx-muted) !important; }

/* ══════════════════════════════════════════════════════════════
   EMPLACEMENT & COMMENTAIRE — discrets, une seule ligne
   ══════════════════════════════════════════════════════════════ */

.Kardex_inout_Execute_LocationBox,
.Kardex_inout_Execute_CommentBox { display: flex !important; align-items: center !important; gap: 10px !important; margin: 5px 14px !important; padding: 5px 12px !important; background: transparent !important; border: none !important; border-left: 2px solid var(--kdx-ice) !important; box-shadow: none !important; }

.Kardex_inout_Execute_LabelContainer { min-width: 115px; flex-shrink: 0; }

.Kardex_inout_Execute_SecondaryLabel { font-size: 10px !important; font-weight: bold !important; color: var(--kdx-muted) !important; text-transform: uppercase; letter-spacing: .06em; }

/* Surcharge Font-Size inline */
.Kardex_inout_Execute_MainValue { font-size: 14px !important; font-weight: bold !important; color: var(--kdx-navy) !important; }

.Kardex_inout_Execute_ValueContainer { flex: 1 !important; min-width: 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL — colonnes
   ══════════════════════════════════════════════════════════════ */

.Kardex_Global_Wrapper { padding: 12px 14px 0 !important; }
.Kardex_Column_Main { gap: 14px !important; }
.Kardex_Column_Side { gap: 14px !important; }

/* ══════════════════════════════════════════════════════════════
   CARDS COMMUNES
   ══════════════════════════════════════════════════════════════ */

.Kardex_Side_Card { background: #fff; border-radius: var(--kdx-radius); padding: 14px; box-shadow: var(--kdx-shadow-sm); border: 1px solid var(--kdx-ice); }
.Kardex_Side_Card.Highlight_Blue { border-top: 3px solid var(--kdx-navy); background: linear-gradient(to bottom, var(--kdx-ice-light), #fff); }

/* Grille localisation */
.Kardex_Loc_Details_Grid { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }

.Loc_Row { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 4px; transition: background .15s; }
.Loc_Row + .Loc_Row { border-top: 1px solid var(--kdx-ice-light); }
.Loc_Row:hover { background: var(--kdx-ice-light); }

.Loc_Lbl { font-size: 11px; font-weight: bold; color: var(--kdx-muted); min-width: 90px; text-transform: uppercase; letter-spacing: .04em; }
.Loc_Val_Bold { font-weight: bold; color: var(--kdx-navy); font-size: 13px; }
.Loc_Val_Blue { font-weight: bold; color: var(--kdx-navy-mid); font-size: 13px; }

.Loc_Row.Z_Highlight { background: linear-gradient(to right, #fff8f2, #fff); border: 1px solid #fde4c4; border-radius: 5px; }
.Loc_Row.Z_Highlight .Loc_Val_Blue { color: var(--kdx-orange); }

/* ══════════════════════════════════════════════════════════════
   SCANNER
   ══════════════════════════════════════════════════════════════ */

/* ── Mode VERTICAL (portrait) — style complet ── */
.Kardex_Scanner_Card { background: #fff; border-radius: var(--kdx-radius); padding: 14px; box-shadow: var(--kdx-shadow-sm); border: 1px solid var(--kdx-ice); border-left: 3px solid var(--kdx-orange); /* ← couleur spécifique scanner */ }

.Kardex_Scanner_ActionGroup { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.Kardex_Scanner_InputWrapper { display: flex; align-items: center; gap: 8px; flex: 1; background: var(--kdx-ice-xlight); border: 1px solid var(--kdx-ice); border-radius: 5px; padding: 7px 12px; transition: border-color .2s; }
.Kardex_Scanner_InputWrapper:focus-within { border-color: var(--kdx-navy-mid); }
.Kardex_Scanner_InputWrapper i { color: var(--kdx-muted); font-size: 15px; }

.Kardex_Scanner_Field { border: none !important; background: transparent !important; outline: none !important; font-size: 18px; flex: 1; color: var(--kdx-navy); }

.Kardex_Btn_Scanner { color: #fff; border: none; border-radius: 6px; padding: 8px 18px; font-weight: bold; font-size: 13px; cursor: pointer; background: var(--kdx-btn-orange); /* ← couleur spécifique scanner */ box-shadow: 0 3px 10px rgba(245,130,32,.3), inset 0 1px 0 rgba(255,255,255,.15); transition: filter .18s, box-shadow .18s; }
.Kardex_Btn_Scanner:hover { filter: brightness(1.07); box-shadow: 0 5px 14px rgba(245,130,32,.42); }

.Kardex_Scanner_Title { margin-bottom: 10px; }
.Kardex_Lower_Container { display: flex; flex-direction: column; gap: 10px; }
.Kardex_Error_System_Row { margin-top: 6px; }

/* ── Mode HORIZONTAL (landscape) — même concept qu'Inventaire_Card ── */
@media (orientation: landscape) {

    .Kardex_Scanner_Card { padding: 4px 14px !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; }
    .Kardex_Scanner_Title { margin-bottom: 0 !important; white-space: nowrap; flex-shrink: 0; }
    .Kardex_Scanner_ActionGroup { margin-top: 0 !important; flex-wrap: nowrap !important; }
}

/* ══════════════════════════════════════════════════════════════
   INVENTAIRE
   ══════════════════════════════════════════════════════════════ */
/* ── Mode VERTICAL (portrait) — style complet ── */
.Kardex_Inventaire_Card { background: #fff; border-radius: var(--kdx-radius); padding: 14px; box-shadow: var(--kdx-shadow-sm); border: 1px solid var(--kdx-ice); border-left: 3px solid var(--kdx-navy-mid); }
.Kardex_Inventaire_Controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.Kardex_Inventaire_Header { margin-bottom: 10px; }

/* ── Mode HORIZONTAL (landscape 1080x1280 pivoté = 1280 large) ── */
@media (orientation: landscape) {

    .Kardex_Inventaire_Card { padding: 4px 14px !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 12px !important; }
    .Kardex_Inventaire_Header { margin-bottom: 0 !important; white-space: nowrap; flex-shrink: 0; }
    .Kardex_Inventaire_Controls { margin-top: 0 !important; flex-wrap: nowrap !important; }
}

.Kardex_UC_Slot { flex: 1; min-width: 0; }
.Kardex_Btn_Inventory { color: #fff; border: none; border-radius: 6px; padding: 9px 20px; font-weight: bold; font-size: 13px; cursor: pointer; background: var(--kdx-btn-navy); box-shadow: 0 3px 10px rgba(29,53,94,.28), inset 0 1px 0 rgba(255,255,255,.12); transition: filter .18s, box-shadow .18s; }
.Kardex_Btn_Inventory:hover { filter: brightness(1.12); box-shadow: 0 5px 16px rgba(29,53,94,.4); }

/* ══════════════════════════════════════════════════════════════
   SÉRIALISATION
   ══════════════════════════════════════════════════════════════ */

.Kardex_Serial_Section { background: #fff; border-radius: var(--kdx-radius); padding: 14px; box-shadow: var(--kdx-shadow-sm); border: 1px solid var(--kdx-ice); }
.Kardex_Action_Header_Mini { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }

.Kardex_Badge_Serial { display: inline-flex; align-items: center; padding: 3px 14px; border-radius: 99px; color: #fff; font-weight: bold; font-size: 14px; background: var(--kdx-btn-navy); box-shadow: 0 2px 8px rgba(29,53,94,.25); }

/* ══════════════════════════════════════════════════════════════
   CARTE D'ACTION — validation
   ══════════════════════════════════════════════════════════════ */

.Kardex_inout_Execute_ActionCard { background: #fff; border-radius: var(--kdx-radius); padding: 18px; box-shadow: var(--kdx-shadow-md); border: 1px solid var(--kdx-ice); border-top: 3px solid var(--kdx-navy); }
.Kardex_Action_FlexRow { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.Kardex_Action_FooterRow { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.Kardex_Qty_Main_Slot { display: flex; align-items: center; }
.Kardex_Instruction_Text { font-size: 13px; color: var(--kdx-muted); font-style: italic; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   BOUTONS D'ACTION — cluster
   ══════════════════════════════════════════════════════════════ */

.Kardex_Main_Buttons_Cluster { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }

.Kardex_Btn { border: none; border-radius: 6px; padding: 10px 22px; font-weight: bold; font-size: 13px; cursor: pointer; transition: filter .18s, transform .1s, box-shadow .18s; white-space: nowrap; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; }
.Kardex_Btn:hover { filter: brightness(1.1); }
.Kardex_Btn:active { transform: scale(.97); box-shadow: none !important; }

.Kardex_Btn_Green { background: var(--kdx-btn-green); color: #fff; box-shadow: 0 3px 10px rgba(94,182,96,.28), inset 0 1px 0 rgba(255,255,255,.15); }
.Kardex_Btn_Green:hover { box-shadow: 0 5px 16px rgba(94,182,96,.42); }

.Kardex_Btn_Blue { background: var(--kdx-btn-navy); color: #fff; box-shadow: 0 3px 10px rgba(29,53,94,.28), inset 0 1px 0 rgba(255,255,255,.12); }
.Kardex_Btn_Blue:hover { box-shadow: 0 5px 16px rgba(29,53,94,.42); }

.Kardex_Btn_Red { background: var(--kdx-btn-red); color: #fff; box-shadow: 0 3px 10px rgba(217,48,37,.25), inset 0 1px 0 rgba(255,255,255,.12); }
.Kardex_Btn_Red:hover { box-shadow: 0 5px 16px rgba(217,48,37,.38); }

/* Petits boutons secondaires */
.Kardex_Btn_Small { border: 1px solid var(--kdx-ice); border-radius: 5px; padding: 5px 12px; font-weight: bold; font-size: 12px; cursor: pointer; background: linear-gradient(to bottom, var(--kdx-ice-xlight), var(--kdx-ice-light)); color: var(--kdx-navy); transition: filter .15s; display: inline-flex; align-items: center; }
.Kardex_Btn_Small:hover { filter: brightness(.95); }
.Kardex_Btn_Small.Kardex_Btn_Red { background: var(--kdx-btn-red); color: #fff; border-color: var(--kdx-red); box-shadow: 0 2px 6px rgba(217,48,37,.2); }


/* ══════════════════════════════════════════════════════════════
   ERREURS D'EXÉCUTION
   ══════════════════════════════════════════════════════════════ */

.Kardex_inout_Execute_ErrorZone { margin-top: 12px; }

.Kardex_Alert_Panel { background: #fef2f2; border-left: 4px solid var(--kdx-red); border-radius: 5px; padding: 10px 14px; margin-top: 6px; box-shadow: 0 2px 6px rgba(217,48,37,.1); }
.Kardex_Alert_Text { color: var(--kdx-red); font-size: 13px; font-weight: bold; }

/* ══════════════════════════════════════════════════════════════
   DIVERS
   ══════════════════════════════════════════════════════════════ */

.Kardex_Lower_Container { display: flex; flex-direction: column; gap: 10px; }
.Kardex_Error_System_Row { margin-top: 6px; }
.Kardex_Vertical_Layout_Bottom { margin-top: 16px; }
.Kardex_Scanner_Title { margin-bottom: 10px; }
.Kardex_Inventaire_Header { margin-bottom: 10px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .Kardex_inout_Execute_Bar { padding: 8px 12px; }
    .Kardex_Bar_Logo { border-right: none; padding-right: 0; }
    .Kardex_Bar_Center { flex: 1 1 100%; order: 2; min-width: 0; }
    .Kardex_Bar_Right { border-left: none; padding-left: 0; flex-wrap: wrap; order: 3; }
    .Kardex_inout_Execute_TopSection { flex-wrap: wrap !important; }
    .Kardex_inout_Execute_ViewerContainer { flex: 1 1 100% !important; }
    .Kardex_inout_Execute_ArticleVertical { flex: 1 1 calc(55% - 5px) !important; max-width: none !important; }
    .Kardex_inout_Execute_PickingInfo { flex: 1 1 calc(45% - 5px) !important; max-width: none !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center; }
    .Kardex_inout_Execute_QtyContainer { border-bottom: none; border-right: 1px solid var(--kdx-ice); padding-right: 10px; margin-right: 6px; }
    .Kardex_Main_Execution_Layout { flex-direction: column !important; }
    .Kardex_Column_Main,
    .Kardex_Column_Side { flex: unset !important; width: 100% !important; }
}

@media (max-width: 600px) {
    
    .Kardex_inout_Execute_ViewerContainer { width: 100% !important; }

    /* On force le conteneur d'info (Quantité / Emplacement) à passer 
       en ligne (horizontal) plutôt qu'en une immense colonne vide */
    .Kardex_inout_Execute_PickingInfo { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; flex-direction: row !important; justify-content: space-around !important; align-items: center !important; padding: 10px !important; }

    /* La ligne de séparation verticale sur mobile */
    .Kardex_inout_Execute_QtyContainer { border-right: 1px solid var(--kdx-ice) !important; border-bottom: none !important; padding-right: 15px !important; margin-right: 10px !important; margin-bottom: 0 !important; width: auto !important; }

    /* Redimensionnement des polices pour le format mobile */
    .Kardex_inout_Execute_Text_Qty { font-size: 2.2rem !important; /* Évite les explosions de taille */ }

    .Kardex_inout_Execute_Text_Op { font-size: 1.2rem !important; }

    .Kardex_inout_Execute_LocContainer span,
    .Kardex_inout_Execute_LocContainer label,
    .Kardex_inout_Execute_Text_Loc { font-size: 16px !important; /* Lisible mais compact */ }

    .Kardex_inout_Execute_Text_Pos { font-size: 14px !important; }

    /* Gestion des listes d'emplacements et commentaires */
    .Kardex_inout_Execute_LocationBox,
    .Kardex_inout_Execute_CommentBox { flex-direction: row !important; align-items: center !important; gap: 8px !important; margin: 4px 8px !important; }

    /* Ne pas forcer les boutons de validation à prendre 100% de hauteur 
       mais les aligner proprement côte à côte */
    .Kardex_Main_Buttons_Cluster { width: 100% !important; display: flex !important; flex-direction: row !important; gap: 10px !important; }

    .Kardex_Btn { flex: 1 !important; width: auto !important; padding: 10px 14px !important; }
}


/*********************************
 *   Forme DIALER.ASCX         *
 *********************************/
.fox_phone { background-image: url(Style/Grid/small/phone.png); font-family: Arial, Helvetica, sans-serif; font-size: initial; font-weight: normal; color: #000000; background-position-x: 1%; background-position-y: center; background-repeat: no-repeat; padding-left: 29px; margin-top: 5px; }
.fox_fax { background-image: url(Style/Grid/small/fax.png); font-family: Arial, Helvetica, sans-serif; font-size: initial; font-weight: normal; color: #000000; background-position-x: 1%; background-position-y: center; background-repeat: no-repeat; padding-left: 29px; margin-top: 5px; }

/*********************************
 *   Forme GROUPE_P.ASPX         *
 *********************************/

/* ==========================================================================
   UX FOX4WORK WMS - Composant Groupe_P (Grilles & Cartes WMS)
   ========================================================================== */

/* Conteneur principal: Grille auto-adaptative (Responsive Pda & Desktop) */
.Groupe_P_grid_container { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; padding: 16px 0; width: 100%; box-sizing: border-box; }

/* Base de la carte/tuile de sélection Fox4work */
.Groupe_P_card { background-color: #ffffff; border: 1px solid #f0f2f5; /* Bordure très discrète, presque invisible */ border-radius: 8px; /* Coins arrondis modernes */ overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* On s'appuie plus sur l'ombre que la bordure */ transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding: 16px; cursor: pointer; min-height: 140px; }

/* États d'interaction: Survol et Focus WMS */
.Groupe_P_card:hover, .Groupe_P_card:focus-within { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); border-color: #e67e22; /* Garde la couleur d'action pour montrer le focus */ z-index: 10; }

/* Contenu interne de la carte si applicable */
.Groupe_P_card img { max-width: 100%; height: auto; object-fit: contain; margin-bottom: 12px; }

/* Carte spéciale: Bouton de Retour */
.Groupe_P_card_return { background-color: #f8f9fa; border: 1px dashed #ced4da; /* Épaisseur réduite de 2px à 1px, couleur adoucie */ box-shadow: none; }

/* Survol de la carte retour */
.Groupe_P_card_return:hover, .Groupe_P_card_return:focus-within { background-color: #e9ecef; border-color: #adb5bd; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Ombre allégée */ }

/*********************************
    Forme BT_ELEMENT.ASPX        *
 *********************************/
.Fox_BT_element_en_ligne { display: inline-block; }

.Fox_BT_element_contour_H { display: block; box-shadow: 1px 1px 8px #555; border: thin solid black; padding: 10px; margin: 2px; vertical-align: top; font-family: Arial; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.Fox_BT_element_contour_H:hover { background-color: #f6fafc; }

.Fox_BT_element_contour_V { display: inline-block; width: 445px; box-shadow: 1px 1px 8px #555; border: thin solid black; padding: 10px; margin: 2px; vertical-align: top; font-family: Arial; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.Fox_BT_element_contour_V:hover { background-color: #f6fafc; }

.Fox_BT_element_bloc_image { display: inline-block; border: thin solid #D8D8D8; margin: 2px; vertical-align: top; font-family: Arial; width: 120px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.Fox_BT_element_bloc_image_Info { font-family: Arial; text-align: center; }

.Fox_BT_element_bloc_info { display: inline-block; border: 0; overflow: hidden; background-color: transparent; padding: 0px; margin: 2px; vertical-align: top; font-family: Arial; font-size: medium; width: 280px; }
.Fox_BT_element_bloc_info_Texte_evidence { font-family: Arial; font-size: medium; font-weight: bold; font-style: normal; font-variant: normal; color: #016DBE; width: 10% }
.Fox_BT_element_bloc_info_Texte { font-family: Arial; white-space: pre-wrap; font-size: medium; width: 140%; }

.Fox_Bt_element_bloc_nom_H { display: inline-block; padding: 0px; margin: 2px; vertical-align: top; font-family: Arial; width: calc(100% - 500px) }
.Fox_Bt_element_bloc_nom_V { padding: 0px; margin: 2px; vertical-align: top; font-family: Arial; }

.Fox_Bt_element_bloc_nom_Texte_evidence { width: calc(100% - 470px); font-family: Arial; font-size: medium; font-weight: bold; font-style: normal; font-variant: normal; color: #016DBE; }
.Fox_Bt_element_bloc_nom_Texte_principale { width: calc(100% - 470px); width: 60px; font-family: Arial; white-space: pre-wrap; font-size: x-large; font-weight: bolder; }
.Fox_Bt_element_bloc_nom_Remarque { width: 100%; }

/*********************************
    Forme DBGRID.ASPX  STYLE LINE*
 *********************************/
.Fox_grille { width: 100%; padding: 7px; border-spacing: 0px; }
.Fox_grille thead th { height: 35px; color: #FFFFFF; font-size: 9px; font-family: Arial; font-weight: 100; text-align: left; text-decoration: none; border: none; border-right: 2px white solid; padding-left: 3px; padding-right: 3px; }
.Fox_grille thead th img { height: 7px; }
.Fox_grille thead th table { height: 21px; }
.Fox_grille thead th table tr:hover { background-color: #f6fafc; }
.Fox_grille tbody td { font-size: 0.8em; font-family: Arial; padding-right: 5px; padding-top: 2px; padding-bottom: 2px; }
.Fox_grille table td { border: 0px; font-size: 0.8em; font-family: Arial; padding-bottom: 10px; }
.Fox_grille > tbody > tr > td { border-bottom: 1px grey solid; }
.Fox_grille tbody tr.odd { background: #f0f0f0; }
.Fox_grille tbody a { color: #000000; font-weight: lighter; text-decoration: none; }
.Fox_grille tbody a:hover { color: #000000; text-decoration: underline; }
.Fox_grille tbody tr:hover { background-color: #f6fafc; }

/***********************************
    Style COlOR DBGRID
************************************/
.Fox_Grille_actif { }
.Fox_Grille_Inactif { background-color: #F0E68C; }
.Fox_Grille_Stock0 { background-color: LightPink; }
.Fox_Grille_Stock_Autre { background-color: #66CDAA; }
.Fox_Grille_Stock_WM { background-color: #B3CBFF; }

.Fox_Grille_Inactif :hover { background-color: #ECDF6F; }
.Fox_Grille_Stock0 :hover { background-color: #FF9DAC; }
.Fox_Grille_Stock_Autre :hover { background-color: #57C8A0; }
.Fox_Grille_Stock_WM :hover { background-color: #9FBEFF; }

/************************
   Forme MENU.ASCX      *
 ************************/

/* ===== MENU SIDEBAR - Blanc avec relief et dégradé extérieur droite ===== */

.Menu_wrapper { display: flex; height: 100%; }

.Menu_sidebar { min-width: 210px; max-width: 210px; min-height: 100vh; background: #ffffff; background: linear-gradient(to right, #ffffff 65%, #eaf4fb 85%, #d0e8f4 100%); /* Relief droit + ombrage vers le bas */ box-shadow: 3px 0 8px rgba(86, 151, 182, 0.18), 1px 0 3px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(86, 151, 182, 0.20); border-right: 1px solid #c2daea; border-radius: 0 6px 6px 0; position: relative; z-index: 10; }

.fox_menu_top_title { padding: 7px 6px; background: linear-gradient(to right, #f8fcff, #deeef7); border-bottom: 1px solid #c2daea; /* Ombrage vers le bas sous la barre du haut */ box-shadow: 0 4px 8px rgba(86, 151, 182, 0.15), 0 2px 4px rgba(0, 0, 0, 0.07); }

.fox_menu_title { padding: 8px 10px; font-family: Arial, sans-serif; font-size: small; font-weight: bold; letter-spacing: 0.4px; background: linear-gradient(to right, #fafdff, #eaf4fb); border-bottom: 1px solid #d0e8f4; /* Ombrage discret vers le bas sous le titre */ box-shadow: 0 3px 6px rgba(86, 151, 182, 0.10); }

.fox_menu { background: transparent; }

.fox_menu_corps { background: transparent; }

.fox_menu_prev,
.fox_menu_next { background: linear-gradient(to bottom, #ffffff, #e8f3f9); border: 1px solid #c2daea; border-radius: 4px; color: #5697B6; font-size: 16px; height: 100%; min-height: 36px; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.09); cursor: pointer; }

.fox_menu_prev:hover,
.fox_menu_next:hover { background: linear-gradient(to bottom, #d8edf8, #c0dced); color: #3a6f8f; }


@media (max-width:992px) {
    .Menu_sidebar { min-width: 100%; min-height: 100vh;}
    .fox_menu_show { width: 100%; }
    .fox_menu_content { display: none; }
    .fox_menu { width: 100%; }
    .fox_menu_corps_item { font-family: Arial, Helvetica, sans-serif; font-size: x-large; }
}

@media (min-width:993px) {
    .fox_menu_show { }
    .fox_menu_content { }
    .fox_menu_corps_item { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; }
}


/***************************************
    Forme Email.ascx
 **************************************/
@media (max-width:992px) {
    .fox_email { position: fixed; top: 15%; left: 5%; right: 5%; height: 100vh; border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; font-size: large; background-color: #fafafa; z-index: 999999999; }
    .fox_email_remarque { width: 96%; min-height: 500px; height: 100%; }
    .fox_email_overlay { }
}

@media (min-width:993px) {
    .fox_email { position: fixed; bottom: 80px; right: 40px; width: 500px; border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; font-size: large; background-color: #fafafa; }
    .fox_email_remarque { width: 96%; min-height: 300px; height: 100%; }
    .fox_email_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.15); padding-top: 25%; padding-left: 30%; z-index: 9999999999; }
}

/***************************************
    Forme Numeropage.ascx
 **************************************/

/* Container principal style Fox4Work */
.fox_Numeropage_pagination { display: flex; align-items: center; gap: 5px; font-family: 'Segoe UI', Tahoma, Arial, sans-serif; padding: 10px 0; }
/* Boutons numériques et flèches */
.fox_Numeropage_btn-page { text-decoration: none; padding: 6px 12px; border: 1px solid #dcdcdc; border-radius: 4px; color: #65AFD2; /* Bleu Fox par défaut pour les numéros */ background: #fff; transition: all 0.2s; font-size: 13px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
/* Effet Hover : Texte blanc sur fond bleu Fox */
.fox_Numeropage_btn-page:hover:not(.disabled) { border-color: #65AFD2; color: #fff !important; background-color: #65AFD2 !important; transform: translateY(-1px); }
/* État de la page actuelle : Bleu Fox plein */
.fox_Numeropage_btn-page.current { background-color: #65AFD2 !important; color: #fff !important; border-color: #65AFD2 !important; font-weight: bold; }
/* Boutons désactivés */
.fox_Numeropage_btn-page.disabled { color: #ccc !important; cursor: not-allowed; box-shadow: none; border-color: #eee; background: #fafafa; }
/* Champ de saisie directe */
.fox_Numeropage_txt-jump { border: 1px solid #dcdcdc; border-radius: 4px; padding: 5px; width: 45px; text-align: center; font-size: 13px; color: #65AFD2; /* Texte bleu Fox */ font-weight: bold; margin: 0 5px; }
/* Focus sur le champ de saisie */
.fox_Numeropage_txt-jump:focus { border-color: #65AFD2; outline: none; box-shadow: 0 0 3px rgba(101, 175, 210, 0.5); }
.fox_Numeropage_info-label { margin-left: 15px; font-size: 12px; color: #666; }
.fox_Numeropage_jump-to { font-size: 13px; color: #444; margin-left; }
 
 /***************************************
    Forme Barre_code.ascx
 **************************************/ .fox_barrecode { position: fixed; top: 25%; left: 25%; right: 25%; width: 50%; border: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: medium; font-family: Arial; font-family: Arial; font-size: 16px; font-weight: normal; z-index: 8999999999; padding: 15px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.75); }
.fox_barrecode_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.15); padding-top: 25%; padding-left: 30%; z-index: 9999999999; }
.fox_barrecode_camera { width: 300px; }

/***************************************
    Forme Barre_code.ascx
 **************************************/
.Fox_bartitre_img_debug { width: 20px; height: 25px }

/***************************************
    Forme Confirmation.ascx
 **************************************/
.fox_confirmation { position: fixed; top: 25%; left: 25%; right: 25%; width: 50%; border: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: medium; font-family: Arial; background-color: #ff5f8b; font-family: Arial; font-size: 16px; font-weight: normal; z-index: 8999999999; padding: 15px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.75); }
.fox_confirmation_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.15); padding-top: 25%; padding-left: 30%; z-index: 9999999999; }

/***************************************
    Forme Eventlog
 **************************************/
.fox_Eventlog { position: fixed; top: 10%; left: 10%; right: 10%; bottom: 10%; border: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: medium; font-family: Arial; background-color: #FFFFFF; font-family: Arial; font-size: 16px; font-weight: normal; z-index: 8999999999; padding: 15px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.75); }
.fox_Eventlog_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.15); padding-top: 25%; padding-left: 30%; z-index: 9999999999; }
.fox_Eventlog_table { width: 100%; overflow-y: auto; height: 70vh }

/************************
   Forme ERROR.ASCX     *
 ************************/
.Fox_error { font-family: Arial, Helvetica, sans-serif; font-style: normal; color: #FFFFFF; overflow-wrap: break-word; }
.Fox_error_ok { background-image: url('../../Style/Notification/Notifications_Succès.png'); width: 450px; height: 150px; }
.Fox_error_attention { background-image: url('../../Style/Notification/Notifications_Attention.png'); width: 450px; height: 150px; }
.Fox_error_interdit { background-image: url('../../Style/Notification/Notifications_Interdiction.png'); width: 450px; height: 150px; }
.Fox_error_infoIcon { display: inline-block; vertical-align: middle; height: 90px; }
.Fox_error_infoIcon_img { width: 50px; }
.Fox_error_infotext { display: inline-block; height: 90px; width: 140px; }
.Fox_error_infotext_title { font-size: x-large; overflow-wrap: break-word; }
.Fox_error_infotext_content { font-size: small; overflow-wrap: break-word; }

/***************************************
    Forme DBGRID.ASPX  COMPOSANT COMMUN*
 ***************************************/
.Fox_grille_composant { border-style: none; border: none; border-spacing: 0; padding: 0px; margin: 0px; }
.Fox_grille_composant td { border-style: none; border: none; border-spacing: 0; padding: 0px; margin: 0px; }
.Fox_grille_fleche { height: 7px; width: 10px; }
.Fox_grille_print { height: 20px; }
.N_grille_BT { height: 20px; width: 20px; }
.N_BT_grille { height: 30px; }

/***************************************
   Forme BT_AddPanier.ascx
***************************************/
.fox-group-container { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 4px; /* Un seul arrondi pour tout le bloc */ overflow: hidden; width: fit-content; height: 32px; }
/* Zone Quantité */
.qty-subgroup { display: flex; background: #fff; border-right: 1px solid #eee; }
.btn-qty-inner { width: 25px; line-height: 30px; text-align: center; background: #f8f9fa; color: #333; text-decoration: none; font-weight: bold; }
.qty-input-inner { border: none !important; text-align: center !important; }
/* Zone Actions */
.action-subgroup { display: flex; background: #fff; }
.btn-action { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; transition: background 0.2s; border-left: 1px solid #eee; }
.btn-in:hover { background-color: #e8f5e9; }
/* Teinte verte au survol */
.btn-out:hover { background-color: #ffebee; }
/* Teinte rouge au survol */
.btn-action img { width: 18px; height: 18px; }

/* --- ADAPTATION MOBILE (Ecran < 600px) --- */
@media (max-width: 600px) {
    .fox-cart-controls { gap: 20px; }

    .fox-input-group-wrapper { height: var(--cart-height-mobile); /* On passe à 48px de haut */ }
    .fox-btn-qty { width: 50px; /* Boutons encore plus larges */ font-size: 24px; }
    .btn-fox-cart { width: 48px; height: 48px; }
}

/***************************************
    Forme Sécuritegeneralecles*
 ***************************************/

/* Fond bleu opaque Fox4Work sur tout l'écran */
.licence-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #1a4a7c; /* Bleu Fox4Work */ display: flex; justify-content: center; align-items: center; z-index: 10000; font-family: 'Segoe UI', Arial, sans-serif; }

/* Carte centrale blanche */
.licence-card { background: #ffffff; width: 90%; max-width: 450px; padding: 30px; border-radius: 10px; box-shadow: 0 15px 35px rgba(0,0,0,0.4); }
.licence-card h3 { margin-top: 0; color: #1a4a7c; font-size: 1.5rem; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; margin-bottom: 25px; text-align: center; }

/* Style des groupes de saisie */
.field-group { margin-bottom: 20px; }
.field-group label { display: block; font-weight: bold; color: #444; margin-bottom: 8px; font-size: 0.85rem; text-transform: uppercase; }
.form-control-custom { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 1rem; }
.form-control-readonly { background-color: #f8f9fa; color: #777; border: 1px dashed #ccc; }
/* Alerte expiration */
.alert-expiry { background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404; padding: 15px; border-radius: 5px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
/* Bouton d'action */
.btn-fox { background-color: #1a4a7c; color: white; border: none; width: 100%; padding: 15px; border-radius: 5px; font-weight: bold; font-size: 1rem; cursor: pointer; transition: background 0.3s; text-transform: uppercase; }
.btn-fox:hover { background-color: #13365b; }


/***************************************
    Forme ARTICLE_DETAIL*
 ***************************************/
.Fox_Article_Detail_Texte { font-family: Arial; white-space: pre-wrap; width: 100%; }
.Fox_Article_Detail_evidence { font-family: Arial; font-size: medium; font-weight: bold; font-style: normal; font-variant: normal; color: #016DBE; }

/************************
    Page Default.ASPX
*************************/
.fox_default_html { background: black; }
.fox_default_Logon_form { width: 450px; position: absolute; right: 150px; top: 20vh; }
.fox_default_Kardex_form { width: 450px; position: absolute; bottom: 90vw; }
.fox_default_oeille { background-image: url(../../style/default/oeuille.png); background-repeat: no-repeat; background-position-x: left; background-position-y: 35%; background-size: auto 55% }

.Fox_default_site { font-family: Arial, Helvetica, sans-serif; font-size: x-large; overflow-wrap: break-word; }
.Fox_default_label { font-family: Arial, Helvetica, sans-serif; font-size: x-large; }
.Fox_default_detail { font-family: Arial, Helvetica, sans-serif; font-size: medium; }
.Fox_default_dropdown { font-family: Arial, Helvetica, sans-serif; font-size: x-large; }
.Fox_default_Logon_Marque { max-width: 435px; width: 90%; text-align: center; }

/*=============================================================================*/
/*Adaptation par MARINA/stagiaire 08/03/2023 */
.Fox_default_dropdown { font-family: Arial, Helvetica, sans-serif; font-size: x-large; }
.Fox_default_text,
.Fox_default_dropdown { width: 180px; height: 35px; background-color: #f6fafc; border-radius: 5px; border: 1px solid #727272; }

.RadComboBox_Web20 .rcbInput, select { background-color: #f6fafc; color: #000; border: 1px solid #d6d6d6; }

select option { background-color: #f6fafc; color: #000; }
/*=============================================================================*/

@media (max-width:992px) {
    .Fox_default_text { border-style: solid; border-width: medium; font-family: Arial, Helvetica, sans-serif; font-size: x-large; }
}

@media (min-width:993px) {
    .Fox_default_text { border-style: solid; border-width: thin; font-family: Arial, Helvetica, sans-serif; font-size: x-large; }
}


/************************
    Page Default_SAP     
 ************************/

/* On définit le conteneur principal pour qu'il ne dépasse JAMAIS 100% du cadre bleu */
.Default_Sap_header_container,
.Default_Sap_main_grid,
.Default_Sap_secondary_grid { width: 100%; max-width: 100%; /* Sécurité absolue */ margin: 0 auto; padding: 5px; box-sizing: border-box; /* Inclut le padding dans la largeur */ overflow-x: hidden; /* Empêche le scroll horizontal parasite */ display: flex; flex-direction: column; /* Empile les éléments par défaut pour mobile */ gap: 10px; }

/* Les cartes doivent s'adapter à la largeur du parent */
.Default_Sap_card { background: #ffffff; border-radius: 6px; border: 1px solid #dee2e6; width: 100% !important; /* Force la largeur du cadre */ max-width: 100%; padding: 10px; box-sizing: border-box; margin-bottom: 5px; }

/* Ajustement des graphiques WebChartViewer */
/* Note : Si le graphique généré par le serveur est trop large, 
       ce CSS va forcer l'image à ne pas sortir du cadre */
.Default_Sap_card img,
.Default_Sap_card canvas { max-width: 100% !important; height: auto !important; }

/* Modernisation du tableau pour qu'il ne "pousse" pas les murs */
.Default_Sap_table { width: 100%; font-size: 11px; /* Texte plus petit pour gagner de la place */ border-collapse: collapse; table-layout: fixed; /* Force le respect des largeurs de colonnes */ word-wrap: break-word; }

.Default_Sap_table th, .Default_Sap_table td { padding: 4px 2px; overflow: hidden; text-overflow: ellipsis; /* Coupe le texte proprement s'il est trop long */ white-space: nowrap; }

/* Boutons en mode "Full Width" sur mobile */
.Default_Sap_btn_group { display: flex; width: 100%; gap: 5px; }

.Default_Sap_btn { flex: 1; /* Les boutons se partagent la largeur équitablement */ padding: 6px; font-size: 11px; }

/************************
    Page Default_MN.ASPX
*************************/
/* ── VARIABLES locales alignées sur les tokens Fox4Work ── */
.fox_dashboard_container { --mn-navy: #1D355E; --mn-navy-mid: #2A5298; --mn-orange: #F58220; --mn-orange-dk: #d96b10; --mn-orange-lt: #f9a54a; --mn-ice: #D6E4F0; --mn-ice-light: #EEF5FB; --mn-bg: #eef2f7; display: flex; flex-direction: column; gap: 24px; padding: 18px; background-color: var(--mn-bg); min-height: 100%; }

/* ── SECTION CATÉGORIE ── */
.fox_category_section { background: #ffffff; border-radius: 8px; box-shadow: 0 2px 10px rgba(29, 53, 94, 0.10); overflow: hidden; transition: box-shadow 0.2s ease; }

.fox_category_section:hover { box-shadow: 0 5px 20px rgba(245, 130, 32, 0.18); }

/* ── HEADER — plus compact ── */
.fox_category_header { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px; background: linear-gradient(to right, #4a7fc1, #2A5298); border-bottom: 2px solid var(--mn-orange); }

.fox_category_title { margin: 0; font-size: 11px; font-weight: 700; color: #ffffff; letter-spacing: 0.8px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); }

/* ── GRILLE DE BOUTONS — espacement réduit ── */
.fox_grid_system { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; background-color: #fafbfd; }

/* ── WRAPPER CARTE ── */
.fox_card_wrapper { position: relative; flex: 0 0 auto; }

/* ── BOUTON CUSTOM — plus compact ── */
.fox_custom_btn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 90px; min-height: 90px; padding: 8px 6px 6px 6px; background: #ffffff; border: 1px solid var(--mn-ice); border-top: 2px solid transparent; border-radius: 8px; text-decoration: none; color: var(--mn-navy); box-shadow: 0 2px 6px rgba(29, 53, 94, 0.08); transition: all 0.18s ease; cursor: pointer; gap: 6px; }

.fox_custom_btn:hover { background: #fff8f2; border-color: var(--mn-orange); border-top-color: var(--mn-orange); box-shadow: 0 4px 14px rgba(245, 130, 32, 0.22); transform: translateY(-3px); text-decoration: none; color: var(--mn-navy); }

.fox_custom_btn:active { transform: translateY(0px); box-shadow: 0 1px 4px rgba(245, 130, 32, 0.15); }

/* ── IMAGE ── */
.fox_btn_img { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--mn-ice-light); border-radius: 8px; padding: 5px; transition: background 0.18s ease, transform 0.18s ease; }

.fox_custom_btn:hover .fox_btn_img { background: #fde8cc; transform: scale(1.06); }

.fox_btn_img img { width: 38px; height: 38px; object-fit: contain; }

/* ── LIBELLÉ ── */
.fox_btn_label { font-size: 9px; font-weight: 700; text-align: center; color: #3a5a85; line-height: 1.3; word-break: break-word; letter-spacing: 0.2px; }

/* ── COMPTEUR badge orange Fox4Work ── */
.fox_btn_count { display: inline-block; color: var(--mn-orange); font-weight: 800; font-size: 9px; }

/* ── SUPPRESSION mode édition — titre ── */
.fox_edit_del_title { width: 18px; height: 18px; opacity: 0.72; cursor: pointer; transition: opacity 0.15s; flex-shrink: 0; }

.fox_edit_del_title:hover { opacity: 1; }

/* ── SUPPRESSION mode édition — item ── */
.fox_edit_del_item { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; z-index: 10; opacity: 0.82; cursor: pointer; background: #fff; border-radius: 50%; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22); transition: opacity 0.15s, transform 0.15s; }

.fox_edit_del_item:hover { opacity: 1; transform: scale(1.18); }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
    /* 1. On donne enfin une vraie taille aux icônes */
    .fox_btn_img { width: 55px !important; /* Presque le double de ce que vous avez */ height: 55px !important; margin-bottom: 8px !important; }

    .fox_btn_img img { width: 100% !important; /* L'image remplit tout le conteneur de 55px */ height: 100% !important; object-fit: contain; }

    /* 2. On rend le texte lisible et bien placé */
    .fox_custom_btn span,
    .fox_custom_btn div { font-size: 14px !important; /* Plus grand pour le S20 */ font-weight: bold !important; line-height: 1.1 !important; white-space: normal !important; /* Autorise le retour à la ligne */ text-align: center !important; display: block !important; }

    /* 3. On ajuste le bouton pour qu'il soit un carré parfait et aéré */
    .fox_custom_btn { width: 100% !important; /* Il va prendre la place dans sa colonne */ max-width: 110px !important; min-height: 110px !important; padding: 12px 5px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }

    /* 4. On force 3 colonnes pour que les boutons aient de la place pour grandir */
    .fox_grid_system { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
}


/***************************************
    Page ACHAT_V.ASPX *
 ***************************************/
.Fox_Achat_V_Header { position: fixed; top: 1px; left: 1px; border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #fafafa; height: 25px; }
.Fox_Achat_v_photo { position: fixed; top: 30px; right: 5px; width: 24%; max-height: 200px; }
.Fox_Achat_v_reception { position: fixed; bottom: 40px; Left: 0px; height: auto; Width: 100%; background-color: #CCCCCC; }
.Fox_Achat_v_Texte { font-family: Arial; white-space: pre-wrap; width: 100%; }
.Fox_Achat_v_Texte_evidence { font-family: Arial; font-size: medium; font-weight: bold; font-style: normal; font-variant: normal; color: #016DBE; }
.Fox_Achat_v_Texte_reception { font-family: Arial; white-space: pre-wrap; width: 100%; }
.Fox_Achat_v_div_select_mode { border-style: outset; border-width: 3px; display: inline-block; background-color: #C0C0C0; width: 85px; }
.Fox_Achat_v_div_select_mode_img { text-align: center; width: 85px; }
.Fox_Achat_v_div_filtre { border: medium solid #BFDCEA; padding: 10px; margin: 10px; vertical-align: top; font-family: Arial; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.Fox_Achat_v_div_filtre_recherche { display: inline-block; padding: 0px; margin: 10px; vertical-align: top; font-family: Arial; width: 500px; }
.Fox_Kardex_i_bottom { position: fixed; bottom: 40px; Left: 0px; height: 50px; Width: 100%; background-color: #CCCCCC; }

@media (orientation: landscape) {
    .Fox_Achat_v_validation { display: inline-block; padding: 0px; margin: 2px; }
    .Fox_Achat_v_scan { position: fixed; bottom: 130px; right: 20px; min-width: 330px; border: 0px; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; border-top-left-radius: 2px; border-top-right-radius: 2px; font-size: medium; font-family: Arial; background-color: #99CCFF; font-family: Arial; font-size: 16px; font-weight: normal; z-index: 1999999999; padding: 10px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.75); }
    .Fox_Achat_v_dbgrid1 { position: fixed; bottom: 150px; left: 0px; width: 33%; height: 350px; }
    .Fox_Achat_v_dbgrid2 { position: fixed; bottom: 150px; left: 33%; width: 33%; height: 350px; }
    .Fox_Achat_v_line { display: inline-block; }
}

@media (orientation: portrait) {
    .Fox_Achat_v_scan { position: fixed; bottom: 170px; width: 100%; }
    .Fox_Achat_v_line { height: 10px; }
}

/***************************************
    Page ACHAT_S.ASPX / VENTE_S.ASPX
 ***************************************/

/* ============================================================
   FOX4WORK WMS — Achat_S.css
   Uniquement Fox_vente_s_ et Fox_Achat_S_
   Tokens Kardex
   ============================================================ */

:root { --kdx-navy: #1D355E; --kdx-navy-mid: #2A5298; --kdx-navy-light: #3b6faf; --kdx-orange: #F58220; --kdx-orange-dk: #d96b10; --kdx-orange-lt: #f9a54a; --kdx-ice: #D6E4F0; --kdx-ice-light: #EEF5FB; --kdx-ice-xlight: #f8fbfe; --kdx-muted: #5a7a99; --kdx-green: #5EB660; --kdx-red: #d93025; --kdx-shadow-sm: 0 2px 8px rgba(29,53,94,.12); --kdx-shadow-md: 0 4px 16px rgba(29,53,94,.18); --kdx-radius: 7px; --kdx-btn-navy: linear-gradient(140deg, #3b6faf 0%, #2A5298 40%, #1D355E 100%); --kdx-btn-orange: linear-gradient(140deg, #f9a54a 0%, #F58220 50%, #d96b10 100%); --kdx-btn-green: linear-gradient(140deg, #7dd87e 0%, #5EB660 50%, #3d9940 100%); --kdx-btn-red: linear-gradient(140deg, #f07070 0%, #d93025 60%, #b02010 100%); }

/* ══════════════════════════════════════════════════════════════
   TITRE + PAGINATION
   ══════════════════════════════════════════════════════════════ */

.Fox_vente_s_title_bar { display: flex; flex-direction: column; width: 100%; margin-bottom: 12px; }

.Fox_vente_s_title_bar_pagination { display: flex; justify-content: flex-end; align-items: center; padding-top: 4px; }

/* ══════════════════════════════════════════════════════════════
   FILTRE — CONTAINER PRINCIPAL
   ══════════════════════════════════════════════════════════════ */

.Fox_vente_s_div_filtre_container { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(to bottom, var(--kdx-ice-light), var(--kdx-ice-xlight)); border: 1px solid var(--kdx-ice); border-top: 3px solid var(--kdx-navy); border-radius: var(--kdx-radius); padding: 14px; margin-bottom: 18px; box-shadow: var(--kdx-shadow-sm); box-sizing: border-box; }

.Fox_vente_s_div_filtre_sidebar_left { flex: 0 0 120px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; padding-right: 12px; border-right: 1px solid var(--kdx-ice); }

.Fox_vente_s_div_filtre_main_content { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.Fox_vente_s_div_filtre_sidebar_right { flex: 0 0 80px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--kdx-ice); }

/* ── Carte individuelle ─────────────────────────────────────── */
.Fox_vente_s_div_filtre_card { background: #fff; border: 1px solid var(--kdx-ice); border-radius: var(--kdx-radius); padding: 10px 14px; box-shadow: var(--kdx-shadow-sm); box-sizing: border-box; transition: box-shadow 0.18s, border-color 0.18s; }
.Fox_vente_s_div_filtre_card:focus-within { border-color: var(--kdx-navy-mid); box-shadow: 0 0 0 3px rgba(42,82,152,0.10); }

/* ── Label titre ────────────────────────────────────────────── */
.Fox_vente_s_label_title { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kdx-muted); margin-bottom: 6px; }
.Fox_vente_s_div_filtre_card:focus-within .Fox_vente_s_label_title { color: var(--kdx-navy-mid); }

/* ── Groupe input + barcode ─────────────────────────────────── */
.Fox_vente_s_div_filtre_input_group { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--kdx-ice-xlight); border: 1.5px solid var(--kdx-ice); border-radius: 5px; padding: 6px 10px; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }
.Fox_vente_s_div_filtre_input_group:focus-within { border-color: var(--kdx-navy-mid); background: #fff; box-shadow: 0 0 0 3px rgba(42,82,152,0.10); }
.Fox_vente_s_div_filtre_input_group input { flex: 1; min-width: 0; border: none !important; background: transparent !important; outline: none !important; font-size: 13px; color: var(--kdx-navy); }

/* ── Pied de carte ──────────────────────────────────────────── */
.Fox_vente_s_div_filtre_action_footer { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--kdx-ice); flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════
   MÉMO ARTICLE
   ══════════════════════════════════════════════════════════════ */

.Fox_vente_s_memo_container { display: flex; align-items: flex-start; gap: 14px; background: #fffdf5; border: 1px solid #f0d060; border-left: 4px solid var(--kdx-orange); border-radius: var(--kdx-radius); padding: 10px 14px; margin: 8px 0; box-shadow: 0 2px 8px rgba(245,130,32,.07); box-sizing: border-box; }

.Fox_vente_s_memo_label { flex: 0 0 110px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kdx-orange-dk); padding-top: 4px; }

.Fox_vente_s_memo_field { flex: 1; min-width: 0; }

.Fox_vente_s_memo_input { width: 100% !important; border: 1.5px solid #f0d060 !important; border-radius: 5px !important; background: #fffff8 !important; font-size: 13px !important; color: var(--kdx-navy) !important; padding: 6px 10px !important; resize: vertical; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
.Fox_vente_s_memo_input:focus { border-color: var(--kdx-orange) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(245,130,32,.12) !important; }

/* ══════════════════════════════════════════════════════════════
   DEMANDE / QUANTITÉ / VALIDATION
   ══════════════════════════════════════════════════════════════ */

.Fox_vente_s_demande_main_container { background: linear-gradient(to bottom, var(--kdx-ice-light), var(--kdx-ice-xlight)); border: 1px solid var(--kdx-ice); border-top: 3px solid var(--kdx-navy); border-radius: var(--kdx-radius); padding: 16px; margin-top: 14px; box-shadow: var(--kdx-shadow-sm); box-sizing: border-box; }

.Fox_vente_s_demande_row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }

.Fox_vente_s_demande_label { flex: 0 0 130px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--kdx-muted); padding-top: 10px; }

.Fox_vente_s_demande_controls_group { flex: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }

.Fox_vente_s_demande_input_wrapper { flex: 0 0 auto; }

.Fox_vente_s_demande_radio_group { background: #fff; border: 1px solid var(--kdx-ice); border-radius: var(--kdx-radius); padding: 5px 14px; box-shadow: var(--kdx-shadow-sm); }

.Fox_vente_s_demande_radio_list { display: flex !important; gap: 16px; }
.Fox_vente_s_demande_radio_list label { font-size: 13px; font-weight: 600; color: var(--kdx-navy); cursor: pointer; }

.Fox_vente_s_demande_remarque_wrapper { flex: 1; min-width: 160px; }

.Fox_vente_s_demande_text_box { width: 100%; border: 1.5px solid var(--kdx-ice) !important; border-radius: 5px; padding: 6px 10px; font-size: 13px; background: var(--kdx-ice-xlight); color: var(--kdx-navy); box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
.Fox_vente_s_demande_text_box:focus { border-color: var(--kdx-navy-mid) !important; background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(42,82,152,0.10); }

.Fox_vente_s_demande_print_wrapper { flex: 0 0 auto; }

.Fox_vente_s_demande_action_row { display: flex; align-items: flex-start; gap: 16px; border-top: 1px solid var(--kdx-ice); padding-top: 14px; flex-wrap: wrap; }

.Fox_vente_s_demande_label_spacer { flex: 0 0 130px; }

.Fox_vente_s_demande_action_content { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.Fox_vente_s_demande_alert_box { background: #fef2f2; border: 1px solid #fecaca; border-left: 5px solid var(--kdx-red); border-radius: var(--kdx-radius); padding: 10px 14px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 2px 6px rgba(217,48,37,.09); }

.Fox_vente_s_demande_error_title { font-size: 13px; font-weight: 800; color: var(--kdx-red); }

.Fox_vente_s_demande_error_detail { font-size: 11px; color: var(--kdx-muted); font-style: italic; }

.Fox_vente_s_demande_buttons_container { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.Fox_vente_s_demande_btn { border: none; border-radius: 6px; padding: 9px 20px; font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: 0.02em; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; transition: filter 0.15s, transform 0.1s, box-shadow 0.15s; }
.Fox_vente_s_demande_btn:active { transform: scale(0.97); box-shadow: none !important; }
.Fox_vente_s_demande_btn.fox_color_green { background: var(--kdx-btn-green); color: #fff; box-shadow: 0 3px 10px rgba(94,182,96,.28), inset 0 1px 0 rgba(255,255,255,.15); }
.Fox_vente_s_demande_btn.fox_color_green:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(94,182,96,.40); }
.Fox_vente_s_demande_btn.fox_color_red { background: var(--kdx-btn-red); color: #fff; box-shadow: 0 3px 10px rgba(217,48,37,.25), inset 0 1px 0 rgba(255,255,255,.12); }
.Fox_vente_s_demande_btn.fox_color_red:hover { filter: brightness(1.08); box-shadow: 0 5px 14px rgba(217,48,37,.36); }

/* ══════════════════════════════════════════════════════════════
   PRODUIT / ARTICLE
   ══════════════════════════════════════════════════════════════ */

.Fox_vente_s_product_entre { display: flex; gap: 14px; align-items: flex-start; background: linear-gradient(to bottom, var(--kdx-ice-light), var(--kdx-ice-xlight)); border: 1px solid var(--kdx-ice); border-top: 3px solid var(--kdx-navy); border-radius: var(--kdx-radius); padding: 14px; margin: 10px 0; box-shadow: var(--kdx-shadow-sm); box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .Fox_vente_s_div_filtre_container { flex-wrap: wrap; }
    .Fox_vente_s_div_filtre_sidebar_left { flex-direction: row; flex: unset; width: 100%; border-right: none; border-bottom: 1px solid var(--kdx-ice); padding-right: 0; padding-bottom: 10px; justify-content: center; }
    .Fox_vente_s_div_filtre_sidebar_right { flex-direction: row; flex: unset; width: 100%; border-left: none; border-top: 1px solid var(--kdx-ice); padding-left: 0; padding-top: 10px; justify-content: center; }
    .Fox_Achat_S_product_entre { flex-direction: column; }
}

@media (max-width: 600px) {
    .Fox_vente_s_demande_row,
    .Fox_vente_s_demande_action_row { flex-direction: column; align-items: flex-start; }
    .Fox_vente_s_demande_label,
    .Fox_vente_s_demande_label_spacer { flex: unset; }
    .Fox_vente_s_demande_buttons_container { flex-direction: column; width: 100%; }
    .Fox_vente_s_demande_btn { width: 100%; }
    .Fox_vente_s_memo_container { flex-direction: column; gap: 6px; }
    .Fox_vente_s_memo_label { flex: unset; }
}





/***************************************
    Page 
        Mobile_crossdock
        Mobile_etagere_attacher
        Mobile_input_Wml
        Mobile_inventaire_bin
        Mobile_inventaire_wm
        Mobile_Libere_bac
        Mobile_Libere_bac_l
        Mobile_transfert
        Mobile_transfert_bac
        Mobile_vente_D 
        Mobile_vente_L         
*****************************************/
@media (max-width:992px) {
    .fox_champs_scanner { height: 30px; font-size: larger; border: 1px solid black; }
    .fox_champs_scanner:focus { height: 30px; font-size: larger; border: 2px solid black; }
    .fox_champs_texte { height: 25px; font-size: large; border: 1px solid black; }
}

@media (min-width:993px) {
    .fox_champs_scanner { height: 30px; font-size: larger; border: 1px solid black; }
    .fox_champs_scanner:focus { height: 30px; font-size: larger; border: 2px solid black; }
    .fox_champs_texte { height: 25px; font-size: large; border: 1px solid black; }
}

/***************************************
    Composant Kardex_error.ascx
 ***************************************/

.fox_kardex_error { position: fixed; top: 25%; height: 250px; left: 25%; right: 25%; width: 50%; border: 0px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-size: medium; font-family: Arial; background-color: #FFAEC5; font-family: Arial; font-size: 16px; font-weight: normal; z-index: 1999999999; padding: 15px; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.75); }
.fox_kardex_error_overlay { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.15); padding-top: 25%; padding-left: 30%; z-index: 999999999; }

/**************************************
    TOOLS_MAJ.ASPX
 **************************************/
.Fox_job_maj_param_name { font-size: 10px; color: #888; width: 265px; /* Aligner les valeurs */ flex-shrink: 0; cursor: pointer; user-select: none; padding-right: 10px; text-align: right; font-weight: bold; }
.Fox_job_maj_param_value { font-size: 10px; color: #007bff; /* Bleu pour indiquer l'action */ word-break: break-all; /* Gestion des longs chemins */ transition: background-color 0.2s; }
.Fox_job_maj_param-line { display: flex; margin-bottom: 3px; font-family: 'Consolas', 'Courier New', monospace; font-size: 10px; }
.Fox_job_maj_param-group { margin-bottom: 5px; padding: 10px; background-color: #fff; border-radius: 5px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.Fox_job_maj_script-container { min-width: 100%; background: #f8fafc; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0; max-width: fit-content; font-family: 'Segoe UI', sans-serif; }

.Fox_job_maj_scheduler-container { background: #f8fafc; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0; max-width: fit-content; font-family: 'Segoe UI', sans-serif; }
.Fox_job_maj_group-section { display: flex; align-items: flex-start; margin-bottom: 4px; }
.Fox_job_maj_sub-title { flex: 0 0 65px; font-size: 10px; text-transform: uppercase; color: #64748b; font-weight: 800; padding-top: 5px; }
.Fox_job_maj_hours-grid { display: flex; flex-direction: column; gap: 1px }

/* Style des boutons (Chips) */
.Fox_job_maj_custom-cb-list { display: flex; flex-wrap: wrap; gap: 2px; /* Espace entre les boutons individuels */ }
.Fox_job_maj_custom-cb-list input[type="checkbox"] { display: none; }
.Fox_job_maj_custom-cb-list label { display: block; padding: 2px 6px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 4px; color: #334155; font-size: 11px; cursor: pointer; text-align: center; min-width: 38px; /* Largeur fixe pour un aspect grille propre */ transition: all 0.1s; }
.Fox_job_maj_custom-cb-list input[type="checkbox"]:checked + label { background: #3b82f6; border-color: #2563eb; color: #ffffff; }
.Fox_job_maj_separator { border: 0; border-top: 1px solid #e2e8f0; margin: 6px 0; }

/* On neutralise le <br /> pour qu'il ne crée pas d'espace vide */
.Fox_job_maj_hours-grid br { display: none; }

/* Conteneur principal FILE_Settings */
#Fox_job_maj_file_settings { font-family: 'Segoe UI', Tahoma, sans-serif; padding: 8px 12px; background: #f4f4f4; border-radius: 6px; border: 1px solid #ccc; display: flex; gap: 15px; align-items: center; width: fit-content; }

.fox-group { display: flex; align-items: center; gap: 8px; }
.fox-label { font-weight: bold; font-size: 12px; color: #444; }

/* Style de base des sélecteurs */
.fox-select { background: #103555; color: white; border: 1px solid #0d2a44; border-radius: 4px; padding: 3px 8px; height: 28px; cursor: pointer; font-size: 12px; outline: none; }
.fox-select:has(option[value="OUI"]:checked) { background: #d32f2f; border-color: #b71c1c; }

/* Style des options internes */
.fox-select option { background: white; color: black; }

/* Option spécifique "OUI" dans la liste déroulante */
.fox-select option[value="OUI"] { color: #d32f2f; font-weight: bold; }

/* Style file  */
.f4w-main-form { width: 100%; font-family: 'Segoe UI', sans-serif; }

/* Lignes de saisie */
.f4w-line { display: flex; align-items: center; padding: 4px 10px; margin-bottom: 3px; border-radius: 4px; border: 1px solid #eee; }
.folder { background: #f8fafc; border-left: 4px solid #94a3b8; }
.in { background: #f0f9ff; border-left: 4px solid #3b82f6; }
.out { background: #fffaf0; border-left: 4px solid #C47C3C; }
.f4w-lbl { flex: 0 0 130px; font-size: 11px; font-weight: bold; color: #444; }
.f4w-input { flex: 1; height: 22px; border: 1px solid #cbd5e1; font-size: 11px; padding: 0 5px; border-radius: 3px; }
.f4w-emoji { margin-right: 10px; }

/* Grille de paramètres (Lexique) */
.f4w-grid-container { margin-top: 10px; background: #fafafa; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; }
.f4w-grid-title { font-size: 10px; font-weight: 800; color: #94a3b8; margin-bottom: 6px; text-align: center; }

/* On force ton HTML injecté à devenir une grille */
.f4w-params-grid { display: grid; grid-template-columns: 1fr 1fr; /* 2 ÉLÉMENTS MAX PAR LARGEUR */ gap: 4px; }

/* On neutralise les wrappers de ton code injecté pour que la grille fonctionne */
.Fox_job_maj_param-group { display: contents; }
.Fox_job_maj_param-group:first-child { display: none; }
/* Cache le titre brut */

/* Stylisation compacte de chaque "cellule" de paramètre */
.Fox_job_maj_group-title { display: flex; align-items: center; background: #f8fafc; padding: 4px 12px; /* Réduit de 8px à 4px (haut/bas) */ margin-top: 8px; /* Réduit de 15px à 8px */ border-left: 4px solid #3b82f6; border-bottom: 1px solid #e2e8f0; /* Typographie */ font-size: 11px; font-weight: 700; line-height: 1.2; /* Force une hauteur de ligne serrée */ text-transform: uppercase; letter-spacing: 0.5px; color: #475569; user-select: none; }
.Fox_job_maj_group-title::before { content: "•"; margin-right: 8px; color: #3b82f6; }

.Fox_job_maj_param-line-line { display: flex; align-items: center; background: white; /* On remplace la bordure complète par une ligne fine en dessous */ border-bottom: 1px solid #f1f5f9; padding: 2px 4px; /* Padding très réduit */ border-radius: 0; /* On retire l'arrondi pour coller les lignes */ cursor: pointer; font-size: 10px; transition: 0.2s; overflow: hidden; }
.Fox_job_maj_param-line-line:last-child { border-bottom: none; /* Retire la ligne pour le dernier élément */ }
.Fox_job_maj_param-line-line:hover { background: #fffaf0; /* Optionnel : une bordure gauche colorée pour le hover au lieu de tout le contour */ border-left: 2px solid #C47C3C; }

.Fox_job_maj_param_name { color: #C47C3C; font-weight: bold; margin-right: 5px; font-family: monospace; white-space: nowrap; }
.Fox_job_maj_param_value { color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Coupe proprement si la valeur est trop longue */ }

/* Container de zone */
.Fox_job_maj_service_group { margin-bottom: 10px; }

/* Libellé au-dessus des boutons (optionnel) */
.Fox_job_maj_service_label { display: block; font-family: sans-serif; font-size: 11px; color: #666; margin-bottom: 3px; text-transform: uppercase; font-weight: bold; }

/* Espacement entre les deux zones */
.Fox_job_maj_service_container { margin-bottom: 8px; /* Espace réduit au minimum */ }

/* On cache les boutons radio/check natifs */
.Fox_job_maj_service_control input { display: none; }

/* On retire les bordures par défaut du tableau ASP.NET */
.Fox_job_maj_service_control { border-collapse: collapse; }

/* Style des boutons (Labels) */
.Fox_job_maj_service_control label { display: inline-block; padding: 1px 12px; /* Hauteur ultra-fine */ min-width: 85px; /* Largeur fixe pour équilibre parfait */ font-size: 11px; /* Style WMS lisible mais petit */ text-align: center; border: 1px solid #ccc; background-color: #fdfdfd; color: #444; cursor: pointer; margin-right: -1px; /* Fusionne les bordures des boutons adjacents */ transition: all 0.1s; font-family: 'Segoe UI', Arial, sans-serif; }

/* Bordures arrondies légères (extrémités seulement) */
.Fox_job_maj_service_control td:first-child label { border-radius: 3px 0 0 3px; }
.Fox_job_maj_service_control td:last-child label { border-radius: 0 3px 3px 0; }

/* --- ÉTAT SÉLECTIONNÉ : LE BLEU UNIQUE --- */
.Fox_job_maj_service_control input:checked + label { background-color: #0056b3; color: #ffffff !important; border-color: #004494; z-index: 10; position: relative; /* Pour que la bordure active passe au-dessus */ }

/* Effet au survol */
.Fox_job_maj_service_control label:hover { background-color: #f1f1f1; }

/* Style Email */
.Fox_job_maj_email_row { display: flex; width: 100%; margin-bottom: 12px; }
.Fox_job_maj_email_label { flex: 0 0 140px; /* Réglages demandés : moins gras, moins grand */ font-weight: 500; /* Entre normal (400) et gras (700) */ font-size: 11px; /* Taille réduite */ color: #666; /* Couleur gris foncé pour adoucir le contraste */ padding-top: 8px; text-transform: none; /* Assure que ce n'est pas en majuscules */ }
.Fox_job_maj_email_field { flex: 1; display: flex; flex-direction: column; }
.Fox_job_maj_email_input { width: 100%; padding: 6px 10px; /* Un peu moins de padding vertical */ font-size: 12px; border: 1px solid #dcdcdc; border-radius: 3px; box-sizing: border-box; }
.Fox_job_maj_email_error { display: block; color: #e74c3c; font-size: 10px; /* Message d'erreur plus petit */ margin-top: 3px; }

/**************************************
    USER_MAJ.ASPX
***************************************/
.Fox_user_maj_Password_Base { display: inline-block; font: 12px/18px "segoe ui",arial,sans-serif; height: 20px; overflow: hidden; text-align: center; vertical-align: middle; width: 121px; color: #fff; border: 1px solid #333; }
.Fox_user_maj_Password_L0 { border: 0 none; }
.Fox_user_maj_Password_L1 { background-color: #ff3933; }
.Fox_user_maj_Password_L2 { background-color: #ff6633; }
.Fox_user_maj_Password_L3 { background-color: #ff3399; }
.Fox_user_maj_Password_L4 { background-color: #cccc33; }
.Fox_user_maj_Password_L5 { background-color: #33cc00; }


/**************************************
    Action.ascx
***************************************/

/* Le conteneur principal */
.fox_wms-outer { display: flex; justify-content: center; padding: 20px; }

.fox_wms-content { max-width: 80vw; /* Limite la largeur à 80% de l'écran */ background: #f8f9fa; /* Fond clair */ border-radius: 20px; /* Coins très arrondis */ padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border: 1px solid #e0e0e0; display: flex; flex-direction: column; gap: 20px; }

.fox_title { font-family: sans-serif; font-size: 1.2rem; color: #444; margin: 0; text-align: center; border-bottom: 1px solid #ddd; padding-bottom: 10px; }

/* Grille dynamique pour les boutons du haut */
.fox_actions-group { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; /* Centre les boutons si peu nombreux */ }

/* Style des boutons WMS */
.fox_btn-wms { flex: 1 1 150px; /* S'étire mais garde une base de 150px */ max-width: 200px; padding: 15px 10px; border-radius: 12px; border: 1px solid #dcdde1; background-color: white; font-weight: bold; color: #2f3640; cursor: pointer; transition: 0.3s; }

.fox_btn-wms:hover { background-color: #e67e22; /* Orange Fox */ color: white; border-color: #e67e22; transform: translateY(-3px); }

/* Footer pour le bouton Quitter en dessous */
.fox_footer { display: flex; justify-content: center; border-top: 1px solid #ddd; padding-top: 15px; }

.fox_btn-exit { width: 100%; max-width: 300px; padding: 12px; border-radius: 10px; border: none; background-color: #c0392b; color: white; font-weight: bold; text-transform: uppercase; cursor: pointer; transition: background 0.3s; }

.fox_btn-exit:hover { background-color: #e74c3c; }

/**************************************
    Imprimante.ascx
***************************************/
/* --- Structure globale --- */
.fox_printer-container { padding: 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; display: flex; justify-content: center; }
.fox_printer-inner { width: 100%; max-width: 350px; background: #f8f9fa; border: 1px solid #eee; border-radius: 15px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; flex-direction: column; gap: 15px; }

/* --- Formulaire --- */
.fox_label { font-size: 13px; font-weight: 600; color: #666; margin-bottom: 5px; display: block; }
.fox_select-mobile { appearance: none; -webkit-appearance: none; width: 100%; padding: 12px; font-size: 15px; background: white; border: 1px solid #e0e0e0; border-radius: 10px; color: #333; outline: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ff8c00' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }

/* --- Groupe de boutons --- */
.fox_actions-group { display: flex; justify-content: space-between; margin-top: 15px; gap: 10px; }
.fox_btn-save, .fox_btn-exit { flex: 1; border: none; padding: 12px; border-radius: 20px; text-align: center; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.fox_btn-save { background: linear-gradient(135deg, #ff8c00 0%, #ff5e00 100%); color: white !important; box-shadow: 0 4px 10px rgba(255, 94, 0, 0.2); }
.fox_btn-exit { background: #e0e0e0; color: #666 !important; }

/* --- Hover & Mobile --- */
.fox_btn-save:hover { filter: brightness(1.1); transform: translateY(-1px); }
.fox_btn-exit:hover { background: #d5d5d5; }

@media (max-width: 480px) {
    .fox_actions-group { flex-direction: column; }
    .fox_printer-inner { max-width: 90vw; }
}

/**************************************
    BT_Imprimer.ascx.ascx
***************************************/

.BT_Imprimer_container { display: inline-flex; align-items: center; gap: 5px; }
.BT_Imprimer_btn_print { border: none; background: transparent; cursor: pointer; padding: 0; }
.BT_Imprimer_chk_select input { cursor: pointer; }

/**************************************
    Foxit.ascx
***************************************/
.fox_foxit_chat { position: fixed; right: 20px; top: 130px; transform: translateY(-50%); z-index: 9999; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
/* État normal (par défaut) */
.fox_foxit_chat-overlay .fox_foxit-chat-window { width: 400px; height: 500px; max-width: 90vw; max-height: 80vh; position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 9999; display: flex; flex-direction: column; background: #ffffff; border-radius: 15px; border: 1px solid #eee; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: visible; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
/* État agrandi */
.fox_foxit_chat-overlay.maximized .fox_foxit-chat-window { width: 90vw !important; height: 85vh !important; max-width: none !important; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Centre la fenêtre agrandie */ }
/* Ajustement auto du corps du chat */
.fox_foxit_chat-overlay.maximized #foxChatContainer { height: calc(85vh - 150px) !important; }
/* 3. HEADER (DÉGRADÉ ORANGE) */
.fox_foxit-header { background: linear-gradient(135deg, #ff8c00 0%, #ff5e00 100%); color: white; padding: 15px; padding-left: 45px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.fox_foxit-header-title { display: flex; align-items: center; gap: 8px; }
.fox_foxit-close-btn { color: white; text-decoration: none; font-size: 18px; opacity: 0.8; cursor: pointer; }
.fox_foxit-close-btn:hover { opacity: 1; }
/* 4. ZONE DE MESSAGES */
.fox_foxit-chat-body { height: 350px; padding: 15px; background: #f8f9fa; overflow-y: auto; display: flex; flex-direction: column; scroll-behavior: smooth; }
/* 5. BULLES DE CHAT */
.fox_foxit-msg-user, .fox_foxit-msg-ai { margin-bottom: 12px; padding: 10px 14px; font-size: 14px; max-width: 85%; line-height: 1.4; position: relative; }
.fox_foxit-msg-user { align-self: flex-end; background: #ff8c00; color: white; border-radius: 15px 15px 2px 15px; box-shadow: 0 2px 5px rgba(255,140,0,0.2); }
.fox_foxit-msg-ai { align-self: flex-start; background: white; color: #333; border: 1px solid #e0e0e0; border-radius: 15px 15px 15px 2px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.fox_foxit-msg-time { font-size: 10px; display: block; margin-top: 5px; opacity: 0.6; text-align: right; }
/* 6. FOOTER (ALIGNE TEXTE + BOUTON) */
.fox_foxit-chat-footer { display: flex; align-items: center; /* Aligne verticalement au centre */ padding: 12px 15px; background: white; border-top: 1px solid #eee; gap: 10px; }
.fox_foxit-textarea { flex: 1; /* Prend tout l'espace disponible */ border: 1px solid #ced4da; border-radius: 20px; padding: 10px 15px; font-size: 13px; resize: none; outline: none; transition: border-color 0.2s; box-sizing: border-box; }
.fox_foxit-textarea:focus { border-color: #ff8c00; }
/* 7. BOUTON D'ENVOI (IMAGE) */
.fox_foxit-send-img { height: 40px !important; width: 40px !important; border: none; background: none; cursor: pointer; object-fit: contain; transition: all 0.2s ease-in-out; flex-shrink: 0; /* Empêche le bouton de s'écraser */ }
.fox_foxit-maximize { color: white; text-decoration: none; font-size: 18px; cursor: pointer; }
.fox_foxit-send-img:hover { transform: scale(1.1); filter: brightness(1.1); }
.fox_foxit-send-img:active { transform: scale(0.9); }
/* 8. ÉTAT DE CHARGEMENT & ERREUR */
.fox_foxit-loading-status { font-size: 12px; color: #ff8c00; padding: 10px; display: flex; align-items: center; gap: 5px; }
.fox_foxit-typing-dots span { width: 6px; height: 6px; background: #ff8c00; display: inline-block; border-radius: 50%; animation: typing 1s infinite; }
.fox_foxit-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.fox_foxit-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

.fox_foxit-chat-window { position: relative; }
.fox_foxit-floating-logo { position: absolute; width: 60px; /* Taille du logo */ height: 60px; left: -30px; /* Sort de 30px vers la gauche */ top: -20px; /* Monte de 20px vers le haut */ z-index: 1000; /* Passe devant tout le reste */ background: white; /* Optionnel: fond blanc pour détacher le logo */ border-radius: 50%; /* Optionnel: cercle parfait */ padding: 5px; /* Optionnel: marge interne */ box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Ombre pour l'effet "en avant" */ }

@media (max-width: 600px) {
    .fox_foxit-floating-logo { left: 10px; top: -40px; width: 50px; height: 50px; }
}

@keyframes typing {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(-4px); opacity: 1; }
}

.fox_foxit-error { color: #d9534f; font-size: 11px; padding: 0 15px 5px; display: block; }

/*****************************
    Page Default_wm.aspx
******************************/

/* ============================================================
   FOX4WORK WMS – Dashboard complet
   
   Palette :
     Orange principal  : #F47920
     Orange hover      : #E06510
     Navy foncé        : #1A2B4A
     Fond carte        : #FFFFFF
     Fond input        : #F4F6F9
     Bordure           : #DDE2EC
     Texte principal   : #1A2B4A
     Texte secondaire  : #6B7A99
     Rouge danger      : #D94F3D
   ============================================================ */

/* ── 1. RESET MINIMAL ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── 2. CARTE GÉNÉRIQUE (fox_graphique) ──────────────────── */
.fox_graphique { background: #FFFFFF; border: 1px solid #DDE2EC; border-radius: 12px; padding: 20px; margin-bottom: 24px; box-shadow: 0 2px 10px rgba(26, 43, 74, 0.07); overflow: visible; }

/* ── 3. GRILLE GRAPHIQUES PRINCIPAUX ─────────────────────── */
.default_WN_charts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }

/* Carte graphique individuelle */
.default_WN_chart-item { background: #F4F6F9; border: 1px solid #DDE2EC; border-radius: 8px; padding: 10px; overflow: visible; width: 100%; min-width: 0; height: auto; display: flex; flex-direction: column; transition: border-color 0.2s ease, box-shadow 0.2s ease; }

.default_WN_chart-item:hover { border-color: #F47920; box-shadow: 0 4px 16px rgba(244, 121, 32, 0.14); }

/* Charts Telerik fluides en largeur uniquement */
.default_WN_chart-item .RadHtmlChart,
.default_WN_chart-wrapper .RadHtmlChart { width: 100% !important; max-width: 100% !important; overflow: visible !important; }

.default_WN_chart-item canvas,
.default_WN_chart-item svg,
.default_WN_chart-wrapper canvas,
.default_WN_chart-wrapper svg { max-width: 100% !important; display: block; overflow: visible !important; }

/* ── 4. BARRE D'OPTIONS GRAPHIQUES ───────────────────────── */
.default_WN_filter-actions-inline { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 10px 14px; background: #F4F6F9; border: 1px solid #DDE2EC; border-radius: 8px; margin-top: 10px; }
.default_WN_filter-actions-inline select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 6px 32px 6px 10px; font-size: 12px; font-weight: 500; color: #1A2B4A; background-color: #FFFFFF; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23F47920'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; border: 1px solid #DDE2EC; border-radius: 6px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; min-width: 130px; }
.default_WN_filter-actions-inline select:focus { outline: none; border-color: #F47920; box-shadow: 0 0 0 3px rgba(244, 121, 32, 0.14); }
.default_WN_filter-actions-inline label,
.default_WN_filter-actions-inline span { font-size: 12px; font-weight: 500; color: #1A2B4A; cursor: pointer; white-space: nowrap; }

/* ── 5. MAIN CONTAINER ───────────────────────────────────── */
.default_WN_main-container { display: grid; grid-template-columns: 300px 1fr; gap: 24px; align-items: start; }

/* ── 6. PANNEAU FILTRES ──────────────────────────────────── */
.default_WN_filter-form-container { background: #FFFFFF; border: 1px solid #DDE2EC; border-left: 4px solid #F47920; border-radius: 12px; padding: 20px; box-shadow: 0 2px 10px rgba(26, 43, 74, 0.07); display: flex; flex-direction: column; gap: 18px; }

.default_WN_filter-form-container h3 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #F47920; padding-bottom: 10px; border-bottom: 1px solid #DDE2EC; margin: 0; }

/* ── 7. GROUPES FILTRES ──────────────────────────────────── */
.default_WN_filter-group { display: flex; flex-direction: column; gap: 6px; width: 100%; }

.default_WN_filter-group > label,
.default_WN_filter-group > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7A99; }

/* Input texte natif uniquement */
.default_WN_filter-group input[type="text"] { width: 100%; padding: 8px 12px; font-size: 13px; color: #1A2B4A; background: #F4F6F9; border: 1px solid #DDE2EC; border-radius: 6px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }

.default_WN_filter-group input[type="text"]:focus { outline: none; border-color: #F47920; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(244, 121, 32, 0.12); }

/* Select natif ASP.NET uniquement — exclure tout enfant Telerik */
.default_WN_filter-group select:not([class*="rcb"]):not([class*="Rad"]):not([class*="rad"]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 8px 30px 8px 12px; font-size: 13px; color: #1A2B4A; background-color: #F4F6F9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23F47920'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; border: 1px solid #DDE2EC; border-radius: 6px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; }

.default_WN_filter-group select:not([class*="rcb"]):not([class*="Rad"]):not([class*="rad"]):focus { outline: none; border-color: #F47920; background-color: #FFFFFF; box-shadow: 0 0 0 3px rgba(244, 121, 32, 0.12); }

/* Neutraliser tout style parasite sur les enfants Telerik RadComboBox */
.default_WN_filter-group .RadComboBox,
.default_WN_filter-group .RadComboBox *,
.default_WN_filter-group .RadComboBox input,
.default_WN_filter-group .RadComboBox select { all: revert; }

/* ── 8. ZONE MANIPULATION ────────────────────────────────── */
.default_WN_manipulation-zone { gap: 8px; }

.default_WN_manipulation-zone select[multiple] { width: 100%; min-height: 110px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: none; padding: 6px 8px; font-size: 13px; color: #1A2B4A; background-color: #F4F6F9; border: 1px solid #DDE2EC; border-radius: 6px; resize: vertical; transition: border-color 0.2s, box-shadow 0.2s; }

.default_WN_manipulation-zone select[multiple]:focus { outline: none; border-color: #F47920; box-shadow: 0 0 0 3px rgba(244, 121, 32, 0.12); }

.default_WN_manipulation-zone .default_WN_btn-row { display: flex; gap: 8px; }

/* ── 9. BOUTONS ──────────────────────────────────────────── */
.default_WN_Button,
input[type="submit"].default_WN_Button,
button.default_WN_Button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; font-size: 12px; font-weight: 600; border-radius: 6px; border: none; cursor: pointer; transition: background 0.2s, box-shadow 0.2s, transform 0.1s; background: linear-gradient(135deg, #F47920, #E06510); color: #FFFFFF; box-shadow: 0 2px 6px rgba(244, 121, 32, 0.35); white-space: nowrap; }

.default_WN_Button:hover { background: linear-gradient(135deg, #FF9035, #F47920); box-shadow: 0 4px 12px rgba(244, 121, 32, 0.45); transform: translateY(-1px); }

.default_WN_Button:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(244, 121, 32, 0.3); }

/* Bouton Supprimer */
#BT_Sup_Manip { background: transparent !important; color: #D94F3D !important; border: 1.5px solid #D94F3D !important; box-shadow: none !important; }

#BT_Sup_Manip:hover { background: #D94F3D !important; color: #FFFFFF !important; box-shadow: 0 4px 10px rgba(217, 79, 61, 0.3) !important; transform: translateY(-1px); }

/* ── 10. GRAPHIQUES DYNAMIQUES (Manip / 2 / 3) ──────────── */
.default_WN_dynamic-chart-section { grid-column: 2 / 3; }

.default_WN_chart-wrapper { overflow: visible; width: 100%; min-width: 0; height: auto; }

/* ── 11. TELERIK RadDatePicker ───────────────────────────── */
.RadPicker { width: 100% !important; }

.RadPicker .RadInput,
.RadPicker .riTextBox { width: 100% !important; padding: 8px 12px !important; font-size: 13px !important; color: #1A2B4A !important; background: #F4F6F9 !important; border: 1px solid #DDE2EC !important; border-radius: 6px !important; transition: border-color 0.2s, box-shadow 0.2s !important; }

.RadPicker .RadInput:focus,
.RadPicker .riTextBox:focus { outline: none !important; border-color: #F47920 !important; background: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(244, 121, 32, 0.12) !important; }

.RadPicker .rcCalPopup { background-color: #F47920 !important; border-radius: 0 6px 6px 0 !important; border: none !important; }

.RadPicker .rcCalPopup:hover { background-color: #E06510 !important; }

/* ── 12. RESPONSIVE ──────────────────────────────────────── */

/* Tablette paysage */
@media (max-width: 1280px) {
    .default_WN_charts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablette portrait */
@media (max-width: 900px) {
    .default_WN_main-container { grid-template-columns: 1fr !important; }

    .default_WN_filter-form-container { grid-column: 1 !important; }

    .default_WN_dynamic-chart-section { grid-column: 1 !important; }
}

/* Mobile */
@media (max-width: 768px) {
    .fox_graphique { padding: 12px; border-radius: 8px; margin-bottom: 16px; }

    .default_WN_charts-grid { grid-template-columns: 1fr !important; gap: 10px; }

    .default_WN_filter-actions-inline { flex-direction: column; align-items: flex-start; gap: 10px; padding: 10px; }

    .default_WN_filter-actions-inline select { width: 100%; min-width: unset; }

    .default_WN_filter-form-container { padding: 14px; gap: 14px; }

    .default_WN_manipulation-zone .default_WN_btn-row { flex-direction: column; }

    .default_WN_Button { width: 100%; justify-content: center; }
}

/* Petit mobile */
@media (max-width: 480px) {
    .fox_graphique { padding: 10px; }
}


/*Adaptation par MARINA/stagiaire 08/03/2023 */
/***************************************************
       adaptation des listes déroulantes 
 ***************************************************/

.Fox_combo_new select { font-size: 1.2rem; padding: 5px 20px 5px 5px; border-radius: 5px; background-color: #f6fafc; color: #3b3b3b; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); cursor: pointer !important; width: auto; min-width: 50px; max-width: 100%; margin-bottom: 10px; border: 1px solid #727272; }
.Fox_combo_new { font-size: large; }
.Fox_combo_new,
.Fox_default_text { height: 35px; background-color: #f6fafc; border-radius: 5px; border: 2px solid #727272; }

/* Style pour le changement de couleur de fond en fonction de la position du curseur dans la liste déroulante */
.Fox_combo_new select option { background-color: #f6fafc; color: #000; }

/***************************************************
       adaptation des listes déroulantes avec une flèche et une animation (+ script JS)  MARINA 
 ***************************************************/

.Fox_combo_Fleche select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 1.2rem; padding: 5px 20px 5px 5px; border-radius: 5px; /* Couleur bleu clair du menu*/ background-color: #f6fafc; color: #3b3b3b; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1); cursor: pointer; width: auto; height: 35px; min-width: 50px; max-width: 100%; margin-bottom: 10px; border: 1px solid #727272; background-image: url("../../style/button/fleche5.png"); background-repeat: no-repeat; background-position: right center; background-size: 25px; padding-right: 30px; /*Transition fluide entre 2 flèches*/ transition: background-image 0.1s ease-in-out; }
/* Style pour le changement de la flèche quand on clique dessous ver la flèche6 */
.Fox_combo_Fleche select.open { background-image: url("../../style/button/fleche6.png"); }
/* Style pour le changement de couleur de fond en fonction de la position du curseur dans la liste déroulante */
.Fox_combo_Fleche select:focus { outline: none; }
.Fox_combo_Fleche select option { background-color: #f6fafc; color: #000; }
.Fox_combo_Fleche { font-size: large; }
.Fox_combo_Fleche { width: 180px; height: 35px; background-color: #f6fafc; border-radius: 5px; border: 2px solid #727272; }



/************************************************************************************************************************************
 *           transformation des checkbox en toggle-switch sur l par Marina (stagiaire) mars 2023         *
 ************************************************************************************************************************************/

input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 40px; height: 22px; background-color: #c6c6c6; border-radius: 20px; outline: none; transition: all 0.3s; position: relative; border: 1px solid #65afd2; vertical-align: middle; }
/* styles pour les checkbox lorsqu'elles sont cochées */
input[type="checkbox"]:checked { background-color: #65afd2; }
/* styles pour les checkbox lorsqu'elles ne sont pas cochées */
input[type="checkbox"]:not(:checked) { position: relative; }
input[type="checkbox"]:not(:checked)::before { content: ""; display: block; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 10px; width: 16px; height: 16px; background-color: #fff; border-radius: 50%; transition: all 0.3s; }
/* ajouter un cercle après la case à cocher cochée */
input[type="checkbox"]:checked::after { content: ""; display: block; position: absolute; top: 50%; left: 28px; transform: translate(-50%, -50%); width: 16px; height: 16px; background-color: #fff; border-radius: 50%; transition: all 0.3s; }
input[type="checkbox"]:checked:before { left: 10px; }

/************************************************************************************************************************************
 *           transformation des checkbox en toggle-switch sur l par Marina (stagiaire) mars 2023         *
 ************************************************************************************************************************************/

input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 40px; height: 22px; background-color: #c6c6c6; border-radius: 20px; outline: none; transition: all 0.3s; position: relative; border: 1px solid #65afd2; vertical-align: middle; }
/* styles pour les checkbox lorsqu'elles sont cochées */
input[type="radio"]:checked { background-color: #65afd2; }
/* styles pour les checkbox lorsqu'elles ne sont pas cochées */
input[type="radio"]:not(:checked) { position: relative; }
input[type="radio"]:not(:checked)::before { content: ""; display: block; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 10px; width: 16px; height: 16px; background-color: #fff; border-radius: 50%; transition: all 0.3s; }
/* ajouter un cercle après la case à cocher cochée */
input[type="radio"]:checked::after { content: ""; display: block; position: absolute; top: 50%; left: 28px; transform: translate(-50%, -50%); width: 16px; height: 16px; background-color: #fff; border-radius: 50%; transition: all 0.3s; }
input[type="radio"]:checked:before { left: 10px; }

.Fox_editor { position: fixed; left: 30px; top: 30px; bottom: 30px; right: 30px; border: 1px grey solid; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; font-family: Arial; background-color: #f6fafc; z-index: 9999999 }

.wrapWord { word-wrap: break-word; word-break: break-all; background-color: aquamarine }