* {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}

#layout, .layout {
    display: grid;
    width: 100%;
}
.layout-default-side-right {
    grid-template-areas:
        "header header"
        "menu menu"
        "content side"
        "footer footer";
    grid-template-columns: 3fr 1fr;
}
.layout-default-side-left {
    grid-template-areas:
        "header header"
        "menu menu"
        "side content"
        "footer footer";
    grid-template-columns: 1fr 3fr;
}
.layout-simple {
    grid-template-areas:
        "header"
        "content"
        "footer";
}
.layout-only-content {
    grid-template-areas:
        "content";
}

.layout-no-side-menu-center {
    grid-template-areas:
        "header"
        "menu"
        "content"
        "footer"  ;
}
.layout-no-side-menu-right {
    grid-template-areas:
        "header header"
        "content menu"
        "footer footer" ;
}
.layout-no-side-menu-left {
    grid-template-areas:
        "header header"
        "menu content"
        "footer footer" ;
}

.layout-no-menu-side-right {
    grid-template-areas:
        "header header"
        "content side"
        "footer footer";
    grid-template-columns: 3fr 1fr;
}
.layout-no-menu-side-left {
    grid-template-areas:
        "header header"
        "side content"
        "footer footer";
    grid-template-columns: 1fr 3fr;
}


#header-container {
    width: 100%;
    margin: 0;
    grid-area: header;
}
.header-box {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 10px 20px;
    margin: 0;
    width: 100%;
}
.header-item {
    display: flex;
    align-items: center;
}
.header-item > div {
    margin: 5px;
}

#content-container {
    width: 100%;
    margin: 0;
    grid-area: content;
}
.content-box {
    align-items: baseline;
    margin: 10px 0px;
    padding: 10px 20px;
}
.content-item {
    margin: 10px;
    padding: 10px;
}
.content-item > div {
    margin: 5px;
}

#footer-container {
    width: 100%;
    margin: 0;
    grid-area: footer;
}
.footer-box {
    display: flex;
    align-items: stretch;
    align-content: center;
    justify-content: space-around;
    margin: 0;
    padding: 10px 20px;
}
.footer-item {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-evenly;
    align-items: stretch;
}
.footer-item > div {
    margin: 5px;
}

#menu-container {
    width: 100%;
    margin: 0;
    grid-area: menu;
}

#side-container {
    width: 100%;
    margin: 0;
    grid-area: side;
}
.side-box {
    display: flex;
    margin: 10px 0px;
    padding: 10px;
    align-items: baseline;
}
.side-item {
    margin: 10px;
    padding: 10px;
}
.side-item > div {
    margin: 5px;
}

.grid { display: grid; }
.grid-auto-500 { grid-template-columns: repeat(auto-fill, minmax(500px, auto)); }
.grid-auto-300 { grid-template-columns: repeat(auto-fill, minmax(300px, auto)); }
.grid-auto-200 { grid-template-columns: repeat(auto-fill, minmax(200px, auto)); }
.grid-auto-100 { grid-template-columns: repeat(auto-fill, minmax(100px, auto)); }
.grid-3-3-3-3 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid-4-4-4 { grid-template-columns: 1fr 1fr 1fr; }
.grid-3-6-3 { grid-template-columns: 1fr 2fr 1fr; }
.grid-2-8-2 { grid-template-columns: 1fr 4fr 1fr; }
.grid-6-6 { grid-template-columns: 1fr 1fr; }
.grid-5-7 { grid-template-columns: 5fr 7fr; }
.grid-7-5 { grid-template-columns: 7fr 5fr; }
.grid-4-8 { grid-template-columns: 1fr 2fr; }
.grid-8-4 { grid-template-columns: 2fr 1fr; }
.grid-3-9 { grid-template-columns: 1fr 3fr; }
.grid-9-3 { grid-template-columns: 3fr 1fr; }
.grid-2-10 { grid-template-columns: 1fr 5fr; }
.grid-10-2 { grid-template-columns: 5fr 1fr; }
.grid-2-10 { grid-template-columns: 1fr 5fr; }


@media (max-width: 1080px) {
    .layout-default-side-right, .layout-default-side-left {
        grid-template-areas:
            "header"
            "menu"
            "content"
            "side"
            "footer";
       grid-template-columns: 1fr;
    }
    .layout-no-menu-side-right, .layout-no-menu-side-left {
        grid-template-areas:
            "header"
            "content"
            "side"
            "footer";
        grid-template-columns: 1fr;
    }
}

#layout .ql-editor a {
	cursor:pointer !important;
}