/* Areas */
.ECMS_TPL_Header,
.ECMS_TPL_Left,
.ECMS_TPL_Top,
.ECMS_TPL_Center,
.ECMS_TPL_Bottom,
.ECMS_TPL_Right,
.ECMS_TPL_Footer {
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 0;
    padding: 0;
}

/* Layout */

body {
    margin: 0;
    padding: 0;
}

.ECMS_TPL_Body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ECMS_TPL_Header {
    /*min-height: 10vh;*/
    /*background-color: rgb(253, 231, 14);*/
}

.ECS_TPL_Middle {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}

.ECMS_TPL_Left {
    flex-grow: 0;
    flex-shrink: 0;
    width: 340px;
    background-color: rgb(255, 255, 240);
}

.ECMS_TPL_Wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;;
}

.ECMS_TPL_Top {
    /*background-color: rgb(240, 255, 240);*/
}

.ECMS_TPL_Main {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: center;
}

.ECMS_TPL_Center {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 0;
    width: 50%;
    max-width: 760px;
    /*background-color: rgb(123, 123, 253);*/
}
.ECMS_TPL_Center:empty { display: none; }

.ECMS_TPL_Right {
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    width: 50%;
    background-color: rgb(248, 252, 255);

    container-type: inline-size;
    container-name: ECMS_TPL_Right;
}
/*.ECMS_TPL_Right > .Module {*/
/*    flex-grow: 1;*/
/*    flex-shrink: 1;*/
/*    min-width: 300px;*/
/*    max-width: 480px;*/
/*}*/
@container ECMS_TPL_Right (width > 960px) {
    .ECMS_TPL_Right > .Module {
        width: 50%;
    }
}
@container ECMS_TPL_Right (width > 1440px) {
    .ECMS_TPL_Right > .Module {
        width: 33%;
    }
}
@container ECMS_TPL_Right (width > 1920px) {
    .ECMS_TPL_Right > .Module {
        width: 25%;
    }
}

.ECMS_TPL_Bottom {
    display: flex;
    flex-direction: column;
    background-color: rgb(248, 248, 248);
}


.ECMS_TPL_Footer {
    /*min-height: 10vh;*/
    background-color: rgb(248, 255, 248);
}

/* Empty areas */
.ECMS_TPL_Left:empty,
.ECMS_TPL_Top:empty,
.ECMS_TPL_Right:empty,
.ECMS_TPL_Bottomt:empty {
    display: none;
}

@media (max-width: 768px) {
    .ECMS_TPL_Main {
        flex-direction: column;
    }

    .ECMS_TPL_Left { display: none; }
    .ECMS_TPL_Center { width: 100%; }
    .ECMS_TPL_Right { width: 100%; }
}