@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 200;
  src: local('Source Sans Pro ExtraLight Italic'), local('SourceSansPro-ExtraLightItalic'), url(font/SourceSansPro-ExtraLightItalic.woff2) format('woff2'), url(font/SourceSansPro-ExtraLightItalic.svg#SourceSansPro-ExtraLightItalic) format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 300;
  src: local('Source Sans Pro Light Italic'), local('SourceSansPro-LightItalic'), url(font/SourceSansPro-LightItalic.woff2) format('woff2'), url(font/SourceSansPro-LightItalic.svg#SourceSansPro-LightItalic) format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 200;
  src: local('Source Sans Pro ExtraLight'), local('SourceSansPro-ExtraLight'), url(font/SourceSansPro-ExtraLight.woff2) format('woff2'), url(font/SourceSansPro-ExtraLight.svg#SourceSansPro-ExtraLight) format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(font/SourceSansPro-Light.woff2) format('woff2'), url(font/SourceSansPro-Light.svg#SourceSansPro-Light) format('svg');
}


@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(font/SourceSansPro-Regular.woff2) format('woff2'), url(font/SourceSansPro-Regular.svg#SourceSansPro-Regular) format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  src: local('Source Sans Pro Regular Italic'), local('SourceSansPro-Italic'), url(font/SourceSansPro-Italic.woff2) format('woff2'), url(font/SourceSansPro-Italic.svg#SourceSansPro-Italic) format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(font/SourceSansPro-Bold.woff2) format('woff2'), url(font/SourceSansPro-Bold.svg#SourceSansPro-Bold) format('svg');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 700;
  src: local('Source Sans Pro Bold Italic'), local('SourceSansPro-BoldItalic'), url(font/SourceSansPro-BoldItalic.woff2) format('woff2'), url(font/SourceSansPro-BoldItalic.svg#SourceSansPro-BoldItalic) format('svg');
}


@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Condensed Light Italic'), local('RobotoCondensed-LightItalic'), url(font/RobotoCondensed-LightItalic.woff2) format('woff2'), url(font/RobotoCondensed-LightItalic.svg#RobotoCondensed-LightItalic) format('svg');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Condensed Italic'), local('RobotoCondensed-Italic'), url(font/RobotoCondensed-Italic.woff2) format('woff2'), url(font/RobotoCondensed-Italic.svg#RobotoCondensed-Italic) format('svg');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Condensed Bold Italic'), local('RobotoCondensed-BoldItalic'), url(font/RobotoCondensed-BoldItalic.woff2) format('woff2'), url(font/RobotoCondensed-BoldItalic.svg#RobotoCondensed-BoldItalic) format('svg');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Condensed Light'), local('RobotoCondensed-Light'), url(font/RobotoCondensed-Light.woff2) format('woff2'), url(font/RobotoCondensed-Light.svg#RobotoCondensed-Light) format('svg');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(font/RobotoCondensed-Regular.woff2) format('woff2'), url(font/RobotoCondensed-Regular.svg#RobotoCondensed-Regular) format('svg');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Condensed Bold'), local('RobotoCondensed-Bold'), url(font/RobotoCondensed-Bold.woff2) format('woff2'), url(font/RobotoCondensed-Bold.svg#RobotoCondensed-Bold) format('svg');
}



/* Customize website's scrollbar like Mac OS
Not supports in Firefox and IE */

/* total width */
::-webkit-scrollbar {
    background-color: rgba(0,0,0,0.5);
    width: 12px;
}

/* background of the scrollbar except button or resizer */
::-webkit-scrollbar-track {
    background-color: #141a21;
}

/* scrollbar itself */
::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.2);
    border-radius: 8px;
    border: 4px solid #141a21;
}

/* set button(top and bottom of the scrollbar) */
::-webkit-scrollbar-button {
    display:none;
}


.hide_on_mobile_inline_block { display: none; }

input, textarea, select, button { font-family: 'Source Sans Pro', sans-serif; font-size:15px; color: #000000}

* {
    box-sizing:border-box;
}

html {height:100%; overscroll-behavior: none;}
body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    /*background-image: linear-gradient( 129.1deg,  rgba(243,199,83,1) 26.8%, rgba(18,235,207,1) 114.1% );*/

    background: #303841;
    /*font-family: arial;*/
    font-size:15px;
    height:100%;
    margin:0px;
    padding:0px;
    width:100%;
    min-width: 320px;
    overscroll-behavior: none;
    overflow-x:hidden !important;
    font-family: 'Source Sans Pro', sans-serif
}


/* ---- mobile detection for JS ----- */
#are_we_on_mobile_detection {display: none; width:10px; height:10px; background:red; position: fixed; bottom:0; z-index:1;}

/* -------------- FORM stuff from IDP --------------- */

/*.input_row_box {box-sizing:border-box;padding:10px;border: 1px solid #cccccc; margin-top:20px;margin-bottom:20px;background-color: #ffffff}*/
.form_chapter_container .input_row_box {box-sizing:border-box;padding:10px;border: 1px solid #cccccc; margin-top:20px;margin-bottom:20px;background-color: #ffffff}
.input_row {border-bottom:1px solid rgba(255,255,255,0.2);margin:0; padding-top:4px; padding-bottom:4px;}
.input_row_box .input_row:last-child, .input_row_no_border_bottom {border:0;padding-bottom:0px;}

form {margin:0; padding:0;}
input,select,textarea {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
input[type="checkbox"],input[type="radio"] {
    -webkit-appearance:normal;
    -moz-appearance:normal;
    appearance:normal;  
}


/* START help box */ 

.help_box {
  background: #f8f9fa;
  border-left: 3px solid #719126;
  padding: 12px 16px 12px 44px;
  margin: 16px 0;
  border-radius: 4px;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  position: relative;
}

.help_box::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 14px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='%23719126' d='M176 0c-44.2 0-80 35.8-80 80v48c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64V80c0-44.2-35.8-80-80-80zM96 80c0-44.2 35.8-80 80-80s80 35.8 80 80v48H96V80zm80 144c17.7 0 32 14.3 32 32v48c0 17.7-14.3 32-32 32s-32-14.3-32-32V256c0-17.7 14.3-32 32-32z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* Variante avec icône info (cercle avec i) */
.help_box.info {
  border-left-color: #4a90e2;
  padding-left: 44px;
}

.help_box.info::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%234a90e2' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E");
}

/* Variante warning (triangle avec !) */
.help_box.warning {
  border-left-color: #f39c12;
  background: #fef9f3;
  padding-left: 44px;
}

.help_box.warning::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f39c12' d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E");
}

/* Variante warning (ampoule) */
.help_box.light {
  border-left-color: #f7da4a;
  background: #fcf5d2;
  padding-left: 44px;
}
.help_box.light::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23719126' d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
}

/* Variante question (question) */
.help_box.question {
  border-left-color: #719126;
  padding-left: 44px;
}
.help_box.question::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23719126' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E");
}

/* Variante question (livre) */
.help_box.book {
  border-left-color: #e63030;
  background: #fad4d4;
  padding-left: 44px;
}
.help_box.book::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23719126' d='M249.6 471.5c10.8 3.8 22.4-4.1 22.4-15.5V78.6c0-4.2-1.6-8.4-5-11C247.4 52 202.4 32 144 32C93.5 32 46.3 45.3 18.1 56.1C6.8 60.5 0 71.7 0 83.8V454.1c0 11.9 12.8 20.2 24.1 16.5C55.6 460.1 105.5 448 144 448c33.9 0 79 14 105.6 23.5zm76.8 0C353 462 398.1 448 432 448c38.5 0 88.4 12.1 119.9 22.6c11.3 3.8 24.1-4.6 24.1-16.5V83.8c0-12.1-6.8-23.3-18.1-27.6C529.7 45.3 482.5 32 432 32c-58.4 0-103.4 20-123 35.6c-3.3 2.6-5 6.8-5 11V456c0 11.4 11.7 19.3 22.4 15.5z'/%3E%3C/svg%3E");
}

/* Variante warning (etoile) */
.help_box.star {
  border-left-color: #f7da4a;
  background: #fcf5d2;
  padding-left: 44px;
}
.help_box.star::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23719126' d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
}

/* Titre optionnel */
.help_box strong {
  display: block;
  margin-bottom: 6px;
  color: #333;
  font-size: 14px;
}
/* END help box */ 

/* START --- SPECIFIK CLASS FOR checkbox style */


/* Style Checkbox Classique */
.checkbox-wrapper {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  margin: 8px 0;
  width: 100%;
  justify-content: space-between;
}
.checkbox-wrapper input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkbox-wrapper label {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #333;
  position: relative;
  padding-right: 32px;
  line-height: 1.5;
  width: 100%;
}
.checkbox-wrapper label::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 2px solid #ddd;
  border-radius: 6px;
  background-color: white;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
