#mainDiv {
    width: fit-content;
    min-width: 39em;
    max-width: fit-content;
}

    #mainDiv:has(.main:only-child) {
        min-width: 60em;
    }


    #mainDiv:has(.main:only-child) {
        max-width: min-content;
    }

.mainRow:not(.buttonsControlRow):has(.main:only-child) .control:not(.labelledDateInput):not(:has(.labelledDateInput)) {
    flex-direction: column;
}

#mainDiv:has(.main:only-child .control:only-child),
#mainDiv:has(.main:only-child .personSectionHeader + .control:last-child) {
    min-width: 39em;
}

#mainDiv:has(.main:only-child) .main:has(.control:only-child) .control,
#mainDiv:has(.main:only-child) .main:has(.personSectionHeader + .control:last-child) .control {
    flex-direction: row !important;
    align-items: baseline;
    max-width: none !important;
    min-height: 2.2em;
}

.flexRowControl:not(.labelledCheckboxControl):not(:has(.labelledCheckboxControl)):not(.labelledDateInput):not(:has(.labelledDateInput)) {
    min-height: 2.2em;
}

#mainDiv:has(.main:only-child .control:only-child) .flexLabel {
    word-break: unset;
}

.responsiveTable th, .personalHeaderView {
    word-break: unset !important;
}

.smallColumn {
    width: 1em;
}

.secrecyColumn {
    justify-items: center;
}

.caseDnoColumn, .caseRegDateColumn, .docNumberColumn, .docDateColumn {
    width: 8em;
}

.caseSubjectColumn, .docSubjectColumn {
    width: 20em;
}

.caseCounterpartColumn, .docPersonColumn {
    width: 10em;
}

#mainDiv:has(.main:only-child) .searchConditionsBlock {
    max-width: none;
}

.mainRow:not(.buttonsControlRow):has(.main:only-child .personSectionHeader + .control:last-child) .control:not(.labelledDateInput):not(:has(.labelledDateInput)) {
    flex-direction: row;
    max-width: unset;
}

#mainDiv:has(.main:only-child .control:only-child) .buttonsControlRow {
    flex: 1;
}

.mainRow:has(>.main.maxWidthLimitation:nth-child(2)):not(:has(>.main.maxWidthLimitation:nth-child(3))) select,
.mainRow:has(>.main.maxWidthLimitation:nth-child(2)):not(:has(>.main.maxWidthLimitation:nth-child(3))) input[type=text],
.mainRow:has(>.main.maxWidthLimitation:nth-child(2)):not(:has(>.main.maxWidthLimitation:nth-child(3))) input[type=date],
.mainRow:has(>.main.maxWidthLimitation:nth-child(2)):not(:has(>.main.maxWidthLimitation:nth-child(3))) textarea {
    width: 16em !important;
    min-width: 16em !important;
}

.mainRow:has(>.main.maxWidthLimitation:nth-child(2)):not(:has(>.main.maxWidthLimitation:nth-child(3))) .doubleDateControl {
    width: 100%;
}

.mainRow:has(>.main.maxWidthLimitation:nth-child(2)):not(:has(>.main.maxWidthLimitation:nth-child(3))) input[type=date] {
    width: 10em !important;
    min-width: 10em !important;
}

.personSection {
    border: 1px solid var(--border-color);
    padding: var(--padding-small) var(--padding-small) 2px var(--padding-small) !important;
    position: relative;
    top: 4px;
    margin-bottom: 1em;
    margin-left: 4px;
    margin-right: 9px;
}

.personSectionHeader {
    flex-basis: 100% !important;
    width: 100% !important;
    min-height: 1.8em !important;
    max-width: 100% !important;
}

.personSection > .control:not(.personSectionHeader) {
    padding-left: 0.7em;
}

.flexRow.mainRow:not(:has(.main:nth-child(2))) .flexLabel {
    padding-left: 1px;
}

.mainRow:has(>.main:only-child) > .flexColumn.main > .personSectionHeader {
    flex-basis: 100% !important;
    width: 100% !important;
    min-height: 1.5em !important;
    max-width: 100% !important;
}

    .mainRow:has(>.main:only-child) > .flexColumn.main > .personSectionHeader > div {
        position: unset;
    }

@media only screen and (max-width: 64em) { /* 1024 px*/
    #mainDiv:has(.main:only-child .control:only-child) {
        max-width: 39em;
    }

    .mainRow:has(>.main.maxWidthLimitation + .main.maxWidthLimitation + .main.maxWidthLimitation ) > .main > .flexRowControl:not(.labelledCheckboxControl):not(:has(.labelledCheckboxControl)) {
        min-height: 3.5em;
    }

    #mainDiv:has(.main:only-child):not(:has(.main:only-child .control:only-child)):not(:has(.main:only-child .personSectionHeader + .control:last-child)) {
        min-width: 100% !important;
    }

    .mainRow:has(>.main.maxWidthLimitation:nth-child(2)):not(:has(>.main.maxWidthLimitation:nth-child(3))) select,
    .mainRow:has(>.main.maxWidthLimitation:nth-child(2)):not(:has(>.main.maxWidthLimitation:nth-child(3))) input[type=text],
    .mainRow:has(>.main.maxWidthLimitation:nth-child(2)):not(:has(>.main.maxWidthLimitation:nth-child(3))) textarea {
        width: 100% !important;
        min-width: unset !important;
    }

    #mainDiv:not(:has(.main:only-child)) .personSection {
        top: 0.8em;
    }

    .personSectionHeader {
        min-height: 2.7em !important;
    }

        .personSectionHeader > div {
            position: relative;
            top: 0.6em;
        }
}

@media only screen and (max-width: 50em) {
    #mainDiv {
        max-width: none;
        width: auto;
        min-width: initial;
    }

    .flexRowControl:not(.labelledCheckboxControl):not(:has(.labelledCheckboxControl)):not(.labelledDateInput):not(:has(.labelledDateInput)) {
        min-height: 3.5em;
    }

    #mainDiv:has(.main:only-child) .main:has(.control:only-child) .flexRowControl:not(.labelledCheckboxControl):not(:has(.labelledCheckboxControl)):not(.labelledDateInput):not(:has(.labelledDateInput)) {
        min-height: 2.2em;
    }

    #mainDiv:has(.main.maxWidthLimitation + .main.maxWidthLimitation + .main.maxWidthLimitation) .personSection,
    #mainDiv:has(.main.maxWidthLimitation + .main.maxWidthLimitation + .main.maxWidthLimitation) .personSectionHeader > div {
        position: unset;
    }

    #mainDiv:has(.main.maxWidthLimitation + .main.maxWidthLimitation + .main.maxWidthLimitation) .personSectionHeader {
        min-height: 1.5em !important;
    }
}

@media only screen and (max-width: 40em) {
    #mainDiv {
        min-width: 100% !important;
    }
}

@media only screen and (max-width: 36em) {
    #mainDiv:has(.main:only-child) .main:has(.control:only-child) .control:not(.doubleDateControl),
    #mainDiv:has(.main:only-child) .main:has(.personSectionHeader + .control:last-child) .control:not(.doubleDateControl) {
        flex-direction: column !important;
    }

    .searchConditionsBlock {
        max-width: none !important;
    }

    .personSection {
        width: calc(100% - 13px) !important;
        margin-left: 0px;
        position: relative !important;
        left: 4px;
        top: 0px;
    }

    .personSectionHeader {
        min-height: 1.5em !important;
    }

        .personSectionHeader > div {
            position: unset;
        }
}