.MonitoringModalDialog.ui-widget.ui-widget-content {
    background-color : var(--background-color-primary);
    border-radius: var(--border-radius);
}

.MonitoringModalDialog .ui-dialog-content.ui-widget-content {
    color    : var(--text-color-invert);
    overflow : hidden;
    padding  : 0 0 20px 0;
}

.MonitoringModalDialog, .MonitoringModalDialog .ui-dialog-content {
    padding      : 0;
    text-align   : center;
    margin-left  : auto;
    margin-right : auto;
    overflow     : hidden;
    display      : flex;
    flex-wrap    : wrap;
}

/* style pour une class */
.MonitoringModalDialog .ui-dialog-titlebar {
    display      : none;
    text-align   : center;
    margin-left  : auto;
    margin-right : auto;
}

#MonitoringGrid {
    margin-bottom : 6px;
}

#MonitoringTitle {
    width       : 100%;
    line-height : 2rem;
    text-align  : center;
}

.MonitoringVusContener {
    overflow         : hidden;
    text-align       : center;
    display          : flex;
    flex-wrap        : wrap;
    background-color : var(--background-color-tertiary);
    border-radius    : var(--border-radius);
    justify-content  : center;
}

.MonitoringModalButtonClose {
    position      : absolute;
    bottom        : 5px;
    right         : 5px;
    width         : 120px;
    border-radius : var(--border-radius);
    border        : 1px solid var(--border-color-primary);
    cursor        : pointer;
}

.MonitorVuMetersCanvas {
    display          : block;
    height           : 90%;
    border-radius    : var(--border-radius);
    margin-top       : 2px;
    background-image : linear-gradient(to bottom, #072407 0%, #24240E 30%, #24240E 75%, #240707 100%);
}

.MonitorVuClipCanvas {
    display          : block;
    border-radius    : var(--border-radius);
    background-color : #240707;
}

.MonitoringModalButtonMonitor {
    width            : 40px;
    height           : 40px;
    background-size  : 40px 40px;
    border           : none;
    border-radius    : var(--border-radius);
    cursor           : pointer;
    margin-top       : 2px;
    background-color : var(--grey-100);
}

.MonitorVuControl {
    float       : left;
    margin-left : 5px;
    margin-top  : 10px;
    width       : 100%;
}

.MonitoringVuTitle {
    width : 100%;
}

.MonitoringModalCbxDiv {
    padding     : 1px 1px;
    margin      : 2px 3px;
    border      : 0.5px solid grey;
    line-height : 30px;
}

#MonitoringModalDivChannelsNumber,
#MonitoringModalDivChannels,
#MonitoringModalDivDevice {
    display    : inline-block;
    box-sizing : border-box;
}

.MonitoringModalCbx-select {
    background : url("../../images/selectGrey.webp") no-repeat scroll 96% 0;
    height     : 29px;
    overflow   : hidden;
    padding    : 0px 1px;
    border     : 0.5px solid grey;
}

.MonitoringModalCbx-select select {
    color       : var(--text-color-invert);
    border      : medium none;
    height      : 29px;
    width       : 130%;
    align-items : center;
    font-size   : 0.9rem;
}

.MonitoringModalCbx-select select:focus {
    border  : none;
    outline : none;
}

.MonitoringModalCbx-option {
    background-color : var(--background-color-secondary);
}

.MonitoringScaleDiv {
    position        : relative;
    width           : 10px;
    float           : left;
    margin-top      : 16px;
    height          : 100%;
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
    gap             : 5px;
}

.MonitoringScaleLabel {
    display    : block;
    font-size  : 0.8rem;
    text-align : right;
}