.sub_plan_cards {
    display: flex;
    overflow: auto;
    padding-bottom: 1em;
}

.sub_plan_card {
    min-width: 130px;
    padding: 0 5px 0 5px;
    display: flex;
    flex-direction: column;
}

.sub_plan_card .trial {
    font-size: .7rem;
    font-weight: bold;
    background: #d0cee4;
    border-radius: .4em;
    border: 1px solid #434d5c;
    color: #434d5c;
    width: max-content;
    padding: 0 .3em;
    transform: translateY(50%);
    align-self: center;
}

.sub_plan_card .name {
    text-align: center;
    border-radius: 4px;
    margin-bottom: 8px;
    font-weight: bold;
    background: #434d5c;
    color: white;
    height: 64px;
    font-size: 1.3rem;
    line-height: 1.05;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: var(--title-font);
    overflow: visible;
    transition: all 200ms ease;
}

.sub_plan_card .price {
    font-size: 1.2rem;
    color: #2b2573;
    font-family: var(--title-font);
    font-weight: bold;
    line-height: 1.5;
}

.sub_plan_card .body {
    text-align: center;
    border-radius: 4px;
    background: #d0cee4;
    font-size: 0.9rem;
}

.sub_plan_card .ynIcon {
    font-size: 1.2rem;
}

.sub_plan_card .ynIcon.fa-check {
    color: #008000;
}

.sub_plan_card .ynIcon.fa-times {
    color: #888;
}

.sub_plan_card .body :not(.price) {
    height: 1.2rem;
}

.sub_plan_card .body .host_opt_server .info_icon {
    cursor: help;
    color: var(--grey50);
}

.sub_plan_card .body .host_opt_server .info_icon:hover {
    color: var(--grey30);
}

.sub_plan_card a.sub_keys {
    white-space: wrap;
    text-align: center;
    border-radius: 4px;
    background: #d0cee4;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: .2em 0 .2em 0;
    margin-top: 5px;
    --tooltip-before-content: "What's this?";
}

.sub_plan_card .sub_keys .fa {
    font-size: 1.2rem;
}

.sub_plan_card.header {
    white-space: nowrap;
    min-width: initial;
    width: max-content;
}

.sub_plan_card.header .body, .sub_plan_card.header .name {
    background: #ddd;
    color: #333;
}

.sub_plan_card.header .body {
    padding: 0 .5em 0 .5em;
}

.sub_plan_card.header .price {
    color: #333;
}

.sub_plan_card.header .body a {
    --button-hover-color: black;
    --button-align-items: flex-start;
    --button-white-space: nowrap;
}

.sub_plan_card.header i.fa {
    font-size: .9rem;
    margin-right: .4em;
    color: var(--grey50);
}

.bill_frequency_radio {
    display: flex;
    justify-content: center;
    margin-top: .5em;
    font-size: 1.15rem;
    
    --checkbox-display: none;
    --button-border-radius: 100vw;
    --button-border-color: var(--grey50);
    --button-border-width: 3px;
    --button-color: var(--grey20);
    --button-margin-right: .2em;
    --button-margin-left: .2em;
    --button-padding: .2em .5em;
}

.bill_frequency_radio dd-radio[checked] {
    --button-color: white;
    --button-bg: #008800;
    --button-border-color: #008800;
}

.sub_plan_card.header dd-tooltip.projects {--tooltip-before-content: "How many projects you can have"}
.sub_plan_card.header dd-tooltip.collaborators {--tooltip-before-content: "How many collaborators can be online simultaneously in your projects"}
.sub_plan_card.header dd-tooltip.persistent_exec {--tooltip-before-content: "Processes started by you keep running even after you sign out"}
.sub_plan_card.header dd-tooltip.parallel_exec {--tooltip-before-content: "How many processes you can run in parallel in a project"}
.sub_plan_card.header dd-tooltip.terminal_lines {--tooltip-before-content: "How many lines your terminals can display"}
.sub_plan_card.header dd-tooltip.max_files {--tooltip-before-content: "How many files you can have in a project"}
.sub_plan_card.header dd-tooltip.project_size {--tooltip-before-content: "How large your projects can be"}
.sub_plan_card.header dd-tooltip.max_tabs {--tooltip-before-content: "How many browser tabs you can open at the same time"}
.sub_plan_card.header dd-tooltip.can_use_neos {--tooltip-before-content: "Can execute programs using the 'neos' terminal command"}
.sub_plan_card.header dd-tooltip.can_use_glpsol {--tooltip-before-content: "Can execute programs using the 'glpsol' terminal command"}
.sub_plan_card.header dd-tooltip.can_use_opt {--tooltip-before-content: "Can execute programs in Opt-servers"}
.sub_plan_card.header dd-tooltip.google_sheets {--tooltip-before-content: "Can read and write Google Sheets"}
.sub_plan_card.header dd-tooltip.can_host_opt {--tooltip-before-content: "Can host Opt-servers"}
.sub_plan_card.header dd-tooltip.prov_opt {--tooltip-before-content: "Can have an Opt-server provisioned and managed by us"}



/*var TXT = {
    tooltipGoogleSheets: "",
    tooltipCanHostOpt: "",
    tooltipProvOpt: "",
    tooltipOptParallelJobs: "",
    tooltipOptTimeout: "For how long can processes run in your Opt-Servers",
    
    tooltipChangePlan: "Change Plan",
    
    Edit: "Edit"
};
                        <div><i class="fa fa-info-circle"><dd-tooltip class="collaborators"></dd-tooltip></i>Collaborators</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="projects"></dd-tooltip></i>Projects</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="max_files"></dd-tooltip></i>Files per project</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="project_size"></dd-tooltip></i>Project size</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="parallel_exec"></dd-tooltip></i>Parallel execution</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="terminal_lines"></dd-tooltip></i>Terminal lines</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="max_tabs"></dd-tooltip></i>Open browser tabs</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="can_use_neos"></dd-tooltip></i>Can use NEOS</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="can_use_glpsol"></dd-tooltip></i>Can use GLPSOL</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="persistent_exec"></dd-tooltip></i>Persistent execution</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="google_sheets"></dd-tooltip></i>Google Spreadsheets</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="can_use_opt"></dd-tooltip></i>Can use Opt-Servers</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="can_host_opt"></dd-tooltip></i>Can host Opt-Servers</div>
                        <div><i class="fa fa-info-circle"><dd-tooltip class="prov_opt"></dd-tooltip></i>Provisioned Opt-Server</div>
*/