table.plans {
    margin: 1em;
}
table.plans tr.bl th, table.plans tr.bl td {
    border-bottom: 1px solid grey;
    border-top: 1px solid grey;
    background-color: #d9f0f0;
    padding: .5em .5em .6em .5em;
}
table.plans tr.bl th {
    white-space: nowrap;
}
table.plans td, table.plans th {
    text-align:center;
    vertical-align: middle;
    padding: .5em .5em .6em .5em;
    line-height: 1.5em;
}
table.plans th {
    font-weight: bold;
    color: black;
}
table.plans th.option {
    width: 200px;
    margin: 20px;
}
table.plans th.option span.tt {
     font-family: monospace;
}


/* line separating the paid plans */
table.plans tr td:nth-child(2) { border-left: 1px solid grey; }
table.plans tr th:nth-child(2) { border-left: 1px solid grey; }
table.plans tr td:nth-child(3) { border-left: 1px solid grey; }
table.plans tr th:nth-child(3) { border-left: 1px solid grey; }

/* .. */
table.plans span.happy {
    color: #00cc99;
    font-weight: bold;
}
table.plans span.happy a {
    color: #00cc99;
    font-weight: bold;
}

/* content of the table */
td.no::before {
    content: '\2013';
}
td.yes::before
{
    content: '\2713';
    color: #00cc99;
    font-weight: bold;
}
td.in_development::before
{
    content: 'coming soon';
}

/* features */
div.feature_explained
{
    display:block;
    overflow: hidden;
    margin-bottom: 3em;
}
div.feature_explained div.explanation
{
    width: 37%;
    line-height: 1.4em;
    margin-left: .5em;
}
div.feature_explained div.screenshot
{
    width: 55%;
    margin-right: 15px;
    height: 100%;
}
div.feature_explained img
{
    margin-top: 30px;
    max-width:100%;
    filter:drop-shadow(2px 2px 3px grey);
}