/*-----------------------------------*/
/* 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:40px;              left:0px;    top:0px;    z-index:8; border:0px solid #000000;                                 padding-left:5px;    background-color:white; overflow:hidden; }
#div_menu_full            {visibility:visible; position:fixed;    height:100%;                  width:130px;             left:-130px; top:0px;    z-index:7; border:0px solid #000000; border-right:1px solid #9ACD32; padding-left:5px;    background-color:white; 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 #9ACD32; border-radius: 5px;             background-color: white;}
#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_left_ext   {visibility:visible; position:fixed;    height:auto;                  width:200px;             left:10px;   top:10px;   z-index:5; border:1px solid #9ACD32; border-radius: 5px;             background-color: white;}
#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 #9ACD32;
   border-radius: 5px;
   background-color: #F1F2F2;
   font-size: 14px;
   font-weight: normal;
   color: #2B2B2B;
   padding:5px;
}

.input:focus
{
   outline: none;
   border: 1px solid #9ACD32;
   background-color: #e6fabe;
}

.input_radio
{ 
   border-top: 1px solid transparent;
   border-right: 1px solid transparent;
   border-left: 1px solid transparent;
   border-bottom: 1px solid #9ACD32;
   border-radius: 5px;
   background-color: #F1F2F2;
   font-size: 14px;
   font-weight: normal;
   color: #2B2B2B;
   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 #9ACD32;
   border-radius: 5px;
   background-color: #F1F2F2;
   font-size: 14px;
   font-weight: normal;
   color: #2B2B2B;
   padding:5px;
   margin-right: 10px;
   cursor: pointer;
}

.label
{
   font-size: 14px;
   font-weight:lighter;
   color: #5C5F5E;
   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 #9ACD32;
   border-radius: 5px;
   background-color: #9ACD32;
   font-size: 14px;
   font-weight: normal;
   color: white;
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 20px;
   padding-right: 20px;
   cursor: pointer;
}

.button:hover
{ 
   color: #808080;
}

.pointer
{
   cursor: pointer;
}

.attached_file
{
   cursor: pointer;
}

.attached_file:hover
{
   color: #9ACD32;
}

/*-------*/
/* href  */
/*-------*/
a {
   font-size: 14px;
   font-weight: normal;
   color: #808080;
   text-decoration: none;
}

a:hover {
   color: #9ACD32;
}

a.button_return
{ 
   border: 0px solid #000000;
   font-size: 14px;
   font-weight: normal;
   color: #808080;
   text-decoration:none;
}

a.button_return:hover
{ 
   color: #9ACD32;
}

a.sub_menu {
   display: block;
   padding: 10px;
   padding-left: 20px;
   width: 150px;
   height: auto;
   text-align: left;
   vertical-align: center;
   font-size: 14px;
   font-weight: normal;
   color: #9ACD32;
   text-decoration:none;
   }

a.sub_menu:hover
{
   color:#808080;
}

a.sub_menu_customer {
   display: block;
   padding: 10px;
   padding-left: 5px;
   width: 150px;
   height: auto;
   text-align: left;
   vertical-align: center;
   font-size: 14px;
   font-weight: normal;
   color: #9ACD32;
   text-decoration:none;
   }

a.sub_menu_customer_warning {
   display: block;
   background-color: white;
   border: 1px solid white;
   border-radius: 5px;
   padding-right: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
   width: 140px;
   height: auto;
   text-align: center;
   vertical-align: middle;
   font-size: 14px;
   font-weight: normal;
   color: orange;
   text-decoration:none;
   position: relative;
   }

a.sub_menu_customer_warning:before {
   content: "";
   background-image: url('../icones/msg_warning_small.png');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   position: absolute;
   top: 50%;
   left: 0px;
   transform: translateY(-50%);
   width: 24px;
   height: 24px;
}

a.sub_menu_customer:hover
{
   color:#808080;
}

