a:hover i {text-decoration: none !important}
a:hover, a:focus {text-decoration: none !important}

/* #s_print_retour{float: right;color: #000;}
#s_print_retour i{font-size:25px;cursor:pointer;} */

.clear { clear: both;}
/* Cursor Types */
.pointer {cursor: pointer !important;}
.cursor-default { cursor: default !important;}
.cursor-help { cursor: help !important;}
.cursor-progress { cursor: progress !important;}
.cursor-wait { cursor: wait !important;}
.cursor-text { cursor: text !important;}
.cursor-cell { cursor: cell !important;}
.cursor-crosshair { cursor: crosshair !important;}
.cursor-grab { cursor: grab !important;}
.cursor-move { cursor: move !important;}
.cursor-copy { cursor: copy !important;}
.cursor-alias { cursor: alias !important;}

.d-none { display: none !important;}
.d-block { display: block !important;}
.d-inline { display: inline !important;}
.d-inline-block { display: inline-block !important;}
.d-flex { display: flex !important;}

.m0 { margin: 0px !important;}
.m5 { margin: 5px !important;}
.m10 { margin: 10px !important;}
.m15 { margin: 15px !important;}
.m20 { margin: 20px !important;}
.m25 { margin: 25px !important;}
.m30 { margin: 30px !important;}

.mt0 { margin-top: 0px !important; }
.mt3 { margin-top: 3px !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }

.mt-5 { margin-top: -5px !important; }
.mt-10 { margin-top: -10px !important; }
.mt-15 { margin-top: -15px !important; }
.mt-20 { margin-top: -20px !important; }
.mt-30 { margin-top: -30px !important; }

.mb0 { margin-bottom: 0px !important;}
.mb3 { margin-bottom: 3px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }

.mr0 { margin-right: 0px !important; }
.mr3 { margin-right: 3px !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }

.ml0 { margin-left: 0px !important; }
.ml3 { margin-left: 3px !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }

.p0 {padding: 0px !important;}
.p2 {padding: 2px !important;}
.p5 {padding: 5px !important;}
.p8 {padding: 8px !important;}
.p10 {padding: 10px !important;}
.p15 {padding: 15px !important;}
.p20 {padding: 20px !important;}
.p25 {padding: 25px !important;}
.p30 {padding: 30px !important;}

.pt0 { padding-top: 0px !important; }
.pt3 { padding-top: 3px !important; }
.pt5 { padding-top: 5px !important; }
.pt10 { padding-top: 10px !important; }
.pt15 { padding-top: 15px !important; }
.pt20 { padding-top: 20px !important; }
.pt25 { padding-top: 25px !important; }
.pt30 { padding-top: 30px !important; }

