/*-----------------------------------*/
/* Body Background and general style */
/*-----------------------------------*/
body 
{
   width:100%;
   height:100%;
   line-height: 10px;
   background-color: white;
   font: 9pt verdana, arial,helvetica, sans-serif;
   margin:0px;
   background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover;
}

/*-----*/
/* DIV */
/*-----*/

#div_login_front          {visibility:visible; position:absolute; height:auto;                  width:auto;  left:  40px;   top:    40px; z-index:4; border:0px solid #000000; }

#div_menu_reduced         {visibility:visible; position:fixed;    height:100%;                  width:35px;              left:0px;    top:0px;    z-index:8; border:0px solid #000000;                                 padding-left:5px;    background-color:var(--color-panel); overflow:hidden; }
#div_menu_full            {visibility:visible; position:fixed;    height:100%;                  width:140px;             left:-130px; top:0px;    z-index:7; border:0px solid #000000; border-right:1px solid var(--color-button); padding-left:5px;    background-color:var(--color-panel); overflow:hidden; }
#div_menu_background      {visibility:visible; position:fixed;    height:100%;                  width:100%;              left:0px;    top:0px;    z-index:6; border:0px solid #000000; }

#div_bottom               {visibility:visible; position:fixed;    height:auto;                  width:100%;              left:0px;    bottom:0px; z-index:9; border:0px solid #000000;                                                      background-color:white;  opacity:0.6; filter:alpha(opacity=60); }

#div_main                 {visibility:visible; position:absolute; height:auto;                  width:calc(99% - 60px);  left:60px;   top:7px;    z-index:5; border:0px solid #000000;                                  padding-bottom:70px; }

#div_main_dashboard       {visibility:visible; position:absolute; height:auto;                  width:calc(99% - 60px);  left:60px;   top:7px;    z-index:5; border:0px solid #000000;                                  padding-bottom:70px; }

#div_main_menu_full       {visibility:visible; position:fixed;    height:auto; min-height:50px; width:calc(99% - 60px);  left:60px;   top:7px;    z-index:4; border:0px solid #000000; }
#div_main_text_full       {visibility:visible; position:absolute; height:auto;                  width:calc(99% - 60px);  left:60px;   top:70px;   z-index:3; border:0px solid #000000;                                 padding-bottom:70px;  }

#div_main_menu_left       {visibility:visible; position:fixed;    height:auto;                  width:200px;             left:40px;   top:7px;   z-index:5; border:1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 6px 0;  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); background-color: var(--color-panel);}
#div_main_menu_right      {visibility:visible; position:fixed;    height:auto; min-height:50px; width:calc(99% - 255px); left:255px;  top:7px;    z-index:4; border:0px solid #000000; }
#div_main_text_right      {visibility:visible; position:absolute; height:auto;                  width:calc(99% - 255px); left:255px;  top:75px;   z-index:3; border:0px solid #000000;                                 padding-bottom:70px; }

#div_main_menu_full_ext   {visibility:visible; position:fixed;    height:auto; min-height:50px; width:calc(99% - 20px);  left:10px;   top:10px;   z-index:4; border:0px solid #000000; }
#div_main_text_full_ext   {visibility:visible; position:absolute; height:auto;                  width:calc(99% - 20px);  left:10px;   top:80px;   z-index:3; border:0px solid #000000;                                 padding-bottom:70px; }

#div_main_menu_left_ext   {visibility:visible; position:fixed;    height:auto;                  width:200px;             left:10px;   top:10px;   z-index:5; border:1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 6px 0;  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06); background-color: var(--color-panel);}
#div_main_menu_right_ext  {visibility:visible; position:fixed;    height:auto; min-height:50px; width:calc(99% - 225px); left:225px;  top:10px;   z-index:4; border:0px solid #000000; }
#div_main_text_right_ext  {visibility:visible; position:absolute; height:auto;                  width:calc(99% - 225px); left:225px;  top:80px;   z-index:3; border:0px solid #000000;                                 padding-bottom:70px; }

#div_outlook_summary      {visibility:visible; position:fixed;    height:auto;                  width:240px;             left:60px;   top:70px;   z-index:4; border:0px solid #000000; }
#div_outlook_text         {visibility:visible; position:absolute; height:auto;                  width:calc(99% - 310px); left:310px;  top:70px;   z-index:3; border:0px solid #000000;                                 padding-bottom:70px; }

#div_modalback            {visibility:visible; position:absolute; height:100%;                  width:100%;                           top:0px;    z-index:8; border:0px solid #000000;                                                      background-color:black; opacity: 0.8; filter: alpha(opacity=80); }
#div_modalfront           {visibility:visible; position:relative; height:60%;                   width:60%;                            top:200px;  z-index:9; border:0px solid #000000; }            

.div_col_45
{
   float: left;
   width: 45%;
}

.div_col_30
{
   float: left;
   width: 30%;
}

.div_col_25
{
   float: left;
   width: 25%;
}

.div_col_30
{
   float: left;
   width: 30%;
   flex: 1;
}

.div_col_15
{
   float: right;
   width: 15%;
}

.div_col_3
{
   float: left;
   width: 3%;
}

/*-----------------*/
/* input, buttons  */
/*-----------------*/
.input
{ 
   border-top: 1px solid transparent;
   border-right: 1px solid transparent;
   border-left: 1px solid transparent;
   border-bottom: 1px solid var(--color-button);
   border-radius: 5px;
   background-color: var(--color-input);
   font-size: 14px;
   font-weight: normal;
   color: var(--color-input-text);
   padding:5px;
}

.input::placeholder
{
   color: color-mix(in srgb, var(--color-input-text) 55%, transparent);
}

.input:focus
{
   outline: none;
   border: 1px solid var(--color-button);
   background-color: var(--color-input-hover);
}

input.input:not([type="radio"]):not([type="checkbox"]),
textarea.input,
select.input
{
   transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

input.input:not([type="radio"]):not([type="checkbox"]):hover,
textarea.input:hover,
select.input:hover
{
   background-color: color-mix(in srgb, var(--color-input) 92%, var(--color-button));
}

input.input:not([type="radio"]):not([type="checkbox"]):focus,
textarea.input:focus,
select.input:focus
{
   border-color: var(--color-button);
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-button) 18%, transparent);
}

input.input:disabled,
textarea.input:disabled,
select.input:disabled
{
   opacity: 0.55;
   cursor: not-allowed;
}

input.input[type="radio"],
input.input[type="checkbox"],
.input_radio,
.input_checkbox
{
   accent-color: var(--color-button);
}

@media (prefers-reduced-motion: reduce)
{
   input.input:not([type="radio"]):not([type="checkbox"]),
   textarea.input,
   select.input
   {
      transition: none;
   }
}

.input_radio
{ 
   border-top: 1px solid transparent;
   border-right: 1px solid transparent;
   border-left: 1px solid transparent;
   border-bottom: 1px solid var(--color-button);
   border-radius: 5px;
   background-color: var(--color-input);
   font-size: 14px;
   font-weight: normal;
   color: var(--color-text);
   padding:5px;
   margin-right: 10px;
   cursor: pointer;
}

.input_checkbox
{ 
   border-top: 1px solid transparent;
   border-right: 1px solid transparent;
   border-left: 1px solid transparent;
   border-bottom: 1px solid var(--color-button);
   border-radius: 5px;
   background-color: var(--color-button);
   font-size: 14px;
   font-weight: normal;
   color: var(--color-text);
   padding:5px;
   margin-right: 10px;
   cursor: pointer;
}

.label
{
   font-size: 14px;
   font-weight:lighter;
   color: var(--color-text);
   margin-top: 3px;
   margin-bottom: 3px;
   margin-left: 3px;
}

.label-block
{
  display: block;
  padding: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 14px !important;
  font-weight: normal;
}
.img_rounded
{
   border-radius:5px;
}

.img_pointer:hover
{
   cursor:pointer;
}

select {
  cursor: pointer;
}

#zoom
{
  width: 100%;
  height: 100%;
  transform-origin: 0px 0px;
  transform: scale(1) translate(0px, 0px);
  cursor: grab;
}

div#zoom > img
{
  width: 100%;
  height: auto;
}

.button
{
   border: 2px solid var(--color-button);
   border-radius: 6px;
   background-color: var(--color-button);
   background-image: linear-gradient(to bottom, rgba(255,255,255,0.14), rgba(255,255,255,0));
   font-size: 14px;
   font-weight: normal;
   letter-spacing: 0.2px;
   color: var(--color-button-text);
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 20px;
   padding-right: 20px;
   cursor: pointer;
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   box-shadow: 0 1px 2px rgba(0,0,0,0.12);
   transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease;
}

.button:hover
{
   border-color: var(--color-button-hover);
   background-color: var(--color-button-hover);
   box-shadow: 0 3px 8px rgba(0,0,0,0.16);
   transform: translateY(-1px);
}

