/* -------------------------------- 

File#: _1_cross-table
Title: Cross Table
Descr: Two-way data tables used to display correlation between row and column variables
Usage: codyhouse.co/license

-------------------------------- */

/* reset */
*,
*::after,
*::before {
    box-sizing: border-box;
}

* {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1.125rem; /* 18px */
    line-height: 1.4;
}

h1,
h2,
h3,
h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
}

ol,
ul,
menu {
    list-style: none;
}

button,
input,
textarea,
select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
}

textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
}

/* -------------------------------- 

Buttons 

-------------------------------- */

.cd-btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375em;
    font-size: 1em;
    text-decoration: none;
    line-height: 1.2;
    cursor: pointer;
    transition: 0.2s;
    will-change: transform;
}

.cd-btn:focus-visible {
    outline: none;
}

.cd-btn:active {
    transform: translateY(2px);
}

.cd-btn--primary {
    background: hsl(219.25deg 61.02% 35.21%);
    color: hsl(0, 0%, 100%);
}

.cd-btn--primary:hover {
    background: hsl(219.25deg 50.46% 45.12%);
}

.cd-btn--current {
    background: hsl(219.25deg 14.57% 48.91%);
    color: hsl(0deg 0% 100%);
    pointer-events: none;
}

/* -------------------------------- 

Icons 

-------------------------------- */

.cd-icon {
    --size: 1em;
    font-size: var(--size);
    height: 1em;
    width: 1em;
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
}

.cd-icon use {
    /* SVG symbols - enable icon color corrections */
    color: inherit;
    fill: currentColor;
}

/* -------------------------------- 

Component 

-------------------------------- */

.cross-table {
    position: relative;
    z-index: 1;
    width: 100%;
}

.cross-table .cd-btn {
    width: 100%;
}

.cross-table__icon {
    /* e.g., checkbox icon */
    --size: 20px;
}

.cross-table__icon--grey {
    color: hsl(250, 4%, 50%) !important;
}

.cross-table__icon--blue {
    color: hsl(213, 48%, 50%) !important;
}

/* mobile only 👇 */
@media not all and (min-width: 42.5rem) {
    .cross-table {
        display: block;
        overflow: hidden;
    }

    .cross-table .cd-btn {
        font-size: 0.9375rem;
    }

    .cross-table__header {
        /* visually hidden - still accessible to SR */
        position: absolute;
        -webkit-clip-path: inset(50%);
        clip-path: inset(50%);
        width: 1px;
        height: 1px;
        overflow: hidden;
        padding: 0;
        border: 0;
        white-space: nowrap;
    }

    .cross-table__body {
        position: relative;
        display: flex;
        max-width: 100%;
        overflow: auto;
        padding: 32px 0 1rem; /* padding-top must be equal to .cross-table__cell height */
    }

    .cross-table__body::-webkit-scrollbar {
        /* custom scrollbar style */
        height: 10px;
    }

    .cross-table__body::-webkit-scrollbar-track {
        /* progress bar */
        background-color: hsl(240, 4%, 95%);
        border-radius: 50em;
    }

    .cross-table__body::-webkit-scrollbar-thumb {
        /* handle */
        background-color: hsla(230, 13%, 9%, 0.2);
        border: 2px solid transparent;
        background-clip: content-box;
        border-radius: 50em;
    }

    .cross-table__body::-webkit-scrollbar-thumb:hover {
        background-color: hsla(230, 13%, 9%, 0.3);
    }

    .cross-table__body::after {
        /* right margin at end of scrolling area */
        content: "";
        display: block;
        height: 1px;
        padding-left: 1px;
    }

    .cross-table__row {
        /* card */
        display: flex;
        flex-direction: column;
        width: 260px; /* card width */
        flex-shrink: 0;
        /* margin-right: 1rem; */
    }

    .cross-table__cell {
        --cell-border-width: 1px;
        display: flex;
        padding: 0.5rem 0.75rem;
        justify-content: space-between;
        align-items: center;
        min-height: 54px;

        text-align: left;
        line-height: 1;
        font-size: 1rem;

        background-color: hsl(0, 0%, 100%);
        border-top-width: var(--cell-border-width);
        border-left-width: var(--cell-border-width);
        border-right-width: var(--cell-border-width);
        border-style: solid;
        border-color: hsla(230, 13%, 9%, 0.1);
    }

    .cross-table__cell:first-child {
        /* card title */
        border-left-width: var(--cell-border-width);
        border-top-width: var(--cell-border-width);
        border-radius: 0.375em 0.375em 0 0;
        background-color: hsla(230, 13%, 9%, 0.075);
        font-weight: 600;
        color: hsl(230, 13%, 9%);
    }

    .cross-table__cell:last-child {
        border-right-width: var(--cell-border-width);
        border-bottom-width: var(--cell-border-width);
        border-radius: 0 0 0.375em 0.375em;
    }

    .cross-table__label {
        display: inline;
        margin-right: 0.75rem;
    }

    .cross-table__row--w-full {
        position: absolute;
        top: 0;
        left: 0;
        width: auto;
    }

    .cross-table__row--w-full .cross-table__cell {
        /* labels on top of the table */
        border: none; /* reset */
        background-color: transparent;
        font-weight: normal;
        min-height: 0;
        height: 32px; /* must be equal to .cross-table__body padding-top */
        padding: 0 0.75rem;
        font-size: 0.9375rem;
        color: hsl(225, 4%, 47%);
    }
}

