@charset "UTF-8";
.k-editor-window:not(.k-editor-table-wizard-window) {
    width: 70% !important;
    height: 80vh !important;
    left: 30vh !important;
    top: 10vh !important;
    position: fixed;
}

.k-textarea.k-editor-textarea {
    width: 100%;
    height: calc(70vh - 100px);
    resize: none;
}

.k-window-actions {
    justify-content: center;
}
.k-form {
    width:100%;
}
.k-window-content.k-dialog-content:not(.k-editor-table-wizard-window) {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
    align-self: center;
    justify-self: center;
    display: flex;
    flex: 0 0 auto;
    overflow: auto;
    position: unset;
    align-items:center;
    min-height: 90px;
    height: auto;
}
.k-window-content:not(.k-editor-table-wizard-window):not(.k-dialog-content) {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
    align-self: center;
    justify-self: center;
    display: flex;
    padding: 0 10px 10px 10px;
    flex: 0 0 auto;
    overflow: auto;
    position: unset;
    min-height: calc(80vh - 56px);
    height: calc(80vh - 56px);
}
.k-filebrowser .k-filebrowser-toolbar {
    margin:0; 
}
.k-dialog .k-window-content .confirm-title {
    font-size: 16px;
    line-height: 30px;
    font-weight: 500;
    position: absolute;
    padding: 5px 10px;
    top: 22px;
    z-index: 9;
    width: 100%;
    margin: -1rem;
}
.k-dialog .k-window-content .confirm-body {
    font-size: 14px;
    font-weight: 500;
}
.k-dialog .k-window-titlebar {
    z-index:-1;
    position:relative;
}
.k-dialog .k-window-titlebar .k-dialog-title {
    visibility: hidden;
}
.k-dialog {
    min-width: 400px;
    min-height: 200px;
    justify-content: space-between;
    align-items: stretch;
}
.k-dialog-actions {
    border-top: solid 1px #dee2e6 !important;
}
.k-button {
    max-width: fit-content; 
    padding: 8px 30px;
}
.k-action-buttons, .k-actions, .k-columnmenu-actions, .k-edit-buttons, .k-form-buttons {
    justify-content:flex-end;
}
/*.k-editor-window .k-actions {
    margin-top: 20px;
    padding-right: 0;
}*/ 
.k-window.k-editor-window .k-actions {
    margin-top: 0px;
    padding-right: 0;
    border: unset;
}
.k-grid .k-command-cell {
    white-space: nowrap;
    padding: 5px .2rem;
}
.k-listview-content {
    margin: 0;
    padding: 0;
    outline: 0; 
    -ms-flex-positive: 1;
    flex-grow: 1;
    position: relative;
    overflow: auto;
    max-height: 240px;
}
hr, .hr {
    background-color: transparent !important;
    color: transparent !important;
    border-color: transparent !important;
    padding: 0 0 5px 0;
    cursor: default;
}
#templateWindow {
    display:flex;
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
}
#templateList {
    display: flex;
    flex-direction: row;
    width: 100%; 
    margin: 0;
}
#placeholderFormContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
}

.columns {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--column-gap);
}

    .columns.nogap {
        padding: 0;
        gap: 0;
    }

        .columns.nogap .column {
            padding: 0;
            overflow: hidden;
            align-items: center;
            width: 50%;
        }

    .columns .column {
        display: flex;
        flex-wrap: wrap;
        flex-direction:column;
        justify-content: stretch;
        align-items: flex-start;
        /*width: calc(50% - 71px);*/
        width: calc(var(--container) / 2 - var(--column-gap) / 2);
    }

        .columns .column.wauto {
            width: auto;
        }

        .columns .column.w100 {
            width: 100%;
            flex: 1;
        }

        .columns .column .imgBox {
            display: flex;
            width: 100%;
            height: 378px;
            border-radius: 16px;
            overflow: hidden;
        }

            .columns .column .imgBox img {
                height: 100%;
                width: 100%;
                -o-object-fit: cover;
                object-fit: cover;
            }

        .columns .column .titleBox {
            font-weight: 300;
            font-size: 40px;
            line-height: 100%;
            letter-spacing: -0.04em;
        }

            .columns .column .titleBox h1, .columns .column .titleBox h2, .columns .column .titleBox h3, .columns .column .titleBox h4, .columns .column .titleBox h5, .columns .column .titleBox h6, .columns .column .titleBox h7, .columns .column .titleBox div, .columns .column .titleBox span, .columns .column .titleBox p {
                font-weight: 300;
                font-size: 40px;
                line-height: 100%;
                letter-spacing: -0.04em;
            }

        .columns .column .descBox {
            font-weight: 300;
            font-size: 24px;
            line-height: 30px;
            letter-spacing: -0.02em;
        }

            .columns .column .descBox h1, .columns .column .descBox h2, .columns .column .descBox h3, .columns .column .descBox h4, .columns .column .descBox h5, .columns .column .descBox h6, .columns .column .descBox h7, .columns .column .descBox div, .columns .column .descBox span, .columns .column .descBox p {
                font-weight: 300;
                font-size: 24px;
                line-height: 30px;
                letter-spacing: -0.02em;
            }

            .columns .column .descBox strong {
                font-weight: 600;
            }

