@font-face {
    font-family         : 'Inter Variable';
    font-weight         : 100 900;
    font-optical-sizing : auto;
    font-display        : swap;
    src                 : url("./fonts/Inter-VariableFont.ttf") format("truetype-variables");
}

:root {
    --border-radius : 7px;

    /* MIXERGRID CELLS */
    --cross-width   : 25px;
    --cross-height  : 25px;

    /* MIXERGRID BORDER */
    --border-normal : 1px;
    --border-medium : 2px;
    --border-large  : 4px;
    --border-huge   : 6px;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    GLOBALES PROPERTIES
------------------------------------------------------------------------------------------------------------------------------------------*/
* {
    font-family         : "Inter Variable", Arial, sans-serif;
    font-optical-sizing : auto;
    font-style          : normal;
    font-weight         : normal;
    user-select         : none;
    -ms-user-select     : none;
    -webkit-user-select : none;
    -moz-user-select    : none;
    /*box-sizing          : border-box;*/
    font-size           : 13px; /* Du coup 1rem = 13px */
    /*line-height         : 16px;*/
}

body {
    background-color : var(--background-color-primary);
    color            : var(--text-color-invert);
    display          : flex;
    flex-direction   : column;
    margin           : 0;
    padding          : 8px;
    /*height           : 100vh;*/
}

button {
    font-size : 1rem;
}

/* --- DISABLES THE DEFAULT BUTTON SELECTION ON CHROME --- */
button:focus {
    outline : 0;
}

input[type=number]::-webkit-outer-spin-button {
    display : none;
}
input[type=number]::-webkit-inner-spin-button {
    display : none;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    INITIALIZATION
------------------------------------------------------------------------------------------------------------------------------------------*/
#initializing {
    background : radial-gradient(rgb(100, 100, 100), rgb(0, 0, 0));
    /*background: url('assets/images/logo2.webp') no-repeat center center;*/
    /*background: var(--background-color-invert);*/
    position   : fixed;
    width      : 100%;
    height     : 100%;
    margin     : -8px;
}

#initializeLogo {
    width      : 50%;
    display    : block;
    margin     : auto;
    /* box-shadow:50px 50px 50px #202020; */
    /*background: url('../images/logo.webp') no-repeat center center;*/
    animation  : logoSpinning linear infinite 3s;
    margin-top : 10%;
}

@keyframes logoSpinning {
    from {
        transform : rotateY(0deg);
    }
    to {
        transform : rotateY(-360deg);
    }
}

@keyframes logoZoom {
    from {
        transform : scale(0.1);
    }
    to {
        transform : scale(1.1);
    }
}

#progressBar {
    margin-top : 100px;
    text-align : center;
    display    : block;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    MENU
------------------------------------------------------------------------------------------------------------------------------------------*/
#menu {
    display       : flex;
    height        : 40px;
    margin-bottom : 0.5rem;
    align-items   : center;
    flex-wrap     : nowrap;
}

#logoImage {
    flex-shrink         : 0;
    width               : 89px;
    height              : 100%;
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
    order               : 999; /* Pour le mettre en dernière position */
    margin-left         : auto;
}

#configButton,
#inOutMetersButton,
#mixerButton,
#effectsButton,
#inputsButton,
#outputsButton,
#deviceSelectBtn,
#gridButton {
    min-width       : 40px;
    height          : 40px;
    background-size : 40px 40px;
    border          : none;
    margin          : 0 0.1rem;
    border-radius   : var(--border-radius);
    float           : left;
    cursor          : pointer;
    transition      : background-color 0.3s ease, transform 0.3s ease;
}

:is(#configButton,
  #inOutMetersButton,
  #mixerButton,
  #effectsButton,
  #inputsButton,
  #outputsButton,
  #deviceSelectBtn,
  #gridButton):hover {
    background-color : var(--element-color-brand-sec);
    transform        : translateY(-2px);
}

:is(#configButton,
  #inOutMetersButton,
  #mixerButton,
  #effectsButton,
  #inputsButton,
  #outputsButton,
  #deviceSelectBtn,
  #gridButton).selectedMenuBtn {
    background-color : var(--element-color-brand);
}

:is(#configButton,
  #inOutMetersButton,
  #mixerButton,
  #effectsButton,
  #inputsButton,
  #outputsButton,
  #deviceSelectBtn,
  #gridButton).selectedMenuBtn:hover {
    background-color : var(--element-color-brand-sec);
}

.MenuButtons {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 120px;
    height          : 100%;
    border-radius   : var(--border-radius);
    vertical-align  : center;
    cursor          : pointer;
    float           : left;
    border          : 1px solid var(--text-color-invert);
}

