.viewport {

        width: 100%;
        border-color: #ff0000;
        /* border-style: dotted; */
        /* border-width: 1px; */
    }

    .embed-container {
        position: relative;
        width: 100%;
        /* border-style: dotted; */
        /* border-width: 1px; */
    }

    /* iframe im embed-container*/
    .embed-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .loading_page {
        width: 30px;
        height: 30px;
        position: relative;
        left: 50%;

        border: 6px solid #f3f3f3;
        border-top: 6px solid #871d33;
        border-radius: 50%;
        animation: custom_spin 1s infinite linear;
    }

    @keyframes custom_spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* Template Styles */
    .viewport {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .viewport.template-w-100>div {
        flex: 1 1 100%;
        box-sizing: border-box;
    }

    .viewport.template-w-50>div {
        flex: 1 1 calc(50% - 0.5rem);
        box-sizing: border-box;
    }

    .viewport.template-w-75>div:nth-child(odd) {
        flex: 0 0 calc(75% - 0.5rem);
    }

    .viewport.template-w-75>div:nth-child(even) {
        flex: 0 0 calc(25% - 0.5rem);
    }

    @media only screen and (max-width: 768px) {
        .viewport>div {
            flex: 1 1 100% !important;
        }
    }