:root {
    --white-dark-white: #fff;
    --Rubo-Vert-ALT: #226D68;
    --Rubo-Vert-ALT-Light: #E6EBEB;
    --Gray-Gray-200: #F1F1F2;
    --Gray-Gray-300: #E1E3EA;
    --Gray-Gray-500: #A1A5B7;
    --Gray-Gray-600: #7E8299;
    --Gray-Gray-800: #3F4254;
    --Gray-Gray-900: #181C32;
    --Primary-Primary: #3E97FF;
    --Primary-Primary-Light: #EEF6FF;
    --Success-Success: #50CD89;
    --Success-Success-Light: #E8FFF3;
    --Warning-Warning: #F6C000;
    --Warning-Warning-Light: #FFF8DD;
    --Danger-Danger: #F1416C;
    --Danger-Danger-Light: #FFF5F8;
    --Rubo-Gray-600: #7E8299;
    --Rubo-Gray-500: #A1A5B7;
}
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    background: #E6EBEB;
}

.form-control:focus {
    box-shadow: none !important;
}

.e-chip-list {
    padding: 0 !important;
}
.e-chip-list .e-chip {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    font-size: 15px !important;
}
.field-validation-error {
    color: #dc3545 !important;
    font-weight: 500;
}

.nav-pills {
    grid-gap: 30px;
}
.nav-pills .nav-link {
    color: var(--Gray-Gray-500, #A1A5B7);
    /* Body/B-16-16-600 */
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 100% */
    border-radius: 0px;
    padding: 0;
    padding-bottom: 20px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--Rubo-Vert-ALT, #226D68);
    background-color: transparent;
    border-bottom: 1px solid  var(--Rubo-Vert-ALT, #226D68);
}
.nav-link {
    color: black;
}
.bg-light {
    --bs-bg-opacity: 1;
    background-color: white !important;
}

.text-white {
    fill: white !important;
}

textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
    height: unset !important;
}

.btn-primary {
    color: #ffffff ;
    background-color: #226D68;
    border-color: #226D68;
    transition: background-color .3s ease-out;
}

.form-check-input:checked {
    background-color: #226D68;
    border-color: #226D68;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: #226D68 !important;
}

.btn-danger {
    background-color: #d00000 !important;
    border-color: #d00000 !important;
    transition: background-color .3s ease-out;
}

.btn-danger:not(.disabled):hover {
    background-color: #ca0000 !important;
}

.btn-primary:not(.disabled):hover {
    background: #1d5d58;
    border-color: #1b5753;
    box-shadow: none;
    color: #fff;
}
.btn-primary:active {
    background: #1b5753;
    border-color: #1a524e;
    color: #fff;
    outline: rgb(165, 165, 165) 0 solid;
}
.btn-primary:focus {
    background: #1d5d58;
    border-color: rgb(34, 109, 104);
    color: #fff;
    outline: rgb(165, 165, 165) 0 solid;
    box-shadow: 0 0 0 1px rgba(67, 131, 127, 0.5);
}
.btn-success {
    background-color: #157347 !important;
}

.btn-success:not(.disabled):hover {
    background-color: #164F36 !important;
}

.input-validation-error, .input-validation-error + label {
    color: #ca0000;
}

.input-validation-error {
    border-color: #ca0000;
}

.btn-outline-primary {
    color: #00893c;
    border-color: #00893c;
}

.btn-outline-primary:hover {
    color: #ffffff;
    background-color: #00893c;
    border-color: #00893c;
}

a {
    color: #226D68;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    word-wrap: break-word;
}

.form-label {
    display: flex;
    align-items: center;
}
.form-label > .form-check-input {
    margin-top: 2px;
    margin-right: 5px;
}
@media (min-height:668px) {
    #frame0 {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    main {
        margin-top: 90px;
    }
}
main {
    margin-top: 5vh;
}
#frame0 {
    max-width: 95%;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 5vh;
    padding-bottom: 5vh;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
}

@media (min-width: 576px) {
     #frame0 {
         max-width: 600px;
         padding-left: 105px;
         padding-right: 105px;
     }
 }

@media (min-width: 1024px) {
     #frame0 {
         right: 40px;
         position: absolute;
         padding-left: 55px;
         padding-right: 55px;
         width: 560px;
     }

     #frame1 {
         display: flex !important;
     }
 }

@media (min-width: 1140px) {
     #frame0 {
         padding-left: 105px;
         padding-right: 105px;
         width: 600px;
     }

     .t2 {
         font-size: 2.5vw !important;
         line-height: 2.7vw !important;
     }
 }