.template {
    border: solid 2px black;
    margin: 0 -2px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 0 10px 0;
    width: 280px;
}

.topknot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 0 70px;
    height: 302px;
    background: linear-gradient(180deg, #24B8C9 0%, #0696A7 100%);
    font-weight: 300;
    font-size: 60px;
    line-height: 66px;
    letter-spacing: -0.04em;
    text-align: center;
    color: rgb(255, 255, 255);
}

    .topknot h1, .topknot h2, .topknot h3, .topknot h4, .topknot h5, .topknot h6, .topknot h7, .topknot div, .topknot span, .topknot p {
        font-weight: 300;
        font-size: 60px;
        line-height: 66px;
        letter-spacing: -0.04em;
        text-align: center;
        color: rgb(255, 255, 255);
    }

.template .topknot {
    width: 276px;
    height: 70px;
    padding: 0 0 20px;
    font-weight: 300;
    color: #000;
    font-size: 7px;
    line-height: 100%;
    letter-spacing: -0.02em;
}

    .template .topknot h1, .template .topknot h2, .template .topknot h3, .template .topknot h4, .template .topknot h5, .template .topknot h6, .template .topknot h7, .template .topknot div, .template .topknot span, .template .topknot p {
        display: inline;
        background: #000;
        font-weight: 300;
        color: #000;
        font-size: 7px;
        line-height: 100%;
        letter-spacing: -0.02em;
    }

.summary {
    padding: 91px 0 56px;
}

    .summary .columns {
        gap: 142px;
    }

        .summary .columns .column:first-child {
            width: 550px;
            font-weight: 300;
            font-size: 40px;
            line-height: 120%;
            letter-spacing: -0.04em;
        }

            .summary .columns .column:first-child h1, .summary .columns .column:first-child h2, .summary .columns .column:first-child h3, .summary .columns .column:first-child h4, .summary .columns .column:first-child h5, .summary .columns .column:first-child h6, .summary .columns .column:first-child h7, .summary .columns .column:first-child div, .summary .columns .column:first-child span, .summary .columns .column:first-child p {
                font-weight: 300;
                font-size: 40px;
                line-height: 120%;
                letter-spacing: -0.04em;
            }

        .summary .columns .column:last-child {
            width: 663px;
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0em;
        }

            .summary .columns .column:last-child h1, .summary .columns .column:last-child h2, .summary .columns .column:last-child h3, .summary .columns .column:last-child h4, .summary .columns .column:last-child h5, .summary .columns .column:last-child h6, .summary .columns .column:last-child h7, .summary .columns .column:last-child div, .summary .columns .column:last-child span, .summary .columns .column:last-child p {
                font-weight: 400;
                font-size: 16px;
                line-height: 22px;
                letter-spacing: 0em;
            }

