﻿
.comparison-desktop-table h3 {
    font-size: 25px
}

.comparison-desktop-table h2 {
    font-weight: 700;
    font-size: 2.4em;
    margin: 0
}

.comparison-desktop-table .price {
    font-weight: 400;
    font-size: 24px
}

.comparison-desktop-table a:not(.btn) {
    color: #333740
}

.comparison-desktop-table .compare-features-table td {
    vertical-align: middle
}

.comparison-desktop-table .compare-features-table thead tr div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.comparison-desktop-table .compare-features-table .h2-margin {
    margin-bottom: 0;
}

.comparison-desktop-table .compare-features-table .material-icons.color-green {
    color: #5fa656;
}

.comparison-desktop-table .compare-features-table .tr-bg-white {
    background: white;
}

@media only screen and (min-width: 992px) {
    .comparison-desktop-table .table-striped thead tr td,
    .comparison-desktop-table .table-striped thead tr th,
    .comparison-desktop-table .table-striped thead tr:first-child td,
    .comparison-desktop-table .table-striped thead tr:first-child th {
        border-top: none;
        border-bottom: none;
        padding: 12px 16px
    }

        .comparison-desktop-table .table-striped thead tr th:nth-child(2),
        .comparison-desktop-table .table-striped thead tr th:nth-child(3),
        .comparison-desktop-table .table-striped thead tr:first-child th:nth-child(2),
        .comparison-desktop-table .table-striped thead tr:first-child th:nth-child(3) {
            border-right: 1px solid #eef4f9
        }

    .comparison-desktop-table .compare-features-table td,
    .comparison-desktop-table .compare-features-table th,
    .comparison-desktop-table .table-striped tbody tr td:nth-child(2),
    .comparison-desktop-table .table-striped tbody tr td:nth-child(3) {
        border-right: 1px solid #e2e7e9
    }

    .comparison-desktop-table .table-striped tbody tr:nth-of-type(odd) {
        background-color: #eef4f9
    }

    .comparison-desktop-table .table-striped tbody tr td,
    .comparison-desktop-table .table-striped tbody tr th {
        border-top: none;
        border-bottom: none;
        padding: 12px 16px;
        font-size: 14px
    }

    .comparison-desktop-table .compare-features-table {
        margin-top: 4vh
    }

        .comparison-desktop-table .compare-features-table thead tr td,
        .comparison-desktop-table .compare-features-table thead tr th,
        .comparison-desktop-table .compare-features-table thead tr:first-child td,
        .comparison-desktop-table .compare-features-table thead tr:first-child th {
            padding: 24px 12px
        }

        .comparison-desktop-table .compare-features-table .learn-mores {
            margin-top: 12px;
            font-size: 12px;
            text-decoration: underline
        }

        .comparison-desktop-table .compare-features-table .btn {
            margin: 2vh auto
        }
}


/*V2 styling (can live in global scope)*/

.comparison-desktop-table.v2 {
}

    .comparison-desktop-table.v2 thead .table-heading {
        padding-left: 0 !important;
    }

        .comparison-desktop-table.v2 thead .table-heading h2 {
            font-weight: 900;
            font-size: 40px;
            margin: 0;
        }

        .comparison-desktop-table.v2 thead .table-heading h3 {
            font-weight: 400;
            font-size: 20px;
            line-height: 24px;
            max-width: 421px;
        }

    .comparison-desktop-table.v2 thead .product-name {
        font-size: 22px;
        line-height: 26px;
    }

        .comparison-desktop-table.v2 thead .product-name a:hover {
            text-decoration: underline;
        }

    .comparison-desktop-table.v2 thead .product-brand {
        font-weight: 400;
    }

    .comparison-desktop-table.v2 thead .price {
        font-size: 20px;
        font-weight: 400;
    }

    .comparison-desktop-table.v2 thead tr .btn {
        font-size: 16px;
        line-height: 19px;
    }

    .comparison-desktop-table.v2 thead tr {
        border-bottom: solid 2px #D8D8DF; /*Knight Grey*/
    }

    .comparison-desktop-table.v2 tbody tr {
        border-bottom: solid 2px rgba(216,216,223,0.4); /*Knight Grey 40% opacity*/
    }

    .comparison-desktop-table.v2 .feature-text {
        font-size: 18px;
        padding-left: 0;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .comparison-desktop-table.v2 .compare-features-table tr td,
    .comparison-desktop-table.v2 .compare-features-table tr th {
        border-right: unset;
    }

    .comparison-desktop-table.v2 .web-feature {
        background-color: #E3FAEF;
    }

        .comparison-desktop-table.v2 .web-feature .btn {
            background-color: #1B8550; /*Jade to match btn-secondary*/
            color: #fff;
        }

    .comparison-desktop-table.v2 th.web-feature {
        border-radius: 8px 8px 0 0;
    }

    .comparison-desktop-table.v2 tbody tr:last-child {
        border-bottom: unset;
    }

        .comparison-desktop-table.v2 tbody tr:last-child td.web-feature {
            border-radius: 0 0 8px 8px;
        }

    .comparison-desktop-table.v2.has-early-bird .compare-features-table thead .price-renew-block {
        margin-bottom: 0;
        font-size: 20px;
        font-weight: 400;
    }

        .comparison-desktop-table.v2.has-early-bird .compare-features-table thead .price-renew-block,
        .comparison-desktop-table.v2.has-early-bird .compare-features-table thead .price-renew-block * {
            display: inline-block;
        }

            .comparison-desktop-table.v2.has-early-bird .compare-features-table thead .price-renew-block .early-bird-text {
                font-size: 10px;
                color: inherit;
                font-weight: 600;
            }

    .comparison-desktop-table.v2.has-early-bird .compare-features-table thead .feature-column a.btn {
        margin: 10px 0 10px;
    }

    .comparison-desktop-table.v2.has-early-bird .compare-features-table thead .price-renew-block,
    .comparison-desktop-table.v2.has-early-bird .compare-features-table thead .price {
        min-height: 54px;
    }

    .comparison-desktop-table.v2.has-early-bird .price-renew-block .price-wrapper + .price-wrapper {
        margin-left: 4px;
    }

    .comparison-desktop-table.v2.has-early-bird .price-renew-block .price-wrapper .price-slash {
        top: 12px;
        left: 0;
    }

    .comparison-desktop-table.v2.has-early-bird .product-tiles .price-renew-block .price-wrapper {
        font-size: 20px;
        font-weight: 400;
    }

@media (min-width: 768px) and (max-width: 992px) {
    .comparison-desktop-table.v2 .container {
        width: unset;
    }

    .comparison-desktop-table.v2 thead .table-heading h2 {
        font-size: 32px;
    }

    .comparison-desktop-table.v2 thead .table-heading h3 {
        font-size: 16px;
    }

    .comparison-desktop-table.v2 thead tr .btn {
        padding: 16px 20px;
    }

    .comparison-desktop-table.v2 thead tr .product-brand::after {
        content: "\A"; /* inserts a line break */
        white-space: pre; /* ensures the line break is rendered */
    }

    .comparison-desktop-table.v2 .feature-text {
        font-size: 16px;
    }
}

@media (min-width: 768px) {
    /*table header only for mobile*/
    .comparison-desktop-table.v2 .comparison-desktop-table-header,
    .comparison-desktop-table.v2 .product-tiles {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .comparison-desktop-table.v2 thead .price,
    .comparison-desktop-table.v2 thead .price-renew-block,
    .comparison-desktop-table.v2 thead .btn,
    .comparison-desktop-table.v2 thead .table-heading h2,
    .comparison-desktop-table.v2 thead .table-heading h3 {
        display: none !important;
    }

    .comparison-desktop-table.v2.has-early-bird .compare-features-table thead tr > div {
        display: inline-block;
    }

    .comparison-desktop-table.v2 .feature-text {
        font-size: 16px;
    }

    .comparison-desktop-table.v2 .feature-column {
        max-width: 63px;
    }

    .comparison-desktop-table.v2 .compare-features-table thead tr div {
        justify-content: left;
        align-items: unset;
    }

    .comparison-desktop-table.v2 .feature-column .product-name {
        transform: rotate(270deg);
        display: inline-block;
        white-space: nowrap;
    }

    .comparison-desktop-table.v2 thead tr th {
        padding-top: 110px !important;
    }

    .comparison-desktop-table.v2 .product-tiles {
        text-align: center;
    }

        .comparison-desktop-table.v2 .product-tiles .product-name {
            font-size: 22px;
            line-height: 26px;
            font-weight: 900;
        }

            .comparison-desktop-table.v2 .product-tiles .product-name a:hover {
                text-decoration: underline;
            }

        .comparison-desktop-table.v2 .product-tiles .product-brand {
            font-weight: 400;
        }

        .comparison-desktop-table.v2 .product-tiles .price {
            font-size: 20px;
        }

        .comparison-desktop-table.v2 .product-tiles .btn {
            font-size: 16px;
            line-height: 19px;
            max-width: 250px;
            margin-left: auto;
            margin-right: auto;
        }

        .comparison-desktop-table.v2 .product-tiles .product-tile {
            padding: 30px;
            min-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }

        .comparison-desktop-table.v2 .product-tiles .web-feature {
            border-radius: 8px;
        }

        .comparison-desktop-table.v2 .product-tiles .product-tile:last-child {
            border-bottom: solid 2px #D8D8DF; /*Knight Grey*/
        }
}