@media (min-width: 1520px) {

     .t2 {
         font-size: 48px !important;
         line-height: 50px !important;
     }
 }

#frame1 {
    display: none;
    height: 650px;
    align-items: center;
    width: calc(100% - 600px);
}

#frame1 > div {
    margin-left: auto;
    margin-right: auto;
}

.pt-10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

a {
    text-decoration: none;
}

.t1 {
    font-size: 60px;
    font-weight: 600;
    line-height: 60px;
    letter-spacing: 0em;
    text-align: left;
    color: #F1F2F3;
    text-shadow: 5px 5px 3px black
}

.t2 {
    font-weight: 500;
    font-size: 2vw;
    line-height: 2.2vw;
    letter-spacing: 0em;
    text-align: left;
    color: #F1F2F3;
}

.b0 {
    color: #F1F2F3;
    height: 2px !important;
    opacity: 1;
    width: 297px;
}
.e-sidebar {
    background: #E6EBEB;
}
body > nav {
    height: 90px;
    background: #E6EBEB;
    vertical-align: center;
}

main {
    display: flex;
    flex-wrap: nowrap;
    max-height: calc(100vh - 20px - 5vh) !important;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-bottom: 20px;
}
#main {
    min-height: calc(100vh - 110px) !important;
    margin-top: 90px;
}
body {
    overflow-y: hidden;
}
#subContainer {
    margin-left: calc(2vw / 2) !important;
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 45px;
    align-self: stretch;
    border-radius: 12px;
    border: 1px solid #F1F1F2;
    background: #FFF;
    /* S-1-widget-form-button */
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    transition: none;
    width: 93vw;
    height: fit-content;
    min-height: 100%;
    padding-bottom: 40px;
}
#containerTop {
    margin-left: 0px !important;
}
.sidebar-treeview .main-treeview .icon {
    font-family: 'fontello';
    font-size: 20px;
    margin-left: 0;
    margin-right: 15px;
    margin-bottom: 21px;
}
.sidebar-treeview .e-treeview .e-icon-collapsible,
.sidebar-treeview .e-treeview .e-icon-expandable {
    float: right;
    margin-top: 5px;
}
.sidebar-treeview .e-treeview,
.sidebar-treeview .e-treeview .e-ul {
    padding: 0;
    margin: 0;
}
.sidebar-treeview .e-treeview .e-text-content {
    padding-left: 15px;
}

.e-treeview .e-list-text {
    color: #3F4254;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    vertical-align: middle;
    max-width: 160px;
    text-wrap: initial;
    line-height: 20px;
}
.e-treeview .e-list-icon {
    color: #A1A5B7;
}
.e-treeview .e-list-icon + .e-list-text, .e-treeview .e-list-img + .e-list-text {
    padding: 0;
}
.e-treeview .e-list-item.e-active > .e-fullrow,
.e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none;
}
.e-treeview .e-list-item.e-active > .e-text-content .e-icon-collapsible,
.e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable,
.e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
.e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
.e-treeview .e-list-item.e-active > .e-text-content,
.e-treeview .e-list-item.e-active.e-hover > .e-text-content,
.e-treeview .e-list-item.e-active > .e-text-content .e-list-text,
.e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
.e-treeview .e-list-item.e-active .icon
{
    color: #226d68 !important;
}

.e-treeview .e-list-parent .e-list-parent .icon-circle {
    font-size: 8px;
    margin-bottom: 4px;
    margin-top: 0px;
    padding-left: 10px;
    color: #B5B5C3;
}

#mainTree > ul > li:nth-child(5) > ul {
    margin-top: 10px;
}

.e-sidebar.e-over {
    box-shadow: none;
}

.burger-menu {
    display: flex;
    padding: 6px;
    align-items: flex-start;
    gap: 10px;
    border-radius: 6px;
    background: #FFF;
    /* S-1-widget-form-button */
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    border: 0px;
}

.icon-burger {
    color: #7E8299;
    width: 20px;
    line-height: 20px;
    font-size: 15px;
}
@media(min-width: 600px) {
    .burger-menu {
        display: none;
    }

    #subContainer {
        margin-left: 240px !important;
        padding: 40px;
    }
    #containerTop {
        margin-left: 240px !important;
    }
}
.row {
    width: 100%;
}

.e-avatar.e-avatar-circle {
    width: 30px;
    height: 30px;
}


.container-fluid {
    padding-right: 20px;
}