.checkbox-wrapper label::after {
  content: "";
  position: absolute;
  right: 8.5px;
  top: 4px;
  transform: scale(0) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2.5px 2.5px 0;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  opacity: 0;
}
.checkbox-wrapper:hover label::before {
  border-color: #719126;
  /*box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);*/
}
.checkbox-wrapper input[type="checkbox"]:checked + label::before {
  background: #719126;
  border-color: #719126;
}
.checkbox-wrapper input[type="checkbox"]:checked + label::after {
  opacity: 1;
  transform: scale(1) rotate(45deg);
}
.checkbox-wrapper input[type="checkbox"]:focus + label::before {
  /*outline: 2px solid #719126;
  outline-offset: 2px;*/
}
.checkbox-wrapper input[type="checkbox"]:disabled + label {
  opacity: 0.5;
  cursor: not-allowed;
}
.checkbox-wrapper input[type="checkbox"]:disabled + label::before {
  background-color: #f5f5f5;
  border-color: #ddd;
}
/* Style Switch Toggle */
.switch-wrapper {
  display: block;
  cursor: pointer;
  user-select: none;
  margin: 8px 0;
  width: 100%;
  position: relative;
}
.switch-wrapper input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.switch-wrapper label {
  cursor: pointer;
  display: block;
  font-size: 15px;
  color: #333;
  padding-right: 60px;
  position: relative;
  text-align: left;
}
.switch-wrapper label::before {
  content: "";
  position: absolute;
  right: 0;
  width: 50px;
  height: 26px;
  top:3px;
  background-color: #ddd;
  border-radius: 50px;
  transition: all 0.3s ease;
}
.switch-wrapper label::after {
  content: "";
  position: absolute;
  right: 27px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.switch-wrapper input[type="checkbox"]:checked + label::before {
  background: #719126;
}
.switch-wrapper input[type="checkbox"]:checked + label::after {
  right: 3px;
}
.switch-wrapper:hover label::before {
  /*box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);*/
}
.switch-wrapper input[type="checkbox"]:disabled + label {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Switch danger (red when checked) */
.switch-wrapper.switch-danger input[type="checkbox"]:checked + label::before {
  background: #d11333;
}
/* END --- SPECIFIK CLASS FOR checkbox style */


/* INPUTS AND TEXTAREA */

label {
    width:33%; float:left;
    line-height: 32px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.switch-wrapper label, .checkbox-wrapper label {width:100%;}


input[type="text"], input[type="email"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="password"], select, textarea, .fake_input, a.clean_field, a.fake_btn, a.generic_btn, .next_chapter_btn, .save_form_portion, #listing_log_form input[type=submit]{
    width:100% ;
    border:1px solid rgba(255,255,255,0.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-sizing:border-box;
    padding:6px;
    padding-top:5px;
    width:65%; float:right;
    font-size: 15px;
    font-family: 'Source Sans Pro', sans-serif;
    background: transparent;
    color:#ffffff;
}

 input[type="datetime-local"], input[type="date"] { color-scheme: dark; }

textarea {height:150px; width:100%; resize: none;}
label.for_textarea { width:100%;}

select {
    background-image: url(img/arr_up_padding.png) !important;
    background-position: right 50%;
    background-repeat: no-repeat;
    padding-right:20px;
    background-size: 20px;
}

select option {
  padding:10px;
  background: #303841;
  color: #ffffff;
}

input[readonly][disabled], select[readonly][disabled]
{
    background-color:#ffffff; color: #333333; opacity: 1;
}

.input_row:has(input[readonly][disabled]), .input_row:has(select[readonly][disabled]) {
    position: relative
}

.input_row:has(input[readonly][disabled]) input, .input_row:has(select[readonly][disabled]) select {
    padding-right: 35px;
}

.input_row:has(input[readonly][disabled])::after, .input_row:has(select[readonly][disabled])::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23666666' d='M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.input_row:has(input[type="checkbox"][readonly][disabled])::after {
  right: 60px;
}

/* Tooltip simple et élégant */
/* Tooltip simple et élégant - positionné à droite */
.input_row[data-tooltip]:has(input[readonly][disabled])::before, .input_row[data-tooltip]:has(select[readonly][disabled])::before {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 12px); /* À droite du champ */
    top: 50%; /* Centré verticalement */
    transform: translateY(-50%) translateX(-10px); /* Centré + décalage pour l'animation */
    background: linear-gradient(135deg, #faf18c 0%, #fff9b3 100%);
    color: #66633c;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.input_row[data-tooltip]:has(input[type="checkbox"][readonly][disabled])::before {
  right: 90px;
  left: 50%; /* À gauche du champ */

}

.input_row[data-tooltip]:has(input[readonly][disabled]):hover::before, .input_row[data-tooltip]:has(select[readonly][disabled]):hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0); /* Animation de gauche à droite */
}


.input_comment { font-size: 11px !important; width:100% !important; margin-left:0 !important; }


.status_draft {  margin-top: 2px; background: #189def; color: #ffffff; padding:3px; padding-left: 6px; padding-right: 6px; border-radius:3px; display: inline-block; vertical-align: baseline;  }
.status_envoye {  margin-top: 2px; background: #719126; color: #ffffff; padding:3px; padding-left: 6px; padding-right: 6px; border-radius:3px; display: inline-block; vertical-align: baseline;  }
.status_annule {  margin-top: 2px; background: #ff5100; color: #ffffff; padding:3px; padding-left: 6px; padding-right: 6px; border-radius:3px; display: inline-block; vertical-align: baseline;  }
.status_annule_apres_valide {  margin-top: 2px; background: #d11333; color: #ffffff; padding:3px; padding-left: 6px; padding-right: 6px; border-radius:3px; display: inline-block; vertical-align: baseline;  }
.status_en_traitement {  margin-top: 2px; background: #719126; color: #ffffff; padding:3px; padding-left: 6px; padding-right: 6px; border-radius:3px; display: inline-block; vertical-align: baseline;  }
.status_accepte {  margin-top: 2px; background: #719126; color: #ffffff; padding:3px; padding-left: 6px; padding-right: 6px; border-radius:3px; display: inline-block; vertical-align: baseline;  }
.status_refuse {  margin-top: 2px; background: #ff5100; color: #ffffff; padding:3px; padding-left: 6px; padding-right: 6px; border-radius:3px; display: inline-block; vertical-align: baseline;  }
.status_paye {  margin-top: 2px; background: #719126; color: #ffffff; padding:3px; padding-left: 6px; padding-right: 6px; border-radius:3px; display: inline-block; vertical-align: baseline;  }
.status_lettre {  margin-top: 2px; background: #516d0e; color: #ffffff; padding:3px; padding-left: 6px; padding-right: 6px; border-radius:3px; display: inline-block; vertical-align: baseline;  }
.status_valide {  margin-top: 2px; background: #719126; color: #ffffff; padding:3px; padding-left: 6px; padding-right: 6px; border-radius:3px; display: inline-block; vertical-align: baseline;  }

/* -------------- FORM stuff END --------------- */


.tab_container { 
  width:100%; 
  box-shadow: inset 0 -1px 0 0 #cccccc; /* Bord intérieur uniquement en bas */
  margin-top: 20px;
}
.tab {
  display: inline-block;
  text-decoration: none;
  padding: 13px;
  font-weight: bold;
  color: #666;
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-bottom:0;
  box-shadow: inset 0 -1px 0 0 #cccccc; /* Bord intérieur uniquement en bas */
  border-radius: 4px 4px 0 0;
  /*transition: all 0.3s ease;*/
  margin-bottom:-1px;
}

.tab_active { 
  color: #333333;
  background: #ffffff;
  border-bottom: 1px solid #ffffff;
  box-shadow: inset 0 -1px 0 0 #ffffff; /* Bord intérieur uniquement en bas */
}

/* -------------- CHAPTER BOX --------------- */

.app_page_commun_box {
  background:#485462;

  border-radius:6px; 
  padding: 10px;
  /*margin-bottom: 10px;*/
  margin-top:6px; 
  color:#d8dee9;
}


.app_page_stany_style_commun_box_H3 {
  background: rgba(255,255,255,0.1);
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
  color: #ffffff;
  padding: 0;
  margin: 0;
  margin-top:-10px;
  margin-left: -10px;
  margin-right: -10px;
  padding: 15px;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-border-top-left-radius: 6px;
  -webkit-border-top-right-radius: 6px;
  -moz-border-radius-topleft: 6px;
  -moz-border-radius-topright: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  /*border-bottom:1px solid #cccccc;*/
  box-sizing: border-box;
  margin-bottom:15px;
}

.app_page_commun_box_CANCEL_LVL_3.app_page_commun_box {background: #fcebeb;}
.app_page_commun_box_CANCEL_LVL_3 .app_page_stany_style_commun_box_H3 {background: #d11333 url(img/trash_white.svg) no-repeat 10px center; padding-left:50px; background-size:30px; color:#ffffff;}

.app_page_commun_box_CANCEL_LVL_2.app_page_commun_box {background: #fff1ea;}
.app_page_commun_box_CANCEL_LVL_2 .app_page_stany_style_commun_box_H3 {background: #ff5100 url(img/trash_white.svg) no-repeat 10px center; padding-left:50px; background-size:30px; color:#ffffff;}

.app_page_commun_box_SEND.app_page_commun_box {background: #f6ffe1;}
.app_page_commun_box_SEND .app_page_stany_style_commun_box_H3 {background: #719126 url(img/send_white.svg) no-repeat 10px center; padding-left:50px; background-size:30px; color:#ffffff;}

.app_page_commun_box_VALIDED.app_page_commun_box {background: #f6ffe1;}
.app_page_commun_box_VALIDED .app_page_stany_style_commun_box_H3 {background: #719126 url(img/cloud_white.svg) no-repeat 10px center; padding-left:50px; background-size:30px; color:#ffffff;}

.app_page_commun_box_PAID.app_page_commun_box {background: #f6ffe1;}
.app_page_commun_box_PAID .app_page_stany_style_commun_box_H3 {background: #719126 url(img/paid_white.svg) no-repeat 10px center; padding-left:50px; background-size:30px; color:#ffffff;}

.app_page_commun_box_LETTRER.app_page_commun_box {background: #f6ffe1;}
.app_page_commun_box_LETTRER .app_page_stany_style_commun_box_H3 {background: #516d0e url(img/done_white.svg) no-repeat 10px center; padding-left:50px; background-size:30px; color:#ffffff;}

.app_page_commun_box_DRAFT.app_page_commun_box {background: #f2faff;}
.app_page_commun_box_DRAFT .app_page_stany_style_commun_box_H3 {background: #189def url(img/edit_white.svg) no-repeat 10px center; padding-left:50px; background-size:30px; color:#ffffff;}

.app_page_commun_box_TRANSFORMED.app_page_commun_box {background: #fef5ff;}
.app_page_commun_box_TRANSFORMED .app_page_stany_style_commun_box_H3 {background: #603068 url(img/transform_white.svg) no-repeat 10px center; padding-left:50px; background-size:30px; color:#ffffff;}

/* Correctif et transformation */
.app_page_commun_box_BUILD_NCR.app_page_commun_box {background: #f2faff;}
.app_page_commun_box_BUILD_NCR .app_page_stany_style_commun_box_H3 {background: #189def url(img/edit_white.svg) no-repeat 10px center; padding-left:50px; background-size:30px; color:#ffffff;}

.app_page_commun_box:first-child { margin-top:0;}
.app_page_commun_box:nth-child(2)  { margin-top:0;}
#app_page_commun_box_FOR_HEADER { margin-bottom:6px;}



/* ----  CHAPTER BOX END  */

.button_fixed_bottom_container {
  background: #141a21; 
  padding-top: 20px; 
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  border-top: 0px; 
  padding-left:15px;
  padding-right:15px;
  max-height:70px;
  overflow-y:hidden;
}

.spacer_button_fixed_bottom_container {
  height:78px;
}

.btn_connector {
    border-bottom: 2px solid #719126;
    width: 30px;
    height: 16px;
    display: inline-block;
    vertical-align: top;
    margin-left: -4px;
    margin-right: -4px;
}
.btn_connector_inactive { border-color: #cccccc }

.btn {
  height:30px;
  line-height: 28px;
  width:30px;
  background:#3da44c url(img/envoyer.png) no-repeat center; background-size: 20px;
  color:#ffffff;
  /*font-weight: bold;*/
  text-align: center;
  display:inline-block;
  vertical-align: middle;
  border-radius:30px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn_warning {
  background-color: orange;
  color: #ffffff;
}
.btn_red {
  background-color: #d11333;
  color: #ffffff;
}
.btn_orange {
  background-color: #c8651b;
  color: #ffffff;
}
.btn_inactive {
  background-color: #cccccc;
}

.btn_check {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/check_white.svg); background-position:10px center;
}

.btn_save {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/edit_white.svg); background-position:10px center;
}
.btn_back {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/left_white.svg); background-position:10px center;
  background-color: #64748b;
}

.btn_send {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/send_white.svg); background-position:10px center; 
}

.btn_cloud {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/cloud_white.svg); background-position:10px center; 
}

.btn_log {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/histo_white.svg); background-position:10px center;  
}

.btn_edit {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/edit_white.svg); background-position:10px center; 
}

.btn_notecred {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/notecred_white.svg); background-position:10px center; 
}
.btn_attachment {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/attachment_white.svg); background-position:10px center; 
}

.btn_paid {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/paid_white.svg); background-position:10px center; 
}

.btn_letter {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/done_white.svg); background-position:10px center; 
}

.btn_transform {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/transform_white.svg); background-position:10px center; background-size: 24px; 

}

.btn_left {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/left_white.svg); background-position:10px center; 
}

.btn_right {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/right_white.svg); background-position:10px center; 
}

.btn_up {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/up_white.svg); background-position:10px center; 
}

.btn_down {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/down_white.svg); background-position:10px center; 
}

.btn_ocr {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/ocr.svg); background-position:10px center;

  -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);

}

.btn_more {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/more_white.svg); background-position:10px center;
}
.btn_search {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/search_white.svg); background-position:10px center;
}

.btn_close {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/remove_white.svg); background-position:10px center;
}

.btn_trash {
  width: auto; padding-left:36px; padding-right:15px;
  background-image:url(img/trash_white.svg); background-position:10px center;
}

.btn_loading, .btn_loading_orange { /* white on both class for dark theme */
  background-image : url(img/gear-spinner.svg);
}

.btn_icon_force {
    height: 30px;
    width: 30px;
    overflow: hidden;
    padding: 0;
    background-position: center;
    text-indent: 40px;
}





.modal, .ultime_modal{
    display:none;
    position:fixed;
    z-index:899;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.35);
    animation: fadein 0.2s linear forwards;
}

.ultime_modal {
  z-index:10000;
}

.agenda_modal_loading {
  display:none;
  background: #ffffff;
  color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  border-radius: 6px;
  border: 1px solid #cccccc;
  width:60px;
  z-index:1000;
  background-image: url(img/loader_blue_light.svg);
  background-position: center;
  background-size: 30px;
  background-repeat: no-repeat;
  width:50px;
  height:50px;
}




.commun_modal, .bill_line_modal, .search_bill_line_modal, .search_client_in_fav_modal, .new_client_modal, .modal_tva_manager, .client_intels_box, .commun_modal_tooltips, .modal_gallery_bar_container, .ultime_modal_content, .paiement_box_modal, .lettrage_box_modal, .cal_event_modal, .cal_calendar_modal, .cal_browse_shared_modal, .cal_search_modal, .cal_unavail_modal {
    z-index:1002;
    display:none;
    background: #ffffff;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    /*-webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
    -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
    box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);*/
    border-radius: 6px;
    /*border: 1px solid #cccccc;*/
    width:320px;
    max-height: calc(100% - 140px);
    flex-direction: column;
}

.ultime_modal_content {display:block;}

.full_modal{
  z-index:700;
    display:none;
    background: #485462;
    position: fixed;
  top: 50px;
  bottom: 0px;
  left: 0px;
  right: 0px;

    /*-webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
    -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
    box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);*/
    border-radius: 0px;
    /*border: 1px solid #cccccc;*/    
    color: #d8dee9;
    
}

.full_modal_overflow {
  overflow-y: scroll; 
  height: calc(100% - 50px);
  width: 100%;
  padding: 20px;
}

.modal_gallery_bar_container {
  padding-left: 10px;
  padding-right: 10px;
  width: 320px;
}

.commun_modal_tooltips_in { 
  position:relative;
}

.commun_modal_tooltips_msg {
    max-height:400px;
    min-height:100px;
    overflow-y: auto;
    padding-top:20px;
    padding-bottom:50px;
}

.commun_modal_tooltips_msg img{
  width: 265px;
  display: inline-block;
  vertical-align: top;
}

.commun_modal_tooltips_fade {
  position:absolute;
  bottom:0; left:0; right:0;
  height: 60px;
  border-radius: 6px;

  pointer-events: none;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+78&0+0,1+77 */
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 77%, rgba(255,255,255,1) 78%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 77%,rgba(255,255,255,1) 78%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 77%,rgba(255,255,255,1) 78%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */


}


.commun_modal_msg, .modal_turn_to_task_content, .modal_tva_manager_content {
  margin-top: 20px;
  height:100%;
  overflow-y:auto; 
  overflow-x: hidden; 
}

.tooltip_img_container {
  text-align:center;
}

.commun_modal_static_footer {
  text-align: center;
  position: absolute;
  bottom: 19px;
  background: #ffffff;
  border-top: 1px solid #cccccc;
  left: 0;
  right: 0;
}

.commun_modal_msg:has(.commun_modal_static_footer), .modal_tva_manager_content:has(.commun_modal_static_footer)  {
    padding-bottom: 80px;
}



.box_title, .ultime_modal_title {
  cursor:pointer;
  color: #000000;
  padding: 20px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  background: #eeeeee url(img/close_extended.svg) no-repeat  right center;
  background-size: 41px;
  margin:-20px;
  margin-bottom:0;
}
.box_title_white {
  background: #ffffff url(img/close_extended.svg) no-repeat  right center;
  background-size: 41px;
}
.full_modal .box_title { margin:0px; border-radius: 0;}
.ultime_modal_title { background-image:none ; cursor: default}

.login_box_container {  

    background: #485462;
    border-radius: 6px;
    padding: 10px;
    color: #d8dee9;
    z-index:998;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width:300px;
}

.login_box_container .app_page_stany_style_commun_box_H3 {
    background-image: url(img/logoiso_app.png);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 72px;
}

/* ------ ANIM SHAKE ------- */

.bo_shake_no {
  animation: shake 1s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(-50%, -50%, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(calc(-50% - -4px), -50%, 0);
  }
  
  20%, 80% {
    transform: translate3d(calc(-50% - 8px), -50%, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(calc(-50% - -16px), -50%, 0);
  }

  40%, 60% {
    transform: translate3d(calc(-50% - 16px), -50%, 0);
  }
}

.create_account_box_container, .commun_modal_free_ammount, .commun_modal_order_by_ammount, .create_delivery_address_box_container, .create_invoicing_address_box_container {  
    z-index:1001;
    display:none;
    background: #eeeeee;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
    -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
    box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
    border-radius: 6px;
    border: 1px solid #cccccc;
    width:600px;
}

.select_this_address, .select_this_company {
  display: block;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
  background: #eeeeee;
  border-radius: 4px;
  margin-top: 5px;
  cursor: pointer;
  border-bottom: 2px solid #cccccc;
  border-right: 2px solid #cccccc;
  margin-right: 5px;
}

.logline { border-bottom:1px solid #cccccc; padding:5px; }
.logline_user { font-weight:bold;}
.logline_lvl_low { font-weight:bold; color :green; }
.logline_lvl_high { font-weight:bold; color :orange; }
.logline_lvl_critical { font-weight:bold; color :red; }
.logline_date { }
.logline_description { font-style:italic;}

.bill_line_preview_item { border-bottom:1px solid #cccccc; padding:5px; }
.bill_line_preview_item_container_left { float:left; width:calc(100% - 50px) }
.bill_line_preview_item_label { width:20%; float:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill_line_preview_item_qty { width:20%; float:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill_line_preview_item_tva_rate { width:20%; float:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill_line_preview_item_PU { width:20%; float:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill_line_preview_item_tot_htva { width:20%; float:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill_line_preview_item_tot_tvac { width:20%; float:left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: none}
.bill_line_preview_item_container_right { float:right; width:50px; text-align:right }


    .client_search_res_item, .bill_line_search_res_item  {
      border-top: 1px solid rgba(255,255,255,0.15);
      padding-top:10px; padding-bottom:10px;
      cursor:pointer;
      background: url(img/talk.svg) no-repeat left center;
      background-size: 28px;
      padding-left: 38px;
      color: #d8dee9;
    }
    .bill_list_item_header_day, .bill_list_item_header_month, .bill_list_item_header_year {
      text-align: center;
      border-radius: 6px;
      border: 0;
      margin-bottom:5px;
      background-color: rgba(255,255,255,0.1);
      font-weight: bold;
      padding: 5px;
      color: #ffffff;
    }
    /*.bill_list_item_header_month{
      font-size: 18px;
    }
    .bill_list_item_header_year {
      font-size: 24px;
    }*/
    .bill_list_item {
      cursor:pointer;
      background-image: url(img/invoice.svg);
      background-repeat: no-repeat;
      background-color: rgba(255,255,255,0.2);
      background-position: 10px center;
      background-size: 28px;
      color: #d8dee9;
      border-radius: 6px;
      border: 0;
      margin-bottom:5px;
    }
    /* Reset styles for <a> bill_list_item */
    a.bill_list_item,
    a.bill_list_item:link,
    a.bill_list_item:hover,
    a.bill_list_item:visited,
    a.bill_list_item:active {
      display: block;
      text-decoration: none;
      color: inherit;
    }
    .bill_list_item_intels {
      /* width:calc(100% - 40px); */ 
      width:100%; 
      float:left; 
      white-space:nowrap;
      padding:10px;
      padding-left: 48px; 
    }
    .bill_list_item_intels_col_status_container {width: 135px; float: left; }
      .bill_list_item_intels_col_status {width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
      .bill_list_item_intels_col_ref_compta {width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    /*.bill_list_item_intels_col_client {width: 20%; float: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}*/
    
    .bill_list_item_intels_col_label {width: calc(100% - 270px); float: left; }
      .bill_list_item_intels_col_label_line_1 { width:100%; margin-bottom:2px; padding-bottom:2px; border-bottom: 1px solid rgba(0, 0, 0, 0.2);  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .bill_list_item_intels_col_label_line_2 { width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bill_list_item_intels_col_amount {width: 135px; float: left; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .bill_list_item_tools {
      width:40px; float:right; text-align:right; white-space:nowrap;
    }
    .btn_edit_bill {
      width: 38px; height: 38px;
      margin-top: 4px;
      margin-right: 4px;
      border-radius: 4px;
      background-image: url(img/edit.png);
      background-repeat: no-repeat;
      background-color: rgba(0,0,0,0.2);
      background-position: center;
      background-size: 20px;
      display: inline-block;
    }
    .bill_list_item_comment_red, .error_tva_check_api, .error_tva_check_api_by_name, .error_raison_cancel_bill {
      background-color: rgba(255, 255, 255, 0.7);
      color: red;
      padding: 3px; 
      padding-left: 6px; padding-left: 6px;
      width: 100%;
      border-radius: 3px;
      margin-top: 3px;
    }

    .bill_list_item_paid, .bill_list_item_NOT_paid, 
    .bill_list_item_lettrer, .bill_list_item_NOT_lettrer, 
    .bill_list_item_accepted, .bill_list_item_NOT_accepted,
    .bill_list_item_refused, .bill_list_item_NOT_refused, 
    .bill_list_item_only_proforma { display: inline-block; background-color:#cccccc; width: 20px;
      height: 20px;
      border-radius: 10px;
      vertical-align: bottom; 
      background-position: center; 
      background-repeat: no-repeat; 
      background-size: 90%; 
    }

    .bill_list_item_paid { background-image: url(img/paid_white.svg); background-color:#719126 ;}
    .bill_list_item_lettrer { background-image: url(img/done_white.svg); background-color:#719126 ; background-size: 75%;}
    .bill_list_item_accepted { background-image: url(img/check_white.svg); background-color:#719126 ; background-size: 75%  }
    .bill_list_item_refused {  background-image: url(img/close_white.svg); background-color:#d11333 ; background-size: 75% }

    .bill_list_item_only_proforma {}



    #container_BILL_LIST {
      margin-right: 305px;
    }
    #search_engine_bill {
      position: fixed;
      top: 55px;
      right: 5px;
      width: 300px;
      height: auto;
    }

    #search_engine_bill .input_row_box { float:left; width:calc(33.33% - 10px); width:100%; float:none }
    #search_engine_bill  input, #search_engine_bill  select, #search_engine_bill  label { width :100%; float:none; }


    .error_tva_check_api, .error_tva_check_api_by_name {margin-bottom: 6px; }

    .recent_groupe_dashboard_shortcut, .grp {
      border-top: 1px solid rgba(255,255,255,0.15);
      padding-top:10px; padding-bottom:10px;
      cursor:pointer;
      background: url(img/talk.svg) no-repeat left center;
      background-size: 28px;
      padding-left: 38px;
      color: #d8dee9;
    }
    /* Reset styles for <a> grp and dashboard shortcuts */
    a.grp,
    a.grp:link,
    a.grp:hover,
    a.grp:visited,
    a.grp:active,
    a.recent_groupe_dashboard_shortcut,
    a.recent_groupe_dashboard_shortcut:link,
    a.recent_groupe_dashboard_shortcut:hover,
    a.recent_groupe_dashboard_shortcut:visited,
    a.recent_groupe_dashboard_shortcut:active {
      display: block;
      text-decoration: none;
      color: inherit;
    }
    .recent_groupe_dashboard_shortcut:first-child { border:0;}

    .grp_selected { background: lightgreen; }
    .grp_selected_menu {font-weight: bold}

    #all_grp .grp {
      background-color: rgba(255,255,255,0.2);
      background-position: 10px center;
      border-radius: 6px;
      border: 0;
      margin-bottom:5px;
      padding-left: 48px;
    }

    #all_grp .grp:first-child {border:0;}

    #old_flag, #old_task {
      color: #d8dee9; padding-bottom:20px;
    }

    #flux  {
      scroll-behavior: smooth;
       border:0px solid #cccccc; overflow-y:scroll;
       padding:5px;
       padding-bottom: 70px;
       position: fixed;
       top: 50px;
       bottom: 50px;
       left: 0;
       right: 0;
       box-sizing: border-box;
    }

    #flux_code_date, #flux_code_date_bill_list {
      position: fixed;
      top: 70px;
      width: 90px;
      left: calc(50% - 45px);
      background: #c8651b;
      color: #ffffff;;
      line-height: 30px;
      height: 30px;
      border-radius: 4px;
      text-align: center;
      z-index: 100;
    }

    #flux_code_date_bill_list {
      display: none;
      width: 160px;
      left: calc(50% - 75px); /* compenser de 5px, je sais pas encore pq */
    }

    .code_date_container { text-align:center; margin-top:30px; margin-bottom:30px; height:30px; border-top:1px dashed #485462 }
    #app_page_BILL_LIST .code_date_container {margin-bottom: 0; border-color:#333333 }
    .code_date, .code_date_bill_list, .code_date_NM {display:inline-block; width: 90px;background: #485462; color: #ffffff;line-height: 30px;height: 30px;border-radius: 4px;text-align: center; vertical-align:top; margin-top:-15px; margin-left: 11px;}
    .code_date_NM {
       width: 170px;
    }

    .code_date_bill_list {
      width: 160px;
      background: #333333;
    }

    #reminder_groupe_id,
    #reminder_groupe_tot_msg_displayed,
    #reminder_groupe_tot_msg_emoji_displayed {
      position: fixed;
      top: 70px;
      width: 50px;
      left: 10px;
      background: #1e81b0;
      color: #ffffff;;
      line-height: 30px;
      height: 30px;
      border-radius: 4px;
      text-align: center;
      z-index: 100;
    }
     #reminder_groupe_tot_msg_displayed {
      left: 70px;
     }
     #reminder_groupe_tot_msg_emoji_displayed {
      left: 140px;
     }

    #flux_tools {
      background: #303841; width:100%; min-height:50px; margin-top:0px; padding:10px; border-right: 12px solid #141a21;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 100;
      box-sizing: border-box;
    }
    #quote_ref_msg {
      position: absolute;
      margin-top: -68px;
      background: #eeeeee url(img/close_extended.svg) no-repeat right center;
      left: 50px;
      right: 22px;
      border-radius: 6px;
      height:60px; 
      white-space: nowrap;
    }
    #quote_ref_msg_in {
      width:100%;
      height:50px;
      padding: 8px;
      overflow: hidden;
    }
    .view_private_users {
      position: relative;
      cursor: pointer;
      height: 30px;
      width: 30px;
      float: right;
      background: #482e48 url(img/vue.png) no-repeat center;
      background-size: 20px;
      border-radius: 30px;
      margin-left: 5px;
      border-radius: 30px; 
    }
    .turn_to_task {
      position: relative;
      cursor: pointer;
      height: 30px;
      width: 30px;
      float: right;
      background: #482e48 url(img/add_task.png) no-repeat center;
      background-size: 16px;
      border-radius: 30px;
      margin-left: 5px;
      border-radius: 30px;    
      margin-bottom:5px;  
    }
    .flag_this_msg {
      position: relative;
      cursor: pointer;
      height: 30px;
      width: 30px;
      float: right;
      background: #482e48 url(img/drapeau.png) no-repeat center;
      background-size: 16px;
      border-radius: 30px;
      margin-left: 5px;
      border-radius: 30px;      
    }
    .quote_this_msg {
      position: relative;
      cursor: pointer;
      height: 30px;
      width: 30px;
      float: right;
      background: #482e48 url(img/edit.png) no-repeat center;
      background-size: 16px;
      border-radius: 30px;
      margin-left: 5px;
      border-radius: 30px;   
      color:#333333;   
    }

    .original_quote {
      background: rgba(0,0,0,0.35);
      padding: 6px;
      padding-left: 9px;
      padding-right: 9px;
      border-radius: 6px;
      margin-top: 5px;
      margin-bottom: 5px;
      color: rgba(255,255,255,0.7);
      border-left: 3px solid #ffffff;
      font-size: 15px;
    }

    .emotion_this_msg {
      position: relative;
      cursor: pointer;
      height: 30px;
      width: 30px;
      float: right;
      background: #482e48 url(img/emotion.png) no-repeat center;
      background-size: 22px;
      border-radius: 30px;
      margin-left: 5px;
      border-radius: 30px;      
    }

    .flux_msg .view_private_users,
    .flux_msg .turn_to_task,
    .flux_msg .flag_this_msg,
    .flux_msg .quote_this_msg,
    .flux_msg .emotion_this_msg { background-color: #141a21 }

    .flag_this_msg_level, .flag_dashboard_recap, .task_dashboard_recap, .flag_this_msg_level_from_dashboard, .task_level_from_dashboard {
      position: relative;
      cursor: pointer;
      height: 30px;
      width: 30px;
      display:inline-block;
      background: #482e48 url(img/drapeau.png) no-repeat center;
      background-size: 16px;
      border-radius: 30px;
      margin-left: 3px;
      margin-right: 3px;
      margin: 5px;
      border-radius: 30px; 
      vertical-align: middle;     
    }
    .task_level_from_dashboard, .task_dashboard_recap  {
      background-image:  url(img/star.png);
    }
    .flag_this_msg_level_0, .task_level_0 { background-color: #cccccc !important  }
    .flag_this_msg_level_1, .task_level_1 { background-color: #c4392f !important }
    .flag_this_msg_level_2, .task_level_2 { background-color: #dd5f01 !important }
    .flag_this_msg_level_3, .task_level_3 { background-color: #3da44c !important  }

    .task_capsule {
      padding: 10px;
      background: rgba(0, 0, 0, 0.35);
      border-radius: 10px;
      border-bottom: 2px solid rgba(0, 0, 0, 0.5);
      border-right: 2px solid rgba(0, 0, 0, 0.5);
      margin-bottom: 10px;
      position: relative;
      padding-left: 40px;
      
    }

    .task_capsule_not_draggable { 
      padding-left: 10px;
    }

    .task_capsule_drop {
      background-color: #de9709; border-radius: 10px; margin-bottom:10px; 
    }

    .task_capsule_handle {
      background: rgba(0, 0, 0, 0.35);
      width: 30px;
      cursor: pointer;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      border-radius: 10px;
      border-bottom-right-radius: 0;
      border-top-right-radius:0 ;
    }
    .task_capsule_handle span {
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%); color:#ffffff; width:100%; text-align: center; 
    }
    .task_content_box {
      max-height: 90px; overflow: hidden; position: relative; margin-top: 8px; margin-bottom: 5px;
    }
    .task_content_box_gradient {
      position: absolute;
      bottom: 0; left: 0; right :0;
      max-height: 60px;
      min-height: 2px;
      height: 50%;
      background: linear-gradient(to bottom,  rgba(53,63,74,0) 0%,rgba(53,63,74,1) 100%);
    }

    #old_task .task_content_box_gradient {
      position: absolute;
      bottom: 0; left: 0; right :0;
      max-height: 60px;
      min-height: 2px;
      height: 50%;
      background: linear-gradient(to bottom,  rgba(36,42,49,0) 0%,rgba(36,42,49,1) 100%);
    }

    .task_alarme {
      vertical-align: middle;
      width: 30px;
      height: 30px;
      display: inline-block;
      background: #de9709 url(img/alarme.png) no-repeat center;
      background-size: 16px;
      border-radius: 30px;
      float:right;
      margin-left: 10px;
      position: relative;
    }

    .task_alarme_off {
      background-color: #cccccc;
    }

    .task_progress_bar {
      width: 113px;
      height: 5px;
      background: #000000;
      border-radius: 10px;
      overflow: hidden;
      float: right;
      margin-top: -3px;
      margin-right: 39px;
    }
    .task_progress_bar div {
      background-color:#3da44c ;
      height: 5px;
    }

    .open_groupe_from_dashboard, .open_task_from_dashboard, .complete_task_from_dashboard, .status_service_on, .status_service_off {
      color: #d8dee9;
      text-align: left;
      width: 100%;
      padding-left: 15px;
      padding-right: 40px;
      margin-top: 5px;
      background-color: #141a21;
      background-size: 27px;
      background-image: url(img/arr_right_extra.png);
      background-position: center right;
    }

    .open_task_from_dashboard, .complete_task_from_dashboard, .status_service_on, .status_service_off { 
      background-image: url(img/edit_extra.png); width: auto;
    }

    .complete_task_from_dashboard, .status_service_on, .status_service_off {
      background-color: #3da44c;
      color: #ffffff;
      background-image: url(img/verifier.png);
      background-position: 10px center;
      background-size: 20px;
      padding-left: 40px;
      padding-right: 15px;
      float: left;
    }

    .status_service_on, .status_service_off {
      float:none;
      margin: 0;
    }

    .status_service_off {
       background-image: url(img/close_white.svg);
       background-color: #c4392f;
    }


    .emoji_reaction_pop {
      width:100%;
      background: rgba(255,255,255,0.25);
      padding:5px; 
      border-radius: 5px;
      /*margin-top:5px;*/
    }

    .emoji_reaction_pop_item {
      padding-top:4px; padding-bottom:4px;
      border-bottom: 1px solid rgba(255,255,255,0.25);
    }
    .emoji_reaction_pop .emoji_reaction_pop_item:last-child {
      border:0;
    }
    .emotion_react_name { display:inline-block; vertical-align: middle; margin-left:5px;}

    .emotion_this_msg_icon, .emotion_react_icon {
      position: relative;
      cursor: pointer;
      height: 30px;
      width: 30px;
      display:inline-block;
      background-size: 16px;
      border-radius: 30px;
      margin-left: 3px;
      margin-right: 3px;
      margin: 5px;
      border-radius: 30px; 
      vertical-align: middle;     
    }
    
    .emotion_this_msg_icon_thumb_up { background: #3da44c  url(img/thumb_up.png) no-repeat center !important; background-size: 22px !important; } /* green*/
    .emotion_this_msg_icon_thumb_down { background: #c4392f url(img/thumb_down.png) no-repeat center !important; background-size: 22px !important; } /* red*/
    .emotion_this_msg_icon_happy { background: #dea41d url(img/happy.png) no-repeat center !important; background-size: 26px !important; } /* yellow*/
    .emotion_this_msg_icon_unhappy { background: #dd5f01 url(img/unhappy.png) no-repeat center !important; background-size: 26px !important; } /* oranges*/
    .emotion_this_msg_icon_unhappy_surprise { background: #dea41d url(img/unhappy_surprise.png) no-repeat center !important; background-size: 26px !important; } /* yellow*/
    .emotion_this_msg_icon_surprise { background: #dea41d url(img/what.png) no-repeat center !important; background-size: 26px !important; } /* yellow*/
    .emotion_this_msg_icon_very_surprise { background: #dea41d url(img/very_surprise.png) no-repeat center !important; background-size: 26px !important; } /* yellow*/
    .emotion_this_msg_icon_bad_surprise { background: #dea41d url(img/bad_surprise.png) no-repeat center !important; background-size: 26px !important; } /* yellow*/
    .emotion_this_msg_icon_tang { background: #dea41d url(img/tang.png) no-repeat center !important; background-size: 26px !important; } /* yellow*/
    .emotion_this_msg_icon_zip { background: #dea41d url(img/mute.png) no-repeat center !important; background-size: 26px !important; } /* yellow*/
    .emotion_this_msg_icon_funny { background: #dea41d url(img/funny.png) no-repeat center !important; background-size: 26px !important; } /* yellow*/
    .emotion_this_msg_icon_dead { background: #dea41d url(img/dead.png) no-repeat center !important; background-size: 26px !important; } /* yellow*/

    
    .emotion_react_icon {
      height: 20px;
      width: 20px; 
      background-size: 18px !important;
      margin: 0;
      vertical-align: middle
    }

    .view_private_users_box, .flag_this_msg_box, .alarme_box, .task_level_box, .emotion_this_msg_box  { display:none; width:200px; min-height:30px; position:absolute; bottom: 45px; right: -10px; background:#ffffff ; border-radius:6px; 
    padding: 5px; color:#333333;}
    .flag_this_msg_box, .task_level_box {width:170px; text-align: center; }
    .alarme_box{text-align: left; width:200px; }
    .task_level_box, .flag_dashboard_recap .flag_this_msg_box  { right: -123px;}
    .flag_dashboard_recap, .task_dashboard_recap {margin:0; }
    .emotion_this_msg_box {width:170px; text-align: center; right: -116px;}
    /*.flux_msg .view_private_users_box { background-color: #141a21 }*/
    .view_private_users_box_item {padding:5px; margin-bottom:2px;border-bottom:1px solid rgba(0,0,0,0.2);}
    .view_private_users_box_triangle, .flag_this_msg_box_triangle, .alarme_box_triangle, .task_level_box_triangle, .emotion_this_msg_box_triangle, .quote_ref_msg_triangle  {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 8px 0 8px;
    border-color: #ffffff transparent transparent transparent;
    transform: rotate(0deg);
    position: absolute;
    right: 18px;
    bottom: -7px;
    }
    .flag_dashboard_recap .flag_this_msg_box_triangle, .task_dashboard_recap .task_level_box_triangle { right: 129px; } 
    .emotion_this_msg_box_triangle  { right: 123px; }
    .quote_ref_msg_triangle { left: 10px;}
    .alarme_box_close {display:inline-block; width:30px; height:34px; background: #485462 url(img/close_white.svg) no-repeat center; background-size: 20px; border-radius: 5px; margin-left: 3px; vertical-align: middle;}

    .flag_dashboard_container_item { background: rgba(255,255,255,0.15); border-radius: 8px; margin-bottom:10px; padding:10px;}


    .flux_tools_private { position: relative; cursor:pointer; height: 30px; width:30px; float:left; background: #c8651b  url(img/contact.png) no-repeat center; background-size: 20px; border-radius: 30px; margin-right:10px;border-radius: 30px; }
    .flux_tools_private_indicator, .flux_tools_add_files_indicator {
      display: none;
      min-width: 14px;
      height: 14px;
      background-color: #c4392f;
      color: #ffffff;
      position: absolute;
      top: -5px;
      right: -5px;
      border-radius: 10px;
      font-size: 10px;
      text-align: center; 
    }
    .flux_tools_textarea { 
font-family: 'Source Sans Pro', sans-serif; font-size: 16px;
      background: #303841; border: 1px solid rgba(255,255,255,0.4); border-radius: 15px; padding: 2px; padding-left:15px; padding-right:15px; color: #ffffff;
    height: 30px; width:calc(100% - 120px); float:left; resize: none;}

    .flux_height_2 { bottom: 80px !important; }
    .flux_height_3 { bottom: 110px !important; }
    .flux_height_4 { bottom: 140px !important;}
    .flux_height_5 { bottom: 170px !important;}
    .flux_height_6 { bottom: 200px !important;}

    .flux_tools_height_2 {height: 80px;}
  .flux_tools_height_3 {height: 110px;}
  .flux_tools_height_4 {height: 140px;}
  .flux_tools_height_5 {height: 170px;}
  .flux_tools_height_6 {height: 200px;}


  .flux_tools_textarea_height_2 {height: 60px;}
  .flux_tools_textarea_height_3 {height: 90px;}
  .flux_tools_textarea_height_4 {height: 120px;}
  .flux_tools_textarea_height_5 {height: 150px;}
  .flux_tools_textarea_height_6 {height: 180px;}

  .flux_tools_add_files { position: relative; cursor:pointer;  height: 30px; width:30px; float:left; background: #c8651b url(img/doc.png) no-repeat center; background-size: 20px; margin-left:10px; border-radius: 30px;}

    .flux_msg, .flux_msg_me {
      display: inline-block;
      width: auto;
      padding: 5px;
      background-color: #485462;
      /*background-image : url(img/public.png);*/
      background-repeat: no-repeat;
      background-position: 5px 5px;
      background-size: 30px;
      border-radius: 6px;
      margin-bottom: 10px;
      min-width: 70%;
      max-width: 90%;
      color: #d8dee9;

    }

    .flux_msg_me { 
      background-color: #734c73;
      color: #ffffff;

      float: right;
    }

    .flux_msg_private {
      /*background-image : url(img/prive.png);*/
    }

    .clear {
      clear: both
    }

.all_team { margin:-2px;}
.team { position:relative; cursor:pointer; border-radius: 6px; position:relative; width:calc(20% - 4px); height:120px; background: #485462 url(img/avatar/animal_c.svg) no-repeat center 10px ; background-size: 50px; padding:10px; text-align: center; vertical-align: top; border:2px solid #485462; margin:2px; display: inline-block; color:#d8dee9; padding-top:80px; }
/* Reset styles for <a> team items */
a.team {
  text-decoration: none;
  color: #d8dee9;
}
a.team:hover, a.team:visited, a.team:active {
  text-decoration: none;
  color: #d8dee9;
}
.team span { white-space:nowrap; display: inline-block; position:absolute; bottom:5px; width:90%; max-height:48px; left:5%; overflow: hidden;}
.team_selected {border-color:#3da44c;}
.team_inactif {opacity: 0.3}
.team_admin { font-weight:bold; color:#ffffff;}
.team_online_0, .team_online_1, .mini_team_online_1, .mini_team_online_0 {
  position:absolute; top:5px; right:5px; width:10px; height:10px; border-radius: 10px; background: #3da44c;
}
.mini_team_online_1, .mini_team_online_0 {
  position: relative;
      display: block;
    margin-top: -8px;
    margin-left: 34px;
}
.team_online_0, .mini_team_online_0 {
  background: #000000;
}



#all_team_CREATE_GROUPE .team {background-color: #576675}



#msg_private_contact_list_container { 
    display:none; 
    background:#485462;
    border-radius:6px; 
    color:#d8dee9;
    position: fixed;
    z-index: 900;
    top: 70px;
    left: 20px;
    right: 20px;
    bottom: 225px;
   
}
#msg_private_contact_list {
 overflow-y: scroll;
 padding: 10px;
 height:100%;
 width:100%;
 padding-bottom: 60px;
} 
#msg_private_contact_list_tool_box {
  position: absolute;
  bottom:0; left:0; right:0; background: #141a21; height:50px;
  border-bottom-left-radius: 6px;
  text-align: center;
}

#convert_to_task_team_listing {
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 5px;  margin-bottom: 5px;
  display: none;
}
.msg_private_contact_list_item, .convert_to_task_team_item { background: #576675; margin-top:2px; margin-bottom:2px; cursor:pointer; padding:5px; border: 2px solid #576675; white-space: nowrap; overflow: hidden }
.msg_private_contact_list_item_selected, .convert_to_task_team_item_selected { border: 2px solid #3da44c; }

/* upload file class */ 

.flux_gallery {
  /*margin-top:10px;*/
}
.flux_gallery_item_line {
  float: right; width:calc(100% - 40px); padding:5px; background:rgba(255,255,255,0.2); margin-top:5px; overflow-x: hidden; border-radius: 4px;
}

.gallery_bar {
  width: 1px;
  height: 5px;
  background: #35b2c3;
  text-align: center;
  transition-duration: 0.5s;
  transition-timing-function: ease;

}
.gallery_bar_container {
  width: 1px;
  height: 7px;
  padding:1px;
  background: #cccccc;
  max-width:302px; margin-bottom:10px;
  width:100%;
  overflow:hidden;
}

.gallery_item_line {
  width:100%; padding:5px; background:#ffffff; margin-top:5px; border-bottom:1px solid #cccccc; overflow-x: hidden;
}
.gallery_item_pic, .gallery_item_doc, .gallery_item_vid {
  border:1px solid #cccccc; float:left; width:120px; height:100px;  line-height:100px; font-size:20px; font-weight:bold; text-transform:uppercase; text-align:center; color:#ffffff; text-decoration: none; overflow: hidden;
}
.gallery_item_doc { border: 0; }
.gallery_item_text {
  position:relative; float:right; width:calc(100% - 130px); height:100px;
}
.gallery_item_doc_text { position:relative; float:right; width:calc(100% - 45px) }
.remove_work_zone_item {
  position:absolute; bottom:0; right:0
}

input[type=button].gallery_save {
    float: right;
    width: 100px;
    text-align: center;
    background-image: none;
    padding: 6px;
    border-radius: 6px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


/* Menu */

#app_main_header {
    overflow: hidden;
    z-index:900;
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
    background-color: #c8651b;
    color: #ffffff;
    line-height: 50px;
    padding-left: 0px;
    padding-right: 0px;
 }

 .title_idp { text-align: center; }
 .title_header { font-weight:bold; }

#extra_right_header_icon {
  display: inline-block;
  float:right;
  width: 46px;
  height: 50px;
  position: relative;
 background-image: url(img/dossier.png); background-position: center; background-repeat: no-repeat; background-size:30px; 
}

#extra_right_header_icon_bill_preview {
  display: inline-block;
  float:right;
  width: 46px;
  height: 50px;
  position: relative;
 background-image: url(img/preview.svg); background-position: center; background-repeat: no-repeat; background-size:30px; 
 display: none;
}

#extra_right_header_icon_gallery_preview {
  display: inline-block;
  float:right;
  width: 46px;
  height: 50px;
  position: relative;
 background-image: url(img/dossier.png); background-position: center; background-repeat: no-repeat; background-size:30px; 
 display: none;
}

#extra_right_header_icon_search_engine_bill {
    display: inline-block;
  float:right;
  width: 46px;
  height: 50px;
  position: relative;
 background-image: url(img/search_orange.svg); background-position: center; background-repeat: no-repeat; background-size:30px; 
 display: none;
}

#app_call_global_menu {/*width:50px; height:50px; */float:left; /*background-image: url(img/menu_white.svg);*/ /*background-position: center; background-repeat: no-repeat; background-size:24px;*/ margin-right:10px;cursor:pointer;}

/* Icon 4 */

#app_call_global_menu {
  display: block;
  width: 26px;
  height: 26px;
  position: relative;
  margin: 0px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  margin-top: 16px;
    margin-left: 10px;
     margin-right: 10px;
}

#app_call_global_menu span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .15s ease-in-out;
  -moz-transition: .15s ease-in-out;
  -o-transition: .15s ease-in-out;
  transition: .15s ease-in-out;
}



#app_call_global_menu span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#app_call_global_menu span:nth-child(2) {
  top: 8px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#app_call_global_menu span:nth-child(3) {
  top: 16px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#app_call_global_menu.OPENapp_call_global_menu span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0px;
  left: 6px;
}

#app_call_global_menu.OPENapp_call_global_menu span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#app_call_global_menu.OPENapp_call_global_menu span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 18px;
  left: 6px;
}


#app_global_menu, #app_right_menu { 
    width: 0px; 
    float:left;  
    position:fixed; top:50px; bottom:0; overflow-y:auto; z-index: 1002;
    -webkit-transition: width .15s ease-in-out;
    -moz-transition: width .15s ease-in-out;
    -o-transition: width .15s ease-in-out;
    transition: width .15s ease-in-out;

    /* Force using GPU */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);

    -webkit-overflow-scrolling: touch;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+0,333333+72,000000+100 */
    background: #141a21; /* Old browsers */
    color:#ffffff;
    overflow-x: hidden;
}

/*#app_right_menu { 
  float:right; right:0; 
}
.app_right_menu_div, .app_right_menu_div_container { padding: 10px; width:300px; margin:0 auto; border-bottom:1px solid rgba(255,255,255,0.2); }
*/

#PW_preview_container {
    padding: 30px;
    width: calc(50% - 6px);
    margin-left: auto;
    position: fixed;
    top: 55px;
    bottom: 78px;
    right: 6px;
    background: #ffffff;
    color: #333333;
    border-radius: 6px;
    overflow-y: scroll;
}

#menu_preview_counter_OCR_btn_container {
  position:fixed; bottom:100px; right: 6px; width: calc(50% - 6px); text-align: center;
  pointer-events: none;
}
#OCR_reco{
  pointer-events: auto;
}


#menu_preview_container {
  position:fixed; 
  bottom:200px; 
  right: 22px;
  width: calc(50% - 26px);
  height: 50px;
  top:  calc(50% - 25px);
  pointer-events: none;
}

.menu_preview_container_navig_left {
  display: inline-block;
  float:left;
  width: 50px;
  height: 50px;
  position: relative;
  background-color: #ffffff;
  background-image: url(img/arr_left.svg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-size:30px; 
  -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  border-radius: 50px;
  pointer-events: auto;
}
.menu_preview_container_navig_right {
  display: inline-block;
  float:right;
  width: 50px;
  height: 50px;
  position: relative;
  background-color: #ffffff;
  background-image: url(img/arr_right.svg); 
  background-position: center; 
  background-repeat: no-repeat; 
  background-size:30px; 
  -webkit-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  -moz-box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  box-shadow: 0px 0px 15px 1px rgba(0,0,0,0.23);
  border-radius: 50px;
  pointer-events: auto;
}

#form_bill_container {
  width: calc(50% - 6px);
  float: left;
}

/*
.app_right_menu_div_open_more { background: url(img/arr_down.png) no-repeat 90% 50%; background-size: 12px; }
.app_right_menu_div_open_less { background: url(img/arr_up.png) no-repeat 90% 50%; background-size: 12px; }
.app_right_menu_div_container {cursor: pointer;}

.app_global_menu_visible, .app_right_menu_visible { 
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    width: 300px !important; 
}
*/
.app_global_menu_visible { 
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    width: 300px !important; 
}

.app_global_menu_row {cursor:pointer; white-space: nowrap; /*overflow:hidden;*/ height:50px; width:auto;  margin-left:10px; margin-right:10px; border-bottom:1px solid rgba(255,255,255,0.2);}
.app_global_menu_row:hover { /*background-color: #222222;*/ /*color:#333333;*/
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+0,000000+100 */
}
.app_global_menu_row_ico, .app_global_menu_row_ico_maxi {  float: left; margin-right: 5px; margin-left: 5px; margin-top: 7px; width: 36px; height:36px; background-image: url(img/logo-institut-du-poids-round.png); background-position: center; background-repeat: no-repeat; background-size:30px;  }
.app_global_menu_row_ico_maxi {  float:none;  display: inline-block;   box-sizing: content-box;cursor: pointer; background-size:60px; border:5px solid transparent; margin: 1px; width: 60px; height:60px; }
.profile_avatar_selected { background-color: #a0c64c; border:5px solid #a0c64c; -webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; }


#app_global_menu_link_home { height:auto;  }
.global_menu_ico_home { float: none; display:block; width: calc(100% - 10px); height:70px; background-position: top center;  background-size: 70px; margin-top:20px;}

.mini_avatar {  display:inline-block; width: 34px; height:34px; background-position: center;  background-size: 34px; margin-right:7px; vertical-align: middle; }


.global_menu_ico_home { background-image: url(img/logo-institut-du-poids-round.png); }
.profile_woman_0_20 { background-image: url(img/avatar/woman_0_20.svg); }
.profile_woman_0_20_b { background-image: url(img/avatar/woman_0_20_b.svg); }
.profile_man_0_20 { background-image: url(img/avatar/man_0_20.svg); }
.profile_man_0_20_b { background-image: url(img/avatar/man_0_20_b.svg); }
.profile_woman_20_40 { background-image: url(img/avatar/woman_20_40.svg); }
.profile_woman_20_40_b { background-image: url(img/avatar/woman_20_40_b.svg); }
.profile_man_20_40 { background-image: url(img/avatar/man_20_40.svg); }
.profile_man_20_40_b { background-image: url(img/avatar/man_20_40_b.svg); }
.profile_woman_40_60 { background-image: url(img/avatar/woman_40_60.svg); }
.profile_woman_40_60_b { background-image: url(img/avatar/woman_40_60_b.svg); }
.profile_man_40_60 { background-image: url(img/avatar/man_40_60.svg); }
.profile_man_40_60_b { background-image: url(img/avatar/man_40_60_b.svg); }
.profile_animal_a { background-image: url(img/avatar/animal_a.svg); }
.profile_animal_b { background-image: url(img/avatar/animal_b.svg); }
.profile_animal_c { background-image: url(img/avatar/animal_c.svg); }
.profile_animal_d { background-image: url(img/avatar/animal_d.svg); }
.profile_animal_e { background-image: url(img/avatar/animal_e.svg); }
.profile_animal_f { background-image: url(img/avatar/animal_f.svg); }
.profile_animal_g { background-image: url(img/avatar/animal_g.svg); }
.profile_animal_h { background-image: url(img/avatar/animal_h.svg); }
.profile_inconnu { background-image: url(img/avatar/inconnu.svg); }

.global_menu_ico_BILL { background-image: url(img/invoice.svg); opacity: 1; }
.global_menu_ico_CALENDAR { background-image: url(img/calendar.svg); opacity: 1; }
.global_menu_ico_SETTINGS { background-image: url(img/settings.svg); opacity: 1; }
.global_menu_ico_GROUPE { background-image: url(img/talk.svg); opacity: 1; }
.global_menu_ico_ADMIN { background-image: url(img/admin.svg); opacity: 1; }
.global_menu_ico_GM_sport_red { background-image: url(img/GM_sport_red.svg); opacity: 1; }
.global_menu_ico_GM_takeaway_red { background-image: url(img/GM_takeaway_foodbox.png); opacity: 1; }
.global_menu_ico_DISCONNECT { background-image: url(img/logout.svg); opacity: 1; }
.global_menu_ico_GM_recette_red { background-image: url(img/GM_recette_red.svg); opacity: 1; }


.global_menu_ico_agenda { background-image: url(img/calendar_white.svg); opacity: 0.8; }
.global_menu_ico_nutrition { background-image: url(img/fork-and-knife_white.svg); opacity: 0.8; }
.global_menu_ico_consultation { background-image: url(img/time_white.svg); opacity: 0.8; }
.global_menu_ico_cure { background-image: url(img/first-aid-kit_2_white.svg); opacity: 0.8; }
.global_menu_ico_coaching { background-image: url(img/compass_white.svg); opacity: 0.8; }
.global_menu_ico_debug { background-image: url(img/bug_white.svg); opacity: 0.8; }
.global_menu_ico_deconnection { background-image: url(img/close_white.svg); opacity: 0.8; }
.global_menu_ico_activity { background-image: url(img/fitness-shoes_white.svg); opacity: 0.8; }

.app_global_menu_row:hover, .app_global_menu_row:active { color:#333333;}
.app_global_menu_row:hover > .app_global_menu_row_ico, .app_global_menu_row:active > .app_global_menu_row_ico { opacity: 1; }

.app_global_menu_row_label { float: left; white-space: nowrap; width:calc(100% - 50px); margin-left:4px;  height:50px; line-height:50px;  font-size: 15px; color:#d8dee9; }
.sub_opener_BILL .app_global_menu_row_label,
.sub_opener_GROUPE .app_global_menu_row_label,
.sub_opener_SETTINGS .app_global_menu_row_label,
.sub_opener_ADMIN .app_global_menu_row_label{ border-bottom:1px solid rgba(255,255,255,0.2) }



.app_global_menu_row_label_first { float: none; display:block; width:100%; text-align: center; height:auto; line-height:normal; margin-top:10px; margin-bottom:10px;}

.app_global_menu_row_label_opener { font-weight:bold; color:#ffffff; background: url(img/arr_down.png) no-repeat 98% 50%; background-size:12px; }
.app_global_menu_row_label_opener_rotate_bg { background-image: url(img/arr_up.png)}
.app_global_menu_row_label_opener_last, .app_global_menu_row_label_no_opener { background:none;}
.app_global_menu_row_inactive > .app_global_menu_row_ico, 
.app_global_menu_row_inactive:hover > .app_global_menu_row_ico, 
.app_global_menu_row_inactive:active > .app_global_menu_row_ico { opacity: .2; }
.app_global_menu_row_inactive > .app_global_menu_row_label { opacity: .2; }

/* Reset styles for <a> tags in menu */
a.app_global_menu_row {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.app_global_menu_row:hover,
a.app_global_menu_row:visited,
a.app_global_menu_row:active {
  text-decoration: none;
  color: inherit;
}

/* Active menu item highlight */
.menu_item_active,
.menu_item_active .app_global_menu_row_label {
  background-color: rgba(255, 255, 255, 0.1);
  color: #4ebde9;
}

.dashbord_str {display:block; font-weight:bold;}
.b2c_indic,
.vip_indic,
.news_indic { padding:3px; padding-left:6px; padding-right:6px; display:inline-block; background-color:#a0c64c; color:#ffffff; line-height: normal; border-radius: 4px; font-family: 'Roboto Condensed', sans-serif; font-size:13px;  letter-spacing: 1.3px;}
.b2c_indic { background-color: #339bf3 }
.news_indic { background-color: #4ebde9; color:#ffffff; }
.food_box_new, 
.food_box_soon { display:none; }
.food_box_soon { background-color: #fdf294; color:#333333; }

.sub_opener_BILL,
.sub_opener_GROUPE,
.sub_opener_SETTINGS,
.sub_opener_ADMIN {
  display:none;
}

.sub_opener_alimentation_data {
  display:block;
}


#app_all_pages_container { margin-top:50px;width: 100%; float:right; position:relative;
    overflow-x:visible; /* on overwrite une valeur de JQM qui pause pb sur iOS (laggy scroll), en plus le feader en fixed position ne cache plus la scroll barr du browser ! */
    -webkit-transition: width .3s ease-in-out;
    -moz-transition: width .3s ease-in-out;
    -o-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
    /*pointer-events: none;*/
    padding: 15px;
    padding-bottom: 30px;
    box-sizing: border-box;
  min-height: calc(100% - 50px);
}



.app_pages {/* margin-top:50px; */   /*padding:10px;*/  width:100%; /*background-color: #ffffff;*/ display:none; height: 100%; padding: 5px}
#app_page_CHATBOX {padding:0; margin: -15px; width: calc(100% + 30px);}


.in_grp_box_img_item {
  width:auto;padding-top: 10px; padding-bottom: 10px;
}
.in_grp_box_img_item_visual_pic {
  margin-left:10px; float:left; border:2px solid #ffffff; text-decoration:none; width:calc(45% - 10px); height:100px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size:cover
}
.in_grp_box_img_item_visual_doc {
  width:60px; height:50px; background-size: 48px; float:left;background-repeat: no-repeat; background-position: center;
}
.in_grp_box_img_item_visual_vid {
  float:left; border:2px solid #ffffff; text-decoration:none; width:45%; height:100px; overflow:hidden
}
.in_grp_box_img_item_txt_pic {
  float:right; width:calc(55% - 20px); color:#dddddd; text-align:left;
}
.in_grp_box_img_item_txt_doc {
  float:right; width:calc(100% - 60px);  color:#dddddd; text-align:left;
}
.in_grp_box_img_item_txt_vid {
  float:right; width:calc(55% - 10px); color:#dddddd; text-align:left;
}
.in_grp_box_img_item_txt_link {
  font-style:italic; cursor:pointer; text-decoration:underline
}

/* --------- DASHBOARD ------------- */

.alerts-section {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.alerts-section h3 {
    color: #856404;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.alert-item {
    color: #856404;
    margin: 8px 0;
    padding-left: 20px;
    position: relative;
}

.alert-item:before {
    content: "•";
    position: absolute;
    left: 5px;
    font-weight: bold;
}



/* -------------------------- DYNAMIQUE TEMPLATE DOC COMPTA ----------------------- */


#PW_preview_container { background: linear-gradient(135deg, #fcfcfc 0%, #eeeeee 100%); border-radius: 8px; }

.PW_header { display: flex; justify-content: space-between; margin-bottom: 30px; border-bottom: 3px solid #333333; padding: 20px; background: white; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.PW_company_info { flex: 1; }
.PW_company_logo { max-width: 150px; margin-bottom: 10px; }
.PW_doc_info { text-align: right; }
.PW_doc_type { font-size: 24px; font-weight: bold; margin-bottom: 5px; color: #2c3e50; }
.PW_doc_number { font-size: 14px; color: #7f8c8d; }
.PW_parties { display: flex; justify-content: space-between; margin-bottom: 30px; gap: 20px; }
.PW_party { flex: 1; background: white; padding: 15px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.PW_party_title { font-weight: bold; margin-bottom: 10px; text-transform: uppercase; font-size: 11px; color: #333333; padding-bottom: 8px; border-bottom: 2px solid #e9ecef; }
.PW_lines { width: 100%; border-collapse: collapse; margin-bottom: 20px; background: white; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.PW_lines th { background: linear-gradient(180deg, #444444 0%, #333333 100%); color: white; padding: 12px; text-align: left; font-weight: bold; }
.PW_lines td { padding: 10px 12px; border-bottom: 1px solid #e9ecef; }
.PW_lines tbody tr:hover { background-color: #f8f9fa; }
.PW_lines .PW_right { text-align: right; }
.PW_totals { margin-left: auto; width: 300px; background: white; padding: 20px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.PW_total_row { display: flex; justify-content: space-between; padding: 8px 0; }
.PW_total_row.PW_final { font-weight: bold; font-size: 15px; background: linear-gradient(135deg, #444444 0%, #333333 100%); color: white; padding: 12px; border-radius: 4px; margin-top: 10px; }
.PW_footer { margin-top: 40px; padding-top: 20px; border-top: 2px solid #e9ecef; font-size: 10px; color: #7f8c8d; }
.PW_payment_info { margin-top: 20px; padding: 15px; background: white; border-left: 4px solid #333333; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.PW_payment_info strong { display: block; margin-bottom: 5px; color: #2c3e50; }
#PW_bill_signature_pad_clone canvas { position:relative; }
/*
.PW_header { display: flex; justify-content: space-between; margin-bottom: 30px; border-bottom: 2px solid #000; padding-bottom: 15px; }
.PW_company_info { flex: 1; }
.PW_company_logo { max-width: 150px; margin-bottom: 10px; }
.PW_doc_info { text-align: right; }
.PW_doc_type { font-size: 24px; font-weight: bold; margin-bottom: 5px; }
.PW_doc_number { font-size: 14px; color: #666; }
.PW_parties { display: flex; justify-content: space-between; margin-bottom: 30px; }
.PW_party { flex: 1; }
.PW_party_title { font-weight: bold; margin-bottom: 5px; text-transform: uppercase; font-size: 11px; color: #666; }
.PW_lines { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.PW_lines th { background: #f0f0f0; padding: 8px; text-align: left; border-bottom: 2px solid #000; font-weight: bold; }
.PW_lines td { padding: 8px; border-bottom: 1px solid #ddd; }
.PW_lines .PW_right { text-align: right; }
.PW_totals { margin-left: auto; width: 300px; }
.PW_total_row { display: flex; justify-content: space-between; padding: 5px 0; }
.PW_total_row.PW_final { font-weight: bold; font-size: 14px; border-top: 2px solid #000; padding-top: 10px; margin-top: 10px; }
.PW_footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; font-size: 10px; color: #666; }
.PW_payment_info { margin-top: 20px; padding: 10px; background: #f9f9f9; border-left: 3px solid #000; }
.PW_payment_info strong { display: block; margin-bottom: 5px; }
#PW_bill_signature_pad_clone canvas { position:relative; }
*/
/* ---------------------------------------------- RESPONSIVE ADJUSTMENTS -------------------------------- */

  /* #Big screen (+ 1280)
  ================================================== */

    /* Note: Design for a width bigger than 1280px */

    @media only screen and (min-width: 1281px) {

    /* Menu global always visible */
        /*#app_global_menu, #app_right_menu { */
        #app_global_menu { 
            /* Force using GPU */
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            width: 300px !important; 
        }

        #app_call_global_menu, #extra_right_header_icon { visibility : hidden !important;}

        #app_all_pages_container { width: calc(100% - 300px) !important; /* width: calc(100% - 600px) !important;*/ /* overflow-x:auto  !important; */
          float: left;
          margin-left: 300px;
        }

        #app_all_pages_container.app_all_pages_container_no_right_col {
          width: calc(100% - 300px) !important;
        } 
        /*#app_right_menu.app_right_menu_no_right_col{
          display: none;
        }*/

        #msg_private_contact_list_container { left : 320px; /*right:320px;*/ right:0; }
        .full_modal{left : 300px; /*right:300px;*/  right:0}

        .button_fixed_bottom_container {
          left : 300px; /*right:300px;*/ right:0;
        }
        #app_page_CREATE_BILL .button_fixed_bottom_container {
          right: 0px;
        }

        #flux_tools {
          left: 300px;
          width: calc(100% - 300px);
        }

        .app_pages {width:100% !important; padding: 15px}

        .app_page_commun_box {
          box-sizing: border-box; /*border-bottom:2px solid #cbcbcb;*/ background:#485462;

              border-radius:6px; 
              padding: 10px;
              margin-bottom: 15px;
              color:#d8dee9;
          }

          #app_page_commun_box_FOR_HEADER { margin-bottom:15px;}

        .team {width:calc(12.5% - 4px); }
        #flux  {
           padding:20px;
           left: 300px;
           right: 0;
        }

        #flux_code_date {
           left: calc(50% + 105px); /* Centré sur la zone de contenu (décalé de 150px pour le menu de 300px, moins 45px pour la moitié de la largeur) */
        }

        #quote_ref_msg {
          right: 104px;
        }

        .open_groupe_from_dashboard, .open_task_from_dashboard {
          width: auto;
        }

        #PW_preview_container { 
            width: 600px;
            top: 66px;
            bottom: 86px;
            right: 15px;
        }

        #menu_preview_counter_OCR_btn_container {
          right: 15px; width: 600px;
        }


        #menu_preview_container { 
            width: 578px;
            right: 32px;
        }

        #form_bill_container {
          width: calc(100% - 615px);
          float: left;
        }

        .spacer_button_fixed_bottom_container {
          height:72px;
        }



        #container_BILL_LIST {
          margin-right: 315px;
        }
        #search_engine_bill {
          position: fixed;
          top: 65px;
          right: 15px;
          width: 300px;
          height: auto;
        }


        .hide_on_mobile_inline_block { display: none; }

    }


 /*  #Mobile (Portrait)
  ================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 768px) {

        #are_we_on_mobile_detection {display: block;}

        #flux_code_date {
            left: calc(50% - 47.5px);
        }

        .input_row {
            border-bottom: 0;
        }

        input[type="text"], input[type="email"], input[type="tel"], input[type="datetime-local"], input[type="date"], input[type="password"], select, textarea,.fake_input, a.clean_field, a.fake_btn  {
            /*font: normal 15px arial;*/ /*margin:0;*/ width:100%;
        }
        .mini_select select { width:100%;}
        .midi_select select { width:100%;}
        .mini_input input, .mini_input .fake_input { width:100%;}

        select { padding-right:20px !important; }

        label { width:100% !important; }

        .checkbox-wrapper label,
        .switch-wrapper label {
            font-size: 15px;
        }

        .checkbox-wrapper label {
            padding-left: 30px;
        }

        .checkbox-wrapper label::before {
            width: 20px;
            height: 20px;
        }

        .checkbox-wrapper label::after {
            left: 7px;
            top: 3px;
            width: 4.5px;
            height: 9px;
        }

        /* TROUVER un moyen d'afficher les tool tip mieux on responsive */
        /*.input_row[data-tooltip]:has(input[readonly][disabled])::before {
            left: 50%;
            top: auto;
            bottom: calc(100% + 12px);
            transform: translateX(-50%) translateY(10px);
            white-space: normal;
            max-width: 220px;
        }
        
        .input_row[data-tooltip]:has(input[readonly][disabled]):hover::before {
            transform: translateX(-50%) translateY(0);
        }*/
        /* pour l'instant, on cache */
        .input_row[data-tooltip]:has(input[readonly][disabled])::before, .input_row[data-tooltip]:has(select[readonly][disabled])::before {
          display:none
        }

        .input_row:has(input[readonly][disabled])::after, .input_row:has(select[readonly][disabled])::after {
          top:68%;
        }

        .input_row[data-tooltip]:has(input[type="text"][readonly][disabled])::before, .input_row[data-tooltip]:has(input[type="text"][readonly][disabled]):hover::before,
        .input_row[data-tooltip]:has(select[readonly][disabled])::before, .input_row[data-tooltip]:has(select[readonly][disabled]):hover::before {
          display:none;
        }
        
        .btn_icon {          
          height: 30px;
          width: 30px;
          overflow: hidden;
          padding: 0 !important;
          background-position: center !important;
          text-indent: 40px;
        } /* tranforme les btn classique en icon */

        #app_global_menu { 
            /* Force using GPU */
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);

            -webkit-transition: width .3s ease-in-out;
            -moz-transition: width .3s ease-in-out;
            -o-transition: width .3s ease-in-out;
            transition: width .3s ease-in-out;
        }
        #app_all_pages_container {
            -webkit-transition: width .3s ease-in-out;
            -moz-transition: width .3s ease-in-out;
            -o-transition: width .3s ease-in-out;
            transition: width .3s ease-in-out;
            padding: 5px;
            padding-bottom: 20px;
        }

        #app_page_CHATBOX {
            margin: -5px;
            width: calc(100% + 10px);
        }

        .app_global_menu_visible {  
            /* Force using GPU */
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            width: calc(100% - 70px) !important;
        }

        .app_all_pages_container_slide, .app_page_all_externalized_header_slide { /*width: 70px !important;*/ }

        .team {width:calc(33.33% - 4px); }

        #PW_preview_container { 
          width: calc(100% - 12px);
          position: fixed;
          top: 55px;
          bottom: 77px;
          right: 6px;
          left: 6px;
          display: none;
        }

        #menu_preview_counter_OCR_btn_container {
          right: 0px; width: 100%;
          display: none;
        }


        #menu_preview_container {
          width: calc(100% - 2px);
          right: 10px;
          display: none;
        }

        #form_bill_container {
          width: 100%;
          float: none;
        }

        .spacer_button_fixed_bottom_container {
          height:78px;
        }

        .bill_list_item { background-image:none }
        .bill_list_item_intels { padding:10px }

        .bill_list_item_intels_col_status_container {width: 30%; }
        .bill_list_item_intels_col_label {width: 40%; }
        .bill_list_item_intels_col_amount {width: 30%; }

        #container_BILL_LIST {
          margin-right: 0px;
        }
        #search_engine_bill {
          top: 50px;
          bottom: 0;
          right: -300px;
          width: 300px;
          height: auto;
          border-radius: 0;
          z-index: 101;
          transition: right 0.3s ease;

        }
        #search_engine_bill::after {
          content: "";
          position: fixed;
          top: 0;
          bottom: 0;
          left: auto;
          z-index: 99;
          width: 300%;
          height: 100%;
          right: 0;
          background: rgba(0, 0, 0, 0.35);
          transition: all 0.3s ease;
          opacity: 0;
          pointer-events: none;
        }

        .search_engine_bill_show_up {
          right: 0 !important;
        }

        #search_engine_bill.search_engine_bill_show_up::after {
          width: 300%;
          right: 300px;
          opacity: 1;
          pointer-events: auto;
        }

        .hide_on_mobile_inline_block { display: none; }

        /* CRM buttons mobile */
        .btn_back, .btn_save { padding-left: 30px; padding-right: 12px; }


 }

 select.shortcut_t_task_alerte {background-color: #485462; float: none; width: calc(100% - 32px); vertical-align: middle}


/* animation icons */

.sub_title_modal {
  font-family: 'Roboto Condensed', sans-serif;
    text-transform: uppercase;
    font-size: 18px; font-weight:bold;
}

/* FAC send */

.valid_FAC_circle_container {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /*background: linear-gradient(135deg, #ffffff 0%, #eeeeee 100%);*/
  background: #ffffff;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  border: 2px solid #ccc;
}

.valid_FAC_icon {
  position: absolute;
  background: url(img/send_orange.svg) no-repeat center;
  background-size: contain;
  width: 80px;
  height: 80px;
  bottom: -60px;
  left: -60px;
  animation: moveDiagonal 3s ease-in-out infinite;
}

@keyframes moveDiagonal {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(280px, -280px);
  }
}

.valid_CLOUD_icon {
  position: absolute;
  background: url(img/cloud_orange_bis.svg) no-repeat center;
  background-size: contain;
  filter: drop-shadow(2px -3px 0px white);
  width: 190px;
  height: 190px;
  left: calc(50% - 95px);
  top: calc(55% - 95px);
}

.valid_CLOUD_icon::before {
  content: "";
  position: absolute;
  background: url(img/cloud_receipt_orange_bis.svg) no-repeat center;
  background-size: 50px;
  width: 140px;
  height: 140px;
  left: calc(50% - 70px);
  top: calc(50% - 70px);
  animation: animCloudReceipt 3s  ease-in-out infinite; 
}

@keyframes animCloudReceipt {
    0% {
        transform: translateY(200px); /* Position de départ */
    }
    50% {
        transform: translateY(0px); /* Position finale */
    }
    60% {
        transform: translateY(0px); /* Position finale */
    }
    70% {
        transform: translateY(0px); /* Position finale */
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(0px); /* Position finale */
        transform: scale(0.8); 
        opacity: 0;
    }
}

.valid_UPDATED_icon {
  position: absolute;
  background: url(img/check_orange.svg) no-repeat center;
  background-size: contain;
  width: 140px;
  height: 140px;
  left: calc(50% - 70px);
  top: calc(50% - 70px);
  animation: zoom 3s  ease-in-out infinite; 
}

.valid_UPDATED_icon::before {
  content: "";
  position: absolute;
  background: #ffffff;
  width: 140px;
  height: 140px;
  left: calc(50% - 70px);
  top: calc(50% - 70px);
  animation: moveLeftToRight 3s ease-in-out infinite; 
}


.valid_LETTRER_icon, .valid_LETTRER_bis_icon {
  position: absolute;
  background: url(img/check_orange.svg) no-repeat center;
  filter: drop-shadow(2px -3px 0px white);
  background-size: contain;
  width: 140px;
  height: 140px;
  left: calc(44% - 70px);
  top: calc(50% - 70px);
  animation: zoom 3s  ease-in-out infinite; 
}

.valid_LETTRER_icon::before, .valid_LETTRER_bis_icon::before {
  content: "";
  position: absolute;
  background: #ffffff;
  width: 140px;
  height: 140px;
  left: calc(44% - 70px);
  top: calc(50% - 70px);
  animation: moveLeftToRight 3s ease-in-out infinite; 
}

.valid_LETTRER_bis_icon, 
.valid_LETTRER_bis_icon::before {
  left: calc(56% - 70px);
}

@keyframes zoom {
    0% {
        transform: scale(0.9); /* Taille originale */
    }
    60% {
        transform: scale(0.9); /* Taille originale */
    }
    70% {
        transform: scale(1.2); /* Agrandissement à 110% */
    }
    80% {
        transform: scale(0.75); /* Réduction à 95% */
    }
    90% {
        transform: scale(0.9); /* Retour à la taille originale */
    }
    100% {
        transform: scale(0.9); /* Retour à la taille originale */
    }
}

@keyframes moveLeftToRight {
    0% {
        transform: translateX(0); /* Position de départ */
    }
    50% {
        transform: translateX(300px); /* Position finale */
    }
    99% {
        transform: translateX(300px); /* Position finale */
    }
    100% {
        transform: translateX(0); /* Position finale */
    }
}

.valid_PAID_icon {
  position: absolute;
  background: url(img/paid_orange.svg) no-repeat center;
  background-size: contain;
  width: 140px;
  height: 140px;
  left: calc(50% - 70px);
  top: calc(50% - 70px);
  animation: animPaid 3s  ease-in-out infinite; 
}

@keyframes animPaid {
    0% {
        transform: translateY(-200px); /* Position de départ */
    }
    50% {
        transform: translateY(0); /* Position finale */
    }
    60% {
        transform: translateY(0); /* Position finale */
    }
    100% {
        transform: translateY(200px); /* Position finale */
    }
}



/*svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}*/


/* ============================================================================
   CALENDAR MODULE - START
   ============================================================================ */

/* Layout */
.cal_app { display: flex; flex-direction: column; min-height: calc(100vh - 50px); overscroll-behavior: none; }
.cal_header { display: flex; align-items: center; padding: 1rem; background: white; border-bottom: 1px solid #e2e8f0; gap: 0; position: fixed; top: 50px; left: 15px; right: 15px; z-index: 100; border-top: 20px solid #cccccc; min-height: 105px; box-sizing: border-box; }
.cal_header_left { width: 232px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cal_header_content { flex: 1; display: flex; align-items: center; justify-content: space-between; padding-left: 1rem; }
.cal_main { display: flex; flex: 1; margin-top: 90px; margin-left: 256px; position: relative; }

/* Header */
.cal_logo { display: flex; align-items: center; gap: 0.5rem; }
.cal_logo svg { color: #2563eb; }
.cal_logo span { font-size: 18px; font-weight: 600; color: #1e293b; }
.cal_header-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s; text-decoration: none; }
.cal_header-btn:hover { background: #2563eb; }
.cal_header-btn svg { stroke: white; }
.cal_header_left { display: flex; gap: 6px; }
.cal_create-btn { display: flex; align-items: center; gap: 0.4rem; background: #3b82f6; color: white; border: none; padding: 8px 13px; border-radius: 4px; cursor: pointer; font-weight: 500; font-size: 14px; transition: background 0.2s; }
.cal_create-btn:hover { background: #2563eb; }
.cal_header_center { display: flex; align-items: center; gap: 1rem; }
.cal_nav-controls { display: flex; align-items: center; gap: 0.5rem; }
.cal_today-btn { display: flex; align-items: center; gap: 0.4rem; height: 36px; padding: 0 13px; border: 1px solid #e2e8f0; background: white; border-radius: 4px; cursor: pointer; font-weight: 500; font-size: 14px; transition: background 0.2s; color: #1e293b; text-decoration: none; }
.cal_today-btn:hover { background: #f1f5f9; }
/* Team user picker */
.cal_team_user_picker { position: relative; margin: 15px; }
.cal_team_user_trigger { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #e2e8f0; background: white; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.cal_team_user_trigger:hover { border-color: #cbd5e1; background: #f8fafc; }
.cal_team_user_trigger.active { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
.cal_team_user_avatar { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background-position: center; background-size: 28px; flex-shrink: 0; }
.cal_team_user_name { flex: 1; font-size: 14px; font-weight: 500; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal_team_user_chevron { flex-shrink: 0; color: #94a3b8; transition: transform 0.2s; }
.cal_team_user_trigger.active .cal_team_user_chevron { transform: rotate(-90deg); }

.cal_team_user_popup { display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 200; padding: 6px; min-width: 200px; max-height: 300px; overflow: visible; }
.cal_team_user_popup.active { display: block; }
.cal_team_user_popup::before { content: ''; position: absolute; left: -8px; top: 20px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid white; }
.cal_team_user_popup_list { max-height: 280px; overflow-y: auto; }

.cal_team_user_option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; cursor: pointer; transition: background 0.15s; }
.cal_team_user_option:hover { background: #f1f5f9; }
.cal_team_user_option.active { background: #dbeafe; }
.cal_team_user_option .cal_team_user_avatar { width: 28px; height: 28px; }
.cal_team_user_option .cal_team_user_name { font-size: 13px; font-weight: 400; }

/* Delegate warning - caché par défaut, activé via .delegate-warning-active sur .cal_app */
.cal_delegate_warning { display: none; align-items: center; justify-content: center; gap: 6px; margin: 0 15px 10px 15px; padding: 6px 10px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 4px; font-size: 12px; color: #92400e; line-height: 1; }
.cal_delegate_warning svg { stroke: #f59e0b; flex-shrink: 0; }
.cal_app.delegate-warning-active .cal_delegate_warning { display: flex; }

/* Mobile: bouton + popup */
.cal_delegate_picker { display: none; position: relative; margin: 0 15px 10px 15px; }
.cal_delegate_trigger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.cal_delegate_trigger:hover { background: #fde68a; border-color: #f59e0b; }
.cal_delegate_trigger svg { stroke: #f59e0b; }
.cal_delegate_popup { display: none; position: fixed; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #92400e; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1000; }
.cal_delegate_popup::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #fcd34d; }
.cal_delegate_popup::after { content: ''; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #fef3c7; }
.cal_delegate_popup.active { display: block; }

.cal_readonly_warning { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 15px; padding: 10px 12px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 6px; font-size: 12px; color: #92400e; line-height: 1.4; }
.cal_readonly_warning svg { stroke: #f59e0b; flex-shrink: 0; margin-top: 1px; }

.cal_toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 13px; z-index: 10000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.cal_toast.show { opacity: 1; }
.cal_toast svg { stroke: #fcd34d; flex-shrink: 0; }
.cal_toast.warning { background: #92400e; }
.cal_toast.info { background: #1e40af; }

.cal_nav-btn { background: none; border: none; padding: 0.5rem; border-radius: 9999px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cal_nav-btn:hover { background: #f1f5f9; }
.cal_header-title { font-size: 18px; font-weight: 600; color: #1e293b; min-width: 200px; text-align: center; white-space: nowrap; }
.cal_view-toggle { display: flex; background: #f1f5f9; border-radius: 0.5rem; padding: 0.25rem; }
.cal_view-btn { padding: 0.375rem 1rem; border: none; background: none; border-radius: 0.375rem; cursor: pointer; font-weight: 500; color: #475569; display: inline-block; margin-left: 4px; }
.cal_view-btn:first-child { margin-left: 0; }
.cal_view-btn.active { background: #3b82f6; color: white; }
.cal_view-btn:hover { background: rgba(255,255,255,0.5); }
.cal_view-btn.active:hover { background: #2563eb; color: white; }

/* Sidebar */
.cal_sidebar { width: 256px; border-right: 1px solid #e2e8f0; background: white; display: flex; flex-direction: column; position: fixed; top: 155px; left: 15px; z-index: 99; height: calc(100vh - 170px); overflow-y: auto; }

/* Sidebar mobile buttons - hidden by default */
.cal_sidebar_buttons { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; }
.cal_sidebar_btn { width: 40px; height: 40px; border-radius: 8px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cal_sidebar_btn_create { background: #3b82f6; color: white; }
.cal_sidebar_btn_create:hover { background: #2563eb; }
.cal_sidebar_btn_today { background: white; border: 1px solid #e2e8f0; color: #1e293b; }
.cal_sidebar_btn_today:hover { background: #f1f5f9; }
.cal_sidebar_btn_minical { background: white; border: 1px solid #e2e8f0; color: #1e293b; display: none; }
.cal_sidebar_btn_minical:hover { background: #f1f5f9; }

/* Mobile mini-calendar popup mode */
.cal_sidebar .cal_mini-calendar.popup-active { display: block; position: fixed; left: 70px; width: 240px; background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 200; padding: 12px; }
.cal_sidebar .cal_mini-calendar.popup-active::before { content: ''; position: absolute; left: -8px; top: 20px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid white; }

/* Overlay when mini-calendar popup is open */
.cal_app.minical-popup-open .cal_main::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); z-index: 98; pointer-events: auto; }
body:has(.cal_app.minical-popup-open) { overflow: hidden; }

/* Overlay when team user popup is open */
.cal_app.team-popup-open .cal_main::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); z-index: 98; pointer-events: auto; }
body:has(.cal_app.team-popup-open) { overflow: hidden; }

/* Overlay when minutes popup is open */
.cal_app.minutes-popup-open .cal_main::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); z-index: 98; }
body:has(.cal_app.minutes-popup-open) { overflow: hidden; }

/* Overlay when delegate popup is open */
.cal_app.delegate-popup-open .cal_main::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); z-index: 98; pointer-events: auto; }
body:has(.cal_app.delegate-popup-open) { overflow: hidden; }

/* Time label as button (mobile) */
.cal_time-label-btn { display: none; }

/* Minutes popup */
.cal_minutes_popup { display: none; position: fixed; background: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); z-index: 200; padding: 8px; }
.cal_minutes_popup.active { display: block; }
.cal_minutes_popup::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid white; }
.cal_minutes_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.cal_minute_btn { width: 36px; height: 36px; border: none; background: #f1f5f9; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 14px; color: #475569; }
.cal_minute_btn:hover { background: #3b82f6; color: white; }

/* Sidebar mobile view toggle - hidden by default */
.cal_sidebar_view_toggle { display: none; flex-direction: column; background: #f1f5f9; border-radius: 8px; padding: 4px; position: absolute; bottom: 20px; left: 10px; right: 10px; }
.cal_sidebar_view_btn { padding: 8px 0; text-align: center; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; color: #475569; text-decoration: none; margin-top: 4px; }
.cal_sidebar_view_btn:first-child { margin-top: 0; }
.cal_sidebar_view_btn:hover { background: rgba(255,255,255,0.5); }
.cal_sidebar_view_btn.active { background: #3b82f6; color: white; }

/* Mini Calendar */
.cal_mini-calendar { padding: 1rem; }
.cal_mini-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.cal_mini-header span { font-weight: 600; color: #1e293b; }
.cal_mini-nav { display: flex; gap: 0.25rem; }
.cal_mini-nav button { background: none; border: none; padding: 0.25rem; border-radius: 9999px; cursor: pointer; }
.cal_mini-nav button:hover { background: #f1f5f9; }
.cal_mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; overflow: visible; }
.cal_mini-grid .cal_day-label { font-size: 11px; color: #94a3b8; padding: 0.25rem; }
.cal_mini-grid .cal_day { font-size: 11px; padding: 0.25rem; border-radius: 9999px; cursor: pointer; position: relative; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; overflow: visible; }
.cal_mini-grid .cal_day:hover { background: #f1f5f9; }
.cal_mini-grid .cal_day.today { background: #dbeafe; color: #2563eb !important; }
.cal_mini-grid .cal_day.active { background: #3b82f6; color: white !important; }
.cal_mini-grid .cal_day.today.active { background: #3b82f6; color: white !important; }
.cal_mini-grid a.cal_day { color: #1e293b; }

/* Calendars List */
.cal_calendars { padding: 1rem; border-top: 1px solid #f1f5f9; }
.cal_calendars h3 { font-size: 11px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.cal_calendar-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; cursor: pointer; transition: opacity 0.2s; }
.cal_calendar-item:hover { opacity: 0.8; }
.cal_calendar-item:hover .cal_calendar-edit { opacity: 1; }
.cal_calendar-item.disabled { opacity: 0.5; }
.cal_calendar-item.disabled .cal_calendar-dot { background: transparent; }
.cal_calendar-dot { width: 12px; height: 12px; border-radius: 9999px; border: 2px solid; transition: background 0.2s; flex-shrink: 0; }
.cal_calendar-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal_calendar-shared { opacity: 0.5; display: flex; align-items: center; }
.cal_calendar-shared img { width: 21px; height: 21px; }
.cal_calendar-edit { background: none; border: none; cursor: pointer; opacity: 0; padding: 2px; transition: opacity 0.2s; display: flex; align-items: center; }
.cal_calendar-edit img { width: 21px; height: 21px; opacity: 0.5; transition: opacity 0.2s; cursor: pointer; }
.cal_calendar-edit:hover img { opacity: 1; }
.cal_calendar-add { padding: 0.5rem 0; color: #3b82f6; font-size: 13px; cursor: pointer; transition: color 0.2s; margin-top: 0.5rem; }
.cal_calendar-add:hover { color: #2563eb; }
.cal_calendar-dot.blue { border-color: #3b82f6; background: #3b82f6; }
.cal_calendar-dot.green { border-color: #22c55e; background: #22c55e; }
.cal_calendar-dot.red { border-color: #ef4444; background: #ef4444; }
.cal_calendar-dot.purple { border-color: #a855f7; background: #a855f7; }
.cal_calendar-dot.orange { border-color: #f97316; background: #f97316; }
.cal_calendar-dot.pink { border-color: #ec4899; background: #ec4899; }
.cal_calendar-dot.teal { border-color: #14b8a6; background: #14b8a6; }
.cal_calendar-dot.yellow { border-color: #eab308; background: #eab308; }
.cal_calendar-dot.indigo { border-color: #6366f1; background: #6366f1; }
.cal_calendar-dot.cyan { border-color: #06b6d4; background: #06b6d4; }
.cal_calendar-dot.lime { border-color: #84cc16; background: #84cc16; }
.cal_calendar-dot.rose { border-color: #f43f5e; background: #f43f5e; }
.cal_calendar-dot.amber { border-color: #f59e0b; background: #f59e0b; }
.cal_calendar-dot.emerald { border-color: #10b981; background: #10b981; }
.cal_calendar-dot.slate { border-color: #64748b; background: #64748b; }
.cal_calendar-label { font-size: 14px; color: #334155; }

/* Views */
.cal_calendar-view { flex: 1; background: #ffffff; display: none; margin-bottom: -15px; }
.cal_calendar-view.active { display: block; }

/* Day View */
.cal_day-view .cal_day-header { padding: 0.5rem 1rem; text-align: center; border-bottom: 1px solid #e2e8f0; background: white; position: sticky; top: 155px; z-index: 10; height: 71.5px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.cal_day-view .cal_day-header .cal_day-name { font-size: 14px; color: #64748b; text-transform: uppercase; }
.cal_day-view .cal_day-header .cal_day-num { font-size: 18px; font-weight: 300; color: #1e293b; }
.cal_day-view .cal_day-header .cal_day-num.today { background: #dbeafe; color: #2563eb; width: 40px; height: 40px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; }
.cal_day-view .cal_day-header .cal_day-num.active { background: #3b82f6; color: white; width: 40px; height: 40px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; }
.cal_day-view .cal_day-header .cal_day-num.today.active { background: #3b82f6; color: white; }
.cal_day-view .cal_time-grid { display: grid; grid-template-columns: 64px 1fr; position: relative; }
.cal_day-view .cal_time-label { padding: 0 0.5rem; text-align: right; font-size: 14px; color: #94a3b8; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; margin: 10px; margin-bottom: 10px; }
.cal_day-view .cal_time-label:hover { background: #3b82f6; color: #fff; }
.cal_day-view .cal_time-label:active, .cal_day-view .cal_time-label.active { background: #2563eb; color: #fff; }
.cal_day-view .cal_day-column { border-left: 1px solid #e2e8f0; position: relative; }
.cal_day-view .cal_hour-line { height: 60px; border-bottom: 1px solid rgba(148, 163, 184, 0.4); position: relative; z-index: 1; pointer-events: none; }

/* Week View */
.cal_week-view .cal_week-header { display: grid; grid-template-columns: 64px repeat(7, 1fr); border-bottom: 1px solid #e2e8f0; position: sticky; top: 155px; background: white; z-index: 10; }
.cal_week-view .cal_week-header-cell { padding: 0.5rem; text-align: center; border-left: 1px solid #e2e8f0; }
.cal_week-view .cal_week-header-cell .cal_day-name { font-size: 11px; color: #64748b; }
.cal_week-view .cal_week-header-cell .cal_day-num { font-size: 18px; font-weight: 300; color: #1e293b; width: 40px; height: 40px; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s; }
.cal_week-view .cal_week-header-cell .cal_day-num:hover { background: #f1f5f9; }
.cal_week-view .cal_week-header-cell .cal_day-num.today { background: #dbeafe; color: #2563eb; }
.cal_week-view .cal_week-header-cell .cal_day-num.today:hover { background: #bfdbfe; }
.cal_week-view .cal_week-header-cell .cal_day-num.active { background: #3b82f6; color: white; }
.cal_week-view .cal_week-header-cell .cal_day-num.active:hover { background: #2563eb; }
.cal_week-view .cal_week-header-cell .cal_day-num.today.active { background: #3b82f6; color: white; }
.cal_week-view .cal_week-header-cell .cal_day-num.today.active:hover { background: #2563eb; }
.cal_week-view .cal_allday-container { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); border-bottom: 1px solid #e2e8f0; background: #fafafa; position: sticky; top: 224.5px; z-index: 9; min-height: 24px; }
.cal_week-view .cal_allday-container .cal_allday-label { padding: 0.25rem 0.5rem; text-align: right; font-size: 11px; color: #94a3b8; }
.cal_week-view .cal_allday-container .cal_allday-cell { border-left: 1px solid #e2e8f0; min-height: 24px; }
.cal_week-view .cal_allday-container .cal_allday-events-layer { position: absolute; top: 0; left: 64px; right: 0; bottom: 0; pointer-events: none; }
.cal_week-view .cal_allday-event { position: absolute; height: 20px; padding: 2px 6px 2px 5px; border-radius: 0.25rem; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; cursor: pointer; box-sizing: border-box; border-left: 3px solid; line-height: 16px; display: flex; align-items: center; }
.cal_week-view .cal_allday-event.blue { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.cal_week-view .cal_allday-event.green { background: #dcfce7; border-color: #22c55e; color: #166534; }
.cal_week-view .cal_allday-event.red { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.cal_week-view .cal_allday-event.purple { background: #f3e8ff; border-color: #a855f7; color: #6b21a8; }
.cal_week-view .cal_allday-event.orange { background: #ffedd5; border-color: #f97316; color: #9a3412; }
.cal_week-view .cal_allday-event.pink { background: #fce7f3; border-color: #ec4899; color: #9d174d; }
.cal_week-view .cal_allday-event.teal { background: #ccfbf1; border-color: #14b8a6; color: #115e59; }
.cal_week-view .cal_allday-event.yellow { background: #fef9c3; border-color: #eab308; color: #854d0e; }
.cal_week-view .cal_allday-event.indigo { background: #e0e7ff; border-color: #6366f1; color: #3730a3; }
.cal_week-view .cal_allday-event.cyan { background: #cffafe; border-color: #06b6d4; color: #155e75; }
.cal_week-view .cal_allday-event.lime { background: #ecfccb; border-color: #84cc16; color: #3f6212; }
.cal_week-view .cal_allday-event.rose { background: #ffe4e6; border-color: #f43f5e; color: #9f1239; }
.cal_week-view .cal_allday-event.amber { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.cal_week-view .cal_allday-event.emerald { background: #d1fae5; border-color: #10b981; color: #065f46; }
.cal_week-view .cal_allday-event.slate { background: #f1f5f9; border-color: #64748b; color: #334155; }
.cal_week-view .cal_allday-event.continues-left { border-left: none; border-radius: 0 0.25rem 0.25rem 0; padding-left: 12px; clip-path: polygon(8px 0, 100% 0, 100% 100%, 8px 100%, 0 50%); }
.cal_week-view .cal_allday-event.continues-right { border-radius: 0.25rem 0 0 0.25rem; padding-right: 12px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%); }
.cal_week-view .cal_allday-event.continues-left.continues-right { border-left: none; border-radius: 0; padding-left: 12px; padding-right: 12px; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); }
.cal_week-view .cal_time-grid { display: grid; grid-template-columns: 64px repeat(7, 1fr); }
.cal_week-view .cal_time-label { padding: 0 0.5rem; text-align: right; font-size: 14px; color: #94a3b8; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; margin: 10px; margin-bottom: 10px; }
.cal_week-view .cal_time-label:hover { background: #3b82f6; color: #fff; }
.cal_week-view .cal_time-label:active, .cal_week-view .cal_time-label.active { background: #2563eb; color: #fff; }
.cal_week-view .cal_day-column { border-left: 1px solid #e2e8f0; position: relative; }
.cal_week-view .cal_hour-line { height: 60px; border-bottom: 1px solid rgba(148, 163, 184, 0.4); position: relative; z-index: 1; pointer-events: none; }

/* Month View */
.cal_month-view .cal_month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: 40px; grid-auto-rows: minmax(100px, auto); min-height: 100%; }
.cal_month-view .cal_month-header { display: contents; }
.cal_month-view .cal_month-day-label { padding: 0.5rem; text-align: center; font-size: 11px; color: #64748b; font-weight: 600; border-bottom: 1px solid #e2e8f0; background: #f8fafc; height: 40px; display: flex; align-items: center; justify-content: center; text-transform: uppercase; position: sticky; top: 155px; z-index: 2; }
.cal_month-view .cal_month-day { border: 1px solid #e2e8f0; border-top: none; padding: 0.25rem; cursor: pointer; overflow: visible; }
.cal_month-view .cal_month-day:hover { background: #f8fafc; }
.cal_month-view .cal_month-day.other-month { background: #f8fafc; }
.cal_month-view .cal_month-day.other-month .cal_date-num { color: #94a3b8; }
.cal_month-view .cal_date-num { font-size: 14px; font-weight: 500; color: #1e293b; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.25rem; border-radius: 9999px; transition: background 0.2s; }
.cal_month-view .cal_date-num:hover { background: #cbd5e1; }
.cal_month-view .cal_date-num.today { background: #dbeafe; color: #2563eb; }
.cal_month-view .cal_date-num.today:hover { background: #bfdbfe; }
.cal_month-view .cal_month-event { padding: 2px 6px 2px 5px; margin-bottom: 0.125rem; border-radius: 0.25rem; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; border-left: 3px solid; }
.cal_month-view .cal_month-event.blue { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.cal_month-view .cal_month-event.green { background: #dcfce7; border-color: #22c55e; color: #166534; }
.cal_month-view .cal_month-event.red { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.cal_month-view .cal_month-event.purple { background: #f3e8ff; border-color: #a855f7; color: #6b21a8; }
.cal_month-view .cal_month-event.orange { background: #ffedd5; border-color: #f97316; color: #9a3412; }
.cal_month-view .cal_month-event.pink { background: #fce7f3; border-color: #ec4899; color: #9d174d; }
.cal_month-view .cal_month-event.teal { background: #ccfbf1; border-color: #14b8a6; color: #115e59; }
.cal_month-view .cal_month-event.yellow { background: #fef9c3; border-color: #eab308; color: #854d0e; }
.cal_month-view .cal_month-event.indigo { background: #e0e7ff; border-color: #6366f1; color: #3730a3; }
.cal_month-view .cal_month-event.cyan { background: #cffafe; border-color: #06b6d4; color: #155e75; }
.cal_month-view .cal_month-event.lime { background: #ecfccb; border-color: #84cc16; color: #3f6212; }
.cal_month-view .cal_month-event.rose { background: #ffe4e6; border-color: #f43f5e; color: #9f1239; }
.cal_month-view .cal_month-event.amber { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.cal_month-view .cal_month-event.emerald { background: #d1fae5; border-color: #10b981; color: #065f46; }
.cal_month-view .cal_month-event.slate { background: #f1f5f9; border-color: #64748b; color: #334155; }
.cal_month-view .cal_month-event.timed { background: #f1f5f9; color: #475569; }
.cal_month-view .cal_month-event.timed.blue { border-color: #3b82f6; }
.cal_month-view .cal_month-event.timed.green { border-color: #22c55e; }
.cal_month-view .cal_month-event.timed.red { border-color: #ef4444; }
.cal_month-view .cal_month-event.timed.purple { border-color: #a855f7; }
.cal_month-view .cal_month-event.timed.orange { border-color: #f97316; }
.cal_month-view .cal_month-event.timed.pink { border-color: #ec4899; }
.cal_month-view .cal_month-event.timed.teal { border-color: #14b8a6; }
.cal_month-view .cal_month-event.timed.yellow { border-color: #eab308; }
.cal_month-view .cal_month-event.timed.indigo { border-color: #6366f1; }
.cal_month-view .cal_month-event.timed.cyan { border-color: #06b6d4; }
.cal_month-view .cal_month-event.timed.lime { border-color: #84cc16; }
.cal_month-view .cal_month-event.timed.rose { border-color: #f43f5e; }
.cal_month-view .cal_month-event.timed.amber { border-color: #f59e0b; }
.cal_month-view .cal_month-event.timed.emerald { border-color: #10b981; }
.cal_month-view .cal_month-event.timed.slate { border-color: #64748b; }
.cal_month-view .cal_month-event.timed .cal_event-time { font-weight: 600; margin-right: 4px; }
.cal_month-view .cal_more-events { font-size: 11px; color: #64748b; padding: 0.125rem 0.375rem; cursor: pointer; }
.cal_month-view .cal_more-events:hover { color: #2563eb; }

/* Month View - Events container */
.cal_day-events { position: relative; overflow: visible; }
.cal_month-event { height: 19px; line-height: 15px; box-sizing: border-box; position: relative; display: flex; align-items: center; }
.cal_month-event .cal_event-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Multi-day events - CSS overflow hack */
.cal_month-event.multiday.first { position: relative; z-index: 2; overflow: hidden; }

/* Spacer for multi-day event continuation days */
.cal_month-event-spacer { height: 19px; margin-bottom: 0.125rem; visibility: hidden; }

/* Calendar Links Reset */
.cal_app a { text-decoration: none; color: inherit; }
.cal_app a:hover { text-decoration: none; }
.cal_nav-btn, .cal_today-btn, .cal_view-btn { text-decoration: none; }
.cal_mini-nav a { display: inline-flex; align-items: center; justify-content: center; padding: 0.25rem; border-radius: 9999px; }
.cal_mini-nav a:hover { background: #f1f5f9; }

/* Mini Calendar */
.cal_mini-grid .cal_day { position: relative; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #1e293b; }
.cal_mini-badge { position: absolute; top: -2px; right: -4px; min-width: 14px; height: 14px; padding: 0 3px; background: #2563eb; color: white; border-radius: 9999px; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* All-day Events */
/* Day view all-day events - stacked vertically */
.cal_day-view .cal_allday-events { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; position: sticky; top: 226.5px; z-index: 9; }
.cal_day-view .cal_allday-event { padding: 4px 8px 4px 5px; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: pointer; position: relative; border-left: 3px solid; display: flex; align-items: center; }
.cal_day-view .cal_allday-event.blue { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.cal_day-view .cal_allday-event.green { background: #dcfce7; border-color: #22c55e; color: #166534; }
.cal_day-view .cal_allday-event.red { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.cal_day-view .cal_allday-event.purple { background: #f3e8ff; border-color: #a855f7; color: #6b21a8; }
.cal_day-view .cal_allday-event.orange { background: #ffedd5; border-color: #f97316; color: #9a3412; }
.cal_day-view .cal_allday-event.pink { background: #fce7f3; border-color: #ec4899; color: #9d174d; }
.cal_day-view .cal_allday-event.teal { background: #ccfbf1; border-color: #14b8a6; color: #115e59; }
.cal_day-view .cal_allday-event.yellow { background: #fef9c3; border-color: #eab308; color: #854d0e; }
.cal_day-view .cal_allday-event.indigo { background: #e0e7ff; border-color: #6366f1; color: #3730a3; }
.cal_day-view .cal_allday-event.cyan { background: #cffafe; border-color: #06b6d4; color: #155e75; }
.cal_day-view .cal_allday-event.lime { background: #ecfccb; border-color: #84cc16; color: #3f6212; }
.cal_day-view .cal_allday-event.rose { background: #ffe4e6; border-color: #f43f5e; color: #9f1239; }
.cal_day-view .cal_allday-event.amber { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.cal_day-view .cal_allday-event.emerald { background: #d1fae5; border-color: #10b981; color: #065f46; }
.cal_day-view .cal_allday-event.slate { background: #f1f5f9; border-color: #64748b; color: #334155; }

/* Chevron styles for continuing events - using clip-path on the element itself */
.cal_day-view .cal_allday-event.continues-left { border-left: none; border-radius: 0 4px 4px 0; padding-left: 14px; clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%); }
.cal_day-view .cal_allday-event.continues-right { border-radius: 4px 0 0 4px; padding-right: 14px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.cal_day-view .cal_allday-event.continues-left.continues-right { border-left: none; border-radius: 0; padding-left: 14px; padding-right: 14px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); }

/* Generic allday-events (fallback) */
.cal_allday-events { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 64px 8px 8px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.cal_allday-event { padding: 2px 6px 2px 5px; border-radius: 4px; font-size: 11px; font-weight: 500; cursor: pointer; display: flex; align-items: center; }
.cal_allday-event.blue { background: #dbeafe; color: #1e40af; }
.cal_allday-event.green { background: #dcfce7; color: #166534; }
.cal_allday-event.red { background: #fee2e2; color: #991b1b; }
.cal_allday-event.purple { background: #f3e8ff; color: #6b21a8; }
.cal_allday-event.orange { background: #ffedd5; color: #9a3412; }
.cal_allday-event.pink { background: #fce7f3; color: #9d174d; }
.cal_allday-event.teal { background: #ccfbf1; color: #115e59; }
.cal_allday-event.yellow { background: #fef9c3; color: #854d0e; }
.cal_allday-event.indigo { background: #e0e7ff; color: #3730a3; }
.cal_allday-event.cyan { background: #cffafe; color: #155e75; }
.cal_allday-event.lime { background: #ecfccb; color: #3f6212; }
.cal_allday-event.rose { background: #ffe4e6; color: #9f1239; }
.cal_allday-event.amber { background: #fef3c7; color: #92400e; }
.cal_allday-event.emerald { background: #d1fae5; color: #065f46; }
.cal_allday-event.slate { background: #f1f5f9; color: #334155; }

/* Events */
.cal_event { position: absolute; left: 0; width: 100%; padding: 4px 8px 4px 5px; border-radius: 0.375rem; font-size: 11px; overflow: hidden; border-left: 3px solid; cursor: pointer; box-sizing: border-box; z-index: 2; }
.cal_event .cal_event-title { display: flex; align-items: flex-start; }
.cal_event .cal_event-title .cal_prio_bullet { margin-top: 4px; }
.cal_event.blue { background: #dbeafe; border-color: #3b82f6; color: #1e40af; }
.cal_event.green { background: #dcfce7; border-color: #22c55e; color: #166534; }
.cal_event.red { background: #fee2e2; border-color: #ef4444; color: #991b1b; }
.cal_event.purple { background: #f3e8ff; border-color: #a855f7; color: #6b21a8; }
.cal_event.orange { background: #ffedd5; border-color: #f97316; color: #9a3412; }
.cal_event.pink { background: #fce7f3; border-color: #ec4899; color: #9d174d; }
.cal_event.teal { background: #ccfbf1; border-color: #14b8a6; color: #115e59; }
.cal_event.yellow { background: #fef9c3; border-color: #eab308; color: #854d0e; }
.cal_event.indigo { background: #e0e7ff; border-color: #6366f1; color: #3730a3; }
.cal_event.cyan { background: #cffafe; border-color: #06b6d4; color: #155e75; }
.cal_event.lime { background: #ecfccb; border-color: #84cc16; color: #3f6212; }
.cal_event.rose { background: #ffe4e6; border-color: #f43f5e; color: #9f1239; }
.cal_event.amber { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.cal_event.emerald { background: #d1fae5; border-color: #10b981; color: #065f46; }
.cal_event.slate { background: #f1f5f9; border-color: #64748b; color: #334155; }
.cal_event .cal_event-title { font-weight: 600; }
.cal_event .cal_event-time { font-size: 11px; opacity: 0.75; }

/* Drag & Drop */
.cal_event.ui-draggable-dragging { opacity: 0.9; z-index: 100; cursor: grabbing; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.cal_event.dragging-origin, .cal_allday-event.dragging-origin, .cal_month-event.dragging-origin { opacity: 0.3; }
.cal_hour-line.drag-hover { background: rgba(59, 130, 246, 0.05); }
.cal_month-day.drag-hover { background: rgba(59, 130, 246, 0.1); }

/* Resize */
.cal_event .ui-resizable-s { position: absolute; bottom: 0; left: 0; right: 0; height: 8px; cursor: ns-resize; background: transparent; }
.cal_event .ui-resizable-s:hover { background: rgba(0, 0, 0, 0.1); border-radius: 0 0 4px 4px; }
.cal_event.ui-resizable-resizing { z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

.cal_minute-guides { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 5; }
.cal_minute-guide { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(148, 163, 184, 0.5); }
.cal_minute-guide.m15 { top: 25%; }
.cal_minute-guide.m30 { top: 50%; }
.cal_minute-guide.m45 { top: 75%; }

/* Unavailability zebra pattern */
.cal_day-column.cal_unavailable,
.cal_month-day.cal_unavailable,
.cal_month-day.cal_unavailable:hover {
    background-color: #999999;
    background-image: url(img/day_off_bg.png);
}
.cal_day-column.cal_unavailable_full,
.cal_month-day.cal_unavailable_full,
.cal_month-day.cal_unavailable_full:hover {
    background-color: #666666;
    background-image: url(img/day_off_bg.png);
}
/* Unavailability overlay for partial hour slots */
.cal_unavail_overlay {
    position: absolute;
    left: 0;
    right: 0;
    background-color: #999999;
    background-image: url(img/day_off_bg.png);
    pointer-events: none;
    z-index: 1;
}
/* Events in day/week view */
.cal_day-view .cal_event,
.cal_week-view .cal_event {
    opacity: 0.8;
}

/* Now indicator (red line) */
.cal_now-indicator { position: absolute; left: 64px; right: 0; z-index: 10; pointer-events: none; display: none; }
.cal_day-view .cal_now-indicator { display: block; }
.cal_now-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: #dc2626; border-radius: 50%; }
.cal_now-line { position: absolute; left: 0; right: 0; height: 2px; background: #dc2626; }

/* Event Modal */
.cal_event_modal { width: 400px; }
.cal_event_modal .box_title { padding-bottom: 15px; border-bottom: 1px solid #e2e8f0; margin-bottom: 15px; cursor: pointer; }
.cal_event_modal .box_title .cal_modal_title { font-size: 18px; font-weight: 600; color: #1e293b; }

.cal_event_modal .cal_modal_content { flex: 1; overflow-y: auto; }
.cal_event_modal .input_row { border-bottom: 1px solid #e2e8f0; padding: 8px 0; }
.cal_event_modal .input_row:last-child { border-bottom: none; }
.cal_event_modal .input_row label { display: block; font-size: 11px; font-weight: 500; color: #64748b; margin-bottom: 4px; }
.cal_event_modal .input_row input[type="text"],
.cal_event_modal .input_row input[type="date"],
.cal_event_modal .input_row input[type="time"],
.cal_event_modal .input_row textarea { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 14px; color: #1e293b; background: #fff; box-sizing: border-box; }
.cal_event_modal .input_row select { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 14px; color: #1e293b; background-color: #fff; box-sizing: border-box; }
.cal_event_modal .input_row input:focus,
.cal_event_modal .input_row textarea:focus,
.cal_event_modal .input_row select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); }
.cal_event_modal .input_row textarea { resize: vertical; min-height: 60px; }

.cal_event_modal .cal_row_inline { display: flex; gap: 12px; }
.cal_event_modal .cal_col_half { flex: 1; }

/* Priority picker in form */
.cal_prio_picker { display: flex; gap: 8px; margin-top: 4px; width: 100%; }
.cal_prio_option { cursor: pointer; display: inline-block; width: 30px; height: 30px; background: #eeeeee; line-height: 30px; padding: 9px; border-radius: 4px; box-sizing: border-box; transition: background 0.15s; }
.cal_prio_option:hover { background: #e0e0e0; }
.cal_prio_option input { display: none; }
.cal_prio_option input:checked ~ .cal_prio_dot { border-color: #fff; }
.cal_prio_option:has(input:checked) { background: #3b82f6; }
.cal_prio_dot { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid transparent; transition: border-color 0.15s; }
.cal_prio_dot.prio-0 { background: #94a3b8; }
.cal_prio_dot.prio-1 { background: #22c55e; }
.cal_prio_dot.prio-2 { background: #f97316; }
.cal_prio_dot.prio-3 { background: #ef4444; }
.cal_prio_dot.prio-4 { background: #a855f7; }
.cal_prio_dot.prio-5 { background: #0f172a; }

/* Priority bullet in events */
.cal_prio_bullet { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; flex-shrink: 0; vertical-align: middle; }
.cal_prio_bullet.prio-0 { background: #cbd5e1; }
.cal_prio_bullet.prio-1 { background: #22c55e; }
.cal_prio_bullet.prio-2 { background: #f97316; }
.cal_prio_bullet.prio-3 { background: #ef4444; }
.cal_prio_bullet.prio-4 { background: #a855f7; }
.cal_prio_bullet.prio-5 { background: #0f172a; }

/* Reminders */
.cal_reminders_container, .task_reminders_container { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; width: 100%; }
.cal_reminder_row { display: flex; align-items: center; gap: 8px; }
.cal_reminder_row select { flex: 1; height: 31px; box-sizing: border-box; }
.cal_reminder_type { display: flex; gap: 4px; }
.cal_reminder_type label,
.cal_event_modal .input_row .cal_reminder_type label,
.cal_calendar_modal .input_row .cal_reminder_type label,
.modal_turn_to_task_content .input_row .cal_reminder_type label { cursor: pointer; padding: 0 10px; background: #f1f5f9; border-radius: 4px; font-size: 12px; display: flex; align-items: center; gap: 4px; transition: all 0.15s; width: auto; float: none; line-height: 31px; height: 31px; overflow: visible; box-sizing: border-box; margin-bottom: 0; }
.cal_reminder_type label:hover,
.cal_event_modal .input_row .cal_reminder_type label:hover,
.cal_calendar_modal .input_row .cal_reminder_type label:hover,
.modal_turn_to_task_content .input_row .cal_reminder_type label:hover { background: #e2e8f0; }
.cal_reminder_type input { display: none; }
.cal_reminder_type label:has(input:checked),
.cal_event_modal .input_row .cal_reminder_type label:has(input:checked),
.cal_calendar_modal .input_row .cal_reminder_type label:has(input:checked),
.modal_turn_to_task_content .input_row .cal_reminder_type label:has(input:checked) { background: #3b82f6; color: #fff; }
.cal_reminder_type label:has(input:checked) svg { stroke: #fff; }
.cal_reminder_type svg { width: 14px; height: 14px; flex-shrink: 0; }
.cal_btn_remove_reminder { background: #f1f5f9; border: none; cursor: pointer; width: 31px; height: 31px; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #94a3b8; transition: all 0.15s; }
.cal_btn_remove_reminder:hover { background: #ef4444; color: #fff; }
.cal_btn_remove_reminder svg { width: 16px; height: 16px; }
.cal_btn_add_reminder { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 4px; color: #64748b; font-size: 13px; cursor: pointer; transition: all 0.15s; }
.cal_btn_add_reminder:hover { background: #e2e8f0; border-color: #94a3b8; color: #475569; }

/* Color picker for calendars */
.cal_color_picker { display: flex; gap: 8px; margin-top: 4px; width: 100%; }
.cal_color_option { cursor: pointer; display: inline-block; width: 30px; height: 30px; background: #eeeeee; line-height: 30px; padding: 9px; border-radius: 4px; box-sizing: border-box; transition: background 0.15s; }
.cal_color_option:hover { background: #e0e0e0; }
.cal_color_option input { display: none; }
.cal_color_option input:checked ~ .cal_color_dot { border-color: #fff; }
.cal_color_option:has(input:checked) { background: #3b82f6; }
.cal_color_dot { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid transparent; transition: border-color 0.15s; }
.cal_color_dot.blue { background: #3b82f6; }
.cal_color_dot.green { background: #22c55e; }
.cal_color_dot.red { background: #ef4444; }
.cal_color_dot.purple { background: #a855f7; }
.cal_color_dot.orange { background: #f97316; }
.cal_color_dot.pink { background: #ec4899; }
.cal_color_dot.teal { background: #14b8a6; }
.cal_color_dot.yellow { background: #eab308; }
.cal_color_dot.indigo { background: #6366f1; }
.cal_color_dot.cyan { background: #06b6d4; }
.cal_color_dot.lime { background: #84cc16; }
.cal_color_dot.rose { background: #f43f5e; }
.cal_color_dot.amber { background: #f59e0b; }
.cal_color_dot.emerald { background: #10b981; }
.cal_color_dot.slate { background: #64748b; }

/* Event Choice Modal (RDV CRM vs RDV Perso) */
.cal_event_choice_modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1002; display: flex; align-items: center; justify-content: center; }
.cal_choice_content { background: #fff; border-radius: 12px; padding: 24px; text-align: center; max-width: 360px; width: 90%; box-shadow: 0 20px 50px rgba(0,0,0,0.3); }
.cal_choice_content h3 { margin: 0 0 8px 0; font-size: 18px; font-weight: 600; color: #1e293b; }
.cal_choice_datetime { margin: 0 0 20px 0; font-size: 14px; color: #64748b; }
.cal_choice_buttons { display: flex; gap: 12px; margin-bottom: 16px; }
.cal_choice_btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px; border: 2px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; transition: all 0.2s; }
.cal_choice_btn:hover { border-color: #3b82f6; background: #f0f9ff; }
.cal_choice_btn svg { color: #64748b; }
.cal_choice_btn:hover svg { color: #3b82f6; }
.cal_choice_btn span { font-size: 14px; font-weight: 500; color: #334155; }
.cal_choice_crm:hover { border-color: #22c55e; background: #f0fdf4; }
.cal_choice_crm:hover svg { color: #22c55e; }
.cal_choice_cancel { width: 100%; padding: 10px; border: none; background: transparent; color: #64748b; font-size: 14px; cursor: pointer; }
.cal_choice_cancel:hover { color: #334155; }

/* CRM Event Modal */
.cal_event_crm_modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 450px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); z-index: 1001; padding: 20px; display: none; }
.cal_event_crm_modal .box_title { padding-bottom: 15px; border-bottom: 1px solid #e2e8f0; margin-bottom: 15px; cursor: pointer; }
.cal_event_crm_modal .box_title .cal_modal_title { font-size: 18px; font-weight: 600; color: #1e293b; }
.cal_event_crm_modal .cal_modal_content { flex: 1; overflow-y: auto; }
.cal_event_crm_modal .input_row { border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
.cal_event_crm_modal .input_row:last-child { border-bottom: none; }
.cal_event_crm_modal .input_row > label { display: block; font-size: 11px; font-weight: 500; color: #64748b; margin-bottom: 4px; }
.cal_event_crm_modal .input_row input[type="text"],
.cal_event_crm_modal .input_row input[type="email"],
.cal_event_crm_modal .input_row input[type="tel"],
.cal_event_crm_modal .input_row input[type="date"],
.cal_event_crm_modal .input_row input[type="time"],
.cal_event_crm_modal .input_row textarea { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 14px; color: #1e293b; background: #fff; box-sizing: border-box; }
.cal_event_crm_modal .input_row select { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 14px; color: #1e293b; background-color: #fff; box-sizing: border-box; }
.cal_event_crm_modal .input_row input:focus,
.cal_event_crm_modal .input_row textarea:focus,
.cal_event_crm_modal .input_row select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); }
.cal_event_crm_modal .input_row textarea { resize: vertical; min-height: 50px; }
.cal_event_crm_modal .cal_row_inline { display: flex; gap: 12px; }
.cal_event_crm_modal .cal_col_half { flex: 1; }
.cal_event_crm_modal .cal_col_third { flex: 1; }

/* CRM User search */
.cal_crm_user_wrapper { display: flex; gap: 8px; align-items: flex-start; }
.cal_crm_user_search { flex: 1; position: relative; }
.cal_crm_user_search input { width: 100%; }
.cal_crm_user_dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1010; display: none; max-height: 200px; overflow-y: auto; }
.cal_crm_user_dropdown.active { display: block; }
.cal_crm_user_item { padding: 10px 12px; cursor: pointer; border-bottom: 1px solid #f1f5f9; }
.cal_crm_user_item:last-child { border-bottom: none; }
.cal_crm_user_item:hover { background: #f8fafc; }
.cal_crm_user_item_name { font-size: 14px; font-weight: 500; color: #1e293b; }
.cal_crm_user_item_info { font-size: 12px; color: #64748b; margin-top: 2px; }
.cal_crm_user_dropdown_empty { padding: 12px; text-align: center; color: #94a3b8; font-size: 13px; }

.cal_crm_user_selected { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 4px; }
.cal_crm_user_name { flex: 1; font-size: 14px; font-weight: 500; color: #166534; }
.cal_crm_user_clear { background: none; border: none; cursor: pointer; color: #166534; padding: 2px; display: flex; align-items: center; justify-content: center; }
.cal_crm_user_clear:hover { color: #dc2626; }

.cal_crm_user_create_btn { padding: 8px 12px; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 4px; color: #64748b; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap; transition: all 0.15s; }
.cal_crm_user_create_btn:hover { background: #e2e8f0; border-color: #94a3b8; color: #475569; }

/* Mini form création CRM user */
.cal_crm_user_create_form { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; margin-top: 10px; }
.cal_crm_user_create_form .input_row { border-bottom: none; padding: 6px 0; }
.cal_crm_user_create_form label { font-size: 11px; }
.cal_crm_create_actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.cal_crm_create_cancel { padding: 6px 12px; background: #fff; border: 1px solid #e2e8f0; border-radius: 4px; color: #64748b; font-size: 13px; cursor: pointer; }
.cal_crm_create_cancel:hover { background: #f1f5f9; }
.cal_crm_create_save { padding: 6px 12px; background: #22c55e; border: none; border-radius: 4px; color: #fff; font-size: 13px; cursor: pointer; }
.cal_crm_create_save:hover { background: #16a34a; }

/* Groupe / Participants */
.cal_crm_group_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal_crm_group_header label { margin-bottom: 0 !important; }
.cal_crm_add_participant { padding: 4px 10px; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 4px; color: #64748b; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.cal_crm_add_participant:hover { background: #e2e8f0; }
.cal_crm_participants_list { display: flex; flex-direction: column; gap: 6px; }
.cal_crm_participant_row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 4px; }
.cal_crm_participant_row.adding { background: #fff; }
.cal_crm_participant_name { flex: 1; font-size: 13px; color: #334155; }
.cal_crm_participant_search { flex: 1; position: relative; }
.cal_crm_participant_search input { width: 100%; padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 13px; }
.cal_crm_participant_remove { background: none; border: none; cursor: pointer; color: #94a3b8; padding: 2px; display: flex; }
.cal_crm_participant_remove:hover { color: #dc2626; }

/* Alerts / Récap */
.cal_crm_alerts { background: #fefce8; border: 1px solid #fef08a; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.cal_crm_alert_title { font-size: 12px; font-weight: 600; color: #854d0e; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cal_crm_alert_content { font-size: 13px; color: #713f12; }
.cal_crm_alert_item { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 6px; }
.cal_crm_alert_item:last-child { margin-bottom: 0; }
.cal_crm_alert_icon { flex-shrink: 0; margin-top: 2px; }
.cal_crm_alert_icon.warning { color: #f59e0b; }
.cal_crm_alert_icon.info { color: #3b82f6; }
.cal_crm_alert_icon.collision { color: #dc2626; }

/* CRM modal - group banner */
.cal_crm_group_banner { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 12px; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; color: #1e40af; font-size: 13px; }
.cal_crm_group_banner svg { flex-shrink: 0; color: #3b82f6; }
.cal_crm_group_banner strong { font-weight: 600; }

/* CRM modal - readonly values (edit mode) */
.cal_crm_readonly_value { display: inline-block; padding: 8px 12px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; color: #334155; font-size: 14px; width: calc(100% - 100px); box-sizing: border-box; }

/* Calendar modal */
.cal_calendar_modal { width: 350px; }
.cal_calendar_modal .box_title { padding-bottom: 15px; border-bottom: 1px solid #e2e8f0; margin-bottom: 15px; cursor: pointer; }
.cal_calendar_modal .box_title .cal_modal_title { font-size: 18px; font-weight: 600; color: #1e293b; }
.cal_calendar_modal .cal_modal_content { flex: 1; overflow-y: auto; }
.cal_calendar_modal .input_row { border-bottom: 1px solid #e2e8f0; padding: 8px 0; }
.cal_calendar_modal .input_row:last-child { border-bottom: none; }
.cal_calendar_modal .input_row label { display: block; font-size: 11px; font-weight: 500; color: #64748b; margin-bottom: 4px; }
.cal_calendar_modal .input_row input[type="text"] { width: 100%; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 14px; color: #1e293b; background: #fff; box-sizing: border-box; }
.cal_calendar_modal .input_row input[type="text"]:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); }

/* Browse shared calendars modal */
.cal_browse_shared_modal { width: 400px; }
.cal_browse_shared_modal .box_title { padding-bottom: 15px; border-bottom: 1px solid #e2e8f0; margin-bottom: 15px; cursor: pointer; }
.cal_browse_shared_modal .box_title .cal_modal_title { font-size: 18px; font-weight: 600; color: #1e293b; }
.cal_browse_shared_modal .cal_modal_content { flex: 1; overflow-y: auto; max-height: 300px; }

.cal_shared_calendar_item { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #e2e8f0; gap: 10px; }
.cal_shared_calendar_item:last-child { border-bottom: none; }
.cal_shared_calendar_item .cal_calendar-label { flex: 1; font-size: 14px; color: #1e293b; }
.cal_btn_subscribe { padding: 5px 12px; background: #3b82f6; color: white; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; transition: background 0.2s; }
.cal_btn_subscribe:hover { background: #2563eb; }
.cal_no_shared { padding: 20px; text-align: center; color: #64748b; font-size: 14px; }

/* Search modal */
.cal_search_modal { width: 500px; max-height: 80vh; }
.cal_search_modal .box_title { padding-bottom: 15px; border-bottom: 1px solid #e2e8f0; margin-bottom: 15px; cursor: pointer; }
.cal_search_modal .box_title .cal_modal_title { font-size: 18px; font-weight: 600; color: #1e293b; }
.cal_search_modal .cal_modal_content { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.cal_search_input_wrapper { position: relative; display: flex; align-items: center; margin-bottom: 15px; }
.cal_search_input_wrapper svg { position: absolute; left: 12px; stroke: #94a3b8; pointer-events: none; }
.cal_search_input_wrapper input { width: 100%; padding: 10px 35px 10px 40px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; transition: border-color 0.2s, box-shadow 0.2s; }
.cal_search_input_wrapper input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); }
.cal_search_input_wrapper input::placeholder { color: #94a3b8; }
#cal_search_clear { position: absolute; right: 8px; background: none; border: none; color: #94a3b8; font-size: 20px; cursor: pointer; padding: 0 5px; line-height: 1; display: none; }
#cal_search_clear:hover { color: #64748b; }
.cal_search_results { flex: 1; overflow-y: auto; max-height: 400px; }
.cal_search_placeholder { padding: 30px; text-align: center; color: #94a3b8; font-size: 14px; }
.cal_search_loading { padding: 30px; text-align: center; color: #64748b; font-size: 14px; }
.cal_search_no_results { padding: 30px; text-align: center; color: #64748b; font-size: 14px; }
.cal_search_result_item { display: flex; align-items: flex-start; padding: 12px; border-bottom: 1px solid #f1f5f9; cursor: pointer; transition: background 0.15s; gap: 12px; }
.cal_search_result_item:hover { background: #f8fafc; }
.cal_search_result_item:last-child { border-bottom: none; }
.cal_search_result_dot.cal_calendar-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.cal_search_result_content { flex: 1; min-width: 0; }
.cal_search_result_title { font-size: 14px; font-weight: 500; color: #1e293b; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal_search_result_date { font-size: 12px; color: #64748b; margin-bottom: 2px; }
.cal_search_result_time { font-size: 12px; color: #94a3b8; }
.cal_search_result_calendar { font-size: 11px; color: #94a3b8; margin-top: 4px; }

/* Unavailability modal */
.cal_unavail_modal { width: 420px; }
.cal_unavail_modal .box_title { padding-bottom: 15px; border-bottom: 1px solid #e2e8f0; margin-bottom: 15px; cursor: pointer; }
.cal_unavail_modal .box_title .cal_modal_title { font-size: 18px; font-weight: 600; color: #1e293b; }
.cal_unavail_modal .cal_modal_content { flex: 1; overflow-y: auto; }
.cal_unavail_info { margin-bottom: 15px; font-size: 14px; font-weight: 500; color: #475569; }
.cal_unavail_grid_day { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 400px; overflow-y: auto; }
.cal_unavail_hour_block { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; }
.cal_unavail_hour_main { display: flex; align-items: center; gap: 4px; }
.cal_unavail_slot { display: flex; align-items: center; justify-content: center; padding: 8px 6px; background: transparent; border: none; border-radius: 0; cursor: pointer; transition: all 0.15s; flex: 1; }
.cal_unavail_slot:hover { background: #e2e8f0; }
.cal_unavail_slot input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.cal_unavail_slot::before {
    content: "";
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid #cbd5e1;
    border-radius: 3px;
    background-color: white;
    transition: all 0.2s ease;
    box-sizing: border-box;
    margin-right: 6px;
}
.cal_unavail_slot:hover::before { border-color: #719126; }
.cal_unavail_slot:has(input:checked)::before {
    background: #719126;
    border-color: #719126;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}
.cal_unavail_slot span { font-size: 12px; color: #64748b; font-weight: 500; }
.cal_unavail_slot:has(input:checked) span { color: #166534; }
.cal_unavail_slot:has(input.partial)::before {
    background: #fbbf24;
    border-color: #f59e0b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='6' y='11' width='12' height='2'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
}
.cal_unavail_expand_btn {
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    cursor: pointer;
    color: #94a3b8;
    font-size: 16px;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.15s;
    margin-right: 4px;
}
.cal_unavail_expand_btn:hover { background: #e2e8f0; color: #475569; }
.cal_unavail_expand_btn.expanded { transform: rotate(45deg); }
.cal_unavail_subslots {
    display: none;
    padding: 6px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    gap: 4px;
}
.cal_unavail_subslots.show { display: flex; flex-wrap: wrap; }
.cal_unavail_subslot {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.15s;
}
.cal_unavail_subslot:hover { border-color: #719126; }
.cal_unavail_subslot input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.cal_unavail_subslot::before {
    content: "";
    width: 14px;
    height: 14px;
    min-width: 14px;
    border: 2px solid #cbd5e1;
    border-radius: 3px;
    background-color: white;
    transition: all 0.2s ease;
    box-sizing: border-box;
    margin-right: 4px;
}
.cal_unavail_subslot:has(input:checked)::before {
    background: #719126;
    border-color: #719126;
}
.cal_unavail_subslot:has(input:checked) { background: #dcfce7; border-color: #86efac; }
.cal_unavail_subslot span { color: #64748b; }
.cal_unavail_grid_month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal_unavail_day { display: flex; align-items: center; justify-content: center; padding: 10px 4px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; transition: all 0.15s; flex-direction: column; width: 100%; min-width: 40px; }
.cal_unavail_day:hover { background: #e2e8f0; }
.cal_unavail_day input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.cal_unavail_day::before {
    content: "";
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: white;
    transition: all 0.2s ease;
    box-sizing: border-box;
    margin-bottom: 4px;
}
.cal_unavail_day:hover::before {
    border-color: #719126;
}
.cal_unavail_day:has(input:checked)::before {
    background: #719126;
    border-color: #719126;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}
.cal_unavail_day .day_num { font-size: 14px; font-weight: 500; color: #1e293b; }
.cal_unavail_day .day_name { font-size: 10px; color: #94a3b8; }
.cal_unavail_day:has(input:checked) { background: #ef4444; border-color: #dc2626; }
.cal_unavail_day:has(input:checked) .day_num, .cal_unavail_day:has(input:checked) .day_name { color: #fff; }
.cal_unavail_day.partial { background: #fef3c7; border-color: #fbbf24; }
.cal_unavail_day.partial::before {
    background: #fbbf24;
    border-color: #f59e0b;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Crect x='6' y='11' width='12' height='2'/%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}
.cal_unavail_day.partial .day_num { color: #92400e; }
.cal_unavail_day.past { opacity: 0.4; pointer-events: none; }
/* Unavail modal header */
.cal_unavail_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; }
.cal_unavail_header #cal_unavail_date_label { font-weight: 600; color: #1e293b; }
.cal_unavail_quick_actions { display: flex; align-items: center; gap: 6px; }
.cal_unavail_quick_link { background: none; border: none; padding: 2px 6px; font-size: 12px; color: #64748b; cursor: pointer; transition: color 0.15s; }
.cal_unavail_quick_link:hover { color: #3b82f6; text-decoration: underline; }
.cal_unavail_separator { color: #cbd5e1; font-size: 12px; }

/* Week days selector */
.cal_unavail_week_days { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 8px 10px; background: #f8fafc; border-radius: 6px; flex-wrap: nowrap; }
.cal_unavail_week_label { font-size: 11px; color: #64748b; white-space: nowrap; }
.cal_unavail_weekday { cursor: pointer; }
.cal_unavail_weekday input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.cal_unavail_weekday span { display: block; font-size: 11px; color: #64748b; font-weight: 500; padding: 5px 8px; border: 1px solid #e2e8f0; border-radius: 4px; background: white; transition: all 0.15s; }
.cal_unavail_weekday:hover span { border-color: #719126; }
.cal_unavail_weekday:has(input:checked) span { background: #719126; border-color: #719126; color: white; }

/* Unavail recurrence */
.cal_unavail_recurrence { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e2e8f0; }
.cal_unavail_recurrence_toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: #334155; font-weight: 500; }
.cal_unavail_recurrence_toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: #719126; }
.cal_unavail_recurrence_options { margin-top: 12px; padding: 12px; background: #f8fafc; border-radius: 6px; }
.cal_unavail_recurrence_row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cal_unavail_recurrence_row:last-child { margin-bottom: 0; }
.cal_unavail_recurrence_row label { font-size: 12px; color: #64748b; min-width: 70px; }
.cal_unavail_recurrence_row select,
.cal_unavail_recurrence_row input[type="date"] { flex: 1; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 13px; }
.cal_unavail_recurrence_info { font-size: 11px; color: #64748b; margin-top: 8px; padding: 8px; background: #e0f2fe; border-radius: 4px; }
.cal_unavail_recurrence_info.error { background: #fee2e2; color: #dc2626; }

/* Calendar subscriptions */
.cal_calendars_subscribed { margin-top: 20px; }
.cal_subscription-item { position: relative; }
.cal_subscription-item .cal_calendar-label { font-size: 12px; color: #64748b; }
.cal_calendar-unsubscribe { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94a3b8; font-size: 16px; cursor: pointer; padding: 0 5px; line-height: 1; opacity: 0; transition: opacity 0.2s, color 0.2s; }
.cal_subscription-item:hover .cal_calendar-unsubscribe { opacity: 1; }
.cal_calendar-unsubscribe:hover { color: #ef4444; }

/* Recurrence options */
#cal_recurrence_options { background: #f8fafc; border-radius: 8px; padding: 15px; margin: 10px 0; border: 1px solid #e2e8f0; }
.cal_col_third { width: 30%; float: left; padding-right: 10px; box-sizing: border-box; }
.cal_col_two_thirds { width: 70%; float: left; box-sizing: border-box; }
#cal_recurrence_options input[type="number"] { width: 100%; padding: 8px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 14px; }
#cal_recurrence_options select { width: 100%; padding: 8px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 14px; }

.cal_weekday_picker { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; width: 100%; }
.cal_weekday_option { cursor: pointer; display: inline-block; width: auto !important; }
.cal_weekday_option input { display: none; }
.cal_weekday_option span { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #e2e8f0; font-size: 12px; font-weight: 500; color: #475569; transition: all 0.2s; }
.cal_weekday_option input:checked + span { background: #3b82f6; color: white; }
.cal_weekday_option:hover span { background: #cbd5e1; }
.cal_weekday_option input:checked:hover + span { background: #2563eb; }

.cal_recur_end_options { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; width: 100%; }
.cal_recur_end_option { display: flex; align-items: center; gap: 8px; font-size: 14px; width: auto !important; }
.cal_recur_end_option input[type="radio"] { margin: 0; }
.cal_recur_end_option input[type="number"], .cal_recur_end_option input[type="date"] { padding: 6px 8px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 14px; }

.cal_recur_preview { background: #dbeafe; border-radius: 6px; padding: 10px 12px; font-size: 13px; color: #1e40af; }

.cal_recurrence_warning { display: flex; align-items: flex-start; gap: 8px; background: #fef3c7; border-radius: 6px; padding: 10px 12px; font-size: 13px; color: #92400e; margin: 10px 0; }
.cal_recurrence_warning svg { flex-shrink: 0; margin-top: 1px; stroke: #f59e0b; }
#cal_recur_preview_text { font-weight: normal; }

/* Recurrence icon on calendar events */
.cal_recur_icon { font-size: 11px; color: #6366f1; margin-right: 3px; font-weight: bold; }
.cal_event_day .cal_recur_icon { font-size: 12px; }
.cal_event_week .cal_recur_icon { font-size: 10px; }

.cal_modal_footer { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid #e2e8f0; margin-top: 15px; }
.cal_modal_footer_right { display: flex; gap: 8px; }

.cal_btn_save, .cal_btn_cancel, .cal_btn_delete { padding: 8px 16px; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; transition: background 0.2s; }
.cal_btn_save { background: #3b82f6; color: #fff; transition: opacity 0.2s; }
.cal_btn_save:hover { background: #2563eb; }
.cal_btn_save:disabled { cursor: not-allowed; }
.cal_btn_save:disabled:hover { background: #3b82f6; }
.cal_btn_cancel { background: #f1f5f9; color: #64748b; }
.cal_btn_cancel:hover { background: #e2e8f0; }
.cal_btn_delete { background: #fee2e2; color: #dc2626; }
.cal_btn_delete:hover { background: #fecaca; }

/* Delete confirmation modal */
.cal_delete_modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1100; display: flex; align-items: center; justify-content: center; }
.cal_delete_modal_content { background: #fff; border-radius: 12px; padding: 30px; max-width: 400px; width: 90%; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.cal_delete_modal_icon { margin-bottom: 15px; }
.cal_delete_modal_content h3 { margin: 0 0 10px; font-size: 18px; color: #1e293b; }
.cal_delete_modal_content p { margin: 0 0 25px; font-size: 14px; color: #64748b; }
.cal_delete_modal_buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }
.cal_btn_delete_one { padding: 12px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid #e2e8f0; background: #fff; color: #1e293b; transition: all 0.2s; }
.cal_btn_delete_one:hover { background: #f8fafc; border-color: #cbd5e1; }
.cal_btn_delete_series { padding: 12px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: #dc2626; color: #fff; transition: all 0.2s; }
.cal_btn_delete_series:hover { background: #b91c1c; }
.cal_btn_delete_cancel { padding: 10px 20px; border-radius: 6px; font-size: 14px; cursor: pointer; border: none; background: transparent; color: #64748b; transition: all 0.2s; width: 100%; }
.cal_btn_delete_cancel:hover { background: #f1f5f9; }

.cal_update_modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1100; display: flex; align-items: center; justify-content: center; }
.cal_btn_update_series { padding: 12px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: #3b82f6; color: #fff; transition: all 0.2s; }
.cal_btn_update_series:hover { background: #2563eb; }

/* Recurring preview modal */
.cal_recurring_preview_modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1100; display: flex; align-items: center; justify-content: center; }
.cal_recurring_preview_content { background: #fff; border-radius: 12px; max-width: 600px; width: 95%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.cal_recurring_preview_header { padding: 20px 24px 15px; border-bottom: 1px solid #e2e8f0; }
.cal_recurring_preview_header h3 { margin: 0 0 5px; font-size: 18px; color: #1e293b; }
.cal_recurring_preview_summary { margin: 0; font-size: 13px; color: #64748b; }
.cal_recurring_preview_summary span { font-weight: 600; }
#cal_recurring_conflicts { color: #ef4444; }
.cal_recurring_preview_filter { padding: 10px 24px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.cal_recurring_preview_filter.switch-wrapper { margin-bottom: 0; }
.cal_recurring_preview_filter.switch-wrapper label { font-size: 13px; }
.cal_recurring_preview_table_wrap { flex: 1; overflow-y: auto; padding: 0; }
.cal_recurring_preview_table { width: 100%; border-collapse: collapse; }
.cal_recurring_preview_table th { position: sticky; top: 0; background: #f8fafc; padding: 10px 12px; font-size: 12px; font-weight: 600; color: #64748b; text-align: left; border-bottom: 1px solid #e2e8f0; }
.cal_recurring_preview_table td { padding: 10px 12px; font-size: 13px; color: #1e293b; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.cal_recurring_preview_table tr:last-child td { border-bottom: none; }
.cal_recurring_preview_table .col_date { width: 120px; }
.cal_recurring_preview_table .col_time { width: 100px; }
.cal_recurring_preview_table .col_status { }
.cal_recurring_preview_table .col_action { width: 60px; text-align: center; }
.cal_recurring_row_conflict { background: #fef2f2; }
.cal_recurring_row_hidden { display: none; }
.cal_recurring_status_ok { color: #16a34a; font-size: 12px; }
.cal_recurring_status_ok svg { vertical-align: middle; margin-right: 4px; }
.cal_recurring_status_conflict { display: flex; flex-direction: column; gap: 2px; }
.cal_recurring_conflict_item { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #dc2626; }
.cal_recurring_conflict_item svg { flex-shrink: 0; }
.cal_recurring_conflict_item.warning { color: #d97706; }
/* Switch compact for table */
.cal_recurring_switch { position: relative; width: 36px; height: 20px; display: inline-block; }
.cal_recurring_switch input { opacity: 0; width: 0; height: 0; }
.cal_recurring_switch_slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #cbd5e1; border-radius: 20px; transition: 0.3s; }
.cal_recurring_switch_slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 2px; bottom: 2px; background: #fff; border-radius: 50%; transition: 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.cal_recurring_switch input:checked + .cal_recurring_switch_slider { background: #719126; }
.cal_recurring_switch input:checked + .cal_recurring_switch_slider::before { transform: translateX(16px); }
.cal_recurring_switch.switch_danger input:checked + .cal_recurring_switch_slider { background: #dc2626; }
.cal_recurring_preview_footer { padding: 15px 24px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 10px; }
.cal_recurring_preview_footer .cal_btn_cancel { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid #e2e8f0; background: #fff; color: #64748b; transition: all 0.2s; }
.cal_recurring_preview_footer .cal_btn_cancel:hover { background: #f8fafc; border-color: #cbd5e1; }
.cal_recurring_preview_footer .cal_btn_save { padding: 10px 20px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; background: #719126; color: #fff; transition: all 0.2s; }
.cal_recurring_preview_footer .cal_btn_save:hover { background: #5c7620; }
.cal_recurring_preview_footer .cal_btn_save:disabled { background: #cbd5e1; cursor: not-allowed; }

/* ============================================================================
   CALENDAR MODULE - END
   ============================================================================ */

/* ============================================================================
   CRM MODULE
   ============================================================================ */

/* Tabs */
.crm_tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
.crm_tab { padding: 12px 24px; font-size: 14px; font-weight: 500; color: #64748b; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.2s; }
.crm_tab:hover { color: #3b82f6; }
.crm_tab_active { color: #3b82f6; border-bottom-color: #3b82f6; }

/* Header / Search */
.crm_header { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
.crm_search_box { position: relative; flex: 1; min-width: 200px; }
.crm_search_box input { width: 100%; padding: 10px 35px 10px 15px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; background: #fff; }
.crm_search_box input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.crm_keywords_clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #94a3b8; cursor: pointer; }
.crm_keywords_clear:hover { color: #64748b; }
.crm_filters { display: flex; gap: 10px; }
.crm_filters select { padding: 10px 15px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; background: #fff; cursor: pointer; }

/* Listing */
.crm_listing { background: #fff; border-radius: 8px; border: 1px solid #e2e8f0; overflow: hidden; }
.crm_listing_header { display: flex; padding: 12px 15px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 13px; color: #475569; }
.crm_col { padding: 0 8px; }
.crm_col_name { flex: 2; min-width: 150px; }
.crm_col_company { flex: 2; min-width: 150px; }
.crm_col_email { flex: 2; min-width: 150px; }
.crm_col_mobile { flex: 1; min-width: 120px; }
.crm_col_type { flex: 0 0 100px; text-align: center; }
.crm_col_actions { flex: 0 0 80px; text-align: right; }
.crm_sortable { cursor: pointer; user-select: none; }
.crm_sortable:hover { color: #3b82f6; }
.crm_sort_icon { font-size: 10px; margin-left: 4px; }

.crm_row { display: flex; padding: 12px 15px; border-bottom: 1px solid #f1f5f9; align-items: center; transition: background 0.15s; }
.crm_row:hover { background: #f8fafc; }
.crm_row:last-child { border-bottom: none; }
.crm_row_archived { opacity: 0.5; }

.crm_user_name { font-weight: 500; color: #1e293b; }
.crm_user_type_badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.crm_type_particulier { background: #dbeafe; color: #1d4ed8; }
.crm_type_independant { background: #fef3c7; color: #b45309; }
.crm_type_entreprise { background: #d1fae5; color: #047857; }

.crm_actions { display: flex; gap: 8px; justify-content: flex-end; }
.crm_action_btn { width: 32px; height: 32px; border: none; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; background: #f1f5f9; color: #64748b; }
.crm_action_btn:hover { background: #e2e8f0; color: #1e293b; }
.crm_action_btn svg { width: 16px; height: 16px; }

.crm_loading { padding: 40px; text-align: center; color: #64748b; }
.crm_empty { padding: 60px 20px; text-align: center; color: #94a3b8; }

/* Pagination */
.crm_pagination { display: flex; gap: 5px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.crm_page_btn { padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #475569; cursor: pointer; font-size: 14px; transition: all 0.15s; }
.crm_page_btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.crm_page_btn_active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
.crm_page_info { padding: 8px 14px; color: #64748b; font-size: 14px; }

/* Form */
.crm_form_container { max-width: 800px; background: #fff; border-radius: 12px; padding: 30px; border: 1px solid #e2e8f0; }
.crm_form_container h3 { margin: 0 0 25px; font-size: 20px; color: #1e293b; }
.crm_form_container h4 { margin: 20px 0 15px; font-size: 14px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: 0.5px; }
.crm_form_section { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #f1f5f9; }
.crm_form_section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.crm_form_row { display: flex; gap: 15px; margin-bottom: 15px; flex-wrap: wrap; }
.crm_form_row:last-child { margin-bottom: 0; }
.crm_form_field { flex: 1; min-width: 150px; }
.crm_form_field.crm_field_small { flex: 0 0 120px; min-width: 100px; }
.crm_form_field.crm_field_large { flex: 2; min-width: 300px; }
.crm_form_field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: #475569; }
.crm_form_field input, .crm_form_field select, .crm_form_field textarea { width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; transition: all 0.15s; }
.crm_form_field input:focus, .crm_form_field select:focus, .crm_form_field textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }

/* Type selector */
.crm_type_selector { display: flex; gap: 10px; flex-wrap: wrap; }
.crm_type_option { flex: 1; min-width: 120px; padding: 15px; border: 2px solid #e2e8f0; border-radius: 8px; cursor: pointer; text-align: center; transition: all 0.15s; }
.crm_type_option:hover { border-color: #cbd5e1; }
.crm_type_option.crm_type_selected { border-color: #3b82f6; background: #eff6ff; }
.crm_type_option input { display: none; }

/* Checkbox */
.crm_checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; color: #475569; }
.crm_checkbox input { width: 18px; height: 18px; cursor: pointer; }

/* Form actions */
.crm_form_actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0; }
.crm_btn { padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.crm_btn_primary { background: #3b82f6; color: #fff; border: none; }
.crm_btn_primary:hover { background: #2563eb; }
.crm_btn_secondary { background: #fff; color: #475569; border: 1px solid #e2e8f0; }
.crm_btn_secondary:hover { background: #f8fafc; border-color: #cbd5e1; }

/* Menu icon */
.global_menu_ico_CRM { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>'); }

/* Page header */
.crm_page_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px; }
.crm_page_header h2 { margin: 0; font-size: 24px; color: #1e293b; font-weight: 600; }
.crm_back_link { color: #64748b; text-decoration: none; font-size: 14px; display: flex; align-items: center; gap: 5px; transition: color 0.15s; }
.crm_back_link:hover { color: #3b82f6; }

/* Listing row as link */
a.crm_row { text-decoration: none; color: inherit; cursor: pointer; }
a.crm_row:hover { background: #f8fafc; }
a.crm_row:hover .crm_user_name { color: #3b82f6; }

/* Messages */
.crm_message { padding: 15px 20px; border-radius: 8px; margin-bottom: 20px; font-size: 14px; }
.crm_message_success { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; }
.crm_message_error { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }

/* Field validation */
.crm_field_invalid { border-color: #ef4444 !important; }
.crm_field_invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.1) !important; }
.crm_field_error { display: block; margin-top: 5px; font-size: 12px; color: #ef4444; }
.crm_required { color: #ef4444; }

/* Button disabled state */
.crm_btn:disabled { opacity: 0.6; cursor: not-allowed; }
.crm_btn_small { padding: 8px 16px; font-size: 13px; }

/* Address list */
.crm_address_list { margin-bottom: 15px; }
.crm_address_item { display: flex; align-items: center; gap: 12px; padding: 12px 15px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 8px; }
.crm_address_item:last-child { margin-bottom: 0; }
.crm_address_default { font-size: 18px; color: #cbd5e1; cursor: pointer; transition: color 0.15s; }
.crm_address_default:hover { color: #fbbf24; }
.crm_address_default.is_default { color: #f59e0b; }
.crm_address_content { flex: 1; }
.crm_address_label { font-weight: 500; color: #1e293b; margin-bottom: 2px; }
.crm_address_detail { font-size: 13px; color: #64748b; }
.crm_address_actions { display: flex; gap: 8px; }
.crm_address_edit, .crm_address_delete { width: 28px; height: 28px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; transition: all 0.15s; background: #e2e8f0; color: #64748b; }
.crm_address_edit:hover { background: #3b82f6; color: #fff; }
.crm_address_delete:hover { background: #ef4444; color: #fff; }

/* Address modal */
.crm_address_modal_box { background: #fff; border-radius: 6px; width: 500px; max-width: 95vw; box-shadow: 0 20px 50px rgba(0,0,0,0.2); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; }
.crm_address_modal_box .box_title { margin-bottom: 15px; }
.crm_address_modal_box .cal_modal_content { }
.crm_address_modal_box .cal_modal_content .input_row { margin-bottom: 15px; }
.crm_address_modal_box .cal_modal_content .input_row label { display: block; font-weight: 500; color: #475569; margin-bottom: 5px; font-size: 13px; }
.crm_address_modal_box .cal_modal_content .input_row input,
.crm_address_modal_box .cal_modal_content .input_row select { width: 100%; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; }
.crm_address_modal_box .cal_modal_content .input_row_inline { display: flex; gap: 15px; }
.crm_address_modal_box .cal_modal_content .input_col { flex: 1; }
.crm_address_modal_box .cal_modal_content .input_col_small { flex: 0 0 120px; }
.crm_address_modal_box .cal_modal_footer { padding: 15px 20px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; gap: 10px; }

/* Address Autocomplete (reusable) */
.address_autocomplete_wrapper { position: relative; width: 100%; display: block; }
.address_autocomplete_wrapper input { width: 100%; box-sizing: border-box; }
.address_autocomplete_dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 1010; display: none; max-height: 300px; overflow-y: auto; margin-top: 75px; }
.address_autocomplete_item { padding: 10px 12px 10px 36px; cursor: pointer; border-bottom: 1px solid #f1f5f9; transition: background 0.15s; position: relative; }
.address_autocomplete_item::before { content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EA4335' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }
.address_autocomplete_item:last-child { border-bottom: none; }
.address_autocomplete_item:hover, .address_autocomplete_item.selected { background: #f8fafc; }
.address_autocomplete_main { font-weight: 500; color: #1e293b; font-size: 14px; }
.address_autocomplete_secondary { font-size: 12px; color: #64748b; margin-top: 2px; }

/* Map preview in modal */
.address_map_container { margin-top: 15px; text-align: center; display: none; }
.address_map_preview { border-radius: 8px; border: 1px solid #e2e8f0; max-width: 100%; }


/* ============================================================================
   CRM MODULE - END
   ============================================================================ */

/* ============================================================================
   TEAM PLANNING MODULE
   ============================================================================ */

.planning_page { padding: 20px; max-width: 1400px; margin: 0 auto; }

/* Header */
.planning_header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0; }
.planning_header_left { display: flex; align-items: center; gap: 15px; }
.planning_back_btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #f1f5f9; color: #64748b; text-decoration: none; transition: all 0.15s; }
.planning_back_btn:hover { background: #e2e8f0; color: #334155; }
.planning_header h1 { margin: 0; font-size: 20px; font-weight: 600; color: #1e293b; }
.planning_team_name { font-size: 14px; color: #64748b; padding: 4px 10px; background: #f1f5f9; border-radius: 4px; }
.planning_save_btn { padding: 8px 20px; background: #719126; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s; }
.planning_save_btn:hover { background: #5a7320; }

/* Toolbar */
.planning_toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 12px 15px; background: #f8fafc; border-radius: 8px; flex-wrap: wrap; gap: 10px; }
.planning_toolbar_left { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.planning_toolbar_left label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #64748b; }
.planning_toolbar_left select { padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 13px; background: white; }
.planning_week_selector { display: flex; gap: 5px; }
.planning_week_btn { padding: 6px 12px; border: 1px solid #e2e8f0; background: white; border-radius: 4px; font-size: 12px; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.15s; }
.planning_week_btn:hover { border-color: #719126; color: #719126; }
.planning_week_btn.active { background: #719126; border-color: #719126; color: white; }
.planning_add_btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: #3b82f6; color: white; border: none; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s; }
.planning_add_btn:hover { background: #2563eb; }

/* Day tabs (mobile) */
.planning_day_tabs { display: none; overflow-x: auto; margin-bottom: 10px; padding: 5px 0; gap: 5px; -webkit-overflow-scrolling: touch; }
.planning_day_tab { flex-shrink: 0; padding: 8px 16px; border: 1px solid #e2e8f0; background: white; border-radius: 6px; font-size: 13px; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.15s; }
.planning_day_tab.active { background: #719126; border-color: #719126; color: white; }

/* Grid wrapper */
.planning_grid_wrapper { overflow-x: auto; margin-bottom: 20px; border: 1px solid #e2e8f0; border-radius: 8px; background: white; }
.planning_grid { min-width: 800px; user-select: none; }

/* Grid header */
.planning_grid_header { display: grid; grid-template-columns: 60px repeat(7, 1fr); background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.planning_grid_hour_label { padding: 10px; font-size: 11px; color: #94a3b8; text-align: center; }
.planning_grid_day_header { padding: 10px; font-size: 13px; font-weight: 600; color: #334155; text-align: center; border-left: 1px solid #e2e8f0; }

/* Grid body */
.planning_grid_body { position: relative; }

/* Overlay layer - matches grid structure */
.planning_overlay_layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 60px repeat(7, 1fr); pointer-events: none; }
.planning_overlay_spacer { pointer-events: none; }
.planning_overlay_col { position: relative; pointer-events: none; border-left: 1px solid transparent; transition: background 0.15s; }
.planning_overlay_col.drag-target { background: rgba(59, 130, 246, 0.1); }
.planning_overlay_col .planning_block_overlay { pointer-events: auto; }
.planning_grid_row { display: grid; grid-template-columns: 60px repeat(7, 1fr); border-top: 1px solid #f1f5f9; }
.planning_grid_row.hour-start { border-top-color: #e2e8f0; }
.planning_grid_hour { padding: 0 8px 0 0; font-size: 11px; color: #94a3b8; text-align: right; background: #fafafa; position: relative; }
.planning_grid_hour span { position: absolute; right: 8px; top: 0; transform: translateY(-50%); background: #fafafa; line-height: 1; }
.planning_grid_cell { border-left: 1px solid #f1f5f9; height: 20px; cursor: pointer; transition: background 0.1s; position: relative; }
.planning_grid_cell:hover { background: #f0fdf4; }
.planning_grid_cell.selected { background: #bbf7d0; }
.planning_grid_cell.has-block { background: #dbeafe; cursor: default; }
.planning_grid_cell.has-block.internal { background: #fef3c7; }
.planning_grid_cell.has-block::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #3b82f6; }
.planning_grid_cell.has-block.internal::after { background: #f59e0b; }
.planning_grid_cell.long-press-active { background: #86efac; }

/* Selection rectangle overlay */
.planning_selection_overlay { position: absolute; background: rgba(34, 197, 94, 0.2); border: 2px dashed #22c55e; pointer-events: none; z-index: 50; display: none; border-radius: 4px; }
.planning_grid_body.selection-mode { touch-action: none; }

/* Block overlays on grid */
.planning_block_overlay { position: absolute; left: 0; right: 0; background: rgba(59, 130, 246, 0.2); border-left: 3px solid #3b82f6; border-radius: 0 4px 4px 0; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; padding: 4px 6px; font-size: 11px; color: #1e40af; overflow: hidden; z-index: 10; box-sizing: border-box; transition: background 0.15s; }
.planning_block_overlay:hover { background: rgba(59, 130, 246, 0.35); }
.planning_block_overlay.internal { background: rgba(245, 158, 11, 0.2); border-left-color: #f59e0b; color: #92400e; }
.planning_block_overlay.internal:hover { background: rgba(245, 158, 11, 0.35); }
.planning_block_overlay_content { flex: 1; min-height: 0; overflow: hidden; }
.planning_block_overlay_time { font-weight: 600; font-size: 11px; white-space: nowrap; }
.planning_block_overlay_info { font-size: 10px; opacity: 0.8; white-space: nowrap; margin-top: 2px; }
.planning_block_overlay_actions { display: flex; gap: 4px; margin-top: 4px; }
.planning_block_btn { width: 22px; height: 22px; border: none; background: rgba(255,255,255,0.8); border-radius: 3px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; transition: all 0.15s; padding: 0; }
.planning_block_btn:hover { background: white; color: #334155; }
.planning_block_btn.delete:hover { background: #fee2e2; color: #dc2626; }

/* Drag handle (top of block) */
.planning_block_overlay_drag_handle { position: absolute; top: 0; left: 0; right: 0; height: 8px; cursor: grab; background: transparent; }
.planning_block_overlay_drag_handle:hover { background: rgba(0,0,0,0.05); }

/* Resize handle (bottom of block) */
.planning_block_overlay_resize_handle { position: absolute; bottom: 0; left: 0; right: 0; height: 8px; cursor: ns-resize; background: transparent; }
.planning_block_overlay_resize_handle:hover { background: rgba(0,0,0,0.1); }
.planning_block_overlay_resize_handle::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: rgba(0,0,0,0.2); border-radius: 2px; }

/* Dragging/resizing states */
.planning_block_overlay.dragging { opacity: 0.8; z-index: 100; cursor: grabbing; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.planning_block_overlay.resizing { z-index: 100; }
body.planning-dragging, body.planning-resizing { cursor: grabbing !important; user-select: none; touch-action: none; overflow: hidden; }
body.planning-resizing { cursor: ns-resize !important; }

/* Blocks list */
.planning_blocks { background: white; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; }
.planning_blocks h3 { margin: 0 0 15px 0; font-size: 14px; font-weight: 600; color: #334155; }
.planning_blocks_list { display: flex; flex-direction: column; gap: 10px; }
.planning_blocks_empty { padding: 20px; text-align: center; color: #94a3b8; font-size: 13px; background: #f8fafc; border-radius: 6px; }
.planning_block_item { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #f8fafc; border-radius: 6px; border-left: 4px solid #3b82f6; }
.planning_block_item.internal { border-left-color: #f59e0b; }
.planning_block_item_content { flex: 1; }
.planning_block_item_header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.planning_block_item_days { font-size: 13px; font-weight: 600; color: #334155; }
.planning_block_item_time { font-size: 12px; color: #64748b; }
.planning_block_item_badge { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: #dbeafe; color: #1e40af; }
.planning_block_item.internal .planning_block_item_badge { background: #fef3c7; color: #92400e; }
.planning_block_item_types { font-size: 12px; color: #64748b; margin-bottom: 4px; }
.planning_block_item_capacity { font-size: 11px; color: #94a3b8; }
.planning_block_item_actions { display: flex; gap: 5px; }
.planning_block_item_btn { width: 28px; height: 28px; border: none; background: white; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; transition: all 0.15s; }
.planning_block_item_btn:hover { background: #e2e8f0; color: #334155; }
.planning_block_item_btn.delete:hover { background: #fee2e2; color: #dc2626; }

/* Modal */
.planning_block_modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 500px; max-height: 90vh; overflow-y: auto; background: white; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.3); z-index: 1001; padding: 20px; }
.planning_block_modal .box_title { margin: -20px -20px 0 -20px; padding: 15px 20px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; border-radius: 12px 12px 0 0; cursor: pointer; }
.planning_modal_title { font-size: 16px; font-weight: 600; color: #1e293b; }
.planning_modal_content { padding-top: 20px; }
.planning_modal_summary { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 12px; margin-bottom: 15px; font-size: 13px; color: #166534; }
.planning_block_modal .input_row { margin-bottom: 20px; }
.planning_block_modal .input_row:last-child { margin-bottom: 0; }
.planning_block_modal .input_row_label { display: none !important; }
.planning_event_types { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.planning_event_types .switch-wrapper { margin-bottom: 0; width: 100%; }
.planning_capacity_group { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 12px; background: #f8fafc; border-radius: 6px; }
.planning_capacity_group label { font-size: 13px; color: #475569; margin: 0; }
.planning_capacity_group input[type="number"] { width: 70px; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 14px; }
.planning_modal_content .input_row { margin-bottom: 15px; }
.planning_modal_content .input_row > label { display: block; font-size: 13px; font-weight: 500; color: #334155; margin-bottom: 8px; }

/* Event types checkboxes */
.planning_event_types { max-height: 200px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; }
.planning_event_type_option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; cursor: pointer; transition: background 0.15s; }
.planning_event_type_option:hover { background: #f1f5f9; }
.planning_event_type_option input { margin: 0; }
.planning_event_type_option span { font-size: 13px; color: #334155; }
.planning_no_types { padding: 10px; color: #94a3b8; font-size: 13px; margin: 0; }
.planning_no_types a { color: #3b82f6; }

/* Capacity */
.planning_capacity { display: flex; flex-direction: column; gap: 8px; }
.planning_capacity_option { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; cursor: pointer; }
.planning_capacity_option input { margin: 0; }
.planning_capacity_group { display: flex; align-items: center; gap: 8px; padding-left: 24px; }
.planning_capacity_group label { font-size: 12px; color: #64748b; }
.planning_capacity_group input { width: 60px; padding: 4px 8px; border: 1px solid #e2e8f0; border-radius: 4px; font-size: 13px; }

/* Visibility */
.planning_visibility { display: flex; flex-direction: column; gap: 8px; }
.planning_visibility_option { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; cursor: pointer; }
.planning_visibility_option input { margin: 0; }

/* Modal footer */
.planning_modal_footer { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: #f8fafc; border-top: 1px solid #e2e8f0; border-radius: 0 0 12px 12px; }
.planning_modal_footer_right { display: flex; gap: 10px; }
.planning_btn_cancel { padding: 8px 16px; background: white; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 13px; color: #64748b; cursor: pointer; transition: all 0.15s; }
.planning_btn_cancel:hover { background: #f1f5f9; color: #334155; }
.planning_btn_save { padding: 8px 16px; background: #719126; border: none; border-radius: 6px; font-size: 13px; color: white; cursor: pointer; transition: background 0.15s; }
.planning_btn_save:hover { background: #5a7320; }
.planning_btn_delete { padding: 8px 16px; background: #fee2e2; border: none; border-radius: 6px; font-size: 13px; color: #dc2626; cursor: pointer; transition: background 0.15s; }
.planning_btn_delete:hover { background: #fecaca; }

/* ============================================================================
   MEDIA QUERIES - CALENDAR MODULE (centralisées en fin de fichier)
   ============================================================================ */

/* Large screens (min-width: 1281px) */
@media (min-width: 1281px) {
    .cal_header { left: 315px; }
    .cal_sidebar { left: 315px; }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
    .cal_app { margin: -5px; width: calc(100% + 10px); }
    .cal_header { left: 0; right: 0; top: 30px; }
    .cal_header_left { display: none; }
    .cal_header_content { padding-left: 0; }
    .cal_sidebar { width: 60px; left: 0; top: 135px; height: calc(100vh - 135px); }
    .cal_sidebar_buttons { display: flex; }
    .cal_sidebar_btn_minical { display: flex; }
    .cal_sidebar_view_toggle { display: flex; }
    .cal_sidebar .cal_mini-calendar, .cal_sidebar .cal_calendars h3, .cal_sidebar .cal_calendar-label { display: none; }
    .cal_sidebar .cal_calendar-edit, .cal_sidebar .cal_calendar-shared, .cal_sidebar .cal_calendar-add { display: none; }
    .cal_sidebar .cal_calendars { border: none; padding: 1rem 0; }
    .cal_sidebar .cal_calendar-item { justify-content: center; }
    .cal_main { margin-left: 60px; margin-top: 85px; }
    .cal_header-title { min-width: auto; font-size: 14px; }
    .cal_view-toggle { display: none; }
    .cal_month-view .cal_month-grid { grid-template-rows: 40px; grid-auto-rows: minmax(60px, auto); }
    .cal_month-view .cal_month-day-label { top: 135px; }
    .cal_month-view .cal_date-num { font-size: 11px; width: 24px; height: 24px; }
    .cal_week-view .cal_week-header { top: 135px; }
    .cal_week-view .cal_allday-container { top: 204.5px; }
    .cal_day-view .cal_day-header { top: 135px; }
    .cal_day-view .cal_allday-events { top: 206.5px; }
    .cal_day-view .cal_time-label, .cal_week-view .cal_time-label { background: #f1f5f9; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 10px; }
    .cal_day-view .cal_time-label:hover, .cal_week-view .cal_time-label:hover { background: #3b82f6; color: #fff; }
    .cal_day-view .cal_time-label:active, .cal_week-view .cal_time-label:active, .cal_week-view .cal_time-label.active { background: #2563eb; color: #fff; }
    .cal_team_user_picker { margin: 0 10px 10px 10px; }
    .cal_team_user_trigger { width: 40px; height: 40px; padding: 0; border-radius: 8px; justify-content: center; }
    .cal_team_user_trigger .cal_team_user_name, .cal_team_user_trigger .cal_team_user_chevron { display: none; }
    .cal_team_user_trigger .cal_team_user_avatar { width: 28px; height: 28px; background-size: 28px; margin: 0; }
    .cal_team_user_popup { left: 70px !important; }
    .cal_search_modal { width: 400px; }
    .cal_sidebar_btn_search, .cal_sidebar_btn_minical { background: #3b82f6; color: white; }
    .cal_sidebar_btn_search:hover, .cal_sidebar_btn_minical:hover { background: #2563eb; }
    .cal_app.delegate-warning-active .cal_delegate_warning { display: none; }
    .cal_app.delegate-warning-active .cal_delegate_picker { display: block; margin: 0 10px 10px 10px; }
    .cal_delegate_popup { left: 70px; border: none; }
    .cal_delegate_popup::before { display: none; }
    .cal_delegate_popup::after { left: -8px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #fef3c7; }
    .cal_calendar-unsubscribe { display: none !important; }

    /* Reminders on mobile */
    .cal_reminder_type label { width: auto !important; }

    /* Priority picker - keep fixed size */
    .cal_prio_option { width: 30px !important; }

    /* Team Planning - Mobile */
    .planning_page { padding: 10px; }
    .planning_header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .planning_header_left { width: 100%; }
    .planning_header_right { width: 100%; }
    .planning_save_btn { width: 100%; }
    .planning_header h1 { font-size: 16px; }
    .planning_toolbar { flex-direction: column; align-items: flex-start; }
    .planning_toolbar_left { width: 100%; flex-direction: column; align-items: flex-start; }
    .planning_toolbar_left label { width: 100%; justify-content: space-between; }
    .planning_toolbar_left select { flex: 1; }
    .planning_toolbar_right { width: 100%; }
    .planning_add_btn { width: 100%; justify-content: center; }
    .planning_day_tabs { display: flex; }
    .planning_grid_wrapper { overflow-x: hidden; }
    .planning_grid { min-width: auto; }
    .planning_grid_header { grid-template-columns: 50px 1fr; }
    .planning_grid_day_header { display: none; }
    .planning_grid_day_header.active { display: block; }
    .planning_grid_row { grid-template-columns: 50px 1fr; }
    .planning_grid_cell { display: none; }
    .planning_grid_cell.active-day { display: block; }
    .planning_overlay_layer { grid-template-columns: 50px 1fr; }
    .planning_overlay_col { display: none; }
    .planning_overlay_col.active-day { display: block; }
    .planning_block_modal { width: 95%; max-height: 85vh; }
}