.pb0 { padding-bottom: 0px !important; }
.pb2 { padding-bottom: 2px !important; }
.pb5 { padding-bottom: 5px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb15 { padding-bottom: 15px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb25 { padding-bottom: 25px !important; }
.pb30 { padding-bottom: 30px !important; }

.pr0 { padding-right: 0px !important; }
.pr5 { padding-right: 5px !important; }
.pr10 { padding-right: 10px !important; }
.pr15 { padding-right: 15px !important; }
.pr20 { padding-right: 20px !important; }
.pr25 { padding-right: 25px !important; }
.pr30 { padding-right: 30px !important; }

.pl0 { padding-left: 0px !important; }
.pl5 { padding-left: 5px !important; }
.pl10 { padding-left: 10px !important; }
.pl15 { padding-left: 15px !important; }
.pl20 { padding-left: 20px !important; }
.pl25 { padding-left: 25px !important; }
.pl30 { padding-left: 30px !important; }


.fontsize-5px { font-size: 5px !important;}
.fontsize-10px { font-size: 10px !important;}
.fontsize-12px { font-size: 12px !important;}
.fontsize-15px { font-size: 15px !important;}
.fontsize-18px { font-size: 18px !important;}
.fontsize-20px { font-size: 20px !important;}
.fontsize-22px { font-size: 22px !important;}
.fontsize-25px { font-size: 25px !important;}
.fontsize-28px { font-size: 28px !important;}
.fontsize-30px { font-size: 30px !important;}
.fontsize-32px { font-size: 32px !important;}
.fontsize-35px { font-size: 35px !important;}
.fontsize-40px { font-size: 40px !important;}

.lineheight-25px { line-height: 25px;}

.uppercase { text-transform: uppercase;}
.lowecase { text-transform: lowercase;}
.capitalize {text-transform: capitalize;}

.w-25px { width: 25px !important;}
.w-30px { width: 30px !important;}
.w-40px { width: 40px !important;}
.w-50px { width: 50px !important;}
.w-80px { width: 80px !important;}
.w-100px { width: 100px !important;}
.w-120px { width: 120px !important;}
.w-130px { width: 130px !important;}
.w-140px { width: 140px !important;}
.w-150px { width: 150px !important;}
.w-200px { width: 200px !important;}
.w-250px { width: 250px !important;}
.w-300px { width: 300px !important;}
.w-350px { width: 350px !important;}
.w-400px { width: 400px !important;}
.w-450px { width: 450px !important;}
.w100PCT { width: 100% !important;}

.mw-200px { max-width: 200px !important;}

.float-right { float: right !important; }
.float-left { float: left !important; }

.text-danger { color: #e51400 !important; }
.text-success { color: green !important; }
.text-warning { color: #ff5700 !important; }
.text-dimmed { color: #808080d1 !important;}

.text-white { color: #fff !important; }
.text-pink { color: #ff12a4 !important;}
.text-teal {color : #00aba9 !important;}

.text-light-warning { color: #fccb81 !important; }
.text-light-danger { color: #ff877c !important; }
.text-light-success { color: #70d070 !important; }
.text-light-grey { color: #666 !important; }


.label-danger { background-color: #e51400 !important; color: white !important; }
.label-success { background-color: #393 !important; color: white !important; }
.label-warning { background-color: #ff5700 !important; color: white !important; }
.label-primary { background-color: #00aba9 !important; color: white !important; }

.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.text-center { text-align: center !important ; }

.text-bold { font-weight: 700 !important; }


.bg-success { background-color: #0cc20c !important; color: white !important;}
.bg-warning { background-color: #ff5700 !important; color: white !important;}
.bg-danger { background-color: #fb1600 !important; color: white !important;}
.bg-black { background-color: black !important; color: white !important;}
.bg-white { background-color: white !important; color: black !important;}
.bg-yellow { background-color: rgb(246, 254, 0) !important; color: black !important;}
.bg-footer { background: #627984 !important; color: white !important; }
.bg-none { background: transparent !important; }

.bg-lightsuccess { background-color: #70d070 !important; color: black !important;}
.bg-lightwarning { background-color: #f8a31f !important; color: black !important;}
.bg-lightdanger { background-color: #ff877c !important; color: black !important;}
.bg-lightgrey { background: whitesmoke !important;color: black !important;}
.bg-lightblue { background-color: #e3f2fd !important; color: #1565c0 !important;}
.bg-lightblue-hover:hover { background-color: #1565c0 !important; color: #fff !important;}
.bg-lightpink { background-color: #fce4ec !important; color: #c2185b !important;}
.bg-lightpink-hover:hover { background-color: #c2185b !important; color: #fff !important;}

.bg-darkgrey { background-color: #333 !important; color: white !important; }
.bg-darkblue { background-color: #204e81 !important; color: white !important; }
.bg-darkpink { background-color: #800080 !important; color: white !important; }

.va-bottom, tr.va-bottom td { vertical-align: bottom !important;}
.va-top, tr.va-top td  { vertical-align: top !important;}
.va-middle, tr.va-middle td  { vertical-align: middle !important;}

.border-lightgrey { border: 1px solid lightgray !important; }
.border-danger { border : 1px solid red !important}
.border-warning { border : 1px solid #ff5700 !important}
.border-success { border : 1px solid green !important}
.border-none { border: none !important; }

/* Border Radius - Corners */
.rounded-0 { border-radius: 0 !important; }
.rounded-2 { border-radius: 2px !important; }
.rounded-3 { border-radius: 3px !important; }
.rounded-4 { border-radius: 4px !important; }
.rounded-5 { border-radius: 5px !important; }
.rounded-8 { border-radius: 8px !important; }
.rounded-10 { border-radius: 10px !important; }
.rounded-15 { border-radius: 15px !important; }
.rounded-20 { border-radius: 20px !important; }
.rounded-25 { border-radius: 25px !important; }
.rounded-50 { border-radius: 50px !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 9999px !important; }

/* Top corners */
.rounded-top-0 { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
.rounded-top-5 { border-top-left-radius: 5px !important; border-top-right-radius: 5px !important; }
.rounded-top-10 { border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; }
.rounded-top-15 { border-top-left-radius: 15px !important; border-top-right-radius: 15px !important; }

.ui-shell-card {
    border-radius: 10px;
    background: #fcfcfd;
    box-shadow: 0 0px 30px rgba(17, 24, 39, 0.14);
    border: 1px solid rgba(214, 214, 214, 0.85);
}

.ui-shell-card--padded {
    padding: 10px 20px 10px 20px;
}

.ui-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.ui-shell-heading {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
    color: #1f1f1f;
    font-weight: 700;
}

.ui-shell-subtitle {
    margin: 8px 0 0;
    color: #787878;
    font-size: 14px;
    line-height: 1.7;
}

.ui-dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(35, 35, 35, 0.34);
    backdrop-filter: blur(6px);
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.ui-dialog-overlay.is-open {
    display: flex;
}

.ui-dialog {
    width: 100%;
    max-width: 760px;
}

.ui-dialog-close {
    border: 0;
    background: transparent;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 28px;
    line-height: 1;
    color: #777;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.ui-dialog-close:hover {
    background: #f1f1f1;
    color: #333;
}

.ui-warning-panel {
    margin-top: 24px;
    margin-bottom: 22px;
    border-radius: 20px;
    border: 1px solid #e4ece9;
    background: #f3f8f6;
    padding: 24px 24px 24px 30px;
    position: relative;
    color: #565656;
    line-height: 1.8;
    font-size: 15px;
}

.ui-warning-panel:before {
    content: '';
    position: absolute;
    left: 16px;
    top: 24px;
    bottom: 24px;
    width: 4px;
    border-radius: 999px;
    background: #138a72;
}

.ui-warning-panel strong {
    color: #212121;
}

.ui-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: 20px;
    border: 1px solid #e6e6e6;
    background: #fff;
    padding: 18px 20px;
    margin-bottom: 22px;
}

.ui-summary-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.ui-summary-badge {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.ui-summary-title {
    margin: 0;
    font-size: 18px;
    color: #1f1f1f;
    font-weight: 700;
}

.ui-summary-meta {
    margin: 4px 0 0;
    color: #8a8a8a;
    font-size: 14px;
    line-height: 1.6;
}

.ui-chip {
    flex: 0 0 auto;
    border: 1px solid #dedede;
    border-radius: 14px;
    background: #fafafa;
    padding: 12px 16px;
    color: #252525;
    font-size: 16px;
    font-weight: 700;
}

.ui-section-label {
    margin-bottom: 10px;
    color: #7e7e7e;
    font-size: 14px;
}

.ui-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ui-action-grid .btn {
    min-width: 0;
    border: 0;
    border-radius: 14px;
    padding: 15px 18px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
    transition: transform .12s ease, opacity .12s ease;
}

.ui-action-grid .btn:hover {
    transform: translateY(-1px);
    opacity: .94;
}

.ui-dialog-footer {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.ui-btn-link {
    border: 0;
    background: transparent;
    color: #262626;
    font-size: 16px;
    padding: 12px 14px;
}

.ui-btn-link:hover {
    text-decoration: underline;
}

.ui-form-grid {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.ui-form-field {
    flex: 1 1 220px;
}

.ui-form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: #303030;
}

.input-block-level {
    margin-bottom: 0px !important;

}


.ui-form-submit {
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .ui-shell-card--padded {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .ui-summary-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .ui-summary-main {
        width: 100%;
    }

    .ui-action-grid {
        grid-template-columns: 1fr;
    }

    .ui-action-grid .btn,
    .ui-btn-link {
        width: 100%;
    }

    .ui-dialog-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ui-form-field,
    .ui-form-submit {
        flex: 1 1 100%;
    }

    /* Modal dialog: cap height and allow scroll on small screens */
    .ui-dialog {
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Stats icon-nav: switch from float to flex-wrap */
    .stats {
        float: none;
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .stats > li {
        float: none;
        margin-right: 0;
        flex: 0 0 auto;
    }

    /* Toolbar (flex row with space-between): stack vertically */
    .toolbar-responsive {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Auto-fit grid: force single column.
       !important needed to override component-level <style> blocks that define
       grid-template-columns with same specificity but appear later in the cascade. */
    .grid-responsive {
        grid-template-columns: 1fr !important;
    }
}

/* Bottom corners */
.rounded-bottom-0 { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rounded-bottom-5 { border-bottom-left-radius: 5px !important; border-bottom-right-radius: 5px !important; }
.rounded-bottom-10 { border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important; }
.rounded-bottom-15 { border-bottom-left-radius: 15px !important; border-bottom-right-radius: 15px !important; }

/* Left corners */
.rounded-left-0 { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.rounded-left-5 { border-top-left-radius: 5px !important; border-bottom-left-radius: 5px !important; }
.rounded-left-10 { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; }

/* Right corners */
.rounded-right-0 { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.rounded-right-5 { border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; }
.rounded-right-10 { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; }

/* Individual corners */
.rounded-tl-0 { border-top-left-radius: 0 !important; }
.rounded-tl-5 { border-top-left-radius: 5px !important; }
.rounded-tl-10 { border-top-left-radius: 10px !important; }

.rounded-tr-0 { border-top-right-radius: 0 !important; }
.rounded-tr-5 { border-top-right-radius: 5px !important; }
.rounded-tr-10 { border-top-right-radius: 10px !important; }

.rounded-bl-0 { border-bottom-left-radius: 0 !important; }
.rounded-bl-5 { border-bottom-left-radius: 5px !important; }
.rounded-bl-10 { border-bottom-left-radius: 10px !important; }

.rounded-br-0 { border-bottom-right-radius: 0 !important; }
.rounded-br-5 { border-bottom-right-radius: 5px !important; }
.rounded-br-10 { border-bottom-right-radius: 10px !important; }

.nouveaute {
    border-left: 10px solid #00aba9 !important;
}

.img_container {
    display: block !important;
    height: 50px !important;
    width: 50px !important;
    margin: 5px !important;
}

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }

.badge {
    display: inline-block;
    padding: 4px 9px;
    color: #ffffff;
    border-radius: 5px;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #444444;
  }
  
.badge-teal {
    color: #fff;
    background-color: #26a69a;
}

.badge-pill {
    padding-right: 0.4375rem;
    padding-left: 0.4375rem;
    border-radius: 5px;
}

.badge-error {
	animation: bellShake 0.5s ease-in-out;
}

/* inputs */

.input-mini {
    width: 60px;
}

.input-small {
    width: 90px;
}

.input-medium {
    width: 150px;
}

.input-large {
    width: 210px;
}

.input-xlarge {
    width: 270px;
}


/* Tags */

.success-tag {
    background-color: #28a745 !important;
    /* Green */
    color: #fff !important;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.primary-tag {
    background-color: #007bff !important;
    /* Blue */
    color: #fff !important;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.violet-tag {
    background-color: #6f42c1 !important;
    /* Violet */
    color: #fff !important;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

/* Danger Tag */
.danger-tag {
    background-color: #dc3545 !important;
    /* Red */
    color: #fff !important;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

/* Warning Tag */
.warning-tag {
    background-color: #ffc107 !important;
    /* Yellow */
    color: #333 !important;
    /* Dark text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.lightblue-tag {
    background-color: #B4CDE6 !important;
    /* Red */
    color: #333 !important;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.black-tag {
    background-color: #000000;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.blue-tag {
    background-color: #368ee0;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.brown-tag {
    background-color: #a05000;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.darkblue-tag {
    background-color: #204e81;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.darkorange-tag {
    background-color: #FC4F00;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.darkOrange2-tag {
    background-color: #bf8201;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.darkpurple-tag {
    background-color: #804674;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.green-tag {
    background-color: #393;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.grey-3-tag {
    background-color: #eee;
    /* Red */
    color: #000;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.grey-4-tag {
    background-color: #999;
    /* Red */
    color: #000;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.grey-tag {
    background-color: #333;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.lightgrey-tag {
    background-color: #666;
    /* Red */
    color: #333;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.lightred-tag {
    background-color: #e63a3a;
    /* Red */
    color: #333;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.lime-tag {
    background-color: #8cbf26;
    /* Red */
    color: #333;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.magenta-tag {
    background-color: #a200ff;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.orange-tag {
    background-color: #f8a31f;
    /* Red */
    color: #333;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.pink-tag {
    background-color: #e671b8;
    /* Red */
    color: #333;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.purple-tag {
    background-color: #ff0097;
    /* Red */
    color: #ffffff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.red-tag {
    background-color: #e51400;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.satblue-tag {
    background-color: #2c5e7b;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.satgreen-tag {
    background-color: #56af45;
    /* Red */
    color: #333;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.teal-tag {
    background-color: #00aba9;
    /* Red */
    color: #fff;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.yellow-tag {
    background-color: #ffeb3b;
    /* Red */
    color: #333;
    /* White text */
    padding: 5px 10px;
    border-radius: 4px;
    display: inline-block;
}

.table-noborder {
    border: none !important;
}

/** Bell **/
@keyframes bellShake {
			0%, 100% { transform: rotate(0deg); }
			10%, 30% { transform: rotate(-10deg); }
			20%, 40% { transform: rotate(10deg); }
			50% { transform: rotate(0deg); }
		}
#products_not_found_bell {
			position: fixed;
			top: 100px;
			right: 20px;
			font-size: 30px;
			color: #ff9800;
			cursor: pointer;
			z-index: 1000;
			animation: bellShake 1s infinite;
			background: white;
			padding: 10px;
			border-radius: 50%;
			box-shadow: 0 2px 10px rgba(0,0,0,0.2);
		}

/** LIGHTBOX CSS **/
.lightbox_css {
    /* Default to hidden */
    display: none;

    /* Overlay entire screen */
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* A bit of padding around image */
    padding: 1em;

    /* Translucent background */
    background: rgba(0, 0, 0, 0.6);
}

/* Unhide the lightbox when it's the target */
.lightbox_css:target {
    display: block;
}

.lightbox_css span {
    /* Full width and height */
    display: block;
    width: 90%;
    height: 90%;

    /* Size and position background image */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Sidebar */

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60 px;
    border-left: solid 1 px #d5d5d5;
    box-shadow: -5px 0px 10px #96989b59;
    z-index: 999;
}

.sidenav a {
    padding: 8px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    left: 5px;
    font-size: 36px;
    margin-left: 0px;
}

.sidenav h3 {
    margin: 50px;
}

#userPrivilegesContainer ul {
    margin: 5px 0px 5px 30px;
    font-size: 15px;
}

.switcher {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    transition: all 0.3s;
  }
  .switcher::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius:50%;
    background-color: white;
    top: 1px;
    left: 1px;
    transition: all 0.3s;
  }
  
  .checkbox:checked + .switcher::after {
    left : 20px;
  }
  .checkbox:checked + .switcher {
    background-color: #7983ff;
  }
  .checkbox {
    display : none;
  }


/* Generic responsive table utilities (reusable across the app) */
.responsive-table-wrapper, .table-responsive-custom {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-fixed {
    table-layout: fixed !important;
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.table-fixed th, .table-fixed td {
    white-space: nowrap; /* keep headers concise */
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle !important;
}

/* When more space is needed on small screens, allow wrapping inside cells */
@media (max-width: 640px) {
    .table-fixed th, .table-fixed td { white-space: normal !important; }
}

/* iCheck flat orange fallback: render checkbox without background images */
.icheckbox_flat-orange {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #dcdcdc !important;
    border-radius: 3px !important;
    background: #fff !important;
    vertical-align: middle !important;
    position: relative !important;
    box-sizing: border-box !important;
}
.icheckbox_flat-orange.checked {
    background: #ff5700 !important;
    border-color: #ff5700 !important;
}
.icheckbox_flat-orange.disabled, .icheckbox_flat-orange.disabled * {
    opacity: 0.5 !important;
    pointer-events: none !important;
}
.icheckbox_flat-orange.checked:after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 0px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* radio fallback for completeness */
.iradio_flat-orange {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #dcdcdc !important;
    border-radius: 50% !important;
    background: #fff !important;
    vertical-align: middle !important;
    position: relative !important;
    box-sizing: border-box !important;
}
.iradio_flat-orange.checked { background: #ff5700 !important; border-color: #ff5700 !important; }
.iradio_flat-orange.checked:after { content: '' !important; position: absolute !important; left: 4px !important; top: 4px !important; width: 6px !important; height: 6px !important; background: #fff !important; border-radius: 50% !important; }

/* iCheck flat red fallback: render checkbox/radio without background images */
.icheckbox_flat-red {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #dcdcdc !important;
    border-radius: 3px !important;
    background: #fff !important;
    vertical-align: middle !important;
    position: relative !important;
    box-sizing: border-box !important;
}
.icheckbox_flat-red.checked {
    background: #e51400 !important;
    border-color: #e51400 !important;
}
.icheckbox_flat-red.disabled, .icheckbox_flat-red.disabled * {
    opacity: 0.5 !important;
    pointer-events: none !important;
}
.icheckbox_flat-red.checked:after {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 0px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.iradio_flat-red {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #dcdcdc !important;
    border-radius: 50% !important;
    background: #fff !important;
    vertical-align: middle !important;
    position: relative !important;
    box-sizing: border-box !important;
}
.iradio_flat-red.checked { background: #e51400 !important; border-color: #e51400 !important; }
.iradio_flat-red.checked:after { content: '' !important; position: absolute !important; left: 4px !important; top: 4px !important; width: 6px !important; height: 6px !important; background: #fff !important; border-radius: 50% !important; }


/* ==============================================
   ICON MENU - compact dock (desktop, >= 768px)
   includes/icon_menu.php + Modules/(name)/menus/main_menu.php
   ----------------------------------------------
   The theme colour class (.blue, .magenta, ...) paints the <li>; the
   whole pill keeps that colour, with the 34px icon square slightly
   darkened for a two-tone look. The current page (.long) is marked by
   an inset dark ring. Mobile (< 768px) is handled by the dock-strip
   block in css/responsive.css (section 6).
   ============================================== */
@media screen and (min-width: 768px) {

    .tiles.tiles-dock {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 6px;
        margin: 6px 0 16px;
        padding: 0;
    }

    .tiles.tiles-dock > li,
    .tiles.tiles-dock > li.long {
        float: none;
        margin: 0;
        border-radius: 3px;
        overflow: hidden;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.10);
        transition: transform 0.12s ease, box-shadow 0.12s ease;
    }

    .tiles.tiles-dock > li:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    }

    /* The theme draws a 103px outline on hover; it no longer fits. */
    .tiles.tiles-dock > li:hover:before,
    .tiles.tiles-dock > li.long:hover:before {
        content: none;
    }

    .tiles.tiles-dock > li > a,
    .tiles.tiles-dock > li.long > a {
        display: flex;
        align-items: stretch;
        width: auto;
        height: 34px;
    }

    /* Icon square - <li> colour shows through a light dark wash. */
    .tiles.tiles-dock > li > a > span:not(.name),
    .tiles.tiles-dock > li.long > a > span:not(.name) {
        flex: 0 0 34px;
        width: 34px;
        padding: 0;
        line-height: 34px;
        font-size: 15px !important;
        text-align: center;
        background: rgba(0, 0, 0, 0.14);
    }

    .tiles.tiles-dock > li.fontsize-40px {
        font-size: 15px !important;
    }

    /* Label - sits on the <li> colour beside the icon square. */
    .tiles.tiles-dock > li > a .name,
    .tiles.tiles-dock > li.long > a .name {
        position: static;
        float: none;
        display: block;
        padding: 0 12px 0 10px;
        line-height: 34px;
        /* Theme only loads Open Sans 300/400 - a heavier weight falls back
           to a substitute face, so stay on 400. */
        font-size: 12px !important;
        font-weight: 400;
        white-space: nowrap;
        color: #fff;
        background: transparent;
    }

    /* Current page: inset dark ring on the coloured pill. */
    .tiles.tiles-dock > li.long {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.10);
    }

    .tiles.tiles-dock > li.long:hover {
        box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 3px 6px rgba(0, 0, 0, 0.16);
    }

    .tiles.tiles-dock > li .label {
        top: -4px;
        left: -4px;
    }
}

/* ==============================================
   RESPONSIVE TILES - 3 per row on mobile
   ============================================== */
@media (max-width: 767px) {

    /* Flexbox container for 3-per-row layout */
    .tiles {
        display: flex;
        flex-wrap: wrap;
        margin: 10px 0;
        padding: 0;
    }

    /* Each tile takes exactly 1/3 of the available width */
    .tiles > li {
        float: none;
        flex: 0 0 calc(33.33% - 8px);
        width: calc(33.33% - 8px);
        margin: 4px;
    }

    /* Reset tile link to fill its container */
    .tiles > li > a {
        width: 100% !important;
        height: 90px !important;
        box-sizing: border-box;
    }

    /* Scale down icon padding for smaller tiles */
    .tiles > li > a > span:not(.name) {
        padding-top: 16px !important;
    }

    /* Scale down icon size (override .fontsize-40px on the li) */
    .tiles > li.fontsize-40px {
        font-size: 26px !important;
    }

    /* "long" (active page) tiles: reset to standard grid size */
    .tiles > li.long > a {
        width: 100% !important;
        height: 90px !important;
    }

    .tiles > li.long > a > span:not(.name) {
        font-size: 26px !important;
        padding-top: 16px !important;
    }

    /* Hover border adapts to actual tile size */
    .tiles > li:hover:before,
    .tiles > li.long:hover:before {
        width: 100% !important;
        height: 100% !important;
        box-sizing: border-box;
    }

    /* Tile label at bottom */
    .tiles > li > a .name {
        font-size: 10px !important;
        padding: 2px 4px;
    }
}

/* ==============================================
   MOBILE NAV - hamburger menu & submenus
   ============================================== */

/* Make toggle-mobile button more visible */
#navigation .toggle-mobile {
    padding: 11px 14px 9px 14px;
}

/* Ensure mobile nav sub-items are clearly indented */
#navigation .mobile-nav.open > li > ul > li ul li a {
    padding-left: 50px;
}

/* ==============================================
   DROPDOWN SUBMENUS - prevent right-edge clipping
   ============================================== */

/* Last two nav items open their dropdown towards the left */
#navigation .main-nav > li:last-child > .dropdown-menu,
#navigation .main-nav > li:nth-last-child(2) > .dropdown-menu {
    right: 0;
    left: auto;
}

/* ==============================================
   extractions/stocks.php — zero stock rows greyed out
   ============================================== */
#response_data tbody tr.stock-zero td {
    color: #b0b0b0;
    background-color: #f7f7f7;
}

/* ==============================================
   Collections / Clients — origine d'une assignation
   Voir functions/Modules/collection_inheritance.php
   ============================================== */
.badge-origin {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 4px;
    font-size: 10px;
    line-height: 16px;
    border-radius: 3px;
    white-space: nowrap;
    vertical-align: middle;
}

.badge-origin-group {
    color: #ffffff;
    background-color: #7f8c9a;
}

.badge-origin-own {
    color: #ffffff;
    background-color: #00aba9;
}

.toGroup {
    margin-left: 4px;
    padding: 0 6px;
    font-size: 10px;
    line-height: 16px;
    vertical-align: middle;
}

#ci_repair_box {
    margin-top: 8px;
}

#ci_repair_report {
    margin-left: 8px;
    font-size: 12px;
}