#app .mud-input {
    background-color: hsla(0, 0%, 100%, .02);
}

#app .mud-input .mud-input-adornment-icon {
    font-size: 18px;
    opacity: .7;
}

#app .mud-input-control:not(.mud-table-pagination-select) .mud-input input,
#app .mud-input-control:not(.mud-table-pagination-select) .mud-input .mud-select-input {
    line-height: 2.5;
    min-height: 43px;
}

#app .mud-input textarea {
    mask-image: none;
}

#app .mud-input-label-outlined {
    background-color: unset;
}

#app .mud-input-root-outlined {
    padding: 0 .85em;
}

#app .mud-input-slot.mud-input-root-adorned-start {
    padding: 0;
}

#app .mud-input.mud-disabled {
    background-color: var(--mud-palette-gray-light);
}

#app .mud-input-control.mud-input-outlined-with-label {
    margin: 0;
}

#app .mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    position: relative;
    transform: none;
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    line-height: 20px;
    white-space: normal;
    padding: 0 !important;
    margin-bottom: 6px;
}

#app .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: none;
}

#app .mud-input-control > .mud-input-control-input-container {
    flex-direction: column-reverse;
}

#app .mud-input-helper-text.mud-input-error {
    position: absolute;
    right: 0;
}

#app .h-auto .mud-input {
    height: auto;
}

#app .h-auto .mud-input .mud-input-slot {
    padding: 0;
}

#app .mud-checkbox-true {
    color: var(--mud-palette-primary);
}

#app .mud-radio-group {
    margin-left: -12px;
}

#app div[role="group"] label {
    font-family: 'NotoSans-Semi';
}

#app .mud-switch-span {
    margin-left: -10px;
}

#app .mud-switch-base.mud-checked.mud-switch-disabled {
    color: var(--mud-palette-success-lighten) !important;
}

#app .mud-switch-base.mud-switch-disabled + .mud-switch-track {
    opacity: .3 !important;
}

#app .mud-switch-span + p {
    font-family: 'NotoSans-Semi';
}

#app .mud-switch-span:has(.mud-checked) + p {
    color: var(--mud-palette-text-primary);
}

#app .mud-switch-button > span {
    box-shadow: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#app .elem-array {
    display: grid;
    gap: 1rem;
    padding: 0 !important;
}

#app .elem-horizontal:has(.address) {
    display: flex;
    gap: 1rem;
}

#app .elem-horizontal:has(.address) .mud-input > input.mud-input-root,
div.mud-input-slot.mud-input-root {
    width: 100%;
}

#app .elem-vertical > div,
#app .elem-vertical .mud-tabs .mud-tabs-panels > div {
    display: grid;
    gap: 1rem;
}

#app .elem-vertical .mud-tabs .mud-tabs-panels > div > div {
    margin-bottom: 1rem;
}

#app .elem-group {
    border: 1px solid var(--mud-palette-divider);
    background-color: var(--mud-palette-surface);
    border-radius: 5px;
    padding: 1rem;
}

#app .elem-group:has(> div > .mud-input-control-boolean-input .mud-switch .mud-checked.mud-switch-disabled .mud-switch-input[aria-checked="true"]) {
    opacity: .8;
}

#app .elem-group > div,
#app .elem-group > div > .elem-horizontal {
    display: grid;
    gap: 1rem;
}

#app .elem-premiumField .mud-switch p {
    font-family: 'NotoSans-Semi';
}

#app .elem-group:has(> div > .elem-premiumField) {
    border-color: var(--mud-palette-gray-default);
}

#app .elem-group:has(> div > .elem-premiumField .mud-switch-disabled) {
    opacity: .8;
}

#app .elem-group:has(> div > .elem-premiumField .mud-checked) {
    background-color: var(--mud-palette-background-gray);
}

#app .elem-group:has(> div > .elem-premiumField .mud-checked) .elem-vertical .elem-vertical {
    background-color: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    border-radius: 0 0px 5px 5px;
    padding: 1rem;
    margin: 0 -1rem -1rem -1rem;
}

#app .dotlineBetween {
    position: absolute;
    height: 100%;
}

#app .dotlineBetween::after {
    content: '';
    position: absolute;
    height: 100%;
    left: 0;
    top: 38px;
    width: 1px;
    background-size: 1px 16px;
    background-image: linear-gradient(0deg, var(--mud-palette-lines-inputs), var(--mud-palette-lines-inputs) 65%, transparent 65%, transparent 100%);
    margin-left: 18px;
}

#app .mud-expand-panel .mud-expand-panel-header {
    padding: 12px 16px;
}

#app .mud-expand-panel .mud-expand-panel-content .mud-expand-panel-header {
    padding: 0;
}

#app .mud-expand-panel .mud-expand-panel-content .mud-expand-panel-gutters {
    padding: 0 16px 12px 16px;
}

#app .mud-expand-panel.mud-panel-expanded {
    margin: 0;
}

#app .mud-expand-panel .mud-expand-panel-content .mud-expand-panel-border {
    border-bottom: 1px solid var(--mud-palette-divider);
    box-shadow: none;
    border-radius: 0;
    padding: 10px 0;
}

#app .mud-expand-panel .mud-expand-panel-content .mud-expand-panel-border:first-of-type {
    padding-top: 6px;
}

#app .mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
    padding: 0 16px 12px 16px;
}

#app .mud-expand-panel .mud-expand-panel-content .mud-expand-panel-border .mud-expand-panel-content {
    padding: 10px 0 0 0;
}

@media screen and (min-width: 960px) {
    #app .mud-input-control-helper-container {
        padding: 0 !important;
    }

    #app .dotlineBetween::after {
        top: 40px;
        margin-left: 22px;
    }
}