.template .summary {
    width: 276px;
    padding: 20px 0;
}

    .template .summary .columns {
        padding: 20px 0;
        gap: 30px;
    }

        .template .summary .columns .column {
            gap: 3px;
            display: inline;
        }

            .template .summary .columns .column:first-child {
                width: 70px;
                font-weight: 300;
                font-size: 8px;
                line-height: 100%;
                letter-spacing: -0.04em;
            }

                .template .summary .columns .column:first-child h1, .template .summary .columns .column:first-child h2, .template .summary .columns .column:first-child h3, .template .summary .columns .column:first-child h4, .template .summary .columns .column:first-child h5, .template .summary .columns .column:first-child h6, .template .summary .columns .column:first-child h7, .template .summary .columns .column:first-child div, .template .summary .columns .column:first-child span, .template .summary .columns .column:first-child p {
                    display: inline;
                    background: #000;
                    font-weight: 300;
                    font-size: 8px;
                    color:#000;
                    line-height: 100%;
                    letter-spacing: -0.04em;
                }

            .template .summary .columns .column:last-child {
                width: 110px;
                font-weight: 300;
                font-size: 4px;
                line-height: 7px;
                letter-spacing: -0.02em;
            }

                .template .summary .columns .column:last-child h1, .template .summary .columns .column:last-child h2, .template .summary .columns .column:last-child h3, .template .summary .columns .column:last-child h4, .template .summary .columns .column:last-child h5, .template .summary .columns .column:last-child h6, .template .summary .columns .column:last-child h7, .template .summary .columns .column:last-child div, .template .summary .columns .column:last-child span, .template .summary .columns .column:last-child p {
                    display: inline;
                    background: #000;
                    font-weight: 300;
                    color: #000;
                    font-size: 3px;
                    line-height: 100%;
                    letter-spacing: -0.02em;
                }

.spread .columns {
    align-items: center;
    padding: 100px 0;
    background: rgb(202, 237, 241);
}

    .spread .columns:nth-child(2n+2) {
        background: transparent;
        flex-direction: row-reverse;
    }

    .spread .columns .column {
        gap: 20px;
    }

.spread.hastitle .titleBox {
    display: flex;
    width: 900px;
    flex-basis: 900px;
    max-width: 100%;
    margin: 0 calc((100% - 900px) / 2);
    font-weight: 300;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.02em;
    text-align: center;
}

    .spread.hastitle .titleBox h1, .spread.hastitle .titleBox h2, .spread.hastitle .titleBox h3, .spread.hastitle .titleBox h4, .spread.hastitle .titleBox h5, .spread.hastitle .titleBox h6, .spread.hastitle .titleBox h7, .spread.hastitle .titleBox div, .spread.hastitle .titleBox span, .spread.hastitle .titleBox p {
        font-weight: 300;
        font-size: 24px;
        line-height: 30px;
        letter-spacing: -0.02em;
        text-align: center;
    }

.spread.hastitle .columns {
    align-items: flex-start;
}

    .spread.hastitle .columns .column .descBox {
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0em;
    }

        .spread.hastitle .columns .column .descBox h1, .spread.hastitle .columns .column .descBox h2, .spread.hastitle .columns .column .descBox h3, .spread.hastitle .columns .column .descBox h4, .spread.hastitle .columns .column .descBox h5, .spread.hastitle .columns .column .descBox h6, .spread.hastitle .columns .column .descBox h7, .spread.hastitle .columns .column .descBox div, .spread.hastitle .columns .column .descBox span, .spread.hastitle .columns .column .descBox p {
            font-weight: 400;
            font-size: 16px;
            line-height: 22px;
            letter-spacing: 0em;
        }

    .spread.hastitle .columns:nth-child(2n+2) .column .descBox {
        font-weight: 400;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 0em;
    }

        .spread.hastitle .columns:nth-child(2n+2) .column .descBox h1, .spread.hastitle .columns:nth-child(2n+2) .column .descBox h2, .spread.hastitle .columns:nth-child(2n+2) .column .descBox h3, .spread.hastitle .columns:nth-child(2n+2) .column .descBox h4, .spread.hastitle .columns:nth-child(2n+2) .column .descBox h5, .spread.hastitle .columns:nth-child(2n+2) .column .descBox h6, .spread.hastitle .columns:nth-child(2n+2) .column .descBox h7, .spread.hastitle .columns:nth-child(2n+2) .column .descBox div, .spread.hastitle .columns:nth-child(2n+2) .column .descBox span, .spread.hastitle .columns:nth-child(2n+2) .column .descBox p {
            font-weight: 400;
            font-size: 18px;
            line-height: 24px;
            letter-spacing: 0em;
        }

        .spread.hastitle .columns:nth-child(2n+2) .column .descBox strong h1, .spread.hastitle .columns:nth-child(2n+2) .column .descBox strong h2, .spread.hastitle .columns:nth-child(2n+2) .column .descBox strong h3, .spread.hastitle .columns:nth-child(2n+2) .column .descBox strong h4, .spread.hastitle .columns:nth-child(2n+2) .column .descBox strong h5, .spread.hastitle .columns:nth-child(2n+2) .column .descBox strong h6, .spread.hastitle .columns:nth-child(2n+2) .column .descBox strong h7, .spread.hastitle .columns:nth-child(2n+2) .column .descBox strong div, .spread.hastitle .columns:nth-child(2n+2) .column .descBox strong span, .spread.hastitle .columns:nth-child(2n+2) .column .descBox strong p {
            font-weight: 300;
            font-size: 24px;
            line-height: 24px;
            letter-spacing: 0em;
        }

