form, .formInputGroup, .formInputGroup > *, month-picker {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}

form {
    gap: 20px;
}

input, input[type=text], input[type=password], input[type=number], textarea, select {
    height: 32px !important;
    border: none !important;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    transition: 1s;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
    word-wrap: break-word;
    word-break: break-all;
    border-radius: 4px;
    font-size: .85em !important;
    background: var(--transparent-bg);
    padding-left: 8px !important;
}

    input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, textarea:focus, select:focus {
        box-sizing: border-box;
        outline: none;
        border: 2px solid var(--background-btn-back);
        font-size: 1em;
    }

    input:read-only, input[type=text]:read-only {
        outline: none;
        word-wrap: break-word;
        word-break: break-all;
        border-radius: 4px;
        padding-inline-start: 10px;
    }

.formInputGroup {
    width: 75%;
    padding: 12px;
    gap: 10px;
}

label {
    font-size: 0.8em;
}

.formInputGroup span {
    position: relative;
}

input[type=checkbox] {
    border: none;
    transition: 1s;
    transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

input[type=checkbox], input[type=radio] {
    width: revert !important;
    height: revert !important;
    background: revert !important;
    box-shadow: revert !important;
}

div > :has(input[type=checkbox]) {
    flex-direction: row;
}

    div > :has(input[type=checkbox]) label {
        padding-bottom: 2px;
    }

.selection > span {
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    border: none !important;
}

.select2-selection__clear span {
    font-size: 1.3rem;
}

.content-filter div > span {
    width: 100% !important;
}

input:focus, .formInputGroup div input:focus {
    outline-color: var(--accent-color);
    border-color: var(--accent-color);
}

.usage {
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
}

    .usage > div {
        width: 30%;
    }

div > textarea {
    height: 3.5em !important;
}

@media only screen and (max-width: 599px) {
    .formInputGroup.meter {
        width: 90%;
    }

    .usage div input {
        width: 100%;
    }

    form {
        gap: 0;
    }
}

@media only screen and (max-width: 345px) {
    /*.usage > div {
        width: 47% !important;
    }*/
}