/* r9: keep the desktop composition on phones, tablets and laptops. */
:root {
    --same-layout-width: 1200px;
    --same-layout-gap: 16px;
}

html,
body {
    width: 100% !important;
    min-width: var(--same-layout-width) !important;
    max-width: none !important;
    overflow-x: hidden !important;
}

.container,
.container.layout-both,
.container.layout-right,
.container.layout-left,
.container.layout-full {
    display: grid !important;
    flex-direction: initial !important;
    width: 100% !important;
    min-width: var(--same-layout-width) !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 0 var(--same-layout-gap) !important;
    align-items: start !important;
    direction: ltr !important;
}

.container.layout-both {
    grid-template-columns: 250px minmax(0, 1fr) 250px !important;
    grid-template-areas:
        "header header header"
        "left content right"
        "footer2 footer2 footer2"
        "footer footer footer" !important;
}

.container.layout-right {
    grid-template-columns: minmax(0, 1fr) 280px !important;
    grid-template-areas:
        "header header"
        "content right"
        "footer2 footer2"
        "footer footer" !important;
}

.container.layout-left {
    grid-template-columns: 280px minmax(0, 1fr) !important;
    grid-template-areas:
        "header header"
        "left content"
        "footer2 footer2"
        "footer footer" !important;
}

.container.layout-full {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
        "header"
        "content"
        "footer2"
        "footer" !important;
}

#header {
    grid-area: header !important;
    order: initial !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

#contentwrapper {
    grid-area: content !important;
}

#rightcolumn {
    grid-area: right !important;
}

#leftcolumn {
    grid-area: left !important;
}

#contentwrapper,
#rightcolumn,
#leftcolumn {
    order: initial !important;
    display: block !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    direction: rtl !important;
}

#contentcolumn,
#contentcolumnleft,
#contentcolumnright,
#contentcolumnleftright {
    width: 100% !important;
    min-width: 0 !important;
    margin: 28px 0 0 !important;
}

.footerdiv2 {
    grid-area: footer2 !important;
    order: initial !important;
}

.footerdiv {
    grid-area: footer !important;
    order: initial !important;
}

#header .h-first,
.h-fTXT,
#cssmenu {
    height: 60px !important;
}

#cssmenu > ul {
    justify-content: center !important;
    min-width: 100% !important;
}

#cssmenu a {
    min-height: 56px !important;
    padding: 0 24px !important;
    font-size: 15px !important;
    line-height: 56px !important;
}

#header .h1,
#header .h1 img {
    width: 100% !important;
    height: auto !important;
}

.members-grid,
.members-grid-2,
.members-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    min-width: 0 !important;
}

.member-card {
    min-width: 0 !important;
    width: auto !important;
}

.container.layout-both #leftcolumn > div {
    display: block !important;
}

.BlocksCont,
.blk1-head_outer, .blk1-body_outer, .blk1-footer,
.blk2-head_outer, .blk2-body_outer, .blk2-footer,
.blk3-head_outer, .blk3-body_outer, .blk3-footer,
.blk4-head_outer, .blk4-body_outer, .blk4-footer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.search-member-card {
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) !important;
    grid-template-areas:
        "identity facts"
        "actions actions" !important;
}

.search-member-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.search-member-actions {
    display: flex !important;
}

table.responsive-form-table,
table.responsive-form-table > tbody,
table.responsive-form-table > tbody > tr {
    display: table !important;
    width: 100% !important;
}

table.responsive-form-table > tbody {
    display: table-row-group !important;
}

table.responsive-form-table > tbody > tr {
    display: table-row !important;
}

table.responsive-form-table > tbody > tr > td,
table.responsive-form-table > tbody > tr > th {
    display: table-cell !important;
    width: auto;
}

@media screen and (min-width: 1601px) {
    html,
    body {
        min-width: 0 !important;
    }
}