#containerTop {
    display: flex;
    gap: 10px;
    flex-grow: 1;
}
.brand {
    display: flex;
    width: 187px;
    height: 48px;
    padding: 17px 15px;
    align-items: center;
    border-radius: 9px;
    border: 1px solid var(--Gray-Gray-200, #F1F1F2);
    background: var(--white-dark-white, #FFF);
    /* S-1-widget-form-button */
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
}
.brand-name {
    color: #226D68;
    padding-left: 10px;
    color: var(--Rubo-Vert-ALT, #226D68);
    /* Body/B-13-13-500 */
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px; /* 107.692% */
}

.topFilter {
    display: flex;
    width: 433px;
    height: 48px;
    padding: 17px 15px;
    gap: 10px;
    align-items: center;
    border-radius: 9px;
    border: 1px solid var(--Gray-Gray-200, #F1F1F2);
    background: var(--white-dark-white, #FFF);
    /* S-1-widget-form-button */
    box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.03);
    cursor: pointer;
}

.filter-name {
    color: var(--Rubo-Vert-ALT, #226D68);
    /* Body/B-13-13-500 */
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px; /* 107.692% */
}

.identity {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
    gap:14px;
}
.containerTopRight {
    display: flex;
    padding: 11px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
}
.new-ticket {
    color: var(--Rubo-Vert-ALT, #226D68);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 138.462% */
    letter-spacing: -0.39px;
}
.alerts {
    display: flex;
    padding: 11px;
    justify-content: center;
    align-items: center;
}

.alerts-badge {
    display: flex;
    position: relative;
    top: -10px;
    left: -1px;
    justify-content: center;
    align-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50px;
    background: var(--Danger-Danger, #F1416C);
    color: white;
}

@media(max-width: 768px) {
    .new-ticket, .brand, .topFilter {
        display: none;
    }
    .identity {
        position: static;
    }
}

.pageTitle {
    color: var(--Gray-Gray-900, #181C32);
    /* Heading/H-22-22-600 */
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px; /* 100% */
    letter-spacing: -0.22px;
}

.pageSubTitle {
    margin-top: 8px;
    color: var(--Gray-Gray-500, #A1A5B7);
    /* Body/B-14-14-500 */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px; /* 100% */
}
.e-calendar .e-btn.e-today.e-flat.e-primary, .e-calendar .e-css.e-btn.e-today.e-flat.e-primary {
    background-color: rgb(34, 109, 104);
    border: 0;
    border-color: rgb(34, 109, 104);
    color: #fff;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 107.692% */
    padding: 8px 12px;
}
.btn {
    color: var(--white-dark-white, #FFF);
    /* Body/B-13-13-600 */
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 107.692% */
    display: flex;
    padding: 8px 12px;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
}
.btn.btn-lg {
    color: var(--white-dark-white, #FFF);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 107.692% */
    display: flex;
    padding: 12px 16px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 6px;
}
.grid-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.filter-label {
    color: var(--Gray-Gray-500, #A1A5B7);
    /* Body/B-13-13-600 */
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px !important; /* 107.692% */
    margin-right: 20px;
}

.e-input-group:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--Gray-Gray-200, #F1F1F2);
}

.e-multi-select-wrapper .e-delim-values {
    color: var(--Gray-Gray-800, #3F4254);
    /* Body/B-13-13-600 */
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}
.gap-40 {
    gap: 10px 40px;
}
.gap-30 {
    gap: 30px;
}
.gap-20 {
    gap: 20px;
}
.gap-10 {
    gap: 10px !important;
}
.gap-25 {
    gap: 25px !important;
}

.e-popup.e-ddl .e-dropdownbase.e-nodata, 
.e-popup.e-mention .e-dropdownbase.e-nodata,
input.e-input,
textarea.e-input,
.e-input-group,
.e-input-group.e-control-wrapper {
    color: var(--Gray-Gray-800, #3F4254);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}
.e-multi-select-list-wrapper .e-selectall-parent {
    line-height: 30px;
}
.e-popup.e-multi-select-list-wrapper .e-list-item .e-checkbox-wrapper,
.e-multi-select-list-wrapper .e-selectall-parent .e-checkbox-wrapper {
    bottom: 2px;
}
.e-multi-select-list-wrapper .e-selectall-parent .e-all-text {
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}
.e-multi-select-wrapper input[type=text] {
    font-size: 13px;
}
.e-calendar .e-header .e-title, .e-bigger.e-small .e-calendar .e-header .e-title {
    font-size: 15px;
}
.e-calendar th, .e-bigger.e-small .e-calendar th {
    font-size: 13px;
    font-weight: 600;
}
.e-calendar .e-content span.e-day, .e-bigger.e-small .e-calendar .e-content span.e-day {
    font-size: 13px;
    font-weight: 600 !important;
    color: var(--Gray-Gray-800, #3F4254);
}
.e-dropdownbase .e-list-item {
    color: var(--Gray-Gray-800, #3F4254);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
}
.grid-container .badge {
    display: flex;
    width: 120px;
    padding: 7px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}
.grid-container .btn.btn-secondary.btn-sm {
    width: 30px;
    height: 30px;
}
.grid-container .btn.btn-secondary.btn-sm:focus {
    box-shadow: 0 0 0 1px;
    background-color: #cddeee;
    border-color: #cddeee;
}
.grid-container .btn.btn-secondary.btn-sm:hover {
    box-shadow: 0 0 0 1px;
    background-color: #c0cfde;
    border-color: #c0cfde;
}
.grid-container .badge.badge-blue {
    background: var(--Primary-Primary-Light, #EEF6FF);
    color: var(--Primary-Primary, #3E97FF);
}
.grid-container .badge.badge-green {
    background: var(--Success-Success-Light, #E8FFF3);
    color: var(--Success-Success, #50CD89);
}
.grid-container .badge.badge-orange {
    background: var(--Warning-Warning-Light, #FFF8DD);
    color: var(--Warning-Warning, #F6C000);
}
.grid-container .badge.badge-red {
    background: var(--Danger-Danger-Light, #FFF5F8);
    color: var(--Danger-Danger, #F1416C);
}
.e-grid .e-headercelldiv {
    color: var(--Gray-Gray-800, #3F4254);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 100% */
}
.e-grid .e-gridheader {
    border-bottom-width: 0px;
    border-top-width: 0px;
}
.e-grid {
    border-width: 0px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px; /* 100% */
}
.e-grid .e-rowcell:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-detailrowcollapse:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-detailrowexpand:not(.e-editedbatchcell):not(.e-updatedtd), 
.e-grid .e-gridcontent .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-gridheader .e-rowdragdrop:not(.e-editedbatchcell):not(.e-updatedtd), .e-grid .e-emptyrow:not(.e-editedbatchcell):not(.e-updatedtd) {
    color: var(--Rubo-Gray-600, #7E8299);
}

.e-row .e-rowcell {
    padding-top: 26px;
}
.e-grid .e-rowcell, .e-grid .e-groupcaption, .e-grid .e-indentcell, .e-grid .e-recordplusexpand, .e-grid .e-recordpluscollapse, .e-grid .e-rowdragdropcell, .e-grid .e-detailrowcollapse, .e-grid .e-detailrowexpand, .e-grid .e-detailindentcell, .e-grid .e-detailcell {
    border-color: #E1E3EA;
}

.btn-secondary {
    color: #226D68;
    background: var(--Gray-Gray-200, #F1F1F2);
    border-color: var(--Gray-Gray-200, #F1F1F2);
    background: var(--Gray-Gray-200, #F1F1F2);
    display: flex;
    padding: 7px;
    align-items: flex-start;
    gap: 10px;
}

.text-search {
    border-radius: 6px;
    justify-content: flex-start;
    align-items: center;
    gap: 18px;

    display: inline-flex;
    background: rgb(255,255,255) url("../magnifier.png") 0px 8px no-repeat !important;
}
.e-avatar {
    -ms-flex-line-pack: center;
    align-content: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #dee2e6;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 2px;
    color: #6c757d;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 40px;
    line-height: 22px
}

.e-avatar.e-avatar-circle {
    border-radius: 50%
}
.e-timepicker.e-popup .e-list-parent.e-ul .e-list-item {
    line-height: 28px;
    font-size: 13px;
    font-weight: 600;
}

.modal-content {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 28px;
}
.modal-body {
    padding: 11px 20px 33px 20px;
    display: flex;
    flex-direction: column;
}
#bon .row {
    --bs-gutter-x: 0 !important;
    gap: 30px;
}
.modal-header {
    border-width: 0px;
    padding-right: 30px;
    padding-top: 20px;
}
@media (min-width: 576px) {
    #bon .modal-dialog, #hotline .modal-dialog {
        max-width: 95% !important;
    }
    .pageTitle {
        line-height: 22px; /* 100% */
    }
}
@media (min-width: 900px) {
    #bon .modal-dialog, #hotline .modal-dialog {
        width: 900px !important;
        max-width: 900px !important;
    }
}
@media(min-width: 600px) {
    #bon .modal-body, #hotline .modal-body {
        padding: 11px 40px 33px 40px;
        display: flex;
        flex-direction: column;
    }
}

#hotline .modal-body {
    height: 740px;
}

.e-input-group,
.e-input-group.e-control-wrapper {
    border-color: var(--Rubo-Gray-500, #A1A5B7);
}

#bon .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
#bon .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error),
#bon .e-float-input.e-control-wrapper textarea,
#bon .e-float-input.e-control-wrapper input {
    border-color: var(--Rubo-Gray-500, #A1A5B7);
    color: var(--Gray-Gray-600, #7E8299);
    font-size: 16px;
    font-weight: 600;
}

#bon .e-input-group.e-disabled:not(.e-success):not(.e-warning):not(.e-error),
#bon .e-float-input.e-disabled.e-control-wrapper input,
#bon .e-float-input.e-disabled.e-control-wrapper textarea {
    border-color: transparent !important;
    background: var(--Gray-Gray-200, #F1F1F2);
}

#bon .e-float-input.e-control-wrapper.e-input-group .e-float-text,
#bon .e-float-input.e-control-wrapper.e-input-group .e-float-text.e-label-top,
#bon .e-float-input.e-control-wrapper ~ label.e-float-text,
#bon .e-float-input.e-control-wrapper ~ label.e-label-top.e-float-text,
#bon .e-float-input.e-control-wrapper label.e-float-text,
#bon .e-float-input.e-control-wrapper label.e-float-text.e-label-top {
    color: var(--Gray-Gray-800, #3F4254);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 100% */
    letter-spacing: -0.18px;
    transform: translate3d(-10px, -55px, 0) scale(1);
}

#bon .float-label {
    color: var(--Gray-Gray-800, #3F4254);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 100% */
    letter-spacing: -0.18px;
}

#bon .e-float-input input, 
#bon .e-float-input.e-control-wrapper input {
    padding: 13px 15px;
}

#bon .e-input-group input,
#bon .e-float-input input {
    height: unset;
}

#bon textarea[name='Collecte.Observation'] {
    line-height: 22px; /* 137.5% */
    padding: 12px;
    overflow: hidden;
    height: 113px;
}

#bon .e-float-input.e-control-wrapper.e-multi-line-input label.e-float-text,
#bon .e-float-input.e-control-wrapper.e-multi-line-input label.e-float-text.e-label-top {
    transform: translate3d(-10px, -45px, 0) scale(1);
}

#bon .btn {
    color: var(--white-dark-white, #FFF);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 100% */
    display: flex;
    padding: 16px 24px;
    align-items: center;
    gap: 10px;
}
.btn-secondary {
    border-radius: 6px;
    background: #C6C6C6;
    border-color: #C6C6C6;
}
.btn-secondary:hover {
    background: #B6B6B6;
    border-color: #B6B6B6;
}
#bon .modal-title {
    color: var(--Gray-Gray-800, #3F4254);
    text-align: center;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -0.25px;
    margin-bottom: 30px;
}
#bon .e-input-group .e-input[readonly], 
#bon .e-input-group.e-control-wrapper .e-input[readonly], 
#bon .e-float-input input[readonly], 
#bon .e-float-input.e-control-wrapper input[readonly],
#bon .e-float-input textarea[readonly],
#bon .e-float-input.e-control-wrapper textarea[readonly] {
    background: transparent !important;
}

.date-bigger .e-calendar .e-header .e-title, .e-bigger.e-small .e-calendar .e-header .e-title {
    font-size: 18px;
    line-height: 40px;
}

.date-bigger .e-calendar th, .e-bigger.e-small .e-calendar th
,.date-bigger .e-calendar tr
{
    font-size: 15px;
    height: 40px;
    width: 40px;
}

.date-bigger .e-calendar .e-content span.e-day {
    font-size: 15px;
}

.date-bigger .e-calendar {
    max-width: 296px;
    min-width: 296px;
}

#HeureCollecte_popup .e-list-parent.e-ul .e-list-item
,#Site_popup .e-list-parent.e-ul .e-list-item
,#PlageHoraire_popup .e-list-parent.e-ul .e-list-item
,#Materiel_popup .e-list-parent.e-ul .e-list-item
,#Action_popup .e-list-parent.e-ul .e-list-item
{
    line-height: 40px;
    font-size: 15px;
    color: var(--Gray-Gray-900)
}

#Materiel_popup .e-ddl-header {
    line-height: 40px;
    font-size: 15px;
    font-weight: 600;
    color: var(--Gray-Gray-900)
}

#Materiel_popup .e-nodata {
    line-height: 40px;
    font-size: 15px;
    font-weight: 600;
    color: var(--Gray-Gray-600)
}

#Materiel_popup .col-9.col-sm-5 {
}

@media(max-width: 600px) {
    .e-popup.e-popup-open {
        position: absolute;
        width: 90% !important;
        left: 5% !important;
    }
    .filter-label {
        margin-right: 10px;
    }
}

.e-grid.e-bigger {
    width: 100% !important;
}
.grid-container .e-bigger .btn.btn-secondary.btn-sm {
    display: none;
}
.e-bigger .e-grid.e-row-responsive .e-gridcontent td::before, .e-bigger .e-grid.e-row-responsive .e-summarycontent td::before, .e-bigger.e-grid.e-row-responsive .e-gridcontent td::before, .e-bigger.e-grid.e-row-responsive .e-summarycontent td::before {
    content: attr(data-cell);
    color: var(--Gray-Gray-800, #3F4254);
    font-size: 16px;
    font-weight: 600;
}
.e-grid td.e-active {
    font-weight: 600;
}
.e-grid tr[aria-selected='true'] {
    background: #e6eaed;
}
.e-grid .e-content {
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden !important;
}
.grid-container {
    width:100%;
    max-width:calc(93vw - 240px);
}
.e-grid.e-bigger {
    width: 93vw !important;
}
.modal-content {
    max-height: 95%;
}

.region {
    color: var(--Gray-Gray-800, #3F4254);
    /* Modale Detail Item Title */
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 88.889% */
    margin-bottom: 36px;
}
.mt-36 {
    margin-top: 36px;
}
.my-36 {
    margin-top: 36px;
    margin-bottom: 36px;
}
.mb-36 {
    margin-bottom: 36px;
}

.e-upload {
    border-radius: 7px;
    border: 1px dashed var(--Rubo-Vert-ALT, #226D68);
    background: var(--Rubo-Vert-ALT-Light, #E6EBEB);
}
.e-float-input .e-upload .e-file-select-wrap, .e-bigger.e-small .e-upload .e-file-select-wrap {
    padding: 0 0 0 12px;
}
.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--Gray-Gray-700, #5E6278);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 27px; /* 168.75% */
}
.form-check-input {
    display: block;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 6px 7px;
    border-radius: 7px !important;
    background: var(--Gray-Gray-300, #E1E3EA);
    border-width: 0px;
}
.e-float-input.e-error input,
.e-float-input.e-control-wrapper.e-error input,
.e-float-input.e-error textarea,
.e-float-input.e-control-wrapper.e-error textarea {
    border-color: #dc3545 !important;
}
.e-float-input.e-error label.e-float-text, .e-float-input.e-control-wrapper.e-error label.e-float-text, .e-float-input.e-error input:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text, .e-float-input.e-error.e-input-focus input ~ label.e-float-text, .e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text, .e-float-input.e-error textarea:focus ~ label.e-float-text, .e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text {
    color: #dc3545 !important;
}
.e-float-input.e-error label.e-float-text:after,
.e-float-input.e-control-wrapper.e-error label.e-float-text:after,
.e-float-input.e-error input:focus ~ label.e-float-text:after,
.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text:after,
.e-float-input.e-error.e-input-focus input ~ label.e-float-text:after, 
.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text:after, 
.e-float-input.e-error textarea:focus ~ label.e-float-text:after, 
.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text:after {
    content:" *"
}

.mb-56 {
    margin-bottom: 56px;
}
#equipTemplate {
    display: none;
}
.equip {
    padding: 20px 15px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px #226D68 dashed;
    width: 100%;
}

#equipements .e-list-item {
    height: unset;
    padding: 0px;
    display: flex;
    border: none;
    border-radius: 6px;
    width: 100%;
}

@media(min-width: 600px) {
    .equip {
        width: calc((600px - 0px)/2);
    }
    #equipements .e-list-item {
        width: unset;
    }
}
@media (min-width: 900px) {
    .equip {
        width: calc((952px - 150px)/3);
    }
}

.e-active .equip {
    background: #E6EBEB;
    border: 1px #226D68 dotted;
}
.equip > div {
    align-self: stretch;
    justify-content: flex-start;
    align-items: center;
    gap: 13px;
    display: inline-flex
}

#equipements {
    border: none;
}

#equipements ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.equip-wrapper {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
}
.equip-name {
    align-self: stretch;
    color: #3F4254;
    font-size: 15px;
    font-weight: 600;
    line-height: 16px;
    word-wrap: break-word;
}
.equip-volume {
    align-self: stretch;
    color: #A1A5B7;
    font-size: 13px;
    font-weight: 600;
    line-height: 14px;
    word-wrap: break-word;
}
.equip-waste {
    align-self: stretch;
    color: #A1A5B7;
    font-size: 13px;
    font-weight: 600;
    line-height: 14px;
    word-wrap: break-word;
}
.equip-quantity {
    align-self: stretch;
    color: #A1A5B7;
    font-size: 13px;
    font-weight: 600;
    line-height: 14px;
    word-wrap: break-word;
}

.dash-top-right {
    border-radius: 6px;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    display: flex
}
.dash-top-date {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    background: #F1F1F2;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    height: 44px;
}
.dash-top-buttons {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    display: flex
}
.dash-top-button {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    display: flex;
    background: #F1F1F2;
    cursor: pointer;
}
.dash-top-button.active {
    background: #226D68;
}
.dash-top-button > div {
    font-size: 13px;
    font-weight: 600;
    line-height: 14px;
    word-wrap: break-word;
    color: #A1A5B7;
}

.dash-top-button.active > div {
    color: white;
}

.dash-top-button path {
    fill: #A1A5B7;
}
.dash-top-button.active path {
    fill: white;
}

#dash .e-input-group input.e-input,
#dash .e-input-group.e-control-wrapper input.e-input,
#dash .e-input-group textarea.e-input,
#dash .e-input-group.e-control-wrapper textarea.e-input {
    border: none;
    background: #F1F1F2;
    color: var(--Gray-Gray-600, #7E8299);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 14px; /* 107.692% */
}
#dash .e-input-group:not(.e-disabled),
#dash .e-input-group.e-control-wrapper:not(.e-disabled) {
    background: #F1F1F2;
}
#dash .e-input-group .e-input-group-icon,
#dash .e-input-group.e-control-wrapper .e-input-group-icon,
#dash .e-input-group .e-input-group-icon:hover,
#dash .e-input-group.e-control-wrapper .e-input-group-icon:hover {
    border: none;
    background: transparent;
    color: var(--Rubo-Vert-ALT, #226D68);
}
#dash .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
#dash .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: transparent;
    box-shadow: none;
}
#dash .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
#dash .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: transparent;
}
.dash-dech-filter {
    justify-content: flex-start;
    align-items: center;
    gap: 19px;
    display: flex;
}
.dash-dech-filter > div {
    padding-bottom: 1px;
    justify-content: center;
    align-items: center;
    display: flex
}
.dash-dech-invite {
    color: #A1A5B7;
    font-size: 13px;
    font-weight: 600;
    line-height: 14px;
    word-wrap: break-word
}
.dash-filter-container {
    padding-left: 23px;
    padding-right: 23px;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 32px;
    display: flex
}

#dash .dash-row-widget1 {
    height: 230px;
    position: relative;
    background: white;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    overflow: hidden;
    border: 1px #F1F1F2 solid;
    width: 100%;
}
#dash .dash-row-widget2 {
    position: relative;
    height: 230px;
    background: white;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    overflow: hidden;
    border: 1px #F1F1F2 solid;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 27px;
    display: inline-flex;
    width: 100%;
}
.dash-widget-graph {
    width: 100%;
     flex: 1 1 0; 
     align-self: stretch; 
    padding: 30px;
    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    overflow: hidden;
    border: 1px #F1F1F2 solid;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 50px;
    display: inline-flex;
}

.dash-row-widget1 .chart {
    margin-top: 30px;
}
#TauxRecyclage_Annotation_0 {
    color: #5E6278;
    font-size: 25px;
    font-weight: 700;
    line-height: 30px;
    top: calc(90px / 3) !important;
    left: 0 !important;
    width: 90px;
    text-align: center;
}
.chart-title {
    color: #A1A5B7;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    position: absolute;
    left: 26px;
    top: 132.50px;
}
.chart-indicator {
    padding: 7px;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    gap: 1px;
    display: inline-flex;
    position: absolute;
    left: 26px;
    top: 174px;
}
.widget-logo {
    position: absolute;
    top: 30px;
    left: 26px;
}
.widget-logo img {
    height: 34px;
    width: 34px;
}
.chart-figure {
    position: absolute;
    color: #3F4254;
    font-size: 38px;
    font-weight: 600;
    line-height: 38px;
    left: 26px;
}
.chart-indicator .chart-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
}
.chart-indicator.danger {
    background: #FFF5F8;
}
.chart-indicator.success {
    background: #E8FFF3;
}

.chart-indicator.danger .chart-label {
    color: #F1416C;
}

.chart-indicator.success .chart-label {
    color: #50CD89;
}
.widget-header {
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    display: inline-flex;
}
.widget-title {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex;
}
.widget-title .title1 {
    color: #3F4254;
    font-size: 18px;
    font-weight: 600;
    line-height: 18px;
}
.title2 {
    color: #3F4254;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
}
.widget-title .title2 {
    color: #A1A5B7;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
}
.widget-title .params {
    width: 24px;
    height: 24px;
    position: relative;
}
.dash-widget-graph .chart {
    margin-top: 50px;
}

.chart .legend {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    display: inline-flex;
}

.legend .legend-item {
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    display: inline-flex;
}

.legend .legend-label {
    color: #7E8299;
    font-size: 10px;
    font-weight: 600;
    line-height: 10px;
}

.legend-item .legend-color {
    padding: 10px 5px;
    border-radius: 10px;
}
.legend-color.DIB {
    background: #16A085;
}
.legend-color.CARTON {
    background: #F39C12;
}
.legend-color.BIO {
    background: #2980B9;
}
.legend-color.DD {
    background: #34495E;
}
.legend-color.HUILES {
    background: #3498DB;
}
.ticket {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    flex-shrink: 0;
}

.pj-box {
    width: 100%;
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 35px;
    padding-bottom: 25px;
    background: #F9F9F9;
    border-radius: 6px;
    border: 1px #E6EBEB solid;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 23px;
    display: inline-flex
}

.conversation {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 25px;
    padding-bottom: 25px;
    background: #F9F9F9;
    border-radius: 6px;
    border: 1px #E6EBEB solid;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    display: inline-flex;
    flex-grow: 1;
}

.message {
    align-self: stretch;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    display: inline-flex;
    width: 100%;
}

.message-logo {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    justify-content: center;
    align-items: center;
    display: flex
}

.message-content {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    display: inline-flex
}

.message-author {
    color: #3F4254;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px
}
.message-date {
    color: #A1A5B7;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px
}
.message-body {
    flex: 1 1 0;
    color: #3F4254;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px
}

.repondre {
    height: 41px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    display: flex;
    margin-top: 15px;
}

.repondre textarea {
    resize: none !important;
}

.repondre .e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-input-group, .e-float-input.e-control-wrapper, .e-float-input.e-input-group.e-control-wrapper {
    background: #F9F9F9 !important;
    border-color: #F9F9F9 !important;
}

#profile {
    width: 222px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.25);
}

.profile-user {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 7px;
    padding-bottom: 7px;
    background: white;
    border-bottom: 1px #F2F2F2 solid;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex
}
.profile-li {
    width: 100%;
    height: 100%;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 6px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 49px;
    display: inline-flex
}

#sites-filter {
    width: 433px;
    padding: 10px 8px;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 450px;
    top: 78px;
    border-radius: 6px;
    background: #FFF;
    box-shadow: 0px 8px 14px 0px rgba(0, 0, 0, 0.25);
    max-height:90vh;
    overflow-y:scroll;
}

.sites-filter-site {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
}
.franchise-sites-wrapper {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: start;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    background: white;
}
.sites-filter-franchise {
    align-self: stretch;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    background: white;
    border-bottom: 1px #F0F0F0 solid;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex
}

.franchise-title {
    padding-top: 2px;
    padding-bottom: 2px;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: flex
}

.franchise-name {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    display: inline-flex
}

.franchise-sites {
    align-self: stretch;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 6px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 20px;
    display: flex
}

.franchise-site {
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: inline-flex;
    cursor: pointer;
}

.franchise-site path {
    fill: #5E6278;
}

.franchise-site.active path {
    fill: #226D68;
}

.franchise-site .site-address {
    color: #5E6278;
    font-size: 13px;
    font-weight: 500;
    line-height: 14px
}
.franchise-site.active .site-address {
    color: #226D68;
}

.faq-item {
    width: 100%;
    height: 100%;
    padding-bottom: 20px;
    border-bottom: 1px #E1E3EA dotted;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    display: inline-flex
}

.faq-content {
    flex: 1 1 0;
    padding-top: 4px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    display: inline-flex
}

.faq-header {
    align-self: stretch;
    color: #5E6278;
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    word-wrap: break-word;
    cursor: pointer;
}
.faq-text {
    align-self: stretch;
    color: #A1A5B7;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    word-wrap: break-word;
    width: 100%;
    text-align: justify;
}
.faq-item .faq-expanded, .faq-item .faq-text {
    display: none;
}
.faq-item .faq-collapsed {
    display: block;
    cursor: pointer;
}
.faq-item.expanded .faq-expanded {
    display: block;
    cursor: pointer;
}
.faq-item.expanded .faq-text {
    display: block;
}
.faq-item.expanded .faq-collapsed {
    display: none;
    cursor: pointer;
}