/* CSS pour le back-office réception
----------------------------------------------------------*/

/* Charte des couleurs  */
:root {
  /* Univers */
  --choix1        : #00a8b5;
  --choix1-dk     : #02949f;
  --choix2        : #e8554b;
  --choix2-dk     : #e15349;
  --choix3        : #6fb447;
  --choix3-dk     : #6c9f46;
  --choix4        : #ca1153;
  --choix4-dk     : #bc0f4d;
  --choix5        : #654fa4;
  --choix5-dk     : #573e91;
  --choix6        : #bd2f89;
  --choix6-dk     : #b22986;

  /* Dégradés de Gris */
  --grey0         : #f8f9fa;
  --grey1         : #f5f5f7;
  --grey2         : #eceff2;
  --grey3         : #e4e7eb;
  --grey4         : #dde1e5;
  --grey5         : #d4dadf;
  --grey6         : #c3cace;
  --grey7         : #b1b9be;
  --grey8         : #a3adb3;
  --grey9         : #93a1a5;
  --grey10        : #839599;
  --grey11        : #798d94;
  --grey12        : #6e8285;
  --grey-text     : #43575a;

  /* Groupe */
  --cuivre        : #c7988e;
  --bronze        : #967444;
  --argent        : #adb8be;
  --or            : #d4af37;
  
  /* Info */
  --info          : #8dd731;
  --bg-info       : #d8e8c1;
  --bg-text-alert : #d1342a;
  --bg-alert      : #e16d60;
  --status1       : #f6a441;
  --status2       : #f66e36;
  --status3       : #8bb9ba;
  --status4       : #659187;
  
  /* fluo */
  --vert-on       : #00ff00;
  --vert-off      : #cbd9c7;
  --rouge-on      : #ff0000;
  --vert-action   : #6fb447;
  
  /* Planning */
  --planning1     : #8dd731;
  --planning2     : #e16d60;
  --planning3     : #6bbebd;
  --planning4     : #eebe2c;
  
  --policeBO      : 'Quicksand', 'Lato', sans-serif;
}

/* Debug */
.debugBO > div, .debugBOM10 > div {
  color: black;
  background-color: var(--bg-alert);
  border: 1px solid var(--bg-text-alert);
  font-size: 1rem;
  font-weight: normal;
  box-sizing: border-box;
}

.debugBOM10 > div {
  margin: 10px;
}

.vert-action { color: var(--vert-action) !important; }
.bg-vert-action { background-color: var(--vert-action); }