#sceneReminder {
    width  : 180px;
    margin : 0 0.9rem;
}

#JaugeVuMeterContenerDiv {
    /*width: 100%;*/
    height          : 100%;
    display         : flex;
    flex-direction  : column;
    align-items     : baseline;
    justify-content : center;
    margin          : 0 0.9rem;
}

.JaugeVuMeterTxt {
    text-align : left;
    font-size  : 0.8rem;
    /*margin-top: 6px;*/
}

/*------------------------------------------------------------------------------------------------------------------------------------------
   DEFAULTS TABS
------------------------------------------------------------------------------------------------------------------------------------------*/
.TabSelected {
    font-weight      : bold;
    border           : 1px solid var(--border-color-tertiary);
    background-color : var(--background-color-brand);
}

#configWindow_menu,
#effectsWindowMenu,
#mixerChoiceDiv,
#mixerChoice {
    border-bottom : 1px solid var(--border-color-brand);
}

.mixerMenuTab.TabSelected,
.mixerChoiceElement.TabSelected,
.configWindowMenuTab.selected,
.mixerMenuTab.selected,
.effectsWindowMenuTab.selected {
    font-weight      : bold;
    color            : var(--text-color-invert);
    background-color : var(--background-color-brand);
}

.configWindowMenuTab,
.Automation_menu_tab,
.Generator_menu_tab,
.MixerInput_menu_tab,
.effectsWindowMenuTab,
.mixerMenuTab,
.mixerChoiceElement {
    display       : inline-block;
    width         : 100px;
    line-height   : 30px;
    display       : inline-block;
    margin-right  : 5px;
    margin-bottom : -1px;
    color         : var(--text-color-invert);
    text-align    : center;
    border-radius : var(--border-radius) var(--border-radius) 0px 0px;
    border-top    : 1px solid var(--border-color-primary);
    border-right  : 1px solid var(--border-color-primary);
    border-left   : 1px solid var(--border-color-primary);
    border-bottom : 1px solid var(--background-color-brand);
    transition    : background-color 0.3s ease, transform 0.3s ease;
}

:is(.configWindowMenuTab,
.Automation_menu_tab,
.Generator_menu_tab,
.MixerInput_menu_tab,
.effectsWindowMenuTab,
.mixerMenuTab,
.mixerChoiceElement):hover {
    background-color : var(--background-color-brand-soft);
    transform        : translateY(-2px);
}

/*.mixerChoiceElement {*/
/*    display: inline-block;*/
/*    width: 100px;*/
/*    line-height: 30px;*/
/*    margin-right: 5px;*/
/*    text-align: center;*/
/*    border-radius: var(--border-radius) var(--border-radius) 0 0;*/
/*    background-color: var(--background-color-secondary);*/
/*}*/

/*------------------------------------------------------------------------------------------------------------------------------------------
   DEFAULTS CONIGURATION
------------------------------------------------------------------------------------------------------------------------------------------*/
.configDefaultTextAlignCenter {
    text-align : center;
}

.configDefaultPadding {
    padding : 2px;
}

.configDefaultBottom {
    position : fixed;
    bottom   : 0;
}

.configDefaultTop {
    position : fixed;
    top      : 0;
}

.configDefaultPaddingRight {
    padding-right : 4px;
}

.configDefaultMarginRight {
    margin-right : 4px;
}

.configDefaultMarginLeft {
    margin-left : 4px;
}

.configDefaultMarginBottom {
    margin-bottom : 4px;
}

/* https://stackoverflow.com/questions/32551291/in-css-flexbox-why-are-there-no-justify-items-and-justify-self-properties/33856609#33856609 */
.configDefaultFlexAlignAtRight {
    margin-left : auto;
}

.configDefaultFlexAlignAtLeft {
    margin-right : auto;
}

.configDefaultDisplayFlexVerticalCenter {
    display     : flex;
    align-items : center;
}

.configDefaultDisplay {
    display : inline-block;
}

.configDefaultNoLineCarriageReturn {
    white-space : nowrap; /* manage scroll if screen to short */
}

.configDefaultVerticalAlign {
    vertical-align : middle;
}

.configDefaultDisplayNone {
    display : none;
}

.configDefaultWidthVeryLong {
    width : 200px;
}

.configDefaultWidthLong {
    width : 160px;
}

.configDefaultWidthMedium {
    width : 120px;
}

.configDefaultWidthShort {
    width : 80px;
}

.configDefaultWidthAll {
    width : 100%;
}