a.small_sub_menu
{
   display: block;
   padding: 10px;
   padding-left: 20px;
   width: 100px;
   height: auto;
   text-align: left;
   vertical-align: center;
   font-size: 14px;
   font-weight: normal;
   color: #9ACD32;
   text-decoration:none;
}

a.small_sub_menu:hover
{
   color:#808080;
}

/*------*/
/* menu */
/*------*/
.menu_green
{
   font-size: 14px;
   font-weight: normal;
   color: #9ACD32;
   text-decoration: none;
}

.menu_green:hover
{
   color: #808080;
}

.menu_green_hover
{
   color: #808080;
}

a.menu_gray
{
   font-size: 14px;
   font-weight: normal;
   color: #808080;
   text-decoration: none;
}

a.menu_gray:hover
{
   color: #9ACD32;
}

a.menu_bottom
{
   font-size: 14px;
   font-weight: normal;
   color: #808080;
   text-decoration: none;
}

a.menu_bottom:hover
{
   color: #9ACD32;
}

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

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

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

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

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

.panel_field
{
   background-color:#F7F7F7;
   border-bottom:1px solid #9ACD32;
   border-radius: 5px;
   display: block;
   vertical-align: top;
}

.panel_field_min50px
{
   background-color:#F7F7F7;
   border-bottom:1px solid #9ACD32;
   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, #9ACD32);
  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: #9ACD32;
   margin-top: 3px;
   margin-bottom: 3px;
}

h2 
{
   font-size: 14px;
   font-weight: bold;
   color: #4D4E4E;
   margin-top: 3px;
   margin-bottom: 3px;
   text-align:left;
}

h3 
{
   font-size: 14px;
   font-weight: normal;
   color: #9ACD32;
   margin-top: 3px;
   margin-bottom: 3px;
   margin-left: 3px;
}

h4
{
   font-size: 14px;
   font-weight: normal;
   color: #808080;
   margin-top: 3px;
   margin-bottom: 3px;
   margin-left: 3px;
}

h5
{
   font-size: 14px;
   font-weight:lighter;
   color: #808080;
   margin-top: 3px;
   margin-bottom: 3px;
   margin-left: 3px;
}

h6
{
   font-size: 9px;
   color: #5C5F5E;
   margin-top: 1px;
   margin-bottom: 1px;
}

p
{
   font-size: 14px;
   font-weight: normal;
   color: #808080;
}

/*------*/
/* Date */
/*------*/
.calendar_date {
   position: relative;
   border: 1px solid #9ACD32;
   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 #9ACD32; border-radius: 5px; background-color: white;}
   #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: #4D4E4E;
      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 #9ACD32;
      border-radius: 5px;
      background-color: #F9FBFA;
      font-size: 14px;
      font-weight: normal;
      color: #2B2B2B;
      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 #9ACD32;
      border-radius: 5px;
      background-color: #F9FBFA;
      font-size: 14px;
      font-weight: normal;
      color: #2B2B2B;
      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 #9ACD32;
      border-radius: 5px;
      background-color: #F9FBFA;
      font-size: 14px;
      font-weight: normal;
      color: #2B2B2B;
      display: inline-block;
      width: auto;
      padding:5px;
      margin-right: 10px;
      transform: scale(1.5);
   }

   .img
   {
      width: 10px;
   }

   .button
   { 
      border: 2px solid #9ACD32;
      border-radius: 5px;
      background-color: #9ACD32;
      font-size: 14px;
      font-weight: normal;
      color: white;
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 20px;
      padding-right: 20px;
      cursor: pointer;
      width: 100%;
      max-width: 100%;
   }

   a {
      font-size: 12px;
      font-weight: normal;
      color: #808080;
      text-decoration: none;
   }

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

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

   .panel
   {
      background-color: white;
      padding: 10px;
      width: 100%;
      height: 1%;
      border: 1px solid white;
      border-radius: 5px;
      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; /* Espace de 10px entre les lignes */
   }

   .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;
   }
}