a.button,
a.button:hover
{
   color: var(--color-button-text);
   text-decoration: none;
}

.button:active
{
   transform: translateY(0);
   box-shadow: inset 0 2px 4px rgba(0,0,0,0.18);
}

.button:focus-visible
{
   outline: 2px solid var(--color-button);
   outline-offset: 2px;
}

.button:disabled,
.button[disabled]
{
   opacity: 0.5;
   cursor: not-allowed;
   transform: none;
   box-shadow: none;
}

@media (prefers-reduced-motion: reduce)
{
   .button
   {
      transition: none;
   }
   .button:hover,
   .button:active
   {
      transform: none;
   }
}

.pointer
{
   cursor: pointer;
}

.attached_file
{
   cursor: pointer;
}

.attached_file:hover
{
   color: var(--color-button);
}

.input_color
{
   float: left;
   padding: 5px;
   padding-right: 30px;
}

/*-------*/
/* href  */
/*-------*/
a {
   font-size: 14px;
   font-weight: normal;
   color: var(--color-text);
   text-decoration: none;
}

a:hover {
   color: var(--color-button);
}

a.button_return
{
   border: 0px solid #000000;
   background-color: transparent;
   font-size: 14px;
   font-weight: normal;
   color: var(--color-text);
   cursor: pointer;
   text-decoration: underline;
   text-decoration-color: transparent;
   text-decoration-thickness: 1px;
   text-underline-offset: 3px;
   -webkit-tap-highlight-color: transparent;
   transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

a.button_return::before
{
   content: "\2190\00a0";
   display: inline-block;
   transition: transform 0.18s ease;
}

a.button_return:hover
{
   color: var(--color-button);
   text-decoration-color: var(--color-button);
}

a.button_return:hover::before
{
   transform: translateX(-3px);
}

a.button_return:focus-visible
{
   color: var(--color-button);
   text-decoration-color: var(--color-button);
   outline: 2px solid var(--color-button);
   outline-offset: 2px;
}

a.button_return.no_arrow::before
{
   content: none;
}

@media (prefers-reduced-motion: reduce)
{
   a.button_return,
   a.button_return::before
   {
      transition: none;
   }
   a.button_return:hover::before
   {
      transform: none;
   }
}

a.sub_menu {
   display: block;
   box-sizing: border-box;
   width: auto;
   height: auto;
   margin: 2px 6px;
   padding: 10px;
   padding-left: 14px;
   border-radius: 8px;
   text-align: left;
   font-size: 14px;
   font-weight: normal;
   color: color-mix(in srgb, var(--color-text) 72%, transparent);
   text-decoration: none;
   transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
   }

a.sub_menu:hover
{
   background-color: color-mix(in srgb, var(--color-button) 12%, transparent);
   color: var(--color-button);
   padding-left: 18px;
}

a.sub_menu.sub_menu_active
{
   background-color: color-mix(in srgb, var(--color-button) 16%, transparent);
   color: var(--color-button);
   font-weight: bold;
}

a.sub_menu.sub_menu_active:hover
{
   background-color: color-mix(in srgb, var(--color-button) 22%, transparent);
}

@media (prefers-reduced-motion: reduce)
{
   a.sub_menu
   {
      transition: none;
   }
}

.panel_sub_menu
{
   background-color: var(--color-panel);
   border: 1px solid rgba(0,0,0,0.06);
   border-radius: 10px;
   padding: 6px 0;
   box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
}

a.sub_menu_customer {
   display: block;
   box-sizing: border-box;
   width: auto;
   height: auto;
   margin: 2px 6px;
   padding: 10px;
   padding-left: 14px;
   border-radius: 8px;
   text-align: left;
   font-size: 14px;
   font-weight: normal;
   color: color-mix(in srgb, var(--color-text) 72%, transparent);
   text-decoration: none;
   transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
   }

a.sub_menu_customer_warning {
   display: block;
   box-sizing: border-box;
   background-color: color-mix(in srgb, orange 12%, transparent);
   border: 1px solid color-mix(in srgb, orange 30%, transparent);
   border-radius: 8px;
   width: auto;
   height: auto;
   margin: 2px 6px;
   padding: 9px 10px 9px 32px;
   text-align: left;
   font-size: 14px;
   font-weight: normal;
   color: orange;
   text-decoration: none;
   position: relative;
   transition: background-color 0.18s ease, border-color 0.18s ease;
   }

a.sub_menu_customer_warning:hover
{
   background-color: color-mix(in srgb, orange 20%, transparent);
   border-color: color-mix(in srgb, orange 45%, transparent);
   color: orange;
}

a.sub_menu_customer_warning:before {
   content: "";
   background-color: #e08a2e;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6 3 20h18Z'/%3E%3Cpath d='M12 10.2v4'/%3E%3Cpath d='M12 17v.1' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center / contain;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6 3 20h18Z'/%3E%3Cpath d='M12 10.2v4'/%3E%3Cpath d='M12 17v.1' stroke-width='2.4'/%3E%3C/svg%3E") no-repeat center / contain;
   position: absolute;
   top: 50%;
   left: 6px;
   transform: translateY(-50%);
   width: 20px;
   height: 20px;
}

a.sub_menu_customer:hover
{
   background-color: color-mix(in srgb, var(--color-button) 12%, transparent);
   color: var(--color-button);
   padding-left: 18px;
}

a.sub_menu_customer.sub_menu_customer_active
{
   background-color: color-mix(in srgb, var(--color-button) 16%, transparent);
   color: var(--color-button);
   font-weight: bold;
}

a.sub_menu_customer.sub_menu_customer_active:hover
{
   background-color: color-mix(in srgb, var(--color-button) 22%, transparent);
}

a.sub_menu_customer_warning.sub_menu_customer_active
{
   background-color: color-mix(in srgb, orange 22%, transparent);
   border-color: color-mix(in srgb, orange 55%, transparent);
   font-weight: bold;
}

@media (prefers-reduced-motion: reduce)
{
   a.sub_menu_customer,
   a.sub_menu_customer_warning
   {
      transition: none;
   }
}

a.small_sub_menu
{
   display: block;
   box-sizing: border-box;
   width: auto;
   height: auto;
   margin: 1px 4px;
   padding: 7px 10px;
   padding-left: 12px;
   border-radius: 6px;
   text-align: left;
   font-size: 14px;
   font-weight: normal;
   color: color-mix(in srgb, var(--color-text) 72%, transparent);
   text-decoration: none;
   transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}

a.small_sub_menu:hover
{
   background-color: color-mix(in srgb, var(--color-button) 12%, transparent);
   color: var(--color-button);
   padding-left: 16px;
}

a.small_sub_menu.small_sub_menu_active
{
   background-color: color-mix(in srgb, var(--color-button) 16%, transparent);
   color: var(--color-button);
   font-weight: bold;
}

a.small_sub_menu.small_sub_menu_active:hover
{
   background-color: color-mix(in srgb, var(--color-button) 22%, transparent);
}

@media (prefers-reduced-motion: reduce)
{
   a.small_sub_menu
   {
      transition: none;
   }
}

/*------*/
/* menu */
/*------*/
.menu_green
{
   font-size: 14px;
   font-weight: normal;
   color: var(--color-button);
   text-decoration: none;
}

.menu_green:hover
{
   color: var(--color-text);
}

.menu_green_hover
{
   color: var(--color-text);
}

a.menu_gray
{
   font-size: 14px;
   font-weight: normal;
   color: var(--color-text);
   text-decoration: none;
}

a.menu_gray:hover
{
   color: var(--color-button);
}

a.menu_bottom
{
   font-size: 14px;
   font-weight: normal;
   color: var(--color-text);
   text-decoration: none;
}

a.menu_bottom:hover
{
   color: var(--color-button);
}

.menu_icon
{
   width: 28px;
   height: 28px;
   display: inline-block;
   vertical-align: middle;
   background-color: var(--color-button);
   -webkit-mask: var(--icon) no-repeat center / contain;
   mask: var(--icon) no-repeat center / contain;
}

/* Tant que les nouveautes de la version n ont pas ete lues, un badge se pose sur le coin
   de l icone de l aide. Il tient dans les 35 pixels de la barre etroite, et reste visible
   quand le menu s ouvre par-dessus. */
.menu_help_dot
{
   position: absolute;
   top: -1px;
   left: 16px;
   width: 11px;
   height: 11px;
   box-sizing: border-box;
   border: 2px solid var(--color-panel);
   border-radius: 999px;
   background-color: var(--dot-color, #ff3b30);
   animation: menu_help_pulse 2.4s ease-out infinite;
}

/* Le halo s ouvre puis s efface : six pixels, pas plus, pour rester dans la barre */
@keyframes menu_help_pulse
{
   0%
   {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot-color, #ff3b30) 55%, transparent);
   }
   70%
   {
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--dot-color, #ff3b30) 0%, transparent);
   }
   100%
   {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot-color, #ff3b30) 0%, transparent);
   }
}

@media (prefers-reduced-motion: reduce)
{
   .menu_help_dot
   {
      animation: none;
   }
}
/* L aide se pose en bas des deux menus, au-dessus de la barre translucide du pied */
.menu_help
{
   position: absolute;
   bottom: 60px;
   left: 5px;
   height: 30px;
   display: flex;
   align-items: center;
}
/* Reduced and full menus: identical row heights to keep icons and titles aligned */
#div_menu_reduced,
#div_menu_full
{
   font-size: 14px;
   line-height: 1;
}
#div_menu_reduced table,
#div_menu_full table
{
   border-collapse: separate;
   border-spacing: 0;
}
#div_menu_reduced td,
#div_menu_full td
{
   padding: 0;
   vertical-align: middle;
   box-sizing: border-box;
}
/* Content cells (those with height=30 attribute): exactly 30px */
#div_menu_reduced td[height="30"],
#div_menu_full    td[height="30"]
{
   height: 30px;
}
/* Spacer cells (colspan=2 with <br>, no height attribute): exactly 14px */
#div_menu_reduced td[colspan="2"]:not([height]),
#div_menu_full    td[colspan="2"]:not([height])
{
   height: 14px;
   font-size: 0;
   line-height: 0;
}
#div_menu_reduced td[colspan="2"]:not([height]) br,
#div_menu_full    td[colspan="2"]:not([height]) br
{
   display: none;
}
#div_menu_full a.menu_green,
#div_menu_reduced a.menu_green
{
   display: inline-block;
   height: 28px;
   line-height: 28px;
   vertical-align: middle;
}

.menu_icon_reduced
{
   width: 24px;
   height: 24px;
}

/* Icons inlined as data-URIs (instead of external url()) so the CSS mask is
   always available immediately. With an external SVG the mask loads
   asynchronously and could "miss" on a cached navigation, leaving the span as
   a plain green square. */
.menu_icon_dashboard { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40v280Zm-286 80h252l-46-46v-314H400v314l-46 46Zm126 0Z'/%3E%3C/svg%3E"); }
.menu_icon_customers { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm720 0v-120q0-44-24.5-84.5T666-434q51 6 96 20.5t84 35.5q36 20 55 44.5t19 53.5v120H760ZM247-527q-47-47-47-113t47-113q47-47 113-47t113 47q47 47 47 113t-47 113q-47 47-113 47t-113-47Zm466 0q-47 47-113 47-11 0-28-2.5t-28-5.5q27-32 41.5-71t14.5-81q0-42-14.5-81T544-792q14-5 28-6.5t28-1.5q66 0 113 47t47 113q0 66-47 113ZM120-240h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm296.5-343.5Q440-607 440-640t-23.5-56.5Q393-720 360-720t-56.5 23.5Q280-673 280-640t23.5 56.5Q327-560 360-560t56.5-23.5ZM360-240Zm0-400Z'/%3E%3C/svg%3E"); }
.menu_icon_outlook { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-188.5-11.5Q280-423 280-440t11.5-28.5Q303-480 320-480t28.5 11.5Q360-457 360-440t-11.5 28.5Q337-400 320-400t-28.5-11.5ZM640-400q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-188.5-11.5Q280-263 280-280t11.5-28.5Q303-320 320-320t28.5 11.5Q360-297 360-280t-11.5 28.5Q337-240 320-240t-28.5-11.5ZM640-240q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/%3E%3C/svg%3E"); }
.menu_icon_thesaurus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm0 0v-640 640Zm200-360 100-60 100 60-100-60-100 60Z'/%3E%3C/svg%3E"); }
.menu_icon_shop { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M223.5-103.5Q200-127 200-160t23.5-56.5Q247-240 280-240t56.5 23.5Q360-193 360-160t-23.5 56.5Q313-80 280-80t-56.5-23.5Zm400 0Q600-127 600-160t23.5-56.5Q647-240 680-240t56.5 23.5Q760-193 760-160t-23.5 56.5Q713-80 680-80t-56.5-23.5ZM246-720l96 200h280l110-200H246Zm-38-80h590q23 0 35 20.5t1 41.5L692-482q-11 20-29.5 31T622-440H324l-44 80h480v80H280q-45 0-68-39.5t-2-78.5l54-98-144-304H40v-80h130l38 80Zm134 280h280-280Z'/%3E%3C/svg%3E"); }
.menu_icon_statistics { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M640-160v-280h160v280H640Zm-240 0v-560h160v560H400Zm-240 0v-360h160v360H160Z'/%3E%3C/svg%3E"); }
.menu_icon_parameters { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z'/%3E%3C/svg%3E"); }
.menu_icon_user { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm146.5-204.5Q340-521 340-580t40.5-99.5Q421-720 480-720t99.5 40.5Q620-639 620-580t-40.5 99.5Q539-440 480-440t-99.5-40.5ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm100-95.5q47-15.5 86-44.5-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160q53 0 100-15.5ZM523-537q17-17 17-43t-17-43q-17-17-43-17t-43 17q-17 17-17 43t17 43q17 17 43 17t43-17Zm-43-43Zm0 360Z'/%3E%3C/svg%3E"); }
.menu_icon_out { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-160h80v160h560v-560H200v160h-80v-160q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm220-160-56-58 102-102H120v-80h346L364-622l56-58 200 200-200 200Z'/%3E%3C/svg%3E"); }
.menu_icon_help { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M513.5-254.5Q528-269 528-290t-14.5-35.5Q499-340 478-340t-35.5 14.5Q428-311 428-290t14.5 35.5Q457-240 478-240t35.5-14.5ZM442-394h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E"); }
.menu_icon_rules { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M480-80q-139-35-229.5-159.5T160-516v-244l320-120 320 120v244q0 85-29 163.5T688-214L560-342q-18 11-38.5 16.5T480-320q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 22-5.5 42.5T618-398l60 60q20-41 31-86t11-92v-189l-240-90-240 90v189q0 121 68 220t172 132q26-8 49.5-20.5T576-214l56 56q-33 27-71.5 47T480-80Zm56.5-343.5Q560-447 560-480t-23.5-56.5Q513-560 480-560t-56.5 23.5Q400-513 400-480t23.5 56.5Q447-400 480-400t56.5-23.5ZM488-477Z'/%3E%3C/svg%3E"); }
.menu_icon_partners { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M480-600 340-740l140-140 140 140-140 140ZM40-160v-160q0-34 23.5-57t56.5-23h131q20 0 38 10t29 27q29 39 71.5 61t90.5 22q49 0 91.5-22t70.5-61q13-17 30.5-27t36.5-10h131q34 0 57 23t23 57v160H640v-91q-35 25-75.5 38T480-200q-43 0-84-13.5T320-252v92H40Zm120-280q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T280-560q0 50-34.5 85T160-440Zm640 0q-50 0-85-35t-35-85q0-51 35-85.5t85-34.5q51 0 85.5 34.5T920-560q0 50-34.5 85T800-440Z'/%3E%3C/svg%3E"); }
.menu_icon_credits { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M592-379q49-39 63-101h-83q-12 27-37 43.5T480-420q-30 0-55-16.5T388-480h-83q14 62 63 101t112 39q63 0 112-39ZM405.5-554.5Q420-569 420-590t-14.5-35.5Q391-640 370-640t-35.5 14.5Q320-611 320-590t14.5 35.5Q349-540 370-540t35.5-14.5Zm220 0Q640-569 640-590t-14.5-35.5Q611-640 590-640t-35.5 14.5Q540-611 540-590t14.5 35.5Q569-540 590-540t35.5-14.5ZM480-120l-58-50q-101-88-167-152T150-437q-39-51-54.5-94T80-620q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 89T810-437q-39 51-105 115T538-170l-58 50Zm0-108q96-83 158-141t98-102.5q36-44.5 50-79t14-69.5q0-60-40-100t-100-40q-47 0-87 26.5T518-666h-76q-15-41-55-67.5T300-760q-60 0-100 40t-40 100q0 35 14 69.5t50 79Q260-427 322-369t158 141Zm0-266Z'/%3E%3C/svg%3E"); }
.menu_icon_mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z'/%3E%3C/svg%3E"); }
.menu_icon_site { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-7-.5-14.5T799-507q-5 29-27 48t-52 19h-80q-33 0-56.5-23.5T560-520v-40H400v-80q0-33 23.5-56.5T480-720h40q0-23 12.5-40.5T563-789q-20-5-40.5-8t-42.5-3q-134 0-227 93t-93 227h200q66 0 113 47t47 113v40H400v110q20 5 39.5 7.5T480-160Z'/%3E%3C/svg%3E"); }
.menu_icon_youtube { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m380-340 280-180-280-180v360Zm-60 220v-80H160q-33 0-56.5-23.5T80-280v-480q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v480q0 33-23.5 56.5T800-200H640v80H320ZM160-280h640v-480H160v480Zm0 0v-480 480Z'/%3E%3C/svg%3E"); }
.menu_icon_facebook { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='currentColor' d='M22.675 0h-21.35C.595 0 0 .593 0 1.326v21.348C0 23.407.595 24 1.325 24h11.495v-9.294H9.692V11.41h3.128V8.797 c0-3.1 1.894-4.788 4.659-4.788 1.325 0 2.464.099 2.795.143v3.24l-1.918.001c-1.504 0-1.796.715-1.796 1.763v2.313h3.587l-.467 3.296h-3.12V24h6.116C23.405 24 24 23.407 24 22.674V1.326C24 .593 23.405 0 22.675 0z'/%3E%3C/svg%3E"); }
.menu_icon_instagram { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='currentColor' d='M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.848 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.069-4.85.069-3.204 0-3.583-.012-4.849-.069-3.259-.149-4.771-1.696-4.919-4.919C2.175 15.584 2.163 15.205 2.163 12c0-3.204.012-3.583.069-4.849.149-3.227 1.664-4.771 4.919-4.919C8.417 2.175 8.796 2.163 12 2.163zm0 5.838A3.999 3.999 0 1 0 12 16a3.999 3.999 0 0 0 0-7.999zm6.406-1.845a.96.96 0 1 0 .001 1.92.96.96 0 0 0-.001-1.92z'/%3E%3C/svg%3E"); }
.menu_icon_linkedin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='currentColor' d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.85-3.037-1.851 0-2.134 1.445-2.134 2.939v5.667H9.356V9h3.414v1.561h.049c.476-.9 1.637-1.85 3.369-1.85 3.602 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.063 2.063 0 1 1 0-4.126 2.063 2.063 0 0 1 0 4.126zM6.985 20.452H3.688V9h3.297v11.452z'/%3E%3C/svg%3E"); }

.menu_icon
{
   transition: background-color 0.18s ease, transform 0.18s ease;
}

.menu_icon:hover
{
   background-color: var(--color-text);
   transform: scale(1.12);
}

#div_menu_reduced td[height="30"]
{
   border-radius: 8px;
   transition: background-color 0.18s ease;
}

#div_menu_reduced td[height="30"]:hover
{
   background-color: color-mix(in srgb, var(--color-button) 14%, transparent);
}

#div_menu_full table
{
   width: 100%;
}

#div_menu_full a.menu_green
{
   display: block;
   box-sizing: border-box;
   height: 28px;
   line-height: 28px;
   border-radius: 8px;
   margin-left: -5px;
   margin-right: 5px;
   padding-left: 5px;
   padding-right: 8px;
   transition: color 0.18s ease, background-color 0.18s ease, padding-left 0.18s ease;
}

#div_menu_full a.menu_green:hover,
#div_menu_full a.menu_green.menu_green_hover
{
   background-color: color-mix(in srgb, var(--color-button) 14%, transparent);
   padding-left: 11px;
}

@media (prefers-reduced-motion: reduce)
{
   .menu_icon,
   #div_menu_reduced td[height="30"],
   #div_menu_full a.menu_green
   {
      transition: none;
   }
   .menu_icon:hover
   {
      transform: none;
   }
   #div_menu_full a.menu_green:hover,
   #div_menu_full a.menu_green.menu_green_hover
   {
      padding-left: 5px;
   }
}

/*-------*/
/* Table */
/*-------*/
table, th, td
{
   background-color: transparent;
   border: 0px solid #000000;
}

tr.menu_left
{
   height: 30px;
   valign:top;
}

.color_app_list
{
   transition: background 0.15s;
}
.color_app_list:hover
{
   background-color: var(--color-button);
   cursor: pointer;
}

.color_app_background
{
   background-color: var(--color-button);
}

.panel
{
   background-color: var(--color-panel);
   background-image: linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0));
   padding: 10px;
   width: 100%;
   height: 1%;
   border: 1px solid rgba(0,0,0,0.06);
   border-radius: 10px;
   box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
   transition: box-shadow 0.25s ease, border-color 0.25s ease;
   animation: panel_appear 0.35s ease-out both;
}

.panel:hover
{
   border-color: rgba(0,0,0,0.10);
   box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 10px 24px rgba(0,0,0,0.10);
}

.panel .panel
{
   box-shadow: none;
   animation: none;
}

@keyframes panel_appear
{
   from { opacity: 0; transform: translateY(8px); }
   to   { opacity: 1; transform: translateY(0);   }
}

@media (prefers-reduced-motion: reduce)
{
   .panel
   {
      animation: none;
      transition: none;
   }
}

@media print
{
   .panel
   {
      animation: none;
      box-shadow: none;
   }
}

.panel_50
{
   background-color: white;
   padding: 10px;
   width: 50%;
   height: 1%;
   border: 1px solid white;
   border-radius: 5px;
}

.panel_customer
{
   background-color: var(--color-panel);
   padding: 10px;
   height: 100%;
   border: 1px solid var(--color-panel);
   border-radius: 5px;
}

.panel_field
{
   background-color:#F7F7F7;
   border-bottom:1px solid var(--color-button);
   border-radius: 5px;
   display: block;
   vertical-align: top;
}

.panel_field_min50px
{
   background-color:#F7F7F7;
   border-bottom:1px solid var(--color-button);
   border-radius: 5px;
   display: block;
   vertical-align: top;
   min-height: 50px;
   height: auto;
   _height: 50px;
   width: 100%;
}

/*--------------*/
/* PROGRESS BAR */
/*--------------*/
.progress-container
{
  width: 100%;
  max-width: 300px;
  height: 25px;
  background-color: #eee;
  border-radius: 12.5px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
  position: relative;
  font-family: sans-serif;
}
.progress-bar
{
  height: 100%;
  background: linear-gradient(to right, #4caf50, var(--color-button));
  transition: width 0.3s ease;
}
.progress-label
{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: gray;
  font-weight: bold;
  font-size: 14px;
  pointer-events: none;
}
.progress-text
{
  margin-top: 6px;
  font-size: 14px;
  text-align: center;
  color: #333;
}

/*------*/
/* Text */
/*------*/
h1
{
   font-size: 14px;
   font-weight: bold;
   color: var(--color-button);
   margin-top: 3px;
   margin-bottom: 3px;
}

h2 
{
   font-size: 14px;
   font-weight: bold;
   color: var(--color-text);
   margin-top: 3px;
   margin-bottom: 3px;
   text-align:left;
}

h3 
{
   font-size: 14px;
   font-weight: normal;
   color: var(--color-button);
   margin-top: 3px;
   margin-bottom: 3px;
   margin-left: 3px;
}

h4
{
   font-size: 14px;
   font-weight: normal;
   color: var(--color-text);
   margin-top: 3px;
   margin-bottom: 3px;
   margin-left: 3px;
}

h5
{
   font-size: 14px;
   font-weight:lighter;
   color: var(--color-text);
   margin-top: 3px;
   margin-bottom: 3px;
   margin-left: 3px;
}

h6
{
   font-size: 9px;
   color: var(--color-text);
   margin-top: 1px;
   margin-bottom: 1px;
}

p
{
   font-size: 14px;
   font-weight: normal;
   color: var(--color-text);
}

.h_bottom
{
   font-size: 14px;
   font-weight:lighter;
   color: var(--color-panel);
   margin-top: 3px;
   margin-bottom: 3px;
   margin-left: 3px;
}

/*------*/
/* Date */
/*------*/
.calendar_date {
   position: relative;
   border: 1px solid var(--color-button);
   border-radius: 5px;
   background-color: #F1F2F2;
   height: auto;
   width: 98%;
}

/*------------*/
/* SMARTPHONE */
/*------------*/
.show-if-smartphone { display: none !important;  }
.hide-if-smartphone { display: inline-block !important; }

@media only screen and (max-width: 980px)
{
   .show-if-smartphone { display: inline-block !important; }
   .hide-if-smartphone { display: none !important;  }

   #div_login_front          {visibility:visible; position:absolute; height:auto;                  width:calc(100% - 20px);  left:10px;  top:40px;   z-index:4; border:0px solid #000000; padding-bottom: 50px;}

   #div_main_dashboard       {visibility:visible; position:absolute; height:auto;                  width:calc(100% - 55px);  left:50px;  top:7px;    z-index:5; border:0px solid #000000;                                  padding-bottom:70px; }

   #div_main_menu_full       {visibility:visible; position:fixed;    height:auto; min-height:50px; width:calc(100% - 55px);  left:50px;  top:7px;    z-index:4; border:0px solid #000000; }
   #div_main_text_full       {visibility:visible; position:relative; height:auto;                  width:calc(100% - 55px);  left:50px;  top:70px;   z-index:3; border:0px solid #000000;                                 padding-bottom:70px;  }
                          
   #div_main_menu_left       {visibility:visible; position:fixed;    height:auto;                  width:calc(100% - 46px);  left:40px;  top:70px;   z-index:5; border:1px solid var(--color-button); border-radius: 5px; background-color: var(--color-panel);}
   #div_main_menu_right      {visibility:visible; position:fixed;    height:auto; min-height:50px; width:calc(100% - 55px);  left:50px;  top:7px;    z-index:4; border:0px solid #000000; }
   #div_main_text_right      {visibility:visible; position:relative; height:auto;                  width:calc(100% - 55px);  left:50px;  top:7px;    z-index:3; border:0px solid #000000; padding-bottom:70px; }

   #div_outlook_summary      {visibility:visible; position:absolute; height:auto;                  width:calc(100% - 55px);  left:50px;  top:70px;   z-index:4; border:0px solid #000000; }
   #div_outlook_text         {visibility:visible; position:absolute; height:auto;                  width:calc(100% - 55px);  left:50px;  top:320px;  z-index:3; border:0px solid #000000;                                 padding-bottom:70px; }

   .div_col_25
   {
      float: none;
      width: 100%;
   }

   .div_col_30
   {
      float: none;
      width: 100%;
   }

   .div_col_15
   {
      float: none;
      width: 100%;
   }

   .div_col_3
   {
      float: none;
      width: 100%;
   }

   h2 
   {
      font-size: 14px;
      font-weight: bold;
      color: color: var(--color-text);
      margin-top: 3px;
      margin-bottom: 3px;
      text-align:center;
   }

   .input
   { 
      border-top: 0px solid #000000;
      border-right: 0px solid #000000;
      border-left: 0px solid #000000;
      border-bottom: 1px solid var(--color-button);
      border-radius: 5px;
      background-color: var(--color-input);
      font-size: 14px;
      font-weight: normal;
      color: var(--color-input-text);
      display: inline-block;
      width: 100%;
      padding:5px;
   }

   .input_radio
   { 
      border-top: 0px solid #000000;
      border-right: 0px solid #000000;
      border-left: 0px solid #000000;
      border-bottom: 1px solid var(--color-button);
      border-radius: 5px;
      background-color: var(--color-input);
      font-size: 14px;
      font-weight: normal;
      color: var(--color-text);
      display: inline-block;
      width: auto;
      padding:5px;
      margin-right: 10px;
      transform: scale(1.5);
   }

   .input_checkbox
   { 
      border-top: 0px solid #000000;
      border-right: 0px solid #000000;
      border-left: 0px solid #000000;
      border-bottom: 1px solid var(--color-button);
      border-radius: 5px;
      background-color: var(--color-button);
      font-size: 14px;
      font-weight: normal;
      color: var(--color-text);
      display: inline-block;
      width: auto;
      padding:5px;
      margin-right: 10px;
      transform: scale(1.5);
   }

   .img
   {
      width: 10px;
   }

   .button
   {
      width: 100%;
      max-width: 100%;
      margin-bottom: 6px;
   }

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

   a.sub_menu {
      display: block;
      background-color: var(--color-panel);
      border: 1px solid var(--color-panel);
      border-radius: 5px;
      padding: 5px;
      width: calc(100% - 125px);
      height: auto;
      text-align: center;
      vertical-align: middle;
      font-size: 14px;
      font-weight: normal;
      color: var(--color-button);
      text-decoration:none;
      }

   a.button_return
   {
      border: 0px solid #000000;
      font-size: 12px;
      font-weight: normal;
      color: var(--color-text);
      text-decoration: underline;
      text-decoration-color: transparent;
      width: 100%;
      max-width: 100%;
      line-height: 50px;
   }

   .panel
   {
      table-layout: fixed;
   }

   .panel_mobile
   {
      width: calc(100% - 20px);
      height: 1%;
   }

   .tr_mobile
   {
      display: flex;
      flex-direction: column;
      text-wrap: wrap;
      background-color: white;
      padding: 10px;
      width: 100%;
      height: 1%;
      border: 1px solid white;
      border-radius: 5px;
      table-layout: fixed;
   }

   .tr_mobile + .tr_mobile
   {
      margin-top: 10px;
   }

   .td_mobile
   {
      word-wrap: break-word;
      overflow-wrap: break-word;
      word-break: break-all;
   }

   td.td_block
   {
      width: 100%;
      display: block;
      padding-bottom: 10px;
   }

   td.td_block_align
   {
      align: center;
   }

   td.td_button_align
   {
      text-align:center;
   }
}


/*---------------------------------*/
/* Tiles of the sub-menu of a client */
/*---------------------------------*/
/*-----------------------------------------*/
/* Personal note, under the name of an element in a list of the lexicon */
/*-----------------------------------------*/
.personal_note
{
   display: inline-block;
   max-width: 100%;
   overflow-wrap: anywhere;
   margin-left: 20px;
   margin-top: 2px;
   padding-bottom: 3px;
   font-size: 12px;
   font-style: italic;
   line-height: 1.35;
   border-bottom: 1px solid color-mix(in srgb, var(--color-text) 25%, transparent);
}

/*-----------------------------------------*/
/* Buttons of a screen, in the top right corner of its first panel */
/*-----------------------------------------*/
.panel_actions
{
   position: absolute;
   right: 12px;
   top: 12px;
   z-index: 5;
   text-align: right;
}

/*-----------------------------------------*/
/* Chip : a small filter, clicked to switch it on or off */
/*-----------------------------------------*/
.chips_row
{
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 6px;
   margin-left: 8px;
   vertical-align: middle;
}

/* Telephone : les pastilles d un filtre se lisent l une sous l autre, centrees comme le reste */
.chips_column
{
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-left: 0;
   margin-top: 6px;
}

/* Historique : les etapes d une nouveaute, en puces discretes */
.history_steps
{
   margin: 6px 0;
   padding-left: 24px;
}

.history_steps li::marker
{
   color: var(--color-button);
}

/* Dans les colonnes du haut, chaque titre liste respire */
.history_shortcut .history_steps li + li
{
   margin-top: 8px;
}

/* Lexique sur telephone : les pastilles passent sous la recherche, avec de l air, et se replient
   au lieu de sortir de l ecran */
.chips_row_search
{
   display: flex;
   margin-left: 0;
   margin-top: 8px;
}

a.chip_filter
{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 30px;
   padding: 0 13px;
   vertical-align: middle;
   border: 1px solid rgba(0,0,0,0.10);
   border-radius: 999px;
   background-color: var(--color-panel);
   color: var(--color-text);
   font-size: 13px;
   line-height: 1.2;
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
   transition: border-color 0.2s ease, background-color 0.2s ease;
}

a.chip_filter:hover
{
   border-color: var(--color-button);
   text-decoration: none;
}

a.chip_filter.chip_filter_active
{
   border: 1px solid var(--color-button);
   background-color: color-mix(in srgb, var(--color-button) 14%, var(--color-panel));
   font-weight: bold;
}

a.chip_filter .tile_icon
{
   width: 17px;
   height: 17px;
   margin-bottom: 0;
   flex: none;
}

.tiles_customer.tiles_few
{
   justify-content: flex-start;
}

.tiles_customer.tiles_few a.tile_customer
{
   flex: 0 1 180px;
}

.tiles_customer
{
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

a.tile_customer
{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   box-sizing: border-box;
   flex: 1 1 0;
   min-width: 104px;
   min-height: 92px;
   padding: 12px 6px;
   border: 1px solid rgba(0,0,0,0.06);
   border-radius: 10px;
   background-color: var(--color-panel);
   box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
   text-align: center;
   font-size: 13px;
   line-height: 1.2;
   color: color-mix(in srgb, var(--color-text) 72%, transparent);
   text-decoration: none;
   transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

a.tile_customer:hover
{
   border-color: var(--color-button);
   color: var(--color-button);
}

a.tile_customer.tile_customer_active
{
   border: 2px solid var(--color-button);
   background-color: color-mix(in srgb, var(--color-button) 10%, var(--color-panel));
   color: var(--color-button);
   font-weight: bold;
}

a.tile_customer.tile_customer_warning
{
   border-color: color-mix(in srgb, orange 45%, transparent);
   background-color: color-mix(in srgb, orange 10%, var(--color-panel));
   color: orange;
}

a.tile_customer.tile_customer_warning.tile_customer_active
{
   border: 2px solid orange;
   background-color: color-mix(in srgb, orange 18%, var(--color-panel));
   color: orange;
}

.tile_icon
{
   width: 26px;
   height: 26px;
   margin-bottom: 8px;
   display: block;
   background-color: currentColor;
   -webkit-mask: var(--icon) no-repeat center / contain;
   mask: var(--icon) no-repeat center / contain;
}

.tile_icon_anamnesis { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1'/%3E%3Cpath d='M9 10h6M9 14h6M9 18h3'/%3E%3C/svg%3E"); background-color: #4a90d9; }
.tile_icon_consultations { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4c0 9-5 14-12 14-1 0-2-.2-3-.5C4 10 11 4 20 4Z'/%3E%3Cpath d='M5 20c2-5 6-8 11-10'/%3E%3C/svg%3E"); background-color: #6aa84f; }
.tile_icon_evaluations { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20v-8M12 20V5M19 20v-5'/%3E%3C/svg%3E"); background-color: #e08a2e; }
.tile_icon_history { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7.5V12l3.5 2'/%3E%3C/svg%3E"); background-color: #3fa9a6; }
.tile_icon_invoices { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10v18l-2.5-1.5L12 21l-2.5-1.5L7 21Z'/%3E%3Cpath d='M10 8h4M10 12h4'/%3E%3C/svg%3E"); background-color: var(--tile-invoices); }
.tile_icon_question { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.2 2.4c-.6.2-.9.7-.9 1.3v.6'/%3E%3Cpath d='M12 16.8h.01'/%3E%3C/svg%3E"); background-color: #4a90d9; }
.tile_icon_remarks { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h9l5 5v11H5Z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M8 13h7M8 16h4'/%3E%3C/svg%3E"); background-color: #d4b12a; }
.tile_icon_files { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 8.5 9.5 16a2.5 2.5 0 0 0 3.5 3.5l7.5-7.5a4.5 4.5 0 0 0-6.4-6.4L6.4 13.2a6.5 6.5 0 0 0 9.2 9.2'/%3E%3C/svg%3E"); background-color: var(--tile-files); }
.tile_icon_lpe { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-3h1a2 2 0 0 0 2-2v-2h2l-2.4-4.2A7 7 0 1 0 8 14.5V21'/%3E%3Ccircle cx='13' cy='9' r='1.2'/%3E%3C/svg%3E"); background-color: #a64d9e; }
.tile_icon_add { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E"); background-color: var(--color-button); }
.tile_icon_pathology { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h3.5l2-5.5 3.5 11 2.5-7 1.5 1.5H21'/%3E%3C/svg%3E"); background-color: #c8553d; }
.tile_icon_systems { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 3 8l9 5 9-5-9-5Z'/%3E%3Cpath d='m3 12 9 5 9-5'/%3E%3Cpath d='m3 16 9 5 9-5'/%3E%3C/svg%3E"); background-color: #4a90d9; }
.tile_icon_acupuncture { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4 7 17'/%3E%3Cpath d='M15 4h5v5'/%3E%3Ccircle cx='6' cy='18' r='2.2'/%3E%3C/svg%3E"); background-color: #3fa9a6; }
.tile_icon_mtc { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m12 5 4.8 3.5-1.8 5.6H9l-1.8-5.6L12 5Z'/%3E%3C/svg%3E"); background-color: #a64d9e; }
.tile_icon_bachflowers { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='6.5' r='3'/%3E%3Ccircle cx='12' cy='17.5' r='3'/%3E%3Ccircle cx='6.5' cy='12' r='3'/%3E%3Ccircle cx='17.5' cy='12' r='3'/%3E%3C/svg%3E"); background-color: #e05a8a; }
.tile_icon_oils { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3s6 6.4 6 10.4a6 6 0 0 1-12 0C6 9.4 12 3 12 3Z'/%3E%3C/svg%3E"); background-color: #6aa84f; }
.tile_icon_maps { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); background-color: #e08a2e; }
.tile_icon_products { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5 12.5 3.5H5v7.5l8 8a2 2 0 0 0 2.8 0l4.7-4.7a2 2 0 0 0 0-2.8Z'/%3E%3Ccircle cx='8.5' cy='7.5' r='1.3'/%3E%3C/svg%3E"); background-color: #6aa84f; }
.tile_icon_quotes { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6Z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6M9 16h4'/%3E%3C/svg%3E"); background-color: #4a90d9; }
.tile_icon_notes { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h9l5 5v11H5Z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M8 13h7M8 16.5h5'/%3E%3C/svg%3E"); background-color: var(--color-button); }
.tile_icon_design { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1.7 0 2-1.2 1.2-2-.8-.9-.5-2 .8-2H17a4 4 0 0 0 4-4c0-5-4-10-9-10Z'/%3E%3Ccircle cx='8' cy='11' r='1'/%3E%3Ccircle cx='12' cy='8' r='1'/%3E%3Ccircle cx='16' cy='11' r='1'/%3E%3C/svg%3E"); background-color: var(--tile-design); }
.tile_icon_persons { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M3.5 20a5.5 5.5 0 0 1 11 0'/%3E%3Cpath d='M16 5.2a3.2 3.2 0 0 1 0 5.6'/%3E%3Cpath d='M17.5 14.5A5.5 5.5 0 0 1 20.5 20'/%3E%3C/svg%3E"); background-color: var(--tile-persons); }
.tile_icon_agenda { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17'/%3E%3Cpath d='M8 3.5v3M16 3.5v3'/%3E%3Cpath d='M7.5 14h3M13.5 14h3'/%3E%3C/svg%3E"); background-color: var(--tile-agenda); }
.tile_icon_web { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.5 12h17'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18a14 14 0 0 1 0-18Z'/%3E%3C/svg%3E"); background-color: #e08a2e; }
.tile_icon_profile { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); background-color: #4a90d9; }
.tile_icon_abonment { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M7 14.5h3'/%3E%3C/svg%3E"); background-color: #6aa84f; }
.tile_icon_sponsor { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='9' width='17' height='11' rx='1.5'/%3E%3Cpath d='M3.5 13h17'/%3E%3Cpath d='M12 9v11'/%3E%3Cpath d='M12 9C10 5 6 5.5 6.5 8S10 9 12 9Z'/%3E%3Cpath d='M12 9c2-4 6-3.5 5.5-1S14 9 12 9Z'/%3E%3C/svg%3E"); background-color: #e05a8a; }
.tile_icon_download { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v11'/%3E%3Cpath d='m7.5 10.5 4.5 4.5 4.5-4.5'/%3E%3Cpath d='M4.5 19.5h15'/%3E%3C/svg%3E"); background-color: #3fa9a6; }
.tile_icon_password { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='12' r='3.5'/%3E%3Cpath d='M11.5 12H20'/%3E%3Cpath d='M17 12v3'/%3E%3Cpath d='M20 12v2.5'/%3E%3C/svg%3E"); background-color: #a64d9e; }
.tile_icon_logoff { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5H6.5A1.5 1.5 0 0 0 5 6v12a1.5 1.5 0 0 0 1.5 1.5H14'/%3E%3Cpath d='m15.5 8.5 3.5 3.5-3.5 3.5'/%3E%3Cpath d='M19 12h-8'/%3E%3C/svg%3E"); background-color: #c8553d; }
.tile_icon_pets { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='9' r='2'/%3E%3Ccircle cx='12' cy='7' r='2'/%3E%3Ccircle cx='17' cy='9' r='2'/%3E%3Cellipse cx='12' cy='16.5' rx='4.5' ry='3.5'/%3E%3C/svg%3E"); background-color: #b07d3b; }

@media only screen and (max-width: 980px)
{
   a.tile_customer
   {
      min-width: 88px;
      min-height: 86px;
      font-size: 12px;
   }
}

/*-----------------------------------------*/
/* Tiles of the dates in the file of a client */
/*-----------------------------------------*/
.tiles_dates
{
   display: grid;
   grid-template-columns: 1fr;
   gap: 8px;
}

a.small_sub_menu.tile_date
{
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   gap: 10px;
   box-sizing: border-box;
   min-width: 0;
   min-height: 46px;
   overflow: hidden;
   margin: 0;
   padding: 8px 12px;
   border: 1px solid rgba(0,0,0,0.06);
   border-radius: 10px;
   background-color: var(--color-panel);
   box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
   text-align: left;
}

a.small_sub_menu.tile_date:hover
{
   border-color: var(--color-button);
}

a.small_sub_menu.tile_date.small_sub_menu_active
{
   border: 2px solid var(--color-button);
   background-color: color-mix(in srgb, var(--color-button) 10%, var(--color-panel));
}

a.small_sub_menu.tile_date.tile_add
{
   min-height: 56px;
   justify-content: center;
   border: 1px dashed color-mix(in srgb, var(--color-button) 55%, transparent);
   background-color: color-mix(in srgb, var(--color-button) 6%, var(--color-panel));
   box-shadow: none;
   font-weight: bold;
}

a.small_sub_menu.tile_date.tile_add:hover
{
   border-style: solid;
   background-color: color-mix(in srgb, var(--color-button) 12%, var(--color-panel));
}

.tile_date_line
{
   display: flex;
   align-items: center;
   gap: 6px;
   flex: none;
}

a.small_sub_menu.tile_date .tile_icon
{
   width: 18px;
   height: 18px;
   margin-bottom: 0;
   flex: none;
}

/*-----------------------------------------*/
/* Page d aide : la video phare, les raccourcis, les nouveautes et les videos */
/*-----------------------------------------*/
.history_hero .history_hero_video
{
   width: 55%;
   padding-right: 14px;
}

/* Les trois raccourcis, cote a cote */
.history_shortcuts
{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
   width: 100%;
   /* Six fois l espace d une ligne, qui separe les blocs ailleurs dans la page */
   margin-bottom: 60px;
}

.history_shortcut
{
   display: block;
   box-sizing: border-box;
   padding: 14px 16px;
   border: 1px solid rgba(0,0,0,0.06);
   border-radius: 10px;
   background-color: var(--color-panel);
   box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
   color: var(--color-text);
   text-decoration: none;
   transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.history_shortcut h4
{
   margin: 8px 0 4px 0;
   font-weight: bold;
   color: var(--color-button);
}

.history_shortcut h5
{
   margin: 0;
   color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Les questions frequentes : la reponse reste pliee tant qu on ne clique pas la question */
.history_faq
{
   display: flex;
   flex-direction: column;
}

.history_faq_list
{
   margin-top: 12px;
}

.history_faq_item
{
   border-top: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
   padding: 8px 0;
}

.history_faq_item summary
{
   color: var(--color-text);
   font-size: 13px;
   font-weight: bold;
   cursor: pointer;
   list-style: none;
}

.history_faq_item summary::-webkit-details-marker
{
   display: none;
}

/* Le signe devant la question dit si la reponse est pliee ou depliee */
.history_faq_item summary::before
{
   content: "+";
   display: inline-block;
   width: 14px;
   color: var(--color-button);
   font-weight: bold;
}

.history_faq_item[open] summary::before
{
   content: "\2212";
}

.history_faq_item h5
{
   margin: 6px 0 2px 14px;
}

.history_faq > h5
{
   margin: 12px 0 0 0;
}

/* Le bandeau qui propose d installer l application */
.history_install
{
   display: flex;
   align-items: center;
   gap: 16px;
   height: auto;
   /* Sans cela, la marge interieure et la bordure s ajoutent aux 100% du panneau */
   box-sizing: border-box;
   border: 2px solid var(--color-button);
   background-color: color-mix(in srgb, var(--color-button) 8%, var(--color-panel));
}

.history_install .tile_icon
{
   flex: none;
   width: 34px;
   height: 34px;
   margin: 0;
   background-color: var(--color-button);
}

.history_install_text
{
   flex: 1 1 auto;
   min-width: 0;
}

.history_install_text h1
{
   margin: 0 0 4px 0;
}

.history_install_text h5
{
   margin: 0;
   color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Ce que la version telephone ne montre pas : dit en plus discret, sous le reste */
.history_install_note
{
   display: flex;
   align-items: center;
   gap: 6px;
   margin-top: 6px !important;
   font-style: italic;
}

.history_install_note .msg_icon
{
   flex: none;
   width: 16px;
   height: 16px;
}
.history_install .button
{
   flex: none;
}

@media only screen and (max-width: 980px)
{
   .history_install
   {
      flex-wrap: wrap;
   }
}
/* Le formulaire pour nous ecrire, sous le titre du bandeau */
.history_contact
{
   display: block;
   margin-top: 14px;
}

.history_contact h4
{
   margin: 0 0 4px 0;
   color: var(--color-button);
   font-weight: bold;
}

.history_contact h5
{
   margin: 0 0 8px 0;
   color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.history_contact textarea
{
   box-sizing: border-box;
   width: 100%;
   margin-bottom: 8px;
}

.history_contact_error
{
   display: flex;
   align-items: center;
   gap: 6px;
   margin: 0 0 6px 0;
   color: #d93025;
}
.history_faq > h5 a
{
   color: var(--color-button);
   font-weight: bold;
   text-decoration: none;
}
/* Les couleurs des tuiles : l icone, et la pastille du theme qui va avec */
:root
{
   --tile-agenda: #3fa9a6;
   --tile-persons: #4a90d9;
   --tile-invoices: #c8553d;
   --tile-files: #7d8899;
   --tile-design: #a64d9e;
}

/* La recherche respire sous les annees, et porte de quoi effacer a sa droite */
.history_search_row
{
   padding-top: 18px;
}

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

.history_search_row .bar_search input
{
   flex: 1 1 200px;
   min-width: 150px;
}

a.chip_filter.history_clear
{
   flex: none;
   color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

a.chip_filter.history_clear:hover
{
   border-color: var(--color-button);
   color: var(--color-button);
}
/* Les pastilles de theme, dans la couleur de la tuile qui filtre ce theme */
.history_theme_all       { --tag-color: var(--color-button); }
.history_theme_agenda    { --tag-color: var(--tile-agenda); }
.history_theme_customers { --tag-color: var(--tile-persons); }
.history_theme_billing   { --tag-color: var(--tile-invoices); }
.history_theme_lexicon   { --tag-color: var(--tile-files); }
.history_theme_comfort   { --tag-color: var(--tile-design); }

.history_tags
{
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
   margin: 4px 0 10px 0;
}

a.history_tag
{
   border-radius: 999px;
   padding: 2px 10px;
   border: 1px solid color-mix(in srgb, var(--tag-color) 35%, transparent);
   background-color: color-mix(in srgb, var(--tag-color) 12%, transparent);
   color: var(--tag-color);
   font-size: 11px;
   font-weight: bold;
   text-decoration: none;
   white-space: nowrap;
   transition: background-color 0.18s ease;
}

a.history_tag:hover
{
   background-color: color-mix(in srgb, var(--tag-color) 24%, transparent);
}

/* La tuile du theme porte la meme couleur que ses pastilles */
a.tile_customer.history_theme:hover
{
   border-color: var(--tag-color);
   color: var(--tag-color);
}

a.tile_customer.history_theme.tile_customer_active
{
   border: 2px solid var(--tag-color);
   background-color: color-mix(in srgb, var(--tag-color) 10%, var(--color-panel));
   color: var(--tag-color);
}
/* La fenetre des nouveautes, a la premiere arrivee sur le tableau de bord */
.splash_back
{
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 10;
   background-color: rgba(0,0,0,0.55);
}

.splash_front
{
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 11;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 16px;
   box-sizing: border-box;
   overflow: auto;
}

.splash_panel
{
   width: 520px;
   max-width: 100%;
   height: auto;
   box-sizing: border-box;
}

.splash_panel h1
{
   margin: 0 0 10px 0;
}

.splash_panel .history_steps li
{
   margin-bottom: 8px;
}

.splash_panel h5
{
   margin: 10px 0 0 0;
   color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.splash_buttons
{
   margin-top: 16px;
   justify-content: center;
}
/* Les trucs et astuces : une astuce a la fois, un compteur, des fleches et des points */
.history_tips
{
   display: flex;
   flex-direction: column;
}

.history_tips_head
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
}

.history_tips_head h4
{
   margin: 0;
}

.history_tips_count
{
   flex: none;
   border-radius: 999px;
   padding: 3px 10px;
   background-color: color-mix(in srgb, var(--color-button) 14%, transparent);
   color: var(--color-button);
   font-size: 12px;
   font-weight: bold;
}

/* Les astuces se superposent : elles occupent toutes la meme case de la grille */
.history_tips_track
{
   display: grid;
   margin-top: 12px;
}

.history_tip
{
   grid-area: 1 / 1;
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.35s ease, visibility 0.35s;
}

.history_tip_on
{
   visibility: visible;
   opacity: 1;
}

.history_tip_icon
{
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   border-radius: 13px;
   background-color: color-mix(in srgb, var(--color-button) 12%, transparent);
   font-size: 20px;
   line-height: 1;
}

.history_tips .history_tip h4
{
   margin: 10px 0 4px 0;
   color: var(--color-text);
   font-weight: bold;
}

.history_tips .history_tip h5
{
   margin: 0;
}

.history_tips_nav
{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-top: auto;
   padding-top: 14px;
}

.history_tips_arrow
{
   flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   border: 1px solid var(--color-button);
   color: var(--color-button);
   font-weight: bold;
   cursor: pointer;
   user-select: none;
   transition: background-color 0.18s ease, color 0.18s ease;
}

.history_tips_arrow:hover
{
   background-color: var(--color-button);
   color: var(--color-button-text);
}

.history_tips_dots
{
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 5px;
}

.history_tips_dots span
{
   width: 6px;
   height: 6px;
   border-radius: 999px;
   background-color: color-mix(in srgb, var(--color-text) 25%, transparent);
   cursor: pointer;
   transition: width 0.3s ease, background-color 0.3s ease;
}

.history_tips_dots span.history_tips_dot_on
{
   width: 18px;
   background-color: var(--color-button);
}
/* Les etapes pour demarrer : un numero, un titre, et ce qu il y a a faire */
.history_start
{
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin-top: 8px;
}

.history_start_step
{
   display: flex;
   align-items: flex-start;
   gap: 10px;
}

.history_start_num
{
   flex: none;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
   border-radius: 7px;
   background-color: var(--color-button);
   color: var(--color-button-text);
   font-size: 13px;
   font-weight: bold;
   line-height: 1;
}

.history_start_text
{
   min-width: 0;
}

.history_shortcut .history_start_text h4
{
   margin: 0 0 2px 0;
   color: var(--color-text);
   font-weight: bold;
}

.history_shortcut .history_start_text h5
{
   margin: 0;
}
/* Le bandeau qui annonce une colonne : court, et son titre se voit */
.history_title
{
   display: flex;
   align-items: center;
   box-sizing: border-box;
   width: 100%;
   padding: 10px 16px;
}

.history_title h1
{
   margin: 0;
   font-size: 20px;
   line-height: 1.3;
}

/* Le titre de la page, en evidence a cote de la video */
.history_hero .history_hero_text h1
{
   margin-top: 0;
   font-size: 26px;
   line-height: 1.25;
}
/* Dans une grille, le « height: 1% » des panneaux se calcule sur la hauteur de la rangee :
   ici, chaque panneau ne fait que la hauteur de ce qu il contient */
.history_body .panel,
.history_body .news_item .panel,
.history_title
{
   height: auto;
}
/* Les titres de la derniere version, cliquables dans leur raccourci */
.history_shortcut li a
{
   color: var(--color-text);
   text-decoration: none;
}

.history_shortcut li a:hover
{
   color: var(--color-button);
   text-decoration: underline;
}

/* La barre de recherche et ses filtres, en tete de la colonne des nouveautes */
.history_filters
{
   padding: 8px 10px;
}

.history_filters .tiles_customer
{
   gap: 6px;
   margin: 6px 0;
}

.history_filters a.tile_customer
{
   min-height: 0;
   padding: 8px 6px;
}
/* Les nouveautes a gauche, les videos a droite */
.history_body
{
   display: grid;
   grid-template-columns: 3fr 1fr;
   gap: 16px;
   align-items: start;
   width: 100%;
}

.history_news,
.history_videos
{
   min-width: 0;
}

.video_cards
{
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.video_card
{
   box-sizing: border-box;
   padding: 10px 12px 12px 12px;
   border: 1px solid rgba(0,0,0,0.06);
   border-radius: 10px;
   background-color: var(--color-panel);
   box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
}

.video_card h4
{
   margin: 8px 0 2px 0;
   font-weight: bold;
}

.video_card h5
{
   margin: 0;
   color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* Une nouveaute masquee par un filtre ne laisse pas de trou : l espacement s en va avec */
.news_item
{
   display: block;
   margin-bottom: 14px;
}

/* Un bloc masque par un filtre non plus */
.news_block
{
   display: block;
}

/* Entre les deux, les quatre colonnes se mettent deux par deux */
@media only screen and (max-width: 1280px) and (min-width: 981px)
{
   .history_shortcuts
   {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media only screen and (max-width: 980px)
{
   .history_shortcuts
   {
      grid-template-columns: 1fr;
   }

   .history_body
   {
      grid-template-columns: 1fr;
   }

   .history_hero .history_hero_video
   {
      display: block;
      width: 100%;
      padding-right: 0;
   }
}

/* Les icones des messages : le dessin est un masque, la couleur vient du fond, comme les tuiles */
.msg_icon
{
   display: inline-block;
   width: 22px;
   height: 22px;
   flex: none;
   vertical-align: middle;
   -webkit-mask: var(--icon) no-repeat center / contain;
   mask: var(--icon) no-repeat center / contain;
}

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

.msg_icon_warning { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.6 3 20h18Z'/%3E%3Cpath d='M12 10.2v4'/%3E%3Cpath d='M12 17v.1' stroke-width='2.4'/%3E%3C/svg%3E"); background-color: #e08a2e; }
.msg_icon_error { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 7.6v5'/%3E%3Cpath d='M12 16v.1' stroke-width='2.4'/%3E%3C/svg%3E"); background-color: #d93025; }
.msg_icon_info { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 11.4v5'/%3E%3Cpath d='M12 7.8v.1' stroke-width='2.4'/%3E%3C/svg%3E"); background-color: #4a90d9; }
.msg_icon_ok { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m8.2 12.2 2.7 2.7 5-5.4'/%3E%3C/svg%3E"); background-color: #6aa84f; }
/* La barre de recherche : une rangee souple. Quand la place manque, les boutons passent
   ensemble sur la ligne suivante plutot que de sortir de l ecran. */
.panel_bar,
.panel_bar > tbody
{
   display: block;
}

.panel_bar > tbody > tr
{
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
}

.panel_bar > tbody > tr > td
{
   display: block;
}

/* La recherche prend la place qui reste, et cede la premiere quand l ecran se reduit */
.panel_bar .bar_search
{
   flex: 1 1 220px;
   min-width: 150px;
}

/* Les boutons restent groupes a droite, sur la premiere ou la deuxieme ligne */
.panel_bar .buttons_inline
{
   margin-left: auto;
}
/* Les boutons d une barre restent sur une ligne : c est la zone de recherche qui se retrecit */
.buttons_inline
{
   white-space: nowrap;
}

/* Petit ecran : les boutons prennent toute la largeur, leur cellule prend donc toute la rangee
   pour qu ils s empilent l un au-dessus de l autre au lieu de sortir de l ecran */
@media only screen and (max-width: 980px)
{
   .panel_bar .buttons_inline
   {
      flex: 1 1 100%;
      margin-left: 0;
      white-space: normal;
   }
}
/* Tableau de bord : le haut de page en rangee reguliere, chaque case a la meme gouttiere */
.dashboard_row
{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 0.8fr;
   gap: 14px;
   align-items: start;
   width: 100%;
}

.dashboard_col
{
   min-width: 0;
}

/* Petit ecran : les cases de la rangee se suivent, une par ligne */
@media only screen and (max-width: 980px)
{
   .dashboard_row
   {
      grid-template-columns: 1fr;
   }
}

/* Un compteur a zero n a pas a crier : il reste lisible, mais discret */
.dashboard_zero
{
   color: color-mix(in srgb, var(--color-text) 55%, transparent);
   font-weight: normal;
}
/* Tableau de bord : les notes en grille reguliere ; la couleur choisie devient un lisere */
.postits_grid
{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 12px;
   width: 100%;
   margin-top: 12px;
}

.postit
{
   --postit-color: var(--color-button);
   --postit-bg: color-mix(in srgb, var(--postit-color) 14%, var(--color-panel));
   position: relative;
   box-sizing: border-box;
   height: 150px;
   overflow: hidden;
   padding: 10px 12px 22px 12px;
   cursor: pointer;
   border: 1px solid rgba(0,0,0,0.10);
   border-left: 5px solid var(--postit-color);
   border-radius: 10px;
   background-color: var(--postit-bg);
   box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
}

.postit:hover
{
   border-color: var(--color-button);
   border-left-color: var(--postit-color);
}

/* Le texte deborde en douceur : un fondu remplace la coupure nette */
.postit::after
{
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   height: 44px;
   pointer-events: none;
   background: linear-gradient(to bottom, transparent, var(--postit-bg));
}

.postit_text
{
   height: 100%;
   overflow: hidden;
   overflow-wrap: anywhere;
   word-break: break-word;
}

.postit_icon
{
   float: left;
   margin: 1px 8px 2px 0;
}

.postit_date
{
   position: absolute;
   right: 10px;
   bottom: 4px;
   z-index: 1;
}

a.postit.postit_add
{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   height: 150px;
   border: 1px dashed color-mix(in srgb, var(--color-button) 55%, transparent);
   background-color: color-mix(in srgb, var(--color-button) 6%, var(--color-panel));
   box-shadow: none;
   font-weight: bold;
   color: var(--color-text);
}

a.postit.postit_add:hover
{
   border-style: solid;
   text-decoration: none;
   background-color: color-mix(in srgb, var(--color-button) 12%, var(--color-panel));
}

a.postit.postit_add::after
{
   content: none;
}
.tile_date_day
{
   display: block;
   font-size: 13px;
   font-weight: bold;
   line-height: 1.2;
}

.tile_date_info
{
   min-width: 0;
   margin-top: 0;
   font-size: 11px;
   font-weight: normal;
   line-height: 1.25;
   color: color-mix(in srgb, var(--color-text) 60%, transparent);
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   overflow-wrap: anywhere;
}