@import "Defaults.css";
@import "Module.css";
@import "Form.css";



/* 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(240, 240, 160);
}

.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;
}

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

.ECMS_TPL_Right {
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    flex-direction: column;
    width: 50%;
    background-color: rgb(224, 240, 255);
}

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


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

/* 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%; }
}