﻿html,
body {
    background: #000 !important;
}

header {
    position: fixed;
    width: 100%;
    height: 90px;
    top: 0;
    left: 0;
    right: 0;
}

    header > div:nth-of-type(1) {
        position: absolute;
        left: 0;
        width: 90px;
        height: 90px;
        padding: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        header > div:nth-of-type(1) > img,
        header > div:nth-of-type(1) > a > img {
            max-width: 90%;
        }

    header > div:nth-of-type(2) {
        position: absolute;
        height: 90px;
        left: 90px;
        right: 90px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

        header > div:nth-of-type(2) > p {
            letter-spacing: 1.5px;
        }

    header > div:nth-of-type(3) {
        position: absolute;
        right: 0;
        width: 90px;
        height: 90px;
        padding: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        header > div:nth-of-type(3) > img,
        header > div:nth-of-type(3) > a > img {
            max-width: 90%;
        }

main {
    position: fixed;
    top: 90px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    overflow: hidden;
    overflow-y: auto;
}

    main > div.highlight-container {
        position: absolute;
        height: 320px;
        top: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        padding: 10px;
    }

        main > div.highlight-container > div.post-box {
            position: relative;
            margin-bottom: 10px;
            width: 100%;
            height: 320px;
            text-align: center;
            cursor: pointer;
        }

            main > div.highlight-container > div.post-box img {
                max-width: 220px;
                max-height: 220px;
                border-radius: 10px;
            }

            main > div.highlight-container > div.post-box h4 {
                width: 100%;
                height: 40px;
                border-radius: 10px;
                font-weight: bold;
                font-size: 1.2rem;
                padding: 20px;
                letter-spacing: 1.5px;
                text-transform: uppercase;
            }

            main > div.highlight-container > div.post-box p {
                width: 100%;
                height: 40px;
                border-radius: 10px;
                font-style: italic;
                font-size: 1rem;
                padding: 10px;
            }

    main > div.posts-container {
        position: absolute;
        top: 350px;
        height: auto;
        bottom: 30px;
        left: 0;
        right: 0;
        /* overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto; */
        padding: 10px;
    }

        main > div.posts-container > div.post-box {
            position: relative;
            margin-bottom: 10px;
            height: 100px;
            cursor: pointer;
        }

            main > div.posts-container > div.post-box img {
                position: absolute;
                max-width: 100px;
                max-height: 100px;
                border-radius: 10px;
                left: 0;
                top: 0;
            }

            main > div.posts-container > div.post-box h4 {
                position: absolute;
                display: inline-flex;
                align-items: center;
                height: 50px;
                border-radius: 10px;
                top: 0;
                left: 100px;
                right: 0;
                font-weight: bold;
                font-size: 1.2rem;
                padding: 10px;
                letter-spacing: 1.5px;
                text-transform: uppercase;
            }

            main > div.posts-container > div.post-box p {
                position: absolute;
                display: inline-flex;
                align-items: center;
                height: 50px;
                border-radius: 10px;
                top: 50px;
                left: 100px;
                right: 0;
                font-style: italic;
                font-size: 0.9rem;
                padding: 10px;
            }

    main > div.toolbar-container {
        position: absolute;
        height: 40px;
        bottom: 0;
        left: 0;
        right: 0;
        /* overflow: hidden;
    overflow-x: hidden;
    overflow-y: auto; */
        padding: 10px;
    }

    main > div.detail-container {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        overflow: hidden;
        overflow-y: auto;
        padding: 10px;
    }

        main > div.detail-container > div.post-box {
            position: relative;
            margin-bottom: 10px;
            width: 100%;
            height: 100%;
            text-align: center;
        }

            main > div.detail-container > div.post-box img {
                max-width: 220px;
                max-height: 220px;
                border-radius: 10px;
            }

            main > div.detail-container > div.post-box h4 {
                width: 100%;
                height: 40px;
                border-radius: 10px;
                font-weight: bold;
                font-size: 1.5rem;
                padding: 20px;
                letter-spacing: 1.5px;
                text-transform: uppercase;
            }

            main > div.detail-container > div.post-box p {
                width: 100%;
                height: auto;
                /*height: 100%;*/
                /*overflow: hidden;
            overflow-y: auto;*/
                /*font-style: italic;*/
                font-size: 1.2rem;
                line-height: 1.6rem !important;
                padding-bottom: 10px !important;
                text-align: justify !important;
                /*line-height: 1.5rem;*/
            }

                main > div.detail-container > div.post-box p ul,
                main > div.detail-container > div.post-box p ol {
                    margin-left: 25px !important;
                    font-size: 1.2rem !important;
                    line-height: 1.1rem !important;
                }


.backoffice-post-item {
    background: rgb(242 242 242 / 0.1) !important;
    padding: 10px !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
}

    .backoffice-post-item p {
        /*color: rgb(0 0 0);*/
    }