.template .spread {
    width: 276px;
}

    .template .spread .columns {
        padding: 10px 0;
        gap: 10px;
    }

        .template .spread .columns .column {
            width: 100px;
            gap: 5px;
        }

            .template .spread .columns .column .imgBox {
                height: 70px;
                border-radius: 8px;
                background: #000;
            }

                .template .spread .columns .column .imgBox img {
                    display: none;
                }

            .template .spread .columns .column .titleBox {
                font-weight: 300;
                font-size: 4px;
                line-height: 100%;
                letter-spacing: -0.04em;
            }

                .template .spread .columns .column .titleBox h1, .template .spread .columns .column .titleBox h2, .template .spread .columns .column .titleBox h3, .template .spread .columns .column .titleBox h4, .template .spread .columns .column .titleBox h5, .template .spread .columns .column .titleBox h6, .template .spread .columns .column .titleBox h7, .template .spread .columns .column .titleBox div, .template .spread .columns .column .titleBox span, .template .spread .columns .column .titleBox p {
                    display: inline;
                    background: #000;
                    font-weight: 300;
                    font-size: 4px;
                    line-height: 100%;
                    letter-spacing: -0.04em;
                }

            .template .spread .columns .column .descBox {
                font-weight: 300;
                font-size: 4px;
                line-height: 7px;
                letter-spacing: -0.02em;
            }

                .template .spread .columns .column .descBox h1, .template .spread .columns .column .descBox h2, .template .spread .columns .column .descBox h3, .template .spread .columns .column .descBox h4, .template .spread .columns .column .descBox h5, .template .spread .columns .column .descBox h6, .template .spread .columns .column .descBox h7, .template .spread .columns .column .descBox div, .template .spread .columns .column .descBox span, .template .spread .columns .column .descBox p {
                    display: inline;
                    background: #000;
                    font-weight: 300;
                    font-size: 3px;
                    line-height: 100%;
                    letter-spacing: -0.02em;
                }

        .template .spread .columns:nth-child(2n+2) .column {
            width: 100px;
        }

            .template .spread .columns:nth-child(2n+2) .column .descBox {
                font-weight: 300;
                font-size: 4px;
                line-height: 7px;
                letter-spacing: -0.02em;
            }

                .template .spread .columns:nth-child(2n+2) .column .descBox h1, .template .spread .columns:nth-child(2n+2) .column .descBox h2, .template .spread .columns:nth-child(2n+2) .column .descBox h3, .template .spread .columns:nth-child(2n+2) .column .descBox h4, .template .spread .columns:nth-child(2n+2) .column .descBox h5, .template .spread .columns:nth-child(2n+2) .column .descBox h6, .template .spread .columns:nth-child(2n+2) .column .descBox h7, .template .spread .columns:nth-child(2n+2) .column .descBox div, .template .spread .columns:nth-child(2n+2) .column .descBox span, .template .spread .columns:nth-child(2n+2) .column .descBox p {
                    display: inline;
                    background: #000;
                    font-weight: 300;
                    font-size: 3px;
                    line-height: 100%;
                    letter-spacing: -0.02em;
                }

    .template .spread.hastitle .columns .titleBox {
        width: 100%;
        flex-basis: 190px;
        max-width: 100%;
        margin: 0 40px;
        font-weight: 300;
        font-size: 4px;
        line-height: 100%;
        letter-spacing: -0.04em;
    }

        .template .spread.hastitle .columns .titleBox h1, .template .spread.hastitle .columns .titleBox h2, .template .spread.hastitle .columns .titleBox h3, .template .spread.hastitle .columns .titleBox h4, .template .spread.hastitle .columns .titleBox h5, .template .spread.hastitle .columns .titleBox h6, .template .spread.hastitle .columns .titleBox h7, .template .spread.hastitle .columns .titleBox div, .template .spread.hastitle .columns .titleBox span, .template .spread.hastitle .columns .titleBox p {
            display: inline;
            background: #000;
            font-weight: 300;
            font-size: 4px;
            line-height: 100%;
            letter-spacing: -0.04em;
        }