.input_group {
    padding: 2px;
    margin: 5px auto 15px;
}


.input_group label {
    display: block;
    padding: 12px 0px 4px;
}

.input_group .input_status_message { 
    color: var(--input-invalid-color);
    font-size: 12px;
    margin-top: 2px;
    padding-left: 0.5rem;
}

/* .input-group input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]) { */
.input_group input[type="text"],
.input_group input[type="number"],
.input_group input[type="email"],
.input_group input[type="password"],
.input_group input[type="date"],
.input_group input[type="time"],
.input_group input[type="datetime-local"] {
    background-image: url('/Images/demonic/UI_parts/input_bar.webp');
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.45);
    color: var(--main-text-color);
    display: block;
    font-family: var(--main-font-family-input);
    font-size: var(--main-font-size-input);
    outline: none;
    padding: 12px 16px;
    position: relative;
    width: 100%;
}

::-webkit-calendar-picker-indicator { filter: invert(1); }


.input_group input[type="text"]:invalid { 
    color: var(--input-invalid-color); 
}

/* .input-group input[type="text"]:invalid ~ .input-status-message { display: block; } */


/* Checkbox */
label.input_checkbox {
    display: inline-block;
    position: relative;
}
label.input_checkbox input {
    opacity: 0;
    position: absolute;
    z-index: -1;
    height: 1px;
    width: 1px;
}
label.input_checkbox span {
    background-image: url('/Images/demonic/red_buttons/button_tiny_empty.webp');
    background-position: center center;
    background-size: 100% 100%;
    display: inline-block;
    height: 20px;
    width: 20px;
}

label.input_checkbox span:hover {
    background-image: url('/Images/demonic/red_buttons/Button_tiny_ok.webp');
}
label.input_checkbox input:checked ~ span {
    background-image: url('/Images/demonic/red_buttons/Button_tiny_ok_bl.webp');
}



.input_group.short {
    display:inline-block;
}
.input_group.short input {
    display: inline-block;
    width: auto;
}