/* ==========================================================================
   General
   ========================================================================== */

.aligncenter {
    text-align: center;
}

ul.disk-check-green {
    margin-left: 0;
}

ul.disk-check-green li {
    font-size: 1em;
    list-style-type: none;
    background: url(/wp-content/plugins/bwp-foundation/images/icons/check-disk-green.svg) no-repeat 5px 3px;
    background-size: 1.2em;
    padding: 0 0 0.3em 2em;
    margin-left: 1em;
    vertical-align: middle;
}

.entry-content span.highlight {
    font-weight: bold;
    color: #E5554E;
}

.entry-content a.aff-link {
    /* Color is set dinamically in options */
    /* color: #E5554E; */
    /* color: #1866BF; */
    font-weight: bold;
}

.entry-content a.aff-link:hover {
    /* Color is set dinamically in options */
    /* color: orange; */
    /* color: #124989; */
}

/*
.entry-content a.aff-link img {
    max-width: 400px;
}

 */

.hosting-banner {
    margin-left: 20%;
    margin-right: 20%;
    text-align: left;
}

.hosting-banner li.small {
    display: none;
}

@media (max-width: 720px) {
    .hosting-banner {
        margin-left: 10%;
        margin-right: 10%;
    }
}

@media (max-width: 600px) {
    .hosting-banner {
        margin-left: 0;
        margin-right: 0;
    }

    .hosting-banner li.large {
        display: none;
    }

    .hosting-banner li.small {
        display: inherit;
        line-height: 1.8em;
    }

    ul.disk-check-green li {
        margin-left: 0;
    }
}

/* ==========================================================================
   Hosting comparison table.
   Responsive by CSS: the scroll wrapper lets the table scroll horizontally on narrow screens,
   so no JavaScript and no duplicated markup are needed.
   ========================================================================== */

.hosting-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hosting-table {
    width: 100%;
    margin: 20px 0;
    font-family: "Open Sans", sans-serif;
}

.hosting-table table {
    min-width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    margin-bottom: 0;
}

.hosting-table img {
    width: 96px;
    height: auto;
    max-width: none;
}

.hosting-table th,
.hosting-table td {
    line-height: 1.3em;
    height: 36px;
    padding: 5px;
    text-align: center;
    font-size: 14px;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    border: 1px solid #ddd;
}

.hosting-table td:first-child,
.hosting-table th:first-child {
    text-align: left;
    min-width: 80px;
    background-color: #eee;
}

.hosting-table tbody tr:nth-child(even) {
    background-color: #eee;
}

.hosting-table .group-row td,
.hosting-table:not(.hosting-table--transposed) thead th {
    background-color: #244150;
    color: #fff;
    font-weight: bold;
    border: none;
}

.hosting-table .button-row td a,
.hosting-table td.button-cell a {
    display: inline-block;
    background-color: darkgreen;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
}

.hosting-table .button-row td a:hover,
.hosting-table td.button-cell a:hover {
    background-color: green;
}

.hosting-table td.best-cell {
    color: green;
    font-weight: bold;
}

.hosting-table .wp-caption-text {
    font-size: 14px;
    margin-top: 6px;
    text-align: center;
}

/* ==========================================================================
   Pros/cons box.
   ========================================================================== */

.bwp-proscons {
    background: #f9f9f9;
    border: dashed 2px green;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 30px auto;
    font-size: 0.825em;
}

.bwp-proscons .heading {
    font-size: 28px;
    text-align: center;
    font-weight: bold;
    margin: 20px 0;
}

.bwp-proscons .boxs {
    margin-top: 38px;
    display: flex;
    flex-flow: row wrap;
    padding: 8px;
}

.bwp-proscons .boxs .box {
    background: #fff;
    margin: 0 10px;
    border: 1px solid #eee;
}

.bwp-proscons .boxs > div {
    flex: 1 0 0;
}

.bwp-proscons .boxs .header {
    margin-bottom: 12px;
    margin-top: -24px;
    text-align: center;
}

.bwp-proscons .box-symbol {
    width: 48px;
    height: 48px;
    position: relative;
    border-radius: 100%;
    margin: 0 auto;
    text-align: center;
}

.bwp-proscons .pros-content .box-symbol {
    color: #fff;
    background: #00B050;
}

.bwp-proscons .cons-content .box-symbol {
    color: #fff;
    background: red;
}

.bwp-proscons .boxs ul {
    list-style: none;
    margin: 0;
    padding: 0 20px;
}

.bwp-proscons .header .box-symbol img {
    width: 18px;
}

.bwp-proscons .box-symbol img {
    width: 18px;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.bwp-proscons .boxs ul li {
    list-style-type: none;
    display: flex;
    align-items: flex-start;
}

.bwp-proscons ul.pros-cons-list li {
    position: relative;
    margin: 6px 0;
    width: 100%;
    min-height: 22px;
}

.bwp-proscons .pros-content ul li::before {
    background-image: url(../images/icons/check-disk-green.svg);
}

.bwp-proscons .cons-content ul li::before {
    background-image: url(../images/icons/cross-disk-red.svg);
}

.bwp-proscons ul li::before {
    content: '';
    height: 1.3em;
    padding-right: 22px;
    background-size: 16px;
    background-position: left calc(50% + 2px);
    background-repeat: no-repeat;
}

.bwp-proscons .boxs .header .content-title {
    margin-top: 10px;
}

.bwp-proscons .boxs .box .header .content-title {
    font-size: 1.4em;
    line-height: 1.3;
    font-weight: 600;
}

.bwp-proscons .verdict-wrapper {
    margin: 16px 20px;
    text-align: justify;
    text-justify: inter-word;
}

@media screen and (max-width: 767px) {
    .bwp-proscons .boxs {
        display: block;
    }

    .bwp-proscons .boxs .box:not(:last-child) {
        margin-bottom: 20px;
    }

    .bwp-proscons .cons-content {
        margin-top: 30px;
    }
}

/* ==========================================================================
   Benchmark captures bar: three provider test screenshots (page load, stress, uptime) with a
   lightbox that shows the full image, centered on the viewport regardless of scroll position.
   ========================================================================== */

.benchmark-caps {
    position: relative;
    margin: 20px 0;
}

.benchmark-caps__legend {
    margin: 10px 0 0;
    font-size: 14px;
    color: #666;
    text-align: center;
}

.benchmark-caps__row {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
}

.benchmark-caps__col {
    flex: 1 0 0;
}

.benchmark-caps__header {
    background-color: #244150;
    color: #fff;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    padding: 8px 6px;
}

.benchmark-caps__thumb {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
    border-top: none;
    background: none;
    cursor: pointer;
}

.benchmark-caps__thumb img {
    display: block;
    width: 100%;
    height: auto;
}

.benchmark-caps__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
}

.benchmark-caps__frame {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    box-sizing: border-box;
    width: min(94vw, 1100px);
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    padding: 10px;
}

.benchmark-caps--open .benchmark-caps__backdrop,
.benchmark-caps--open .benchmark-caps__frame {
    display: block;
}

.benchmark-caps__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #444;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.benchmark-caps__full-img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {
    .benchmark-caps__row {
        display: block;
    }

    .benchmark-caps__col:not(:last-child) {
        margin-bottom: 10px;
    }
}