.configDefaultWidth99 {
    width : 99%;
}

.configDefaultHeight {
    height : 27px;
}

.configDefaultRadius {
    border-radius : var(--border-radius);
}

.configDefaultHideOverflow {
    overflow : hidden;
}

.backGroundRightNoRepeat {
    background-position : right;
    background-repeat   : no-repeat;
}

.fontFamilyMonospace {
    font-family : monospace;
}

.DefaultCbxTitle {
    /* do not remove marker class */
}

.DefaultCbx-select {
    box-sizing       : border-box;
    background-color : black;
    overflow         : hidden;
    border           : 1px solid grey;
}

.DefaultCbx-select select {
    color  : white;
    border : medium none;
    height : 1.5rem;
}

.DefaultCbx-option {
    background : black;
    color      : white;
}

.configInput {
    border        : 1px solid grey;
    border-radius : var(--border-radius);
    width         : 98%;
    text-align    : center;
}

.configInput:disabled {
    /*border           : 1px solid #999999;*/
    /*background-color : var(--grey-80);*/
    color            : var(--text-color-invert);
    opacity        : 80%;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    BLINKER
------------------------------------------------------------------------------------------------------------------------------------------*/
.blink {
    animation : blinker 0.6s linear infinite;
}

@keyframes blinker {
    0% {
        opacity : 1;
    }
    50% {
        opacity : 0;
    }
    100% {
        opacity : 1;
    }
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    BUTTONS UI
------------------------------------------------------------------------------------------------------------------------------------------*/
.button-green {
    background-color : var(--background-color-success);
    color            : var(--text-color-invert);
}

.button-red {
    background-color : var(--background-color-danger);
}

.button-red2 {
    background-color : var(--background-color-danger-sec)
}

.button-blue {
    background-color : var(--background-color-brand);
}

.button-blue1 {
    background-color : var(--background-color-brand-sec);
}

.button-blue2 {
    background-color : var(--brand-color-lighter-50);
}

.button-selected-disable {
    background-color : var(--grey-95)
}

.button-notSelected-disabled {
    background-color : var(--grey-80)
}

.button-unselected-disabled {
    background-color : var(--background-color-primary);
}

/*.DefaultButton {*/
/*    color: white;*/
/*    border: none;*/
/*    cursor: pointer;*/
/*}*/

/*.DefaultButton.selected{*/
/*    color: black;*/
/*}*/

/*.DefaultButton:active {*/
/*    transform: scale(0.9, 0.9);*/
/*}*/

/* --- WAS USED ON NAVIGATION WHEN IT WAS AT THE LEFT --- */
.customConfButtons {
    width         : 96%; /* calc(100% - 4px); */
    height        : 20px;
    border-radius : var(--border-radius);
    text-align    : center;
    cursor        : pointer;
    font-size     : 0.8rem;
}

.customMenuButtons {
    height        : 40px;
    border-radius : var(--border-radius);
    text-align    : center;
    cursor        : pointer;
    margin        : 2px 7.5px 3px 0;
    float         : left;
    font-size     : 16px;
    color         : white;
    font-weight   : bold;
    padding       : 0;
    border        : none;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    MIXER TAB --- MODAL MIXER --- BUTTONS
------------------------------------------------------------------------------------------------------------------------------------------*/
.mixerResetButtonPanel {
    clear  : both;
    float  : left;
    bottom : 0;
    left   : 0;
    /*position: absolute;*/
}

.mixerButtonsPanel {
    /*position: absolute;*/
    bottom     : 0;
    right      : 0;
    text-align : right;
}

.mixerButtons, .mixerResetButton {
    margin : 5px 5px 2px 10px;
    width  : 100px;
    height : 25px;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    CUSTOM PROPERTIES
------------------------------------------------------------------------------------------------------------------------------------------*/
.overlayDisable {
    opacity    : 0.2;
    background : rgba(0, 0, 0, 0.5) !important;
    color      : var(--text-color-invert);
}

.customColorButtons {
    border  : 2px solid var(--border-color-brand);
    margin  : 2px 10px;
    padding : 0 10px;
    width   : 100px;
    cursor  : pointer;
}

.customColorButtons.active {
    border : 2px solid white;
}

.colorButtons {
    margin         : 4px 10px 10px 10px;
    width          : 100px;
    vertical-align : middle;
    float          : right;
}

.customModalButtonsRight {
    float : right;
}

.customModalButtonsLeft {
    float : left;
}

.customSliceButtons {
    width         : 96%; /* calc(100% - 4px); */
    height        : 20px;
    border-radius : var(--border-radius);
    cursor        : pointer;
    overflow      : hidden;
    font-size     : 10px;
}

.sceneModified {
    color : Orange;
}

.inputFileBrowser {
    display : none;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    SOURCECHOICE
------------------------------------------------------------------------------------------------------------------------------------------*/
.sourceChoiceDialogs {
    background-color : var(--background-color-primary) !important;
}

.sourceChoiceDialogs.ui-widget-content {
    color : white;
}
.sourceChoiceDiv {
    line-height : 30px;
    text-align  : center;
    font-size   : 1rem;
    overflow    : hidden;
    color       : var(--text-color-on-brand-bg);
}

.sourceChoiceModalContent {
    margin-top : 10px;
}

.sourceChoiceDialogs, .sourceChoiceDialogs .ui-dialog-content {
    padding : 0;
}

.sourceChoiceDialogs .ui-dialog-titlebar {
    display : none;
}

.sourceChoiceModalTitleDiv {
    height : 20px;
    width  : 100%;
}

.sourceChoiceModalTitle, .outputSourceSelectDiv {
    height : inherit;
}

.sourceChoiceModalTitle, .arrow, .outputSourceSelectName {
    float : left;
}

.inputSourceSelectTitle, .sourceChoiceModalTitle {
    text-align : right;
}

.sourceChoiceModalTitle, .inputSourceSelectDivs {
    vertical-align: middle;
}

.sourceChoiceModalTitle {
    /*line-height: 30px;*/
    width : 170px;
    color : var(--text-color-invert);
}

.arrow {
    height : 20px;
}

.outputSourceSelectName {
    width      : 150px;
    text-align : center;
    margin-top : 1px;
}

.inputSourceSelectTitle {
    margin-right : 10px;
    width        : 150px;
    float        : left;
    /* line-height: 36px; */
    color        : var(--text-color-invert);
}

.inputSourceSelectDiv {
    clear   : both;
    display : grid;
}

.sourceSelectButtonsDiv {
    display         : flex;
    justify-content : flex-start;
    align-items     : center;
    flex-direction  : row-reverse;
    margin-top      : 10px;
}

.inputSourceSelect {
    margin-left : 50px;
}

.sourceSelectButtons {
    width            : 120px;
    border-radius    : var(--border-radius);
    border           : 1px solid var(--border-color-primary);
    cursor           : pointer;
    background-color : var(--grey-80);
    color            : var(--text-color-on-brand-bg);
}

#InputSourceMic,
#InputSourceInputs,
#InputSourceDante,
#InputSourceMixer,
#InputSourceOutputs {
    display     : flex;
    align-items : center;
    gap         : 4px;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    MODAL LEFT
------------------------------------------------------------------------------------------------------------------------------------------*/
.eqLeft,
.noiseGateLeft,
.compLimiterLeft {
    float      : left;
    max-height : inherit;
    position   : relative; /*titlebar doesn't work with fixed (need to be loaded twice)*/
    /*width: 40%;*/

}

.eqLeftTitle,
.compLimiterLeftTitle {
    margin-top : 5px;
    /* font-size: 24px; */
    text-align : center;
}

.eqBandTitle,
.noiseGateLeftTitle,
.noiseGateBandTitle,
.compLimiterBandTitle {
    /* font-weight: bold; */
    font-size : 1rem;
}

/*------------------------------------------------------------------------------------------------------------------------------------------
    JQUERY UI
------------------------------------------------------------------------------------------------------------------------------------------*/
.ui-slider-handle {
    background    : url('../images/slider-cursor-grey.webp') no-repeat 50% 50%;
    width         : 30px !important;
    height        : 60px !important;
    border        : none !important;
    margin-bottom : -30px !important;
    margin-left   : -18px !important;
    padding       : 0 14px;
}

/*  mixer master
#mixerWindowContent > .slices .ui-slider-handle {
    background: url('images/slider-cursor-orange.webp') no-repeat 50% 50% !important;
}
*/

#effectsWindow .ui-slider-vertical {
    margin-left : 28px !important;
}

#effectsWindow .ui-widget-content {
    background       : none;
    background-color : black;
}
.ui-slider-vertical {
    width : 7px;
}

.ui-slider-vertical .ui-slider-handle {
    left : -0.5em;
}

.ui-widget-header {
    background : none !important;
}

.ui-widget-content {
    color : white;
}

.ui-tabs .ui-tabs-panel {
    padding          : 0;
    background-color : #282844 !important;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    background : #DD6600;
}

.ui-helper-reset {
    font-size : 1.2rem;
}

.ui-button {
    border : 1px solid black !important;
}