/*------------------------------------------------------------------------------------------------------------------------------------------
    EFFECTS WINDOW
------------------------------------------------------------------------------------------------------------------------------------------*/
#effectsWindowContent{
    white-space: nowrap;
}

.effectsValues {
    width         : 90%;
    border-radius : var(--border-radius);
    border        : 1px solid #5e6386;
    color         : var(--text-color-invert);
    background    : transparent;
    text-align    : center;
}

#effectsWindowMenu {
    display : inline-block;
    width   : 100%;
}

#effectsWindowSourceChoice {
    white-space : nowrap;
    overflow    : hidden;
    display     : inline-block;
}

.effectsWindowSourceChoiceTabDiv {
    padding : 2px 0;
    display : inline-block;
}

.effectsWindowSourceChoiceTab {
    text-align  : center;
    line-height : 20px;
    margin-left : 2px;
}

#effectsSwitchDiv {
    position : fixed;
    right    : 0;
    height   : 30px;
    /* width: 150px; */
    display  : inline-block;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    PROCESSING VU METERS
------------------------------------------------------------------------------------------------------------------------------------------*/
.ProcessingVuMetersDiv {
    float        : right;
    margin-right : 10px;
    /* border: 1px solid #000000; */
    /* border-radius: 10px;  */
}

.ProcessingVuMeterContener {
    display    : inline-table;
    height     : 100%;
    text-align : center;
}

.ProcessingVuMeterDiv {
    float : left;
}

/* label 0 ,  -10 , -20 ... */
.ProcessingViewmeterLabelsDiv {
    float        : right;
    margin-right : 3px;
    margin-top   : 6px;
}

.ProcessingViewmeterLabels {
    position       : relative;
    clear          : both;
    display        : block;
    width          : inherit;
    text-align     : left;
    vertical-align : middle;
    font-size      : 11px;
}

/* label in/out/tx */
.ProcessingVuMeterTxt {
    margin-top : 4px;
    font-size  : 11px;
}

.ProcessingVuMetersCanvas {
    height : 100%;
    /* margin-top: 14px; */
}
#EqTypeDiv {
    margin-top : 20px;
}

.EqTypeDivCbx-select {
    height   : 29px;
    overflow : hidden;
    color    : var(--text-color-invert);
}

.EqTypeDivCbx-select select {
    background : transparent none repeat scroll 0 0;
    outline    : 0px;
    width      : 100%;
}

.EqTypeDivCbx-option {
    background-color : var(--background-color-tertiary);
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    EQ --- NOISE GATE --- COMPRESSOR / LIMITER BUTTONS
------------------------------------------------------------------------------------------------------------------------------------------*/
.eq {
    clear : both;
}

.eqFaderImageDiv,
.compLimiterFaderImageDiv {
    float : left;
    /* margin-left: 10px; */
}

.eqButton,
.noiseGateButton,
.compLimiterButton,
.gainViewmeterPhantomButton {
    /*color: white;*/
    border        : none;
    margin-bottom : 4px;
    font-weight   : bold;
}

.slicesEQSchematicDivOverlay,
.noiseGateSchematicDivOverlay,
.compLimiterSchematicDivOverlay {
    position         : fixed;
    background-color : rgba(0, 0, 0, 0.5);
}

.componentSchematicSmall, .componentSchematicSmallGrid {
    clear : both;
}

.eqOnOffButton,
.eqHPFButton,
.eqResetButton,
.compLimiterOnOffButton,
.compLimiterKneeButton,
.compLimiterResetButton {
    width         : 124px;
    height        : 24px;
    cursor        : pointer;
    color         : var(--text-color-on-brand-bg);
    border-radius : var(--border-radius);
    border        : 1px solid var(--border-color-primary);
    margin        : 0 2px;
    transition    : background-color 0.3s ease, border-color 0.3s ease;
}

.eqHPFButton, .eqResetButton {
    background-color : var(--grey-80);
}

.eqButtons, .compLimiterButtons, .sourceChoiceButtons {
    height        : 2rem;
    width         : 120px;
    border-radius : var(--border-radius);
    border        : 1px solid var(--border-color-primary);
    cursor        : pointer;
}

:is(.eqButtons,
.compLimiterButtons,
.sourceChoiceButtons).customModalButtonsRight {
    background-color : var(--background-color-brand);
    color            : var(--text-color-on-brand-bg);
}

:is(.eqButtons,
.compLimiterButtons,
.sourceChoiceButtons).customModalButtonsLeft {
    background-color : var(--background-color-secondary);
    color            : var(--text-color-invert);
    margin-right     : 4px;
}

.eqResetButtonPanel,
.compLimiterResetButtonPanel {
    clear    : both;
    float    : left;
    bottom   : 0;
    left     : 0;
    position : relative;
}

.eqOnOffButtonPanel,
.compLimiterOnOffButtonPanel {
    clear    : both;
    float    : left;
    bottom   : 0;
    left     : 0;
    position : relative;
}

.eqButtonsPanel,
.noiseGateButtonsPanel,
.compLimiterButtonsPanel {
    display         : flex;
    justify-content : center;
    align-items     : center;
    flex-direction  : row-reverse;
}

.sourceSelectButtons.selected {
    /*background:radial-gradient(rgb(60,255,60),rgb(60,200,60)); !* .button-green; *!*/
    background-color : var(--background-color-success);
    color            : var(--text-color-on-brand-bg);
}

#divEqButtons,
#divCompLimiterButtons {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    width           : 100%;
}

.divCompLimiter {
    display       : inline-block;
    text-align    : center;
    overflow-x    : hidden;
    overflow-y    : auto;
    border-radius : 10px;
    border        : transparent;
    margin-top    : 10px;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    MODAL RIGHT
------------------------------------------------------------------------------------------------------------------------------------------*/
.eqRight,
.compLimiterRight {
    display : inline-block;
}

.divEq,
.divNoiseGate {
    display       : inline-block;
    text-align    : center;
    /* float: left; */
    overflow-x    : hidden;
    overflow-y    : auto;
    border-radius : var(--border-radius);
    border        : transparent;
    margin-top    : 10px;
    /*background-color: var(--background-color-tertiary);*/
}

.eqBandTitles {
    position : relative;
    display  : block;
    z-index  : 1;
}

.noiseGateBandTitles,
.compLimiterBandTitles {
    font-size   : 1rem;
    font-weight : bold;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    MODAL EQ --- KNOBS
------------------------------------------------------------------------------------------------------------------------------------------*/
.eqBandBypasses {
    height : 100%;
    float  : left;
}

.eqColorName {
    width  : 100%;
    margin : 0;
    height : 50px;
}

.eqColor, .eqName {
    float  : left;
    height : 51px;
}

.eqColor {
    width  : 10px;
    margin : 5px 7px;
}

.eqName {
    margin : 5px 0;
}

.eqBandBypassText {
    height      : 25px;
    width       : 54px;
    font-size   : 1rem;
    margin-left : 3px;
    text-align  : left;
}

.eqBand,
.compLimiterBand {
    float : left;
}

.eqKnobsLabel,
.noiseGateKnobsLabel,
.compLimiterKnobsLabel {
    display     : inline-block;
    font-size   : 0.8rem;
    position    : absolute;
    margin-left : -65px;
    margin-top  : 61px;
    width       : 50px;
    text-align  : center;
}

.eqBandKnob,
.noiseGateBandKnob,
.compLimiterBandKnob {
    float : left;
}

.eqFaderLabel {
    float : left;
}