.blanc { color: #fff !important; }
.noir { color: #000 !important; }
.grey8 { color: var(--grey8) !important; }
.grey9 { color: var(--grey9) !important; }
.greyText { color: var(--grey-text) !important; }
.alert { color: var(--bg-alert) !important; }
.alertText { color: var(--bg-text-alert) !important; }

.bg-grey0 { background-color: var(--grey0) !important; }
.bg-grey1 { background-color: var(--grey1) !important; }
.bg-grey2 { background-color: var(--grey2) !important; }
.bg-grey3 { background-color: var(--grey3) !important; }
.bg-grey4 { background-color: var(--grey4) !important; }
.bg-grey5 { background-color: var(--grey5) !important; }

.bg-alert { background-color: var(--bg-text-alert); }
.bg-info { background-color: var(--bg-info); }
.bg-vert-off { background-color: var(--vert-off); }

.status1 { color: var(--status1) !important; }
.status2 { color: var(--status2) !important; }
.status3 { color: var(--status3) !important; }
.status4 { color: var(--status4) !important; }
.bg-status1 { background-color: var(--status1) !important; }
.bg-status2 { background-color: var(--status2) !important; }
.bg-status3 { background-color: var(--status3) !important; }
.bg-status4 { background-color: var(--status4) !important; }

.border-grey2 { border: 1px solid var(--grey2) !important; border-radius: 4px; }
.border-grey3 { border: 1px solid var(--grey3) !important; border-radius: 4px; }
.border-grey4 { border: 1px solid var(--grey4) !important; border-radius: 4px; }
.border-grey5 { border: 1px solid var(--grey5) !important; border-radius: 4px; }

/* LED */

.led {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0 3px 0 3px;
  vertical-align: middle;
}

.green-led-on {
  background-color: #ABFF00;
  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #304701 0 -1px 9px, #6fb447 0 2px 12px;
}

.green-led-off {
  background-color: #6fb447;
  opacity: 0.3;
}

.red-led-on {
  background-color: rgba(255, 63, 51, 0.5);
  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #ab2a22 0 -1px 9px, rgba(255, 0, 0, 0.6) 0 2px 12px;
}

.red-led-off {
  background-color: #d1342a;
  opacity: 0.3;
}

.yellow-led-on {
  background-color: #Fe0;
  box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 7px 1px, inset #c70 0 -1px 9px, #F90 0 2px 12px;
}

.yellow-led-off {
  background-color: #ff9900;
  opacity: 0.3;
}


/* BTN */

.btn-tiny, .imgbtn-tiny {
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  line-height: 25px;
  margin: 2px 1px 3px 1px;               
  text-align: center;
  -webkit-appearance: none;
}

.imgbtn-tiny {
  padding: 5px 5px 5px 5px;
  vertical-align: middle;
}

.btn-action, .imgbtn-action {
  box-sizing: border-box;
  width: 30px;
  height: 30px;  
  line-height: 30px;
  text-align: center;
  margin: 4px;
  -webkit-appearance: none;
}

.imgbtn-action:disabled, .imgbtn-medium50:disabled { filter: grayscale(1); box-shadow: none; }

.aspNetDisabled.imgbtn-medium50  
{
  filter: grayscale(1) opacity(0.2); 
  box-shadow: none; 
  color: initial !important; 
  background: initial !important; 
  border: 0 !important; 
  pointer-events: none; 
}

.btn-small, .imgbtn-small, .btn-small-dbl, .btn-small-menu {
  box-sizing: border-box;
  width: 40px;
  height: 40px;  
  /*line-height: 40px;*/
  text-align: center;
  margin: 4px;
  -webkit-appearance: none;
}               

.btn-small {
  padding:0px;
}               

.btn-small-dbl {
  padding: 0px;
  min-width: 70px;
}               

.btn-small-menu {
  width: 170px;
  height: 27px;  
  line-height: 27px;
  text-align: center;
  
  /*font-size: 9pt;
  font-weight: bold;
  color: var(--vert-action);*/
  font-family: var(--policeBO);
  font-size: 9pt; 
  font-weight: 600;
  
  /*color: var(--vert-action);*/
  color: var(--grey-text);
}               

.btn-small-menu:active {
  /*box-shadow:  1px 1px 2px #9b9ea0, 
               -1px -1px 2px #ffffff;*/
  box-shadow: inset 1px 1px 2px #9b9ea0,
              inset -1px -1px 2px #ffffff;
  height: 29px;  
  margin-bottom: 2px;
 }

.imgbtn-small {
  padding: 3px 5px 5px 3px;
  vertical-align: middle;
}

.bandeau50 {
  display:flex;
  box-sizing: border-box;
  height: 50px;  
  padding: 2px 0 0 1px;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  /*margin-top: 5px;*/
}

.btn-medium50, .imgbtn-medium50, .btn-medium50-long, .btn-medium50-menu {
  box-sizing: border-box;
  width: 50px;
  height: 50px;  
  line-height: 50px;
  text-align: center;
  margin: 5px;
  -webkit-appearance: none;
}

.btn-medium50 {
  padding:0px;
}               

.imgbtn-medium50 {
  padding: 10px;
}

.mgLeftAuto {
  margin-left: auto;
}               

.btn-medium50-long {
  width: 115px;
  text-align: left;
}               

.btn-medium50-menu {
  width: 230px;
  height: 40px;
  line-height: 38px;
  
  text-align: center;
  
  font-family: var(--policeBO);
  font-size: 11pt; 
  font-weight: 600;
  
  /*color: var(--vert-action);*/
  color: var(--grey-text);
}               

.btn-medium50-menu:active {
  /*box-shadow:  1px 1px 2px #9b9ea0, 
               -1px -1px 2px #ffffff;*/
  box-shadow: inset 1px 1px 2px #9b9ea0,
              inset -1px -1px 2px #ffffff;
  height: 42px;
  margin-bottom: 3px;
 }

.img-illustration-menu { display: inline-block; width: 100px; height: 67px; border-radius: 4px; }

/*.btn-medium50-long:last-child {
  margin-left: auto;
}*/     

a.btn-medium50-long span {
  display: inline-block;
}               

a.btn-medium50, a.btn-medium50-long {
  text-decoration: none;
  padding: 0 8px 0 8px;
  color: #fff;
}

.btn-medium55 {
  box-sizing: border-box;
  width: 55px;
  height: 55px;  
  line-height: 55px;
  text-align: center;
  margin: 5px;
  -webkit-appearance: none;
}               

.btn-medium60 {
  box-sizing: border-box;
  width: 60px;
  height: 60px;  
  line-height: 60px;
  text-align: center;
  margin: 7px;
  border: 0;
  -webkit-appearance: none;
}               

.btn-home {
  box-sizing: border-box;
  width: 60px;
  height: 60px;  
  line-height: 60px;
  text-align: center;
  margin: 12px 7px 7px 7px;
  padding: 13px 10px 10px 7px;
  border: 0;
  -webkit-appearance: none;
}               

.btn-menu, .imgbtn-menu {
  box-sizing: border-box;
  width: 72px;
  height: 72px;  
  line-height: 72px;
  text-align: center;
  margin: 6px;
  -webkit-appearance: none;
}               
 
.btn-menu {
  padding:0px;
}               

.imgbtn-menu {
  padding: 16px 16px 16px 16px;
}

.imgbtn-menu:active {
  /*box-shadow:  1px 1px 2px #9b9ea0, 
               -1px -1px 2px #ffffff;*/
  box-shadow: inset 1px 1px 2px #9b9ea0,
              inset -1px -1px 2px #ffffff;
  height: 74px;  
  margin-bottom: 3px;
 }

.btn-service {
  box-sizing: border-box;
  width: 90px;
  height: 90px;  
  /*line-height: 50px;*/
  text-align: center;
  margin: 5px;
  -webkit-appearance: none;
}

.btn-service img {
  width: 80px;
  height: 50px;
}               

a.btn-service span {
  display: inline-block;
  font-size: 10pt;
  line-height: 9pt;
  font-weight: normal;
  color: #fff;
}               

a.btn-service {
  text-decoration: none;
  padding: 5px;
  color: #fff;
}

span.suite-service { 
  font-size: 16pt;
  font-weight: bold;
}

a.suite-service { 
  position: absolute;
  
  right: 15px;
  bottom: 15px;
}               

a.link-btn {
  text-decoration: none;
  padding: 0 5px;
}


/* GREY 0 */

.neumorph-out-tiny-grey0 {
  border: 1px solid var(--grey2);
  border-radius: 3px;
  background: var(--grey0);
  box-shadow:  2px 2px 2px #c9cbce, 
               -2px -2px 2px #ffffff;
}               

/* GREY 2 */

.neumorph-out-tiny-grey2 {
  border: 1px solid var(--grey3);
  border-radius: 3px;
  background: var(--grey2);
  box-shadow:  2px 2px 2px #c9cbce, 
               -2px -2px 2px #ffffff;
}               

.neumorph-out-small-grey2 {
  border: 1px solid var(--grey3);
  background: var(--grey2);
  border-radius: 4px;
  box-shadow:  3px 3px 6px #a5a7a9, 
               -3px -3px 6px #ffffff;
}               

.neumorph-out-medium-grey2 {
  border: 1px solid var(--grey3);
  border-radius: 6px;
  background: var(--grey2);
  box-shadow:  5px 5px 7px #a5a7a9, 
               -5px -5px 7px #ffffff;
}               

.link-btn.neumorph-out-medium-grey2:active,
.imgbtn-action.neumorph-out-medium-grey2:active {
  box-shadow: inset 1px 1px 2px #a5a7a9,
              inset -1px -1px 2px #ffffff;
  height: 32px;
  margin-bottom: 2px;
}

.neumorph-out-grey2 {
  border: 1px solid var(--grey3);
  border-radius: 10px;
  background: var(--grey2);
  box-shadow:  5px 5px 7px #a5a7a9, 
               -5px -5px 7px #ffffff;
}               

.neumorph-in-tiny-grey2 {
  border: 1px solid var(--grey3);
  border-radius: 10px;
  background: var(--grey2);
  box-shadow: inset 2px 2px 2px #a5a7a9, 
              inset -2px -2px 2px #ffffff;
}

.neumorph-in-small-grey2 {
  border: 1px solid var(--grey3);
  border-radius: 10px;
  background: var(--grey2);
  box-shadow: inset 3px 3px 6px #a5a7a9, 
              inset -3px -3px 6px #ffffff;
}

.neumorph-in-grey2 {
  border: 1px solid var(--grey3);
  border-radius: 10px;
  background: var(--grey2);
  box-shadow: inset 5px 5px 7px #a5a7a9, 
              inset -5px -5px 7px #ffffff;
}               


/* GREY 4 */

.neumorph-out-tiny-grey4 {
  border: 1px solid var(--grey5);
  border-radius: 3px;
  background: var(--grey4);
  box-shadow:  2px 2px 2px #9b9ea0, 
               -2px -2px 2px #ffffff;
}               

.neumorph-out-small-grey4 {
  border: 1px solid var(--grey5);
  border-radius: 4px;
  background: var(--grey4);
  box-shadow:  3px 3px 6px #9b9ea0, 
               -3px -3px 6px #ffffff;
}               

.neumorph-out-grey4 {
  border: 1px solid var(--grey5);
  border-radius: 10px;
  background: var(--grey4);
  box-shadow: 5px 5px 7px #9b9ea0, 
              -5px -5px 7px #ffffff;
}               

/*.btn-home.neumorph-out-grey4:active {
  box-shadow: inset 1px 1px 2px #9b9ea0,
              inset -1px -1px 2px #ffffff;
  height: 62px;
  margin-top: 7px;
}*/

.imgbtn-medium50.neumorph-out-small-grey4:active {
  box-shadow: inset 1px 1px 2px #9b9ea0,
              inset -1px -1px 2px #ffffff;
  height: 52px;
  margin-top: 4px;
}

.imgbtn-action.neumorph-out-small-grey4:active {
  box-shadow: inset 1px 1px 2px #a5a7a9,
              inset -1px -1px 2px #ffffff;
  height: 32px;
  margin-bottom: 2px;
}

.neumorph-out-medium-grey4 {
  border: 1px solid var(--grey5);
  border-radius: 6px;
  background: var(--grey4);
  box-shadow: 5px 5px 7px #9b9ea0, 
              -5px -5px 7px #ffffff;
}               

.neumorph-in-grey4 {
  border: 1px solid var(--grey5);
  border-radius: 10px;
  background: var(--grey4);
  box-shadow: inset 5px 5px 7px #9b9ea0, 
              inset -5px -5px 7px #ffffff;
}               

.neumorph-in-small-grey4 {
  border: 1px solid var(--grey5);
  border-radius: 4px;
  background: var(--grey4);
  box-shadow: inset 3px 3px 5px #9b9ea0, 
              inset -3px -3px 5px #ffffff;
}               

.neumorph-in-tiny-grey7 {
  border: 1px solid var(--grey8);
  border-radius: 4px;
  background: var(--grey7);
  box-shadow: inset 2px 2px 2px #969da2
              inset -2px -2px 2px #ccd5db;
}               

.neumorph-out-small-grey7 {
  border: 1px solid var(--grey8);
  border-radius: 4px;
  background: var(--grey7);
  box-shadow:  3px 3px 6px #969da2, 
               -3px -3px 6px #ccd5db;
}               

.neumorph-in-tiny-grey8 {
  border: 1px solid var(--grey9);
  border-radius: 4px;
  background: var(--grey8);
  box-shadow: inset 2px 2px 2px #8b9398
              inset -2px -2px 2px #bbc7ce;
}               


/***********************************************************************************/
/* NEUMORPHISM : https://neumorphism.io/   Distance 5px, Blur 10px, Intensity 0.3  */
/***********************************************************************************/


/* CHOIX 1 */

.neumorph-out-choix1 {
  border: 1px solid var(--choix1);
  border-radius: 10px;
  background: var(--choix1);
  box-shadow:  5px 5px 7px #00767f, 
               -5px -5px 7px #00daeb;
}   

.neumorph-in-choix1 {
  border: 1px solid var(--grey6);
  border-radius: 10px;
  background: var(--choix1);
  box-shadow: inset 5px 5px 7px #00767f, 
              inset -5px -5px 7px #00daeb;
}  

.imgbtn-medium50.neumorph-out-choix1:active,
a.btn-medium50-long.neumorph-out-choix1:active {
  box-shadow: inset 1px 1px 2px #00767f,
              inset -1px -1px 2px #00daeb;
  height: 52px;
  margin-bottom: 3px;
}


/* CHOIX 2 */

.neumorph-out-choix2 {
  border: 1px solid var(--choix2);
  border-radius: 10px;
  background: var(--choix2);
  box-shadow: 5px 5px 7px #a23c35, 
              -5px -5px 7px #ff6f62;
}   

.neumorph-in-choix2 {
  border: 1px solid var(--grey9);
  border-radius: 10px;
  background: var(--choix2);
  box-shadow: inset 5px 5px 7px #a23c35, 
              inset -5px -5px 7px #ff6f62;
}  

.imgbtn-medium50.neumorph-out-choix2:active,
a.btn-medium50-long.neumorph-out-choix2:active {
  box-shadow: inset 1px 1px 2px #a23c35,
              inset -1px -1px 2px #ff6f62;
  height: 52px;
  margin-bottom: 3px;
}


/* CHOIX 3 */

.neumorph-out-choix3 {
  border: 1px solid var(--choix3);
  border-radius: 10px;
  background: var(--choix3);
  box-shadow:  5px 5px 7px #4e7e32, 
               -5px -5px 7px #90ea5c;
}   

.neumorph-in-choix3 {
  border: 1px solid var(--grey6);
  border-radius: 10px;
  background: var(--choix3);
  box-shadow: inset 5px 5px 7px #4e7e32, 
              inset -5px -5px 7px #90ea5c;
}  

.btn-medium50.neumorph-out-choix3:active,
.imgbtn-medium50.neumorph-out-choix3:active,
a.btn-medium50-long.neumorph-out-choix3:active {
  box-shadow: inset 1px 1px 2px #4e7e32,
              inset -1px -1px 2px #90ea5c;
  height: 52px;
  margin-bottom: 3px;
}


/* CHOIX 4 */

.neumorph-out-choix4 {
  border: 1px solid var(--choix4);
  border-radius: 10px;
  background: var(--choix4);
  box-shadow:  5px 5px 7px #8d0c3a, 
               -5px -5px 7px #ff166c;
}   

.neumorph-in-choix4 {
  border: 1px solid var(--grey6);
  border-radius: 10px;
  background: var(--choix4);
  box-shadow: inset 5px 5px 7px #8d0c3a, 
              inset -5px -5px 7px #ff166c;
}

.imgbtn-medium50.neumorph-out-choix4:active,
a.btn-medium50-long.neumorph-out-choix4:active {
  box-shadow: inset 1px 1px 2px #8d0c3a,
              inset -1px -1px 2px #ff166c;
  height: 52px;
  margin-bottom: 3px;
}


/* CHOIX 5 */

.neumorph-out-choix5 {
  border: 1px solid var(--choix5);
  border-radius: 10px;
  background: var(--choix5);
  box-shadow:  5px 5px 7px #473773, 
               -5px -5px 7px #8367d5;
}   

.neumorph-in-choix5 {
  border: 1px solid var(--grey6);
  border-radius: 10px;
  background: var(--choix5);
  box-shadow: inset 5px 5px 7px #473773, 
              inset -5px -5px 7px #8367d5;
}

.imgbtn-medium50.neumorph-out-choix5:active,
a.btn-medium50-long.neumorph-out-choix5:active {
  box-shadow: inset 1px 1px 2px #473773,
              inset -1px -1px 2px #8367d5;
  height: 52px;
  margin-bottom: 3px;
}


/* CHOIX 6 */

.neumorph-out-choix6 {
  border: 1px solid var(--choix6);
  border-radius: 10px;
  background: var(--choix6);
  box-shadow: 5px 5px 10px #842160, 
              -5px -5px 10px #f63db2;
}   

.neumorph-in-choix6 {
  border: 1px solid var(--grey6);
  border-radius: 10px;
  background: var(--choix6);
  box-shadow: inset 5px 5px 10px #842160, 
              inset -5px -5px 10px #f63db2;
}

.imgbtn-medium50.neumorph-out-choix6:active,
a.btn-medium50-long.neumorph-out-choix6:active
{
  box-shadow: inset 1px 1px 2px #842160,
              inset -1px -1px 2px #f63db2;
  height: 52px;
  margin-bottom: 3px;
}


/* Page - iPad = 1080 x 810 au lieu de 1024 x 768 ?  iPhone: 320 x 460 utile
----------------------------------------------------------*/

.bodyBO {
  background-color: var(--grey4);
}


.mainBO {
  /*height: 100vh;
  width: 100vw;
  max-width:100%;*/

  /*width: 1112px;*/
  max-width: 100vw;
  
  height: 834px;
  max-height: max(100vh, 100%);
  
  background-color: var(--grey4);
  background-size: cover;
    
  font-family: var(--policeBO);
  font-size: 10pt;
  font-weight: normal;
}

.mainBO input { font-family: var(--policeBO); }

.pageBO {
  width: 100%;
}


@media print {
  .mainBO, .bodyBO, .pageBO { background-color: #fff; }

  .neumorph-in-small-grey2 {
    border-radius: 0;
    background: var(--grey2);
    box-shadow: none;
  }
  
  .imgbtn-action { display: none; }
}


/* Header 
----------------------*/
.headerBO {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px 0 10px;

  display: flex;
  align-items: center;
  justify-content: start;
  flex-direction: row;
  flex-wrap: wrap;
}  

.headerBOHome {
  padding: 0;
}  

.headerVariable {
  flex-grow: 1;
  text-align: left;
  /*padding: 0 10px 0 10px;*/
  padding-top: 3px;
}  

.headerBigButton {
  width: 160px; 
  height: 160px; 
  box-sizing: border-box; 
  border-radius: 10px;
  margin: 10px;
  /*padding: 10px 10px 10px 10px;*/ 
  color: var(--grey-text);
  padding: 5px;
  
  display: flex; 
  justify-content: space-between; 
  flex-direction: column; 
  align-items: center; 
}

.headerBOClock {
  padding-left: 4px;
  color: var(--grey-text);
}


.header-origine { padding-top: 7px; width: 265px!important; height: 65px; }

@media screen and (max-width: 519px) 
{
  .headerBOClock { display: none; }
}

@media screen and (max-width: 725px) 
{
  /*.dvFlex { justify-content: center; }*/  
}  

@media screen and (max-width: 1080px) 
{
  /* Place la saison en 2nde position */
  /*.headerBOHome { order: -2; }*/
  /*.headerBOClock { order: -1; padding-left: 10px; }*/
  
  /*.header-origine { margin-left: 10px !important; width: 340px; height: 65px; }*/
}

.fsInfo { color: Blue; font-size: 0.8em; cursor: pointer; font-weight: normal; }

img.identite { width: 65px; height: 65px; padding: 3px; box-sizing: border-box; }
span.block { display: block; }

img.imgLogoBO { height: 60px; width: 60px; fill: #fff; stroke: #fff; color:#fff; vertical-align: top; margin-right: 8px; } 

.pd10 { padding: 10px; } 
.pd6 { padding: 6px; } 
.pd5 { padding: 5px; } 
.pd4 { padding: 4px; } 
.pd3 { padding: 3px; } 
.pd2 { padding: 2px; } 

.ComboHeaderBO {
  background-color: transparent;
  border: none;
  color: var(--grey-text);

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  text-indent: 0.01px;
  text-overflow: '';
  margin-top: 9px;
}

.ComboHeaderBO select {
  border: 0;
  padding: 1px 0 1px 0;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}

.ComboHeaderBO select::-ms-expand
{
  display: none;
}


/* Clock
----------------------*/
.bigClock { font-size: 28pt; font-weight: bold; line-height: 38px; }
.mediumClock { font-size: 16pt; font-weight: bold; line-height: 14px; }
.smallClock { font-size: 10pt; font-weight: bold; line-height: 16px; }
.tinyClock { font-size: 7pt; font-weight: bold; line-height: 16px; }

div.clock { display: inline-block; padding-top: 0; border: 1px solid var(--grey1); border-radius: 10px; }
div.dvClock { display: inline-block; padding: 20px 10px 10px 10px; width: 160px; height: 160px; border: 1px solid var(--grey1); box-sizing: border-box; border-radius: 10px; }

div.dateClock { display: inline-block; text-align: left; }
div.dateClock:first-child { padding-right: 5px; }

div.elemClock { display: inline-block; padding: 0 10px 0 10px; margin-top: auto; margin-bottom: auto; height: 40px; overflow: hidden; text-align: center; }
div.elemClock:nth-child(2) { border-right: 1px solid var(--grey1); }
div.elemClock:last-child { border-left: 1px solid var(--grey1); }

div.dvElemClock { display: block; padding: 10px; margin-top: auto; margin-bottom: auto; height: 40px; overflow: hidden; text-align: center; }
div.dvElemClock:first-child { border-bottom: 1px solid var(--grey1); }

div.nameClock { display: block; width:100%; padding-top: 3px; overflow: hidden; text-align: center; font-size: 9pt; font-weight: 500; }


/* Block Univers */

.main-panel {
  display: flex;
  flex-direction: column; 
  flex-wrap: wrap;
  align-items: start; 
  justify-content: start; 
  align-content: start;
  /*gap: 20px;*/

  box-sizing: border-box;
  width: 1080px;
  height: auto;
  max-height: 610px;
  margin: 0 10px 0 10px;
  padding: 10px;
  
  /*border: 1px dotted red;*/
}

.panel-item { margin: 0 20px 20px 0; }

/* Re-order items into 3 rows */
/*.panel-item:nth-child(3n+1) { order: 1; }
.panel-item:nth-child(3n+2) { order: 2; }
.panel-item:nth-child(3n)   { order: 3; }*/

.panel-univers, .panel-univers-double, .panel-univers-triple,
.panel-activite, .panel-autre {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; 
  
  position: relative;
  overflow: hidden;
  
  width: 340px;
  height: 160px;
  box-sizing: border-box;
  /*margin: 0 20px 20px 0;*/
  padding: 15px 10px 10px 10px;
  
  text-align: left;
  vertical-align: top;
  
  /*background-position: -25px bottom;
  background-size: 90px 70px;
  background-repeat: no-repeat;*/
}

.panel-univers-content-start {
  justify-content: start; 
  gap: 4px;
}

.panel-univers-double {
  justify-content: start; 
  gap: 7px;
  width: 340px;
  height: 340px;
  padding: 15px 10px 10px 10px;
}

.panel-univers-triple {
  justify-content: center; 
  align-content: start; 
  gap: 7px;
  width: 340px;
  height: 523px;
  padding: 15px 10px 10px 10px;
  overflow-y: auto;
  
  position: relative;
}

.panel-activite {
  justify-content: center; 
  gap: 7px;
  width: 170px;
  height: 340px;
  padding: 15px 10px 10px 10px;
}

.panel-autre {
  align-content: start; 
  justify-content: center; 
  gap: 0;
  width: 170px;
  height: auto;
  min-height: 160px;
  max-height: 340px;
  padding: 10px;
}

.panel-univers-bkgimg {
  position: absolute;
  left: -25px;
  bottom: 0;
  width: 90px;
  height: 70px;
  opacity: 0.4;
}

.panel-bottom { position: absolute; bottom: 15px; }


.activity-container { overflow-x:hidden; overflow-y:auto; height: 250px; width: 100%; color: white; }
.activity-item { width: 142px; height: 1.2em; overflow:hidden; padding:3px; border-radius:3px; margin-bottom:2px; word-break: break-all; }
a.activity-item { text-decoration: none; color: #fff; padding:0; border-radius:0; margin-bottom:0;}

.anniversaire-container { overflow-x:hidden; overflow-y:auto; width: 100%; color: white; height: auto; max-height: 291px; margin-top: 7px; }
.anniversaire-item { width: 142px; height: 1.2em; overflow:hidden; padding:3px; border-radius:3px; margin-bottom:2px; word-break: break-all; }
a.anniversaire-item { text-decoration: none; color: #fff; padding:0; border-radius:0; margin-bottom:0; }


/* Espace Client : page de paramétrage
------------------------*/

div.EspaceClientBO {
  margin: 10px;
  
  padding: 0;
  border: 1px solid var(--grey6);
  background-color: var(--grey1);

  font-family: var(--police-backoffice);

  border-radius: var(--radius-small-all);
}

.EspaceClientBO_Title, .EspaceClientBO_BlockTitle {
  color: #fff; 
  background-color: var(--grey11);
  font-weight: bold;
  border: 0;
  padding: 5px 10px; 
}

.EspaceClientBO_BlockTitle { border-radius: var(--radius-small-all); }

/* Popup
------------------------*/

.modalPopupBO, .modalPopupBO-Over, .modalPopupBODark {
	background-color: var(--grey4);
	border: 1px solid var(--grey4);
  border-radius: var(--radius-big-all);
	width: auto !important;
	min-width:350px;
	min-height:140px;
	/*max-height:620px;*/
	max-height:95vh;
	max-width:95vw;
	
  box-shadow: 5px 5px 10px 5px rgba(67,87,90,0.4);
}

.modalPopupBO      { z-index: 9001 !important; }
.modalPopupBO-Over { z-index: 9501 !important; }

.modalPopupBO_Title, .modalPopupBO_TitleDark {
  color: #000;
  font-weight: bold;
  background: var(--grey4);
  border: 0;
  padding: 7px 10px 7px 10px; 
  Cursor: move;
}

.modalPopupBODark { border: 1px solid var(--grey11); }

.modalPopupBODark hr
{
  background-color: var(--grey8);
  color: var(--grey11);
  height: 1px;
  margin: 10px 0;
  border: 0;
}

.modalPopupBO_TitleDark { color: #fff; background-color: var(--grey11); }

.modalPopupBO_Content {
	padding: 20px;
	margin: 0 15px 0 15px;
  white-space: nowrap;
  vertical-align: top;
	overflow: auto;
	font-size: 12pt;
  font-weight: normal;
}

.modalPopupBO_ContentScroll {
	padding: 20px;
	margin: 0 15px 0 15px;
  white-space: nowrap;
  vertical-align: top;
	overflow: auto;
	font-size: 12pt;
  font-weight: normal;
  max-width: 80vh;
  max-height: 80vh;
}

.modalPopupBO_Footer {
  width: 100%; 
  padding: 7px 0 5px 0; 
  white-space: nowrap; 
  text-align: center;
}

.modalBackgroundBO, .modalBackgroundBO-Over {
	/*background-color: var(--grey4);*/
	opacity: 0.7;
  background: var(--grey-text);
  /*mix-blend-mode: saturation;*/
}

.modalBackgroundBO      { z-index: 11 !important; }
.modalBackgroundBO-Over { z-index: 9500 !important; }


.emailPreview {
  vertical-align: top;
	overflow: hidden;
  max-width: 80vw;
  height: calc(80vh - 100px);
  border: 1px solid #d4dadf;
  margin-top: 10px;
  padding: 0;
}

.lbl200 { display: inline-block; width: 180px; text-overflow: ellipsis; overflow: hidden; }
  

/* Combo
------------------------------*/

select.cboNormalBO, select.cboTC, select.cboNum, select.cboText {
  border: 0; 
  border-radius: var(--radius-small-all); 
  text-align: left; 
  font-size: 12pt; 
  font-weight: normal;
  padding: 3px 20px 3px 5px;
  
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  background-image: url('../Media/bo/arrow_bottom.svg');
  background-position: right 6px top 9px;
  background-repeat: no-repeat;
  background-size: 15px;
}

select.cboNum, select.cboText { padding: 0 20px 3px 2px; }

select.cboNormalBO {
  width: 150px; 
  color: var(--grey-text);
  background-color: #fff; /*var(--grey5);*/
}

select.cboTC, select.cboNum, select.cboText {
  /*border: 1px solid var(--grey9);*/
  border:0;
  border-radius: var(--radius-small-all);
  color: var(--grey-text);
  background-color: white;
  width: 70px; 
  height: 30px;  
  line-height: 30px;
  text-align: center;
  vertical-align: middle;

  font-size: 14pt;
  font-weight: 600;
  font-family: var(--police-texte);
}

select.cboNum { width: 100px; }
select.cboText { width: 250px; font-size: 13pt; font-weight: 500; }
select.cboNum option, select.cboText option { font-size: 0.9em; font-weight: 500; padding: 2px 5px; }
select.cboNum optgroup, select.cboText optgroup { font-size: 0.9em; font-weight: 500; padding: 2px 5px; }

select.cboNormalBO::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

.select.cboNormalBO option { padding: 3px 5px 3px 5px; }

select.cboNormalBO:focus {
  border-radius: var(--radius-small-all); 
  border: 1px solid var(--grey8);
  outline: none;
}

/* Checkbox
------------------------------*/

.chkBO input[type="checkbox"] { outline: 4px solid var(--grey3); outline-offset: -1px; margin-right: 5px; }
.chkBO input[type="checkbox"]:checked { background-color: Green; }
.chkBO input[type="checkbox"]:not(checked), .chkRed input[type="checkbox"]:not(checked) { margin-right: 5px; }

/* Apple switch NORMAL */
.apple-switch input {
  position: relative;
  -webkit-appearance: none;
  outline: none;
  width: 40px;
  height: 24px;
  background-color: #fff;
  border: 1px solid #D9DADC;
  border-radius: 40px;
  box-shadow: inset -16px 0 0 0 #fff;
  transform: translateY(8px);
}

.apple-switch input:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  background: transparent;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.apple-switch input:checked {
  box-shadow: inset 16px 0 0 0 #6fb447;
  border-color: #6fb447;
}

.apple-switch input:checked:after {
  left: 16px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}


/* Apple switch SMALL */
.apple-switch-sm input {
  position: relative;
  -webkit-appearance: none;
  outline: none;
  width: 35px;
  height: 20px;
  background-color: #fff;
  border: 1px solid #D9DADC;
  border-radius: 40px;
  box-shadow: inset -16px 0 0 0 #fff;
  transform: translateY(8px);
}

.apple-switch-sm input:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  background: transparent;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 2px 4px 6px rgba(0,0,0,0.2);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.apple-switch-sm input:checked {
  box-shadow: inset 16px 0 0 0 #6fb447;
  border-color: #6fb447;
}

.apple-switch-sm input:checked:after {
  left: 16px;
  box-shadow: -2px 4px 3px rgba(0,0,0,0.05);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

/* mettre au moins un espace dans le texte */

.ios8-switch input[type="checkbox"] {
    position: absolute;
    /*margin: 10px 0 8px 16px;*/ /* pour le carré */
    display: none;
}
.ios8-switch input[type="checkbox"] + label {
    position: relative;
    padding: 1px 0 0 40px;
    line-height: 2em;
    height: 24px;
}
.ios8-switch input[type="checkbox"] + label:before {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    top: 0;
    width: 40px; /* x*5 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: #fff;
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.ios8-switch input[type="checkbox"] + label:after {
    content: "";
    position: absolute;
    display: block;
    left: 0px;
    top: 0px;
    width: 24px; /* x*3 */
    height: 24px; /* x*3 */
    border-radius: 16px; /* x*2 */
    background: #fff;
    border: 1px solid #d9d9d9;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
/*.ios8-switch input[type="checkbox"] + label:hover:after*/
.ios8-switch input[type="checkbox"] + label:after {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.ios8-switch input[type="checkbox"]:checked + label:after {
    margin-left: 16px;
    border-color: #6fb447;
}
.ios8-switch input[type="checkbox"]:checked + label:before {
    background: #6fb447;
}




/* Radio button list
------------------------------*/

.radioListBO input[type=radio], 
.radioListMediumBO input[type=radio], 
.radioListBigBO input[type=radio] {
  box-sizing: border-box;
  display: none; 
}

/* Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label */
.radioListBO input[type=radio] + label, 
.radioListMediumBO input[type=radio] + label, 
.radioListBigBO input[type=radio] + label {
  display: table-cell;
  padding: 0;
  color: var(--vert-action);
  text-align: center;
  vertical-align: middle;

  box-sizing: border-box;

  border: 1px solid var(--grey5);
  border-radius: 3px;
  background: var(--grey4);
  box-shadow:  2px 2px 2px #9b9ea0, 
               -2px -2px 2px #ffffff;
}

.radioListBO input[type=radio] + label {
  width: 40px;
  height: 40px;
}

.radioListMediumBO input[type=radio] + label {
  min-width: 110px;
  height: 20px;
}

.radioListBigBO input[type=radio] + label {
  min-width: 130px;
  height: 40px;
}

.radioListBO span.aspNetDisabled, .radioListBO span.aspNetDisabled + label,
.radioListMediumBO span.aspNetDisabled, .radioListMediumBO span.aspNetDisabled + label,
.radioListBigBO span.aspNetDisabled, .radioListBigBO span.aspNetDisabled + label {
  color: #C0C0C0 !important; 
  background: #fff !important; 
  border-color: #C0C0C0 !important;
  opacity: 50%;
}

/* Change background color for label next to checked radio button
 to make it look like highlighted button */
.radioListBO input[type=radio]:checked + label,
.radioListMediumBO input[type=radio]:checked + label,
.radioListBigBO input[type=radio]:checked + label {
  background-color: var(--vert-action);
  border: 1px solid var(--vert-action);
  color: #000;
}

.radioListBO input[type=radio]:hover + label,
.radioListMediumBO input[type=radio]:hover + label,
.radioListBigBO input[type=radio]:hover + label {
  color: var(--vert-on);
  /*border: 1px solid var(--vert-action);*/
}


/* Fiche Sejour
--------------------------------------*/

.hugePanel { font-size: 40pt; font-weight: bold; line-height: 50px; }
.bigPanel { font-size: 28pt; font-weight: bold; }
.mediumPanel { font-size: 20pt; font-weight: bold; }
.normalPanel { font-size: 12pt; font-weight: 600; }
.smallPanel { font-size: 10pt; font-weight: 600; }
.tinyPanel { font-size: 9pt; font-weight: 600; }
.tinyPanel8 { font-size: 8pt; font-weight: 600; }

.nom-rubrique { display: inline-block; width: 110px; color: var(--grey8); font-size: 10pt; font-weight: 600;  }
.saisie-rubrique, .saisie-rubrique100, .saisie-rubrique90, .saisie-rubrique50, .saisie-rubrique70 {
  border: 0; 
  padding: 2px 5px; 
  margin-top: 5px; 
  color: var(--grey-text); font-size: 10pt; font-weight: 600;
}

.saisie-rubrique { width: 200px; }
.saisie-rubrique100 { width: 100%; text-overflow: ellipsis; }
.saisie-rubrique90 { width: 90px; text-overflow: ellipsis; }
.saisie-rubrique50 { width: 50px; text-overflow: ellipsis; }
.saisie-rubrique70 { width: 70px; text-overflow: ellipsis; }

.ellipsis { overflow:hidden; text-overflow: ellipsis; } 

select.saisie-rubrique, select.saisie-rubrique70 {
  background-image: url('../Media/bo/Arrow_bottom.svg');
  background-position: right 5px center;
  background-repeat: no-repeat;
  background-size: 10px;

  /*border: 1px solid var(--cal-grayborder-color);*/
  -webkit-appearance: none; 
  /*padding-left:30px;*/
  /*height: 36px;*/
  color: var(--grey-text); 
  background-color: #fff;
  /*font-family: 'Comic Sans MS';*/
  margin-right: 15px;
  font-size: 10pt; font-weight: 600;
}

select.saisie-rubrique { width: 200px; }
select.saisie-rubrique70 { width: 70px; margin-right: 2px; }

table.tbl-detail { padding: 0; margin: 0; border-collapse: collapse; }
table.tbl-detail td { padding: 3px; border-bottom: 1px solid var(--grey3); vertical-align: top; }

table.tbl-detail-allborder { padding: 0; margin: 0; border-collapse: collapse; border: 1px solid var(--grey4); }
table.tbl-detail-allborder td { padding: 3px 5px; border-right: 1px solid var(--grey4); vertical-align: top; }
table.tbl-detail-allborder th, table.tbl-detail-allborder tfoot td { padding: 3px 5px; border: 1px solid var(--grey4); vertical-align: top; }
table.tbl-detail-allborder tr:nth-child(odd) { background-color: var(--grey0); } /* Alternate backcolor */

.detailXML { max-height: 200px; overflow-x: hidden; overflow-y:auto; padding: 0 10px; }

.panel-sejour, .panel-header, .panel-detail {
  overflow: hidden;

  box-sizing: border-box;
  padding: 10px;
  
  color: var(--grey-text);
  text-align: left;
  vertical-align: top;
}

.panel-sejour, .panel-header { width: 340px; }

.panel-header { margin: 7px 9px 7px 2px; }
.panel-sejour { margin: 10px 5px 0 7px; }
.panel-detail { overflow-y: auto; max-height: 70vh; margin: 7px;}

.panel-saisie { padding: 5px 9px 5px 7px; margin: 5px 0 10px 0; border-radius: 4px; background-color: var(--grey4); }
.panel-message { max-height: 200px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--vert-action) var(--grey5); }
  
.panel-sejour hr { color: var(--grey5); background-color: var(--grey5); margin: 7px 0; height: 1px; border: 0; }
  
table.tbl-sejour, table.tbl-origine { padding: 0; margin: 0; border-collapse: collapse; width: 100%; }
table.tbl-sejour td { padding: 2px 2px 2px 2px;  }
table.tbl-origine td { padding: 2px 2px 2px 2px; }

.tblPrestationsBO, .tblPaiementsBO, .tblDocumentBO, 
  .tblTotalBO, .tblCGVBO { padding: 0; margin: 3px -3px 0 -3px; box-sizing: border-box; border-collapse: collapse; width: 100%; border-radius: 4px; font-weight: 600; }

.tblPrestationsBO td, .tblPaiementsBO td, .tblMessageSuiviBO td, .tblMessageClientBO td, .tblDocumentBO td, 
  .tblTotalBO td, .tblCGVBO td, .tblHistoBO td { display: inline-block; box-sizing: border-box; padding: 3px 0 3px 5px; font-size: 10pt; }
.tblPrestationsBO td, .tblPaiementsBO td, .tblMessageSuiviBO td, .tblMessageClientBO td, .tblDocumentBO td, 
  .tblTotalBO td, .tblHistoBO td { overflow-x: hidden; text-overflow: ellipsis; vertical-align: bottom; }

.tblHistoBO td { font-size: 9pt; }

.tblPaxBO { padding: 0; margin: 3px -3px 0 -3px; box-sizing: border-box; border-collapse: collapse; width: 100%; border-radius: 4px; font-weight: 600; }
.tblPaxBO td { box-sizing: border-box; padding: 3px 0 3px 5px; font-size: 10pt; vertical-align: middle; }
.tblPaxBO td { overflow-x: hidden; text-overflow: ellipsis; vertical-align: middle; }
  
.tblCGVBO td { white-space: normal; word-wrap: break-word; vertical-align: top; }

.tblPrestationsBO td:nth-child(1) { width: 225px; text-align: left; vertical-align: bottom; position: relative; }
/*.tblPrestationsBO td:nth-child(2) { width: 80px; text-align: right; font-weight: 700; color: var(--grey8); font-size: 8pt; }*/
.tblPrestationsBO td:nth-child(2) { width: 100px; text-align: right; font-weight: 700; padding: 3px 5px 3px 0; }
.tblPrestationsBO span.quantite { position: absolute; right: 0; bottom: 0; padding: 3px 0 3px 5px; font-weight: 700; color: var(--grey8); font-size: 8pt; max-width:120px; overflow:hidden; text-overflow: ellipsis; }

.tblPaxBO td:nth-child(1) { width: 225px; text-align: left; vertical-align: bottom; position: relative; }
.tblPaxBO td:nth-child(2) { width: 93px; text-align: right; font-weight: 700; padding: 3px 5px 3px 0; }
.tblPaxBO span.quantite { position: absolute; right: 0; bottom: 0; padding: 3px 0 3px 5px; font-weight: 700; color: var(--grey8); font-size: 8pt; max-width:120px; overflow:hidden; text-overflow: ellipsis; }

.tblPaiementsBO td:nth-child(2), .tblDocumentBO td:nth-child(2) { color: var(--grey8); font-size: 8pt; }
.tblPaiementsBO td:nth-child(3), .tblDocumentBO td:nth-child(3) { color: var(--grey8); font-size: 8pt; }

.tblPaiementsBO td:nth-child(1) { width: 65px; text-align: left; }
.tblPaiementsBO td:nth-child(2) { width: 105px; text-align: left; }
.tblPaiementsBO td:nth-child(3) { width: 70px; text-align: right; font-weight: 700; padding: 3px 0 3px 0; }
.tblPaiementsBO td:nth-child(4) { min-width: 75px; text-align: right; font-weight: 700; padding: 3px 5px 3px 0; }

.tblDocumentBO tr { display: block; margin-bottom: 3px; }
.tblDocumentBO tr:nth-child(even) { background-color: var(--grey0); border-radius: 4px; }
.tblDocumentBO td { vertical-align: middle; }
.tblDocumentBO td:nth-child(1) { width: 95px; text-align: left; }
.tblDocumentBO td:nth-child(2) { width: 70px; text-align: left; }
.tblDocumentBO td:nth-child(3) { width: 70px; text-align: right; font-weight: 700; padding: 3px 0 3px 0; }
.tblDocumentBO td:nth-child(4) { width: 80px; text-align: right; font-weight: 700; padding: 3px 5px 3px 0; }

.tblTotalBO td { vertical-align: middle; padding: 5px; }
.tblTotalBO td:nth-child(1) { width: 225px; text-align: left; font-weight: 700; position: relative; }
.tblTotalBO td:nth-child(2) { width: 100px; text-align: right; font-weight: 700;  }
.tblTotalBO span.quantite { position: absolute; right: 0; bottom: 2px; padding: 3px 0 3px 5px; font-weight: 700; color: var(--grey8); font-size: 8pt; max-width:120px; overflow:hidden; text-overflow: ellipsis; }

.tblCGVBO td:nth-child(1) { width: 140px; text-align: left; color: var(--grey8); }
.tblCGVBO td:nth-child(2) { width: 180px; text-align: left; }

.tblMessageSuiviBO tr { display: block; background-color: var(--grey0); border-radius: 4px; }
.tblMessageSuiviBO tr:not(:first-child) { margin-top: 5px; }
.tblMessageSuiviBO td:nth-child(1) { width: 70px; text-align: left; vertical-align: top; color: var(--grey8); }
.tblMessageSuiviBO td:nth-child(2) { width: 235px; text-align: left; white-space: normal; word-wrap: break-word; vertical-align: top; }

.tblMessageInterneBO tr { display: block; border-radius: 4px; background-color: var(--grey0); }
.tblMessageInterneBO tr:not(:first-child) { margin-top: 5px; }
.tblMessageInterneBO td:nth-child(1) { width: 70px; text-align: left; vertical-align: top; color: var(--grey8); }
.tblMessageInterneBO td:nth-child(2) { width: 235px; text-align: left; white-space: normal; word-wrap: break-word; vertical-align: top; }

.tblMessageClientBO tr { display: block; border-radius: 4px; }
.tblMessageClientBO tr:not(:first-child) { margin-top: 5px; }
.tblMessageClientBO tr.msgClient { background-color: var(--grey0); margin-right: 20px;  }
.tblMessageClientBO tr.msgInterne { background-color: var(--bg-info); margin-left: 20px; }
.tblMessageClientBO td:nth-child(1) { width: 70px; text-align: left; vertical-align: top; color: var(--grey8); }
.tblMessageClientBO td:nth-child(2) { width: 220px; text-align: left; white-space: normal; word-wrap: break-word; vertical-align: top; }

.tblHistoBO tr { display: block; border-radius: 4px; }
.tblHistoBO tr:not(:first-child) { margin-top: 5px; }
.tblHistoBO tr.msgClient { background-color: var(--grey0); margin-right: 20px;  }
.tblHistoBO tr.msgInterne { background-color: var(--bg-info); margin-left: 20px; }
.tblHistoBO td:nth-child(1) { width: 70px; text-align: left; vertical-align: top; color: var(--grey8); }
.tblHistoBO td:nth-child(2) { width: 220px; text-align: left; white-space: normal; word-wrap: break-word; vertical-align: top; }

.tblParticipant { padding: 0; margin: 0; border-collapse: collapse; width: 100%; }
.tblParticipant td, .tblParticipant th { padding: 0 2px 0 2px; }
.tblParticipant td:nth-child(1) { width: 120px; text-align: left; }
.tblParticipant td:nth-child(2) { width: 120px; text-align: left; }
.tblParticipant td:nth-child(3) { width: 90px; text-align: right; }

.tblEmailBO tr { display: block; border-radius: 4px; background-color: var(--grey0); }
.tblEmailBO tr:not(:first-child) { margin-top: 5px; }
.tblEmailBO td:nth-child(1) { width: 70px; text-align: left; vertical-align: top; color: var(--grey8); }
.tblEmailBO td:nth-child(2) { width: 205px; text-align: left; white-space: normal; word-wrap: break-word; vertical-align: top; }
.tblEmailBO td:nth-child(3) { width: 20px; text-align: left; white-space: normal; vertical-align: top; }


.logo75 { width: 75px; height: 75px; vertical-align: middle; margin-right: 15px; }
.logo50 { width: 50px; height: 50px; vertical-align: middle; margin-right: 15px; }

.dvFlex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.dvItemCenter { align-self: center; }
.dvItemTop { align-self: stretch; }
.dvItemRight { margin-left: auto; }


/* Permet une 2nde colonne pour les écrans 720px */
.marginFicheSejour { margin: 0 10px 10px 10px; } 

/*@media screen and (min-width: 710px) and (max-width: 730px) */
@media screen and (max-width: 1080px)
{
  .marginFicheSejour { margin: 0 0 10px 0; }
}  


/* Saisie paiement
--------------------------------------*/
.panel-Saisiepaiement,
.panel-Saisiepaiement-auto {
  box-sizing: border-box;
  padding: 10px;
  
  color: var(--grey-text);
  text-align: left;
  vertical-align: top;
  margin: 10px; 
}

.panel-Saisiepaiement {
  overflow: hidden;
  width: 800px;
}

.panel-Saisiepaiement-auto {
  overflow: auto auto;
  min-width: 340px;
  max-width: 90vw;
  width: auto;

  box-sizing: border-box;
  padding: 10px;
  
  color: var(--grey-text);
  text-align: left;
  vertical-align: top;
  margin: 10px; 
}


.panel-Saisiepaiement-title { padding: 15px;   color: var(--grey-text); }

.tblSaisiepaiement { padding: 0; margin: 0; border-collapse: collapse; font-size: 10pt; /*background: var(--grey2);*/ }
.tblSaisiepaiement tr { }
.tblSaisiepaiement td { box-sizing: border-box; padding: 5px; vertical-align: middle; white-space: nowrap; }

.tblSaisiepaiement td:nth-child(1) { min-width: 100px; }
.tblSaisiepaiement td:nth-child(2) { min-width: 140px; }
.tblSaisiepaiement td:nth-child(3) { min-width: 240px; }
.tblSaisiepaiement td:nth-child(4) { min-width: 240px; text-align: right; }

.tblTitrePaiement { padding: 0; margin: 10px 0 0 0; border-collapse: collapse; font-size: 10pt; /*background: var(--grey2);*/ }
.tblTitrePaiement td:nth-child(1) { min-width: 240px; text-align: left; }
.tblTitrePaiement td:nth-child(2) { min-width: 240px; text-align: center; }
.tblTitrePaiement td:nth-child(3) { min-width: 240px; text-align: right; }

.tblCV, .tblTitrePax { border:0; width: 100%; /*margin-left:auto; margin-right:auto;*/ }
.tblCV td { padding: 8px 10px; }
.tblCV.compact td { padding: 2px 10px; }
.tblCV td.rightText { padding: 8px 0 8px 10px; text-align: right; }
.tblCV td:nth-child(1) { width: 70px; text-align: left; }


.tblTitrePax { width: auto; }
.tblTitrePax td { padding: 8px 10px 0 10px; }

.logoPaiement { width: 50px; height: auto; vertical-align: middle; margin-right: 15px; }

.chkPaiement input[type=checkbox] { display: none; }

.chkPaiement input[type=checkbox] + label {
  display: inline-block;

  height: 40px; 
  margin: 5px; 
  padding: 7px; 

  border: 1px solid var(--grey5);
  border-radius: 4px;
  background: var(--grey4);
  box-shadow:  3px 3px 6px #9b9ea0, 
               -3px -3px 6px #ffffff;
}

.chkPaiement img { height: 40px; width: auto; vertical-align: middle; }
.chkPayzen img { width: 65px; }
.chkPaiement input[type=checkbox]:checked + label { border: 3px solid var(--vert-action); /*background: var(--vert-action);*/ }
.chkPaiement input[type=checkbox]:active + label { box-shadow: none; border: 3px solid var(--grey5); }

span.ChequeVacances, span.TicketCamping {
  display: inline-block;
  border: 1px solid var(--grey9);
  border-radius: var(--radius-small-all);
  box-sizing: border-box;
  height: 30px;  
  text-align: center;
  vertical-align: middle;
  font-size: 16pt;
  font-weight: bold;
  font-family: var(--police-texte);
}

span.ChequeVacances { width: 90px; line-height: 20px; }
span.TicketCamping { width: 60px; line-height: normal; }

.txtChequeVacances, .txtSTPaiement, .txtDTPaiement, .txtSTInfo {
  /*border: 1px solid var(--grey9);*/
  border:0;
  border-radius: var(--radius-small-all);
  color: var(--grey-text);
  height: 30px;  
  line-height: 30px;
  text-align: center;
  vertical-align: middle;

  font-size: 18pt;
  font-weight: bold;
  font-family: var(--police-texte);
}

.txtChequeVacances { width: 50px; }
.txtSTPaiement { width: 120px; }
.txtDTPaiement { width: 120px; font-size: 14pt; font-weight: 500;}
.txtSTInfo { width: 180px; }

textarea.txtSTInfo {
  border:0;
  border-radius: var(--radius-small-all);
  color: var(--grey-text);

  width: 180px;
  height: auto;  
  line-height: normal;
  text-align: left;
  vertical-align: top;
  
  font-size: 14pt;
  font-weight: 500;
  font-family: var(--police-texte);
}


.btnCalculette50, .btnCalculette120, .btnClear {
  box-sizing: border-box;
  height: 30px;  
  text-align: center;
  vertical-align: middle;
  margin: 0 5px;
  padding: 0;
  
  -webkit-appearance: none;

  color: var(--vert-action);

  border: 1px solid var(--grey5);
  border-radius: 4px;
  background: var(--grey4);
  box-shadow:  3px 3px 6px #9b9ea0, 
               -3px -3px 6px #ffffff;

  -webkit-appearance: none;
  text-decoration: none; 
  cursor: pointer; 
  
  font-size: 24pt;
  font-weight: bold;
  font-family: var(--police-texte);
}

.btnCalculette50 { width: 30px; line-height: 19px; }
.btnCalculette120 { width: 125px; line-height: 19px; }
.btnClear { font-size: 32pt; line-height: 17px; font-weight: 600; padding: 0 3px; }

.btnCalculette50:active {
  /*box-shadow:  1px 1px 2px #9b9ea0, 
               -1px -1px 2px #ffffff;*/
  box-shadow: inset 1px 1px 2px #9b9ea0,
              inset -1px -1px 2px #ffffff;
  height: 32px;
  /*margin-bottom: 2px;*/
 }

.btnCalculette50:disabled { box-shadow:none; }


/* Grid 
--------------------------------------*/

div.imgPlanning { display:inline-block; width:30px; text-align:center; }
div.imgPlanningAnnexe { display:inline-block; width:35px; text-align:center; }
div.imgPlanning img, div.imgPlanningAnnexe img { margin: 0!important; }
div.numHeb { display:inline-block; min-width:35px; text-align:right }
div.present { display:inline-block; min-width:15px; text-align:right }

.mGridBO {
  color: var(--grey-text);
  background-color: var(--grey2);
  /*margin: 10px 0 10px 0;*/
  /*border: 1px solid var(--grey2);*/
  border-collapse: separate !important;
  border-spacing: 5px !important;
}

.mGridBO td, .mGridBO td.setting {
  padding: 2px 4px;
  border-radius: 4px;
  color: var(--grey-text);
  font-weight: 600;
  height: 20px;
}

.mGridBO td {
  border: 1px solid var(--grey5);
  background-color: var(--grey5);
}

.mGridBO td.setting {
  border: 0;
  background-color: initial;
}

.mGridBO td.resaBO {
  padding: 2px 4px;
  border: 1px solid var(--grey5);
  color: var(--grey-text);
  font-weight: 600;
  height: 20px;
  
  /* ionos ai-model-hub */
  background-color: rgb(254, 255, 255);
  border-radius: 7px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 
              rgba(111, 133, 172, 0.04) 0px 1px 1px 0px, rgba(111, 133, 172, 0.04) 0px 3.267px 2.754px 0px, 
              rgba(111, 133, 172, 0.04) 0px 6.278px 6.63px 0px, rgba(111, 133, 172, 0.04) 0px 14px 22px 0px;
}

.mGridBO.no-bkg { background-color: transparent !important; }
.mGridBO td.resaBO:hover { border: 1px solid var(--grey8); }
.mGridBO td.resaBO table.embeded-table td { background-color: transparent !important; }


.mGridBO td.cmd { padding: 3px 4px 0 4px; border: 1px solid var(--grey3); background-color: var(--grey3); width:16px; text-align: center; }
.mGridBO td.cmd .aspNetDisabled { background-color:var(--grey3)!important; filter: grayscale(1) opacity(60%); }

.mGridBO td.mainCol { color: #fff; background-color: var(--grey11); border: 1px solid var(--grey11); min-width: 60px; }
.mGridBO .selected td { color: #fff; background-color: var(--grey11); border: 1px solid var(--grey11); }

.mGridBO td.gvColMaxWidth300 { max-width: 300px; }
.mGridBO .LimitTextSize { max-width: 300px; text-overflow: ellipsis; overflow: hidden; }

.mGridBO th {
  padding: 0 4px;  /* 3px 4px */
  color: var(--grey8);
  background-color: var(--grey2);
  border: 1px solid var(--grey2);
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: 500;
  text-align: center;
}
.mGridBO .bg-grey1 th {
  background-color: var(--grey1);
  border: 1px solid var(--grey1);
}

.mGridBO th:first-child { text-align: left; }

.mGridBO .alt, .alt-big { background: #EFF3FB; /*padding: 4px;*/ }
.mGridBO .alt-big td { height: 23px; }
.mGridBO .altDark { background: #D8E5FF; padding: 4px; }
.mGridBO .altBdr { border-top: 1px dotted #E2E2E2; border-bottom: 1px dotted #E2E2E2; padding: 4px; }

.mGridBO .bdrBottom { border-top: 1px dotted #E2E2E2; border-bottom: 1px dotted #E2E2E2; }

.mGridBO .rowBdr { background: White; }
.mGridBO .rowBdr td, .mGridBO .altBdr td { border-right: 1px dotted #E2E2E2; }

.mGridBO .row, .row-big { background: White; }
.mGridBO .row-big td { height: 23px; }
.mGridBO .empty td { background: none; border: 0; padding: 0; height: 1em; }
.mGridBO .pgr { background: var(--color-bkg-light); border: solid 1px var(--color-border-light); }
.mGridBO .pgr table { margin: 0; padding: 0; border-spacing: 6px 2px; }
.mGridBO .pgr td { padding: 0; font-weight: bold; color: Gray; }
.mGridBO .pgr td > * td { border: 1px solid gray; border-radius: 2px; }
.mGridBO .pgr td > * td:hover { color: black; background-color: var(--color-hover); }
.mGridBO .pgr td > * td > span { color: black; padding: 0 4px; }
.mGridBO .pgr a { padding: 0 4px 0 4px; color: White; text-decoration: none; }
.mGridBO .pgr a:hover { color: Black; text-decoration: none; }
.mGridBO th a { color: White; text-decoration: underline; }
.mGridBO th a:hover { color: Black; text-decoration: underline; }

.mGridBO .borderTop { border-right: solid 1px #B2C5EB !important; border-top: 1px dotted var(--color-border-light) !important; border-bottom: none !important; }



/* Checkbox Left/Right
------------------------------------------*/

.checkboxLR .knobs, .checkboxLR .layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.checkboxLR {
  display: inline-block;
  position: relative;
  top: 50%;
  width: 70px;
  height: 36px;
  /*margin: -20px auto 0 auto;*/
  overflow: hidden;
  border-radius: 18px;
}

.scale70 { transform: scale(0.7); }

.checkboxLR:focus { outline: none; }

.checkboxLR .checkbox {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
}

.checkboxLR .knobs { z-index: 2; }

.checkboxLR .layer {
    width: 100%;
    background-color: #FFF;
    transition: 0.3s ease all;
    z-index: 1;
}

/* Button 10 */
.checkboxLR .knobs:before, 
.checkboxLR .knobs:after, 
.checkboxLR .knobs span {
    position: absolute;
    top: 4px;
    width: 20px;
    height: 10px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    line-height: 0.5;
    padding: 9px 4px;
    border-radius: 18px 2px 2px 18px;
    transition: 0.3s ease all;
}

.checkboxLR .knobs:before {
    content: '';
    left: 4px;
    background-color: #e4e7eb;
}

.checkboxLR .knobs:after {
    content: '\25B6';
    right: 4px;
    color: #cbd9c7;
    background-color: #f5f5f7;
    border-radius: 2px 18px 18px 2px;
}

.checkboxLR .knobs span {
    display: inline-block;
    left: 4px;
    color: #6DB145;
    z-index: 1;
}

.checkboxLR .checkbox:checked + .knobs span { color: #cbd9c7; background-color: #f5f5f7; }

.checkboxLR .checkbox:checked + .knobs:before { left: 38px; border-radius: 2px 18px 18px 2px; }

.checkboxLR .checkbox:checked + .knobs:after { background-color: #e4e7eb; color: #6DB145; }

.checkboxLR .checkbox:checked ~ .layer { background-color: #fff; }




/* jquery ui tooltip
------------------------*/

.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}