/* desktop only */
@media (min-width: 42.5rem) {
    .cross-table {
        font-size: 0.9375rem;
    }

    .cross-table__row .cross-table__cell:first-child {
        border-left-width: 0;
    }

    .cross-table__row .cross-table__cell:last-child {
        border-right-width: 0;
    }

    .cross-table__header .cross-table__cell {
        border-top-width: 0;
    }

    .cross-table__row--w-full {
        /* row with cell spanning full width */
        background-color: hsl(240, 4%, 95%);
    }

    .cross-table__row--w-full .cross-table__cell {
        font-weight: 600;
    }

    .cross-table__cell {
        border: 1px solid hsl(240, 4%, 90%); /* border style */
        border-bottom-width: 0;
        padding: 0.75rem;
        text-align: center;
        min-width: 250px;
    }

    .cross-table__cell:first-child {
        text-align: left;
    }

    .cross-table__label {
        /* inline copy of column headers (js-cross-table__label) */
        display: none; /* visible only in the card layout 👇 */
    }

    .cross-table__description {
        color: hsl(225, 4%, 47%);
        font-size: var(--text-size-95);
    }
}

/* -------------------------------- 

Utilities 

-------------------------------- */

.cd-link {
    color: hsl(213, 74%, 20%);
    text-decoration: none;
    background-image: linear-gradient(
        to right,
        hsl(213, 74%, 20%) 50%,
        hsla(213, 74%, 20%, 0.2) 50%
    );
    background-size: 200% 1px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: background-position 0.2s;
    font-size: var(--text-size-95);
}

.cd-link:hover {
    background-position: 0% 100%;
}

.cd-margin-bottom-2xs {
    margin-bottom: 0.75rem;
}

.outer_plans_div {
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    /* Vertically center */
    margin-top: var(--sp-x);
}

.inner_plans_div {
    display: flex;
    flex-direction: column;
     align-items: center;
    margin-bottom: var(--sp-x);
}

.inner_plans_div_checkout {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--sp-x);
    padding:0 var(--sp-s);
}

.plans_header_section {
    width: 100%;
    display: flex;
    margin: var(--sp-x) 0px;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.top_p_plan_hd {
    color: #4279bc;
    margin-bottom: var(--sp-m);
    text-align: center;
}

.sub_p_plan_hd {
    text-align: center;
    font-size: var(--text-size-200);
    margin: var(--sp-x) 0;
    color: #191e2d;
    max-width: 700px;
    font-weight: 200;
}

.plans_color {
    padding: var(--sp-m);
    background-color: #b8d7ff2e;
    border-radius: 0.25em;
}

.min_txt_gr {
    font-size: var(--text-size-90);
    color: grey;
}

.team_size_choice_div {
    display: flex;
    justify-content: center;
    gap: 5px;
}

.team_selector_sl {
    min-width: 50px;
    text-align: start;
    border: 1px solid #a19f9f;
    border-radius: 0.25em;
    padding: 0px 15px 0px 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 1em;
}

/* For Firefox - removes the default arrow */
.team_selector_sl::-ms-expand {
    display: none;
}

.team_price_p_br {
    text-align: center;
    position: relative;
    border-bottom: 1px solid lightgrey;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.costs_hd_bd {
    font-size: var(--text-size-200);
    font-weight: bold;
}

#details {
    margin-top: var(--sp-xx);
    padding: 0 var(--sp-x);
}

.unlimited_falex_div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.center_team_price {
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 767px) {
    .cross-table__body {
        position: relative;
        display: flex;
        max-width: 100%;
        overflow: none;
        padding: 10px;
        flex-direction: column;
        gap: 10px;
    }

    .help_row {
        display: none !important;
    }

    .inhalte_row {
        display: none !important;
    }

    .plans_header_section {
        margin: var(--sp-xs) 0px;
        padding: 0 var(--sp-x);
    }

    .team_price_p_br {
        text-align: end;
    }

    #details {
        margin-top: 0;
        padding: 0 var(--sp-s);
    }

    .need_custom_outer {
        margin: var(--sp-s) var(--sp-xs);
        background-color: #f1f7fe;
        padding: var(--sp-s);
        border-radius: 0.25em;
    }

    .svg_custom_plan {
        display: none;
    }

    .need_custom_plan {
        font-size: var(--text-size-95);
        text-align: center;
    }

    .top_p_plan_hd {
        font-size: var(--text-size-95);
    }

    .sub_p_plan_hd {
        font-size: var(--text-size-100);
        margin: var(--sp-m) 0;
    }
}