/** Styles for the theme: Base */

/* Style for the main element */
.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput.TcHmi_Controls_Beckhoff_TcHmiNumericInput {
    --tchmi-background: #FFFFFF;
    --tchmi-color: #4c6374;
    --tchmi-button-background: linear-gradient(135deg, #eff1f3, #aeb9c2);
    --tchmi-button-color: #4794da;
    --tchmi-button-background-pressed: linear-gradient(135deg, #aeb9c2, #eff1f3);
    --tchmi-button-color-pressed: #4c6374;
    background: transparent;
}

.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput .TcHmi_Controls_Beckhoff_TcHmiNumericInput-template-input {
    -webkit-appearance: none; /* Important to have visible box-shadow on input elements in iOS/Safari.  */
    color: var(--tchmi-color);
    box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.02), inset 0px 0px 3px 2px rgba(0,0,0,0.3);
    background: var(--tchmi-background);
}

    .TcHmi_Controls_Beckhoff_TcHmiSpinboxInput .TcHmi_Controls_Beckhoff_TcHmiNumericInput-template-input:invalid {
        box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.02), inset 0px 0px 3px 2px rgba(0,0,0,0.3), inset 0px 0px 7px 3px rgba(255, 0, 0, 0.3);
    }

.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-before.used,
.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-after.used {
    flex-basis: 30px;
}

.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-before.used {
    margin-right: 3px;
}

.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-after.used {
    margin-left: 3px;
}

.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-before .button,
.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-after .button {
    /* color gradient for default view */
    background-image: var(--tchmi-button-background);
    /* default color for button text */
    color: var(--tchmi-button-color);
    /* default box shadow */
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.6);
}

.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-before .button:active,
.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput-template-button-after .button:active {
    /* another color gradient */
    background-image: var(--tchmi-button-background-pressed);
    color: var(--tchmi-button-color-pressed);
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2), inset 0px 0px 10px 0px rgba(0,0,0,0.3);
}

.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput .button-plus::after {
    content: "";
    background-image: url('Images/icons_plus_normal.svg');
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%
}

.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput .button-minus::after {
    content: "";
    background-image: url('Images/icons_minus_normal.svg');
    background-position: center;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%
}

.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput .button-plus:active::after {
    background-image: url('Images/icons_plus_pressed.svg');
}

.TcHmi_Controls_Beckhoff_TcHmiSpinboxInput .button-minus:active::after {
    background-image: url('Images/icons_minus_pressed.svg');
}