:root {
    --wordflow-font-size: 1rem;

    --wordflow-light-grey: #DBDBDB;
    --wordflow-dark-grey: #6C6B6B;
    --wordflow-yellow: #F7B852;
    --wordflow-blue: #2271B1;
    --wordflow-green: #10B530;
    --wordflow-red: #E00000;
    --btn-padding-x: 1.5rem;
}

body.toplevel_page_wordflow,
body.wordflow_page_wordflow_complete_overview,
body.wordflow_page_wordflow_add_new,
body.wordflow_page_wordflow_configuration {
   background-color: #f0f0f1;
}

.wordflow {
    /* All styles in this container */
    font-size: var(--wordflow-font-size);

    h1, h2, h3, h4, h5 {
        font-weight: normal;
    } 

    h1, h2, h3, h4 {
        font-size: 24px;
    }

    p {
        font-size: var(--wordflow-font-size);
    }

    a {
        color: var(--wordflow-blue);
    }

    img {
        max-width: 100%;
    }

    .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 5px;
        border-radius: 50%;
    }

    .bold {
        font-weight: bold;
    }

    .btn {
        padding-left: var(--btn-padding-x) ;
        padding-right: var(--btn-padding-x);
    }

    input[type="submit"] {
        padding-left: var(--btn-padding-x);
        padding-right: var(--btn-padding-x);
        background-color: var(--wordflow-blue);
        padding-top: 0.375rem;
        padding-bottom: 0.375rem;
        font-size: var(--wordflow-font-size);
        border-radius: 0.375rem;
    }

    .btn-primary {
        background-color: var(--wordflow-blue);
    }

    .bg-light-grey {
        background-color: var(--wordflow-light-grey);
    }

    .bg-yellow {
        background-color: var(--wordflow-yellow);
    }

    .bg-red {
        background-color: var(--wordflow-red);
    }

    .bg-blue {
        background-color: var(--wordflow-blue);
    }

    .bg-green {
        background-color: var(--wordflow-green);
    }

    .page-section {
        margin-bottom: 3em;
    }

    .text-red {
        color: var(--wordflow-red);
    }

    .text-yellow {
        color: var(--wordflow-yellow);
    }

    .text-green {
        color: var(--wordflow-green);
    }

    table.table {
        border-collapse: separate;
        border-spacing: 0 10px;
        margin-top: -10px; /* correct offset on first border spacing if desired */

        thead {
            tr {
                th {
                    border: none;
                    padding: 0 10px;
                }
            }
        }

        tbody {
            tr {
                border: 1px solid var(--wordflow-light-grey);
                border-radius: 7px;

                td {
                    border: 1px solid var(--wordflow-light-grey);
                    border-style: solid none;
                    padding: 10px;

                    &:first-child {
                        border-left-style: solid;
                        border-top-left-radius: 7px;
                        border-bottom-left-radius: 7px;
                    }

                    &:last-child {
                        border-right-style: solid;
                        border-bottom-right-radius: 7px;
                        border-top-right-radius: 7px;
                    }
                }

                a {
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    .overview-progress-bar {
        background-color: var(--wordflow-light-grey);
        border-radius: 8px;


        .progress-bar {
            background-color: var(--wordflow-dark-grey);
            border-radius: 0 30px 30px 0;
        }
    }

    .breakdown-progress-bar {
        border-radius: 8px;

        .draft {
            background-color: var(--wordflow-yellow);
        }

        .review {
            background-color: var(--wordflow-blue);
        }

        .published {
            background-color: var(--wordflow-green);
        }
    }

    label {
        font-weight: bolder;
    }

    &#wordflow-add-new-page {
        input[type="date"] {
            width: 100%;
        }
    }

    &.wrap {
        margin: 2em 2em 2em 1em;
        background: #FFF;
        padding: 2em;
    }

    select {
        font-size: var(--wordflow-font-size);
        max-width: none;
    }

    p.submit {
        margin: 0;
    }
}

.wordflow.wrap {
    margin: 2em;
    border: 1px solid #DBDBDB;
    border-radius